Since crossfilter (1.4.0-alpha.6) allows use array as a dimension value, is it possible to use it for treemap viz for a nested tree? https://github.com/dc-js/dc.js/pull/1034 It works perfectly for one value, but what if I want more. It seems that approach that was used for dc.js treemap example can't work with the new feature of crossfilter.
I have a data structure with a couple of multiple values so I can't unwind them due to performance.
Now I'm thinking to create 2 treemaps for 2 different array dimensions, and after selecting the key on first, hide it and show the second treemap... Maybe, guys, you have much better ideas?
Related
I currently have a fairly basic composite line chart that looks like this:
I would like to add the following "dynamic" annotations to it:
By "dynamic" I mean that these totals and computed ratio need to be updated whenever the date filter is changed by the user, or there is a brush selection.
I am stuck on two aspects:
What is the recommended way to approach this? So far I have explored two paths:
Drawing SVG elements into the chart using a renderlet: I'm not able to access the crossfilter object to retrieve the data.
Create a custom D3 rendering outside of the chart: I'm not able to get the stats to update when the date selector is changed or the chart is 'brushed'. Also, this somehow reduces the flexibility of having the annotations within the chart itself (as far as I understand).
As an aside, can the ratio be computed directly in crossfilter? If so how?
The way you have this mocked up, I would recommend just setting these up as separate charts. Probably the best option is to use dc.numberDisplay.
Regarding computing ratios - yes, you can compute them in Crossfilter, but don't do that. Maintain both components of the ratio on a single Crossfilter group (using custom reducers, Reductio, or Universe) and do the division at reporting time. In dc.js, this means calculating the ratio in the valueAccessor of the chart.
I would like to create a force directed graph, but i need it to stay the same every time it is generated (with the same data).
Is there any way to do this using d3.js?
UPDATE:
I found working solution, which is based on using seeded random number generator
// set the random seed
Math.seedrandom('mySeed');
You could by modifying D3's force layout, or by creating your own layout based on it. There are at least 3 places where randomness (Math.Random) is used in the positioning of nodes (there may be more, given the force layout references other code). You would have to eliminate all randomness in order to get the graph to display in the same way each time:
https://github.com/mbostock/d3/blob/master/src/layout/force.js
However, this would hamper how the layout works – it's using randomness to sort itself out into a legible diagram quickly. If your number of nodes is small, then it probably wouldn't be an issue, but a large number of nodes could just end up a tangle.
I'm looking at plotting a scatterplot with a large number of points (500,000 and upwards).
Currently, we're doing this in Python with Matplotlib. It plots the points, and it provides controls to pan and zoom. I don't believe it provides any clustering or points, it just plots them all - doesn't make much sense at the zoomed out view, I suppose, but you can zoom in and they're all there.
I was looking at doing the chart in JavaScript, to make it a bit easier to distribute. I was looking at D3.js, to see if something similar is feasible there. I did find this example of a basic scatterplot:
http://bl.ocks.org/mbostock/3887118
Firstly, would you be able to plot that number of points? (500,000 and upwards) I was under the impression you couldn't due to the overhead of all the DOM objects? Are there ways around this?
Secondly, is there any kind of clustering available, either a library or even just an example of this being done in D3.js?
Thirdly, if anybody knows any good examples of pan/zoom functionality and clustering, or even just a packaged JS library that handles it, that would be awesome.
Fourth, it would be also nice to have click handlers for each point - and to display some text either in a overlay, or even just in a separate window. Any thoughts on this?
Can you draw half a million points with D3? Sure, but not with SVG. You'll have to use canvas (here's a simple example with 10,000 points that includes brush-based selection: http://bl.ocks.org/emeeks/306e64e0d687a4374bcd) and that means that you no longer have individual elements to assign click handlers to. You will not be able to render half a million points with SVG, because all those DOM elements will choke your interface, as you mentioned.
D3 does include quadtree support that can be leveraged for clustering. It's in use in the above example to speed up search but you could use it to nest elements in proximity at certain scales.
Ultimately, your choices are:
1) Some other library/custom implementation that renders in canvas and polls the mouse position to give you the data element rendered at that point.
2) A sophisticated custom D3 approach that nests elements in proximity and only renders SVG elements appropriate at the zoom level and canvas position (pan) you're at.
Yes, D3.js can be made to work with million scale data with two things:
pre-rendering on the server side. For more see here: https://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side/
By aggregating (or clustering) part of the data so that user can interact and expand the graph if need be. For this use collapsible nodes if you can (http://bl.ocks.org/mbostock/1062288).
Also avoid using force layout. It takes time to settle and converge to a stable positioning.
For clustering libraries, I would pick one up off the shelf. I would choose the scikits library from python, there are many in JavaScript but they are not very robust as they mostly cover k-means or hierarchical clustering. I would precalculate the coordinates using scikits by clustering and then render it using D3.
D3 handles Pan and zoom. Again click handlers and text display are available in D3. (http://bl.ocks.org/robschmuecker/7880033)
I have two network graphs but placing both of them next to each other is the easiest way to compare if the graphs are small. But as the graph grows, it is making hard for the user to compare the views. I wanted to know the best way to merge two graphs and show the comparison.
In the above picture it can be seen that no of nodes are same but the way they are linked is different.
I would like to know how to present the compared data.
Any ideas about different views to present such comparison using d3.js.
I would suggest not trying to apply force layout or similar method for drawing graphs (that would draw the graph in a fashion similar to the on in the picture in your question). Instead, I wold like to suggest using circular layout for both graphs (similar to chord diagram):
This visual example is made for other purposes, but similar principles could be applied to your problem:
Layout all vertexes on a circle, in equidistant style (if there are some vertices belonging only to one of two graphs, they can be grouped and marked different color)
If there is a link between two vertices in both graphs, connect them in one color (lets say green)
If there is a link between two vertices in one graph only, connect them in appropriate color, dependant on a graph (lets say red and purple)
This method scales well with number of vertices.
Hope this helps.
Following methods for network comparison could be useful in the current scenario:
NetConfer, a web application
Nature Scientific Reports, an article guiding comparisons
CompNet, a GUI tool
I am using LineChart from the Google Charts API and I want to plot two sets of data - one is observations and one is model outputs. The problem is that the model outputs are regular in time (hourly), but the observations can be sporadic and are not usually aligned with the model times.
I can't store them both as columns in one DataTable, as they are not temporally collocated, so I need 2 data tables, but I can't get LineChart to accept more than one data table!
Is there a way around this?
TIA.
The best way to do this would be to combine the DataFrames and leaves NULLs where the values are not defined. In your case, each row would end up having one defined value one null value.
Then when you plot, set interpolateNulls to True and it will connect the points through the NULLs which should give you the functionality you want.
First, you do have to get your data into one DataTable. There is no way to create a chart from more than one DataTable or DataView, or create a DataView from more than one DataTable (though there has been a request for this). How you get the data into one DataTable is up to you. It doesn't look like any of the data manipulation methods will help.
The good news is, once you have all the data in one DataTable, you can plot it even if the data sets are not aligned at the same time values. Just specify multiple domain columns using data roles. Search for "multi-domain" on that page to find an example.