I want to make a similar chart like on the picture below, that is drawing a line to a point which increases over time. Numbers on the bottom are seconds (how many passed).
example chart
I want to implement this with D3.js, but I do not really understand how to implement it.
I began to look to the side of d3-zoom. But I do not understand how I can make a dynamically growing line. Any similar examples you saw? Thank you
I think https://bl.ocks.org/pjsier/28d1d410b64dcd74d9dab348514ed256 might be helpful. Just increase the duration of the transition to get the similar effect of your example.
function transition(path) {
path.transition()
.duration(10000)
.attrTween("stroke-dasharray", tweenDash);
}
Related
I am searching a way to do the following charts with D3.js and as I'm new to this, I have no idea at the moment how to sort the squares.
Tried some research for charts like this:
Square chart
Proportional Aera Chart
but I did not find anything regarding D3.js.
Does anyone have an idea how to start or proceed?
I think I could manage to create an area with all squares in the right dimensions, but I do not know how to sort them dynamically, so they would group together automatically as shown especially in the first image, when their sizes do not match perfectly but differ a lot.
Thanx for any help, hirschferkel
This example from Mike Bostock is, I think, the sort of thing you're after:
https://bl.ocks.org/mbostock/8fe6fa6ed1fa976e5dd76cfa4d816fec
I suddenly came accross maybe a similar chart: It's called demers cartogram. There is a way to create it in d3.js but it does not look as good as Arc Gis creates it, where the alignment of squares looks much cleaner.
Demers Cartogram with d3.js
Demers Cartogram with ArcGis
I'm sure d3 can do something like matlabs plot3!
Multi-Series Line charts I have somewhat figured out by now, but as my lines tend to not change drastically over time (yes, 3rd axis would be time) multi-series is not of much use there, esp. with 10+ lines, say.
I have more data connected to some points of some lines - which I have right now accessible via tooltips with urls. And I quite like it. But If anyone would has a nicer idea for 2D, I'm all ears.
I've been trying D3 for a day or two now. So I'm a D3 newbie but have lots of C/C++, Java, PHP, Javascript, etc background.
I started from the tutorials page github.com/mbostock/d3/wiki/Tutorials, and went fairly meticulously through
- Introduction
- Three Little Circles
- Thinking with Joins
- How Selections Work
first trying examples verbatim, sometimes trying different changes to see if I understand the results.
I then jumped to A Bar Chart, Part 1, and Part 2.
I ended up with results pretty much exactly as expected by the end of Part 2. The tutorial only has code fragments and I don't see a spot in the tutorial where it says "here is the full finished result you should end up with", nonetheless I end up with this http://jsbin.com/oqetuw/2/edit and it looks to be working identically to the tutorial.
Note for those who haven't tried this tutorial, the key points I'm asking about are the redraw interval, 1500 ms, the transition duration, 1000 ms, and the transition ease function, which the tutorial doesn't use or specify, but I've googled to find that it defaults to cubic-in-out.
As my goal is for a continuous smooth scrolling across the screen, I changed the redraw interval to 1000, and the transition ease function to "linear", and the result is here http://jsbin.com/ijumuv/1/edit
And these are the only changes as shown here:
$ diff tut2.09.html tut2.10.html
33c33
< }, 1500);
---
> }, 1000);
78a79
> .ease("linear")
82a84
> .ease("linear")
86a89
> .ease("linear")
The strange behaviour, and thus the question is, why do occasionally the bars that reach the left edge seem to bounce back and accumulate from left to right, behind the main bars? (and also occasionally get cleared)
Undoing only the 1500 -> 1000 change, the problem seems never to happen (so it is scrolling every 1.5 s, with each scroll duration being 1 s). So it would seem maybe if D3 is busy still doing the transition, it fails to remove them? or some other explanation I can't figure yet.
Thanks in advance for any tips.
Yeah, there are issues with d3 transitions. When the interval and duration are both 1000, there is high chance for the redraw operations to occur before the prior transition() on that selection is finished. And that messes with the data binding, or something along those lines.
I modified your code such that it continuously checks whether the previous redraw transition has finished before calling the next one. This is by no means "good javascript", but it does illustrate the issue, and some way around it. To understand what I added, just look for all occurrences of __readyForNext in the code. It should make sense.
I have data like this:
document: [{"key":"01/01/2001","values":2},
{"key":"02/01/2001","values":1},
{"key":"31/01/2001","values":2}]
I am creating an area chart with .interpolate("linear") to create the following:
The idea being to represent number of documents "created" throughout January.
However, this is kind of a misleading output as it would imply there are values throughout January, when there aren't just 2 at the start and one at the end.
My questions are:
Fundamentally is this the wrong graph to represent this data, and should a bar chart be used instead?
Can D3 add evenly spaced "zero" values for each day in January?
Is the best we can do is use .interpolate("cardinal") to produce something like:
Thanks in advance!
I think the answer from this other SO post gives a usable answer, reposting it here so that this is not a dead-end for visitors coming from Google and finding this post first (as I did).
d3 linechart - Show 0 on the y-axis without passing in all points?
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.