Line chart alignment with different data sets - d3.js

I want to generate line chart examples for different data sets on vida.io. I derive mine from the example on github page:
http://bl.ocks.org/mbostock/3883245
When I draw the graph with AAPL price data set, line chart looks good.
http://vida.io/documents/ohwSdN3usxSCWFaS7
But when I upload another data set (Seattle temperature 2012), the line spills over x-axis.
http://vida.io/documents/QZZTrhk7SmfChczYp
Any suggestion on how I can fix the template to make it work with any data set?

The graph is actually correct. Thanks to Lars for pointing out. December mark is beginning of December. There are data points from December 1 to 31. So the graph is drawn beyond December mark on x-axis.

Related

Algorithm to determine when to display points on a line graph

I have a system that collects statistics from servers for every 5 minutes and displays a line graph using dhtmlxChart as shown below. I want to add points to the graph when there are significant change of the trend in the statistics, for example when the line graph looks like saw teeth from 00:00 to 06:00 in the image below, the graph will display square points at the periodical high and low values. As you can see, my existing algorithm does not work well.
interate over each point:
if last visible point not defined then:
set current point as visible
store current point as last visible point
else:
compare absolute difference between last visible point and current point
if difference exceeds threshold or current point is the last point then:
set current point as visible
store current point as last visible point
What would be a correct algorithm to determine the visible points in the line graph?
There is no way to add points, but you can redraw the chart using updated data source.
Look at the samples from this theme
You can use your "line" chart type

DC.js Crossfilter on "nested" dimensions

I'm quite confused and might need help just formulating the question, so please give good comments...
I'm trying to crossfilter some data where each data point has its own sub-dataset that I want to chart and filter on as well. Each point represents a geographic region, and associated with each point is a time series which measures a certain metric over time.
Here's what I've got so far: http://michaeldougherty.info/dcjs/
The top bar chart shows a particular value for 10 regions, and the choropleth is linked with the same data. Now, below that are two composite line charts. Each line corresponds to a region -- there are 10 lines in each graph, and each graph is measuring a different metric over time. I would like the lines to be filtered as well, so if one bar is selected, only one line will show on the line chart.
Moreover, I want to be able to filter by time on the line charts (through brushing) in addition to some other filter, so I can make queries like "filter out all regions whose line value between 9 AM and 5 PM is less than 20,000", which would also update the bar and choropleth charts.
This is where I'm lost. I'm considering scrapping DC.js for this and using crossfilter and d3.js directly because it seems so complicated, but I would love it if I'm missing something and DC.js can actually handle this. I'd also love some ideas on where to start implementing this in straight crossfilter, because I haven't fully wrapped my head around that yet either.
How does one deal with datasets within datasets?
Screenshot of the link above included for convenience:

D3 Area chart that tends to zero where values are missing

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?

d3.js - Irregular layout on column chart when columns represent months

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

Mac Excel 2011 - Histogram with normal distribution

Let's say I have a list of values and I have already chunked them into groups to make a histogram.
Since Excel doesn't have histograms, I made a bar plot using the groups I developed. Specifically, I have the frequencies 2 6 12 10 2 and it produces the bar plot you see below.
Next, I want to add a normal distribution (line plot) with a mean of 0.136 and standard deviation of 0.497 on top of this histogram. How can I do this in excel? I need the axis to line up such that it takes up the width of the bar plot. Otherwise, you get something like I've attached.
But...the normal should be overlayed on the bar plot. How can I get this effect?
There are two main part to this answer:
First, I reverse-engineered the grouped data to come up with an appropriate mean and standard deviation on this scale.
Second, I employed some chart trickery to make the normal distribution curve look right when superimposed on the column chart. I used Excel 2007 for this; hopefully you have the same options available in your version.
Part 1: Reverse-Engineer
The column B formulae are:
Last Point =MAX(A2:A6)
Mean =SUMPRODUCT(B2:B6,A2:A6)/SUM(B2:B6)
E(x^2f) =SUMPRODUCT(A2:A6^2,B2:B6)
E(xf)^2 =SUMPRODUCT(A2:A6,B2:B6)^2
E(f) =SUM(B2:B6)
Variance =B10-B11/B12
StDev =SQRT(B13/(B12-1))
Part 2: Chart Trickery
Data table:
Column D is just an incremental counter. This will be the number of data points in the normal distribution curve.
E2 =D2/$B$8 etc.
F2 =NORMDIST(E2,$B$9,$B$14,FALSE) etc.
Chart:
Now, add Columns E:F to the chart. You will need to massage a few things:
Change the series to be an X-Y plot. This might require some editing of the chart series to force a single series to use your desired X and Y values.
Change the series to use the secondary axes (both X and Y).
Change the secondary X-axis range to 0.5-5.5 (i.e., 0.5 on either side of the column chart category values). This will effectively align the primary and secondary X-axes.
Change the secondary Y-axis range to 0-1
Format the X-Y series appearance to taste (I suggest removing value markers).
The result so far:
Lastly, you can remove the tick marks and labels on the secondary axes to clean up the look.
Postscript: Thanks to John Peltier for innumerable charting inspirations over the years.

Resources