In learning d3.js, I've seen several examples of d3 plots where the axes update when the data is changed.
I would have expected the axes to depend on bound data, so that when you add new data with .data(newData), the domain of the scale used by the axis would change. Instead, all of these examples join the data to the plot selection and then manually redraw the axes based on a different variable (often the original, unbound data variable).
Why aren't scales defined as a function of bound data? Perhaps this is leads to a circular reference problem? Or does it go against d3 philosophy for some other reason?
I ended up tying the axes to the data myself, and it seems to work well. I have an updatePlot function that adds new data to the plot, a getDataExtents that returns the extents of the data, and a setAxesBounds function which sets the domain of the scales and then does .call to redraw the axes. Inside updatePlot, I just have setAxesBounds(getDataExtents(data)) so that whenever data is updated, the axes are redrawn with scales based on the data.
I'm used to plotting libraries where this sort of thing happens for you automatically, but I understand the d3 is not a plotting library and so it makes sense that it doesn't do this sort of thing for you, in the name of flexibility and to avoid unpredictable default behavior.
Related
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.
I have a code that lets users enter data and plots it with a tube geometry. The code seems to work fine most of the time, however, one of the test data sets is not coloring properly.
Here is an example page for a site that I am building that solves for the position and velocity of a bungee jumper. Scroll to the bottom of the page and you will see a three js environment with a sin wave and a plot of the position of the jumper. These two items are charted with separate color maps and you can see that the sin wave is colored properly but the data is not.
At first I thought that maybe the data was too sparsely populated, but that was not the problem.
The code for this is too long to really paste here, but the fact that it charts right for all other data sets makes me think that I am missing something inherent to the tubeGeometry function.
Any ideas as to why the one tube is miscolored?
UPDATE: When I add additional interpolated points between each existing point in the data set, the error lessons. The more the padding, the less the error. This leads me to think that the error is due to the difference between the interpolation of the spline function from Three.SplineCurve3 and the true data. This would also explain why my other examples work fine since they are all sinusoid data.
How can I prevent SplineCurve3 from doing this, or what else can I use to create the Tube geometry?
I guess it is the mesh length counting problem (three did not count length on vector+vector+vector but by mesh.position+bounding radius)
Maybe you can separate curve to parts and color each part independent on their lenght.
There are some working approaches:
https://stemkoski.github.io/Three.js/Graphulus-Curve.html
https://stemkoski.github.io/Three.js/Graphulus-Surface.html
https://stemkoski.github.io/Three.js/Graphulus-Function.html
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 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.
I have a NSPersistentDocument-based Core Data application. There is an array of data I can edit in the document, and I want the data to be displayed in a Core Plot graph. I bound a CTPScatterPlot to an ArrayController that is connected to the respective entity.
Almost everything works: The plot is updated every time I add a new data point or edit one. So I guess I did the bindings right.
Problem is, when I open a document, the data plot isn't initially shown. I only see the axes with wrong ranges.
I setup the graph and plots in the awakeFromNib method of my GraphController (not the document). I bind the plot to the ArrayController and then scale the plot space. When debugging I can see that the count of the arrangedObjects is zero, so no wonder that scaling doesn't work.
I currently scale the plot space again by calling my scaleSpace method when pressing a button.
It appears to me that the managedObjectContext is not ready when I set up the graph. When is the proper time to do the scaling?
I think you answered your own question. It does no good to scale the plot space when the plot(s) don't have any data. Wait until your data model is built and then scale the plot space. You can build the graph any time you want; it will redraw when the data becomes available.