Check out this quick and dirty example that I threw together: http://zoopoetics.com/d3/irregular_layout.html
d3 is doing its job admirably, laying out the columns at irregular intervals because months are of irregular durations. As we all know, a month can last from 28 to 31 days.
Thing is, the irregular layout is unsettling to the eye. I want the columns to lay out at regular pixel intervals along the horizontal axis.
Looked all over the googles for an answer and found very little about this problem, which suggests that I may be missing something obvious.
Has anyone else been here and surmounted the problem? Thanks!
My first approach would be to use the time x axis but render the bars against a different scale of lets say 365/12 intervals.
The x scale I think should have the month name labels in the middle of each month as well as a tick at the middle:
Here is my version of your file
here
Related
I have an ordinal scale, that I am creating a bar chart with.
I create it like this:
d3.scale.ordinal()
.rangeRoundBands(js.Tuple2(0, widthOfMySvgElem), 0.1)
.domain(labels)
The labels are in fact weeks, or months, or similiar periods, and I have data for those periods.
Now, I have something like expected values, that I want to show in this graph as well.
Furthermore, those expected values can change in time, and I want to display that too.
I want to display, that I have expectedValue1 in march, and the start of April, but then at 7th of April, the expected value changed to expectedValue2, and I want to place it where the 7th of April would be on my axis. (I want to display those expected values as the straight line, that changes height as value change.)
But I have no luck matching exact location in relation to this ordinal axis.
Do you have any ideas how can I successfully align those two scales, so they will meet at the data points of ordinal scale, but that I would be able to position other values correctly as well?
I am using dimple.v2.3.0 to create line and area chart. When creating chart with category x-axis, Dimple leaves a gap between the y-axis and the line/area. I would like to ask is there any way to remove the gap?
I'm afraid there isn't a good answer for this, it's done this way because dimple allows you to combine with bars etc. There is a time axis for dates which will not include the gap and therefore answers the majority of cases with area charts, however categorical axes will always have the gap.
There is a hacky workaround you can use in this case where you have integers on your x axis which is to treat them as dates and put them on a time axis:
var x = myChart.addTimeAxis("x", "Call", "%Y", "%-Y");
x.timePeriod = d3.timeYear;
x.timeInterval = 1;
This will parse and display your calls as years and display them on the time axis. The "%-Y" display format shows a 4 digit year with no leading zeroes. This will work for integers up to 9999. Here it is working in your fiddle:
https://jsfiddle.net/zuuaar1t/
I am drawing charts using dc.js.The following is a frequency VS Day Chart
I am using the following line to generate the titles:
..something.yAxisLabel("Frequency").xAxisLabel('Day');
But the problem is as you see when the frequency is so large the Y axis title is colliding with the frequency numbers. So is there any simple way to move the Y axis title left?
The layout of auxiliary elements such as axes and legends is not completely automatic in dc.js; use .margins() to adjust where necessary.
https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#marginsmargins
It would be great to figure this out automatically but it is difficult to calculate, and easy to work around, so I guess no one has gotten annoyed enough to submit a fix. :)
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?
I have some data which is collected for 6 days during 8:00AM to 11:00AM. I need to plot all the data on same plot one over other. The way I am doing now:
hold on
plot(y1,x1,':b*','MarkerEdgeColor','k')
plot(y2,x2,':r*','MarkerEdgeColor','k')
plot(y3,x3,':y*','MarkerEdgeColor','k')
plot(y4,x4,':g*','MarkerEdgeColor','k')
plot(y5,x5,':c*','MarkerEdgeColor','k')
plot(y6,x6,':w*','MarkerEdgeColor','k')
datetick('x','HH:MM:SS')
hold off
where x1 to x6 has y axis data and y1 to y6 have
y(i) = datenum(Year(1:5), Month(1:5), Input_Vector(1:5,2), Input_Vector(1:5,3), Input_Vector(1:5,4), Input_Vector(1:5,5));
When I plot using above, I get the image attached
But what I need to find patterns by observing them. So I need to have something one above other with x axis 8:00:00 to 11:00:00
I need something like and I got this by making DAY parameter constant date.
If you want to plot one day over another, then the method you used to make the second graph - discarding/replacing the date part of your datetime - is likely the best way to do it. It matches up nicely with the conceptual question that the graph answers, i.e.: "Is there a link between time of day and duration of journey, regardless of the day it was taken on?"
If you still want to preserve the day information, you could always perform the multiple plots with different line specs, and have the legend show which line corresponds to which day.
If the above question - finding a link between time and journey duration - is what you are trying to do, rather than plotting that specific type of graph, I would also try something like this:
Split your day into half hour or quarter hour slots and take the average of all data points in each block. This gives you a single value for each half/quarter hour span.
Plot this as a bar chart with error bars showing standard error (this can be done using bar and errorbars)
If I see anything, try fitting it with an appropriate model and check for goodness of fit. In your case this would probably be a Gaussian model, as your data kinda looks like it peaks around 9:20.