How do I include today in the time axis in Rickshaw - d3.js

I'd look this up in Rickshaw's documentation if it had any. Does it?
I want my time axis to include the current date, even if there isn't a point there. I already worked around this by duplicating the last data point, but I'd prefer if that point didn't show up as a point in the hover-highlighter. Perhaps that's something I can override differently?
Speaking of points, can I get it to draw the points even if I'm using the area renderer?

Related

How can I achieve non-overlapping circles/icons on a d3 time scale?

I am placing icons with a fixed diameter/radius on a line using d3.scaleTime. This works well except for the case in which dates are close to one another, leading to an unwanted overlap.
In that specific case, I would want the icons to "relax" and not touch.
My code rather complex, including animations etc. — so I drew the problem here:
These are my attempts:
I looked at d3-force for collision prevention, but I was not quite sure how to merge such an approach with an existing time scale. Could this be helpful? http://jsbin.com/gist/fee5ce57c3fc3e94c3332577d1415df4 However, it may occur that the icons then do not align on a horizontal straight line anymore, which is a disadvantage, because I do not want them to spread vertically.
I also thought about calculating overlaps and then manually adjusting the data so that the overlap does not occur. That, however seems a bit more complex because I would have to somehow recursively find the best position for every icon.
Could interpolation help me? I thought there must be something like "snap to grid", but then two icons could snap to the same position, couldn't they?
Which d3 concept makes most sense to solve this problem?

Transition Between Curve Types Using D3.js

I'd like to transition between curve types using D3.js.
Take a look at this block. The data stay the same but the curve type changes. I was expecting the paths to maintain their approximate positions on the plane -- the data stay the same, after all -- but they don't. The paths appear to be redrawn, although I don't understand why with basis to linear the paths seem to be redrawn from left to right whilst with linear to basis the paths seem to be redrawn from right to left.
I've read Mike Bostock's post on Path Transitions, but I think this is a slightly different problem. There, the data change but the curve type remains the same. Here, the data stay the same but the curve type changes.
Thanks in advance for any help!
To understand why you have such a strange transition, let's compare the d attribute of the paths using a curveBasis and a curveLinear.
First, a curveBasis:
d="M0,101.2061594964L45.48756294826797,89.52282837400001C90.97512589653594,77.83949725160001,181.95025179307189,54.47283500680002,271.46268884480395,84.08731623460001C360.975125896536,113.70179746240001,449.0248741034641,196.2974221628,538.5373111551961,222.09899531679994C628.0497482069281,247.90056847079998,719.0248741034642,216.90809007840002,764.512437051732,201.4118508822L810,185.915611686"
Now a curveLinear (same data):
d="M0,101.2061594964L272.92537768960784,31.10617276200003L537.0746223103922,278.89304686319997L810,185.915611686"
As you can see, the path is way simpler with curveLinear. So, the strange transition is the expected behaviour.
A possible solution is using a path interpolation, as proposed in this code from Mike Bostock.
Here is your bl.ocks with a path interpolation: http://blockbuilder.org/anonymous/02125b1fb145a979e53f369c4976a772
PS: If you want to avoid that strange transition when you load the page (all paths coming from the top left corner), draw them the first time using a regular attr method.

how to keep one jqplot from obscuring the previous

My need is to draw a basic x-axis, y-axis plot of several lines, with the lines becoming known in sequence as the user enters data. jqPlot appears to have the ability (unlike flot, at least as I understand it) to add to an existing plot. My experimentation thus far is:
$.jqplot('dpCum',[ld.fCumPairFwd[0]],{axes:{xaxis:{min:0,max:2500},yaxis:{min:0,max:200000}}});
$.jqplot('dpCum',[ld.fCumPairAft[0]],{axes:{xaxis:{min:0,max:2500},yaxis:{min:0,max:200000}}});
which produces two lines as I want them, except the background of the 2nd obscures the the 1st line. In practice, the data for the 2nd line won't be known until the user responds to the 1st line, and then they're going to want to see both at once.
I've made a couple of passes at the jqplot documentation (it's capabilities are obviously impressive) but how to keep existing lines visible as new lines are added escapes me. I'm thinking there may be some kind of z-axis opacity, but haven't been able to understand it yet.
The answer to your problem, I believe, is to use the replot() method and paint a new plot with the modified data set.
This approach is presented in the following sample. Please notice I made only the series with index 0 responsive to clicks. On click on the series' data points another is painted.
EDIT: The reason I went for replot() was that I couldn't figure out how to draw just a single series. I tried the approach presented by #Mark here with no success. He might know better though. I am rather fresh to jqPlot myself. Also taking into account that when we add a new series some points might reach outside the current scale, therefore, since redraw() doesn't rescale as mentioned here by the jqPlot author - though in my case it will work since we reinitialize the graph. Thus, I think if you also will not manage to apply single series draw you might try using the redraw() method instead, taking from the doc I think it is less expensive to call.
Maybe actually in this case you will not use replot() or redraw(), as in the sample I am making a new plot each time. Therefore, it seems to me to be more appropriate to call destroy() on the previous graph before we paint the new one. This is what currently is in the code sample.

setting the base for log scale in d3.js

I'm new to d3, and just getting the hang of it. My requirement is pretty simple. I want the x-axis to be log scaled to a base of some decimal number. The default log scale has a base of 10. And scouring the reference API and the web hasnt yielded me a way of changing the base. Might be i'm missing something basic about d3. But i cant seem to get past this obstacle. Ideally, shouldnt there be a log.base() similar to the pow.exponent() for the power scale
d3.scale.log().base(2) seems to work fine. (As Adrien Be points out.)
There isn't such a function (although it wouldn't be too hard to add one). Your best bet is to write your own function that does the necessary log transformation you specify and then passes the result on to a normal linear scale to get the final value.

Raphael animate based on position not time

I have two path elements. For the sake of description lets just say one is a heart and the other is a square with rounded corners.
I'm trying to get one to interpolate into the other like this:
http://raphaeljs.com/animation.html
This is easy enough to do but I need to do it based off the elements X position and not time.
So as I drag the path element between an Xval of 100 and 200 it will slowly morph into the second path until it finally completes the transformation at an X value of 200.
Does anyone have any idea how I might do this?
I'd use the drag handler (or you could bind to the mousemove event and feed the coordinates in as well) and use that to move between a starting position and a target animation based on the x or y coordinate and using Element.status. Check out the fiddle (based on yours):
And I'm sorry -- I gave you a copy of your own fiddle back originally. Terribly poor form =( Try this one instead:
http://jsfiddle.net/kevindivdbyzero/MqFkP/2/
So far this is what I have come up with:
http://jsfiddle.net/jocose/CkL5F/139/
This works but relies on a delay which I am afraid is going to break on slower machines, and plus it seams really hacky. If anyone knows of a better solution please let me know.

Resources