I am working on a multi-line animated chart based on [Edit: not Bostock's] example:
http://bl.ocks.org/atmccann/8966400
I want the lines to appear synchronized by the date value on the x axis. If I slow down the graph (say to duration=15000) I can clearly see that in the very early part of the graph the green line is ahead of the black line. Then the black line moves ahead of the green line. Both start and end together.
The issue is accentuated in my chart where I am plotting 20 lines. Some are clearly ahead of the others when plotting. Lines with initial y values of zero shoot way ahead of those that climb to higher y values at the start.
How can I adjust the display so both lines paint for the same date at the same time?
The technique in the bl.ocks.org example (which, btw, is not Bostock's) is animating based on the length of the line, not it's position on the y-axis. If you want to animate based on the y-axis position, you'll have to use a different technique. Especially with 20 lines, I wouldn't recommend trying to dynamically update each line if they have a lot of points. You could do that if there aren't many points, though.
A simple approach would be to add a solid (white) rectangle to the chart that covers all the graph lines. Then animate the left position and width of that rectangle to reveal the lines over time.
Related
I have a text file that is constantly updating a single value. I'm trying to display this value using matplotlib's animation but I'm having lots of issues.
For example I want to show a value that's changing every second on the text file (value ranges from 0 to 150) and I want the height of bar graph to increase and decrease with this value.
I want to do the same with horizontal graph. I also want to show a dot moving around the circle for different values (between 0 and 360).
I've tried to many things but it constantly broke the code or matplotlib froze. I've been trying to use matplotlib's animation.
Any help would be appreciated.
I would like to create a vector object that can be drawn with a pen tablet and will honor the pressure information from the pen (by increasing/decreasing line width appropriately). Now I know how to get the pressure info out of the NSEvent, but of course NSBezierPath doesn't support varying line widths.
So I'm trying to generate a Bezier path that is the outline of my line, by calculating the perpendicular lines at the ends of the curve and connecting those with the very same curve. It nearly works in my little test project for a single curve segment:
https://github.com/uliwitness/WideningBezierPathTest
but this has one big issue: The line thins to barely 2 pixels in the middle (it should only go from 32 to 8). Does anyone know how I'd adjust the control points so the two edges of the line in the curved part are at roughly the same distance ?
Anyone have ideas? Suggestions? Useful articles?
Thanks to suggestions from others I've managed to cobble something together that works. I've committed the changes to the repository, but you can go back a few revisions if you want to see the older code. Here's what I do now:
I flatten the path using bezierPathByFlatteningPath. This gives me straight line segments.
I then calculate the start and end points of the perpendicular lines at the start and end of each line segment (these lines are as long as the line size should be at this point).
I create a bezier path containing a parallelogram consisting of the two perpendicular lines plus lines connecting them. This gives a smooth transition in line widths for each segment.
Once I have the segments, I draw the ending perpendicular lines of the path, plus the sides of each segment (but not the perpendicular lines between segments) into a new bezier path, which I can then fill to draw the stroke with the desired line width variations.
If you want to use this for printing or under HiDPI, you might have to muck with the "flatness" of the bezier path, but for 1x screen display it looks fine.
I'm looking to chart some time-based data over the course of multiple days (using a simple line chart). I'd like to present the time of day as a gradient of color in the background of the line graph. Noon of each day would be white, midnight is nearly black, and all other hours in between are a smooth greyscale in between.
I can do this very, very clunkily by drawing rectangles before my lines, but it has the following problems:
1. hours without a data point don't get a rectange, leaving a gap in my background
2. the transition is not smooth, but stepped
It seems that the best way to fill in the gaps would be to latch onto the ticks along the x-axis, as those are regularly spaced regardless of the data points. Is there a way for me to apply a gradient, either CSS or SVG, along with the tick marks, that will smoothly flow from one to the other (that is, no gaps between where one gradient ends and the other begins, nor any overlap)? If I add or remove data, the gradient should change accordingly.
Any and all assistance greatly appreciated.
just define the gradient in a <def> section, and place rectangles aligned with the days you are charting. set the fill attribute to url("#the_gradient").
have a look here http://www.w3.org/TR/SVG/pservers.html
I have a line graph using jqPlot with one series and several data points across it and smoothed lines. I'm using the Cursor plugin to show crosshairs and a tooltip to show x and y points.
Is it possible to have the cross hairs follow the line on the series? So the horizontal line would fix to the y position of the line and not following the mouse. I see you can get the x/y position of each data point but not of the lines inbetween points.
Thanks
If you are using the built in smoothing options the smoothed data points are stored at:
plotObj.series[0].renderer._smoothedPlotData
with pixel locations at:
plotObj.series[0].renderer._smoothedData
I was wondering if anyone knew of any algorithm to draw a line with specific thickness, based on Bresenham's line algorithm or any similar.
On a second thought, I've been wondering about for each setPixel(x,y) I'd just draw a circle, e.g.:
filledCircle(x,y,thickness); for every x,y but that would of course be very slow. I also tried to use dictionary but that would fill the memory in no time. Check the pixels I'm about to draw on if they have the same color, but that's also not efficient enough for large brushes.
Perhaps I could somehow draw half circles depending on the angle?
Any input would be appreciated.
Thanks.
duplicate: how do I create a line of arbitrary thickness using Bresenham?
You cannot actually draw circles along the line. This approach is patented. :)
You can still read patent for inspiration.
I don't know what is commonly used, but it seems to me that you could use Bresenham for the 1-pixel-wide line, but extend it a set number of pixels vertically or horizonally. For instance, suppose your line is roughly 30 degrees away from the horizontal, and you want it to be four pixels wide. You calculate that the vertical thickness of the line should be five pixels. You run Bresenham, but for each pixel (x,y), you actually draw (x,y), (x,y+1), ... (x,y+4). And if you want the ends of the line to be rounded, draw a circle at each end.
For overkill, make a pixel map of the stylus (a circle or diagonal nib, or whatever), then draw a set of parallel Bresenham lines, one for each pixel in the stylus.
There are variations on Bresenhams which calculate pixel coverage, such as those used in the anti-grain geometry libraries; whether you want something that quality - you don't say what the output medium is, and most systems more capable than on-off LCDS support pens with thickness anyway.