I am new to d3.js but have managed to make two individual charts as in introduction.
I have a map chart, which has dots representing monitoring stations.
I also have a line chart which has multiple timeseries (data from json) from one monitoring station.
What I would like to do. Have the two charts on one page. When you mouseover or click on a station on the map the data is loaded and displayed on the line chart. When a new station is selected on the map, the data transitions on the line chart
The question I have is one of style. With the two separate charts what is the best way to combine them?
With the transition, I have searched but have not found any simple examples that has two charting elements where interacting with one effects the other. Should I combine all the timeseries data into one json file (say 4 timeseries times 50 stations) or have 50 json files?
Thanks
Unless your timeseries data is very large, I would just put everything in one JSON file to make things simpler and so that changing stations can take place entirely client side.
Related
Though I can write dc.js applications, I still don't understand how dc uses crossfilter objects, ie the dimensions and groups in various charts. When we click on an graph element, for instance, a pie chart slice, I believe dc is applying filters on the dimension, but does it manipulate the crossfilter object as well? Anyone knows of any document/article explaining how dc interacts with crossfilter objects? I know of http://www.codeproject.com/Articles/693841/Making-Dashboards-with-Dc-js-Part-Using-Crossfil
which is really good for beginners, but it does not go deep dive on this specific subject.
For instance, I have this dc chart: http://bit.ly/1nStSh3
Basically the dataset has object names (4 of them, P, Q, S, T) and its size for various dates. The two piecharts show the size for dates and objects respectively. There is a line chart which shows the data growth over a period of time. Now, when I click on the second graph, ie object names, both line chart and the first pie chart auto adjusts, but when I click on the first pie chart, the line chart does not change.
Your particular question is covered by the crossfilter documentation and the dc.js FAQ: a dimension does not observe its own filters, but only the filters on other dimensions.
To get the charts to respond to each other, create a duplicate of the dimension (construct another one with the same arguments) and put the charts on separate dimensions. (There is also work underway to reflect the brushing/filter state between charts that share the same dimension.)
As to your larger question, no, there is no documentation on the interaction between dc.js and crossfilter that I know of. As the principle maintainer (but not the original author) of dc.js, I hope to write such documentation in the next year.
There actually isn't much magic to it: charts just update the dimension filters and then trigger redraws on the charts in their group. The d3 transitions within each chart are what make it look fancier than that.
I am using NVD3.js and want to create following chart:
As you can see - bars are stacked, two axis and grouped by x-axis
Using multiChart I got :
It is stacked, two axis, but not grouped by x-axis.
Maybe I need to use different chart type - not multiChart, but I didn't find bar charts where are two y-axis.
1) How can I achieve this using NVD3.js?
2) If it can not be done in NVD3.js, then which solution I can properly integrate?
Thanks!
The NVD3 Javascript library is, to quote their website, "an attempt to build re-usable charts and chart components". It's creators have made a couple key decisions in order to emphasize the reusability of the charts:
They have focused on implementing standard chart designs (line graphs, bar graphs, scatterplots), but implemented in flexible, interactive ways.
They have used the same data structure requirement for all the graphs:
The main data array contains multiple data series, each of which represents a logical grouping of the data;
Each series is an array of individual data objects containing two or more variables.
All the graphs have a similar style and reuse important pieces of code.
The NVD3 library allows you to create a grouped bar chart or a stacked bar chart, and even a chart that interactively animates between the two.
Adapting that chart to create a stacked and grouped bar chart is not a simple task, in part because the data structure would be different. You would need a three-level data structure (series > sub-series > datapoints, representing groups > stacks > bars) instead of the two-level (series > datapoints) structure used by NVD3.
All is not lost, however. NVD3 is built on the d3 Javascript library. D3 is much more flexible and open-ended; it doesn't define specific chart types, it defines a way of manipulating a webpage to make it match your data. You can use it to create any type of chart that can be drawn with HTML or SVG. But of course, that means that it is much more work, since you have to explicitly create all the parts of the graph, and make all the design decisions yourself!
I strongly recommend, if you want to use d3, start with the basics in the tutorials list or one of the introductory books. However, you'll also want to check out the gallery of examples, and from there you'll find the following charts that will be of particular interest:
Mike Bostock's Stacked Bar Chart
Bostock's Grouped Bar Chart of the same data
Ali Gencay's adaptation of those examples to create a stacked, grouped bar chart
Once you have become familiar with building charts in d3, you may want to open up the NVD3 source code to see if you can borrow some of their reusable code components (being sure to respect their licence terms, of course). However, I would not recommend doing so as a beginner -- it is a lot of code, and uses a lot of complex techniques to put all the pieces together.
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:
cubism.js is probably meant for realtime vizualizations, not really for interaction, yet I was trying to be able to visualize a large dataset (for example >> 1000points) on the page, without increasing the step or chunking the data
Example: http://jsfiddle.net/B2WJM/4/ (the first 500 points of a 4000 points dataset are drawn)
var context = cubism.context()
.step(6e4)
.size(500)
.stop();
So the idea would be to drag, or zoom this graph using d3 https://github.com/mbostock/d3/wiki/Zoom-Behavior, hoping there's a nice solution possible by changing dynamically the start and stop attributes
I wanted to show the stock data described here into 3 pieces. I split my graph into 3 and added a carousel-like left/right button to toggle between them.
I think that you can split your data into 5 pieces of 800 px each which you can then move using the left/right buttons.
I have created a simple line graph with data from a mySQL database using PHP to return the data in JSON format.
https://gist.github.com/5fc4cd5f41a6ddf2df23
I would like to simulate "live" updating something similar to this example, but less complicated:
http://bl.ocks.org/2657838
I've been searching for examples on how to achieve this simply as new to D3 - to no avail.
I've looked at Mike Bostock's http://bost.ocks.org/mike/path/ path transitions, but not sure how to implement this using json data.
Can anyone help with either an example or some direction on how I could accomplish this?
Doing that kind of line transformations is tricky in SVG because moving large number of points just a little and rerendering the complete line can hurt performance.
For the case when interactivity with each data point is not paramount and the time series can grow to contain arbitrary number of points, consider using Cubism. It is a library based on d3 but meant specially for visualizing time-series data efficiently. To prevent rerendings of SVG, it draws the points on a canvas, allowing for cheap pixel by pixel transitions as new data arrives.