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:
Related
I'm trying to create a geochoropleth that maps subregions, but also includes outlines of larger regions. (You can think of it like mapping counties, but then wanting to include thicker outlines of states). Not all subregions are part of larger regions that need to be outlined. (Most aren't.) You can see an example of what I'm trying to replicate here:
What's the best way to add this regional outline to my map? I've tried keeping the regions and subregions as two separate files, with two overlaygeojsons calls in my geochoropleth call (with added d3 styling to change the fill and stroke to just be an outline). But when I do - the projection of the regional outline layer is strangely offset from the lower one.
I've also considered having both sets of boundaries in just the one geojson. However, I wasn't sure how to work with this.
While it would be nice to be able to mouseover the boundaries of the larger regions and get a tooltip before crossing over into the individual subregions and getting their tooltips, this isn't a must. I could live with just outlines around the regions. Please advise on the best way to do this. Happy to provide more detail, and thanks so much!
EDIT: I discovered that I had a misplaced transform tag which is what offset the second layer. Fixed now!
Has anyone added the ability to display values in a boxplot for dc.js?
Interesting answer given to this question related to matplotlib.
Adding a scatter of points to a boxplot using matplotlib
As it's currently implemented, the box plot will display any outliers as circles, and outliers are defined as the points which do not fall within the whiskers.
If you're willing to change the source, it's pretty easy to disable the whiskers and show all the data points.
You just need to change line 42:
var _whiskers = _whiskersIqr(_whiskerIqrFactor);
https://github.com/dc-js/dc.js/blob/356fccea3a1dbd49a76fb1841f280ffad87d725f/src/box-plot.js#L42
You could just set it to null, or add an accessor for whiskers. (There really should be one, looks like an oversight.)
It looks like this with no whiskers:
You'd have to dig a bit deeper and change the underlying d3-plugin if you want to display whiskers along with the data points.
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 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 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.