Key binding with d3.svg.path() - javascript

I have a simple d3.js time-series graph plotted as SVG circles. The circles are key bound so that when I remove data from end of the array, circles from right are removed and when I remove items from the beginning of the array, circles from left are removed on exit.remove().
var circles = svg.selectAll('circle')
.data(data, function(d){return d.key})
Now, I want to do the same with a SVG path.
Is there a way to apply key binding to SVG path?

I had a similar issue when I wanted to make a live-updating plot in d3 with an SVG path. d3 uses only one path element for an entire data sequence, i.e. for a given array there is one path drawn that can get very very long depending on your data. This means that d3 cannot simply remove bound data elements by removing DOM elements like circles. It would have to modify something like <path d="M0,0L1,0L2,1L3,2"> to <path d="M1,0L2,1L3,2">. I do not think d3 has this capability, unfortunately (Though you could code this yourself! You need to override d3.interpolateString and write some custom interpolator that notices the dropped points.)
This also means that you can't use D3's data selector, since data works on a group with multiple elements, like svg circles. You're going to have to use select("#yoursvgpath").datum(data) instead, which sets the data of a single element, where data is your data array.
Since I knew the hardware my code would run on was fast (desktop i7, ssd, etc...), I simply redrew the path every time I added or removed elements. Even still, it's pretty slow in Firefox (but fine in Chrome), especially when the number of points gets over around 10,000. To redraw, just call datum again and then re-apply your coordinate transformer (something like select("#yoursvgpath").attr("d", line) where line is your path data transformer). I ended up only redrawing every 5,000 data elements so that the path wasn't constantly being recalculated.
If any of this was confusing, I would definitely read up on making line charts in d3, it's quite a bit different (and less intuitive) than point-based charts. I'd also take a look at https://gist.github.com/mbostock/1642874 and http://bost.ocks.org/mike/selection/, for learning more about d3 selections and line charts.

Related

Have D3 force directed graph form a specific shape?

I'm wondering if there is a way to have a D3 force graph form a specific shape. Here's what I mean. This what the graph looks like right now.
What I want is to be able to have the nodes form a shape such as this:
(ultra pro ms paint skills)
So I want all the nodes to be inside the black line, forming this shape. Is there a way to do this inside d3?
No, you can't do this directly with the D3 force layout. It doesn't allow for any additional constraints. What you can do is enforce this layout yourself in the tick handler function:
force.on("tick", function() {
// iterate over all nodes, check if they're in a position they shouldn't be in
// if so, adjust the position
});
That said, you almost certainly don't need the force layout in this case. As suggested in the comments, it would be easier to manually position the nodes along the shape that you want. Again, there's no support in D3 to do that.

Surround Highcharts points

I'm working on a project where we have some Highcharts graphs populated from database; one of them is an scatter graph and we need to surround the points placed on the outside area of the graph.
We need a graph like this but we need the area surrounding the outside points of the scatter; is there a easy way to do this with Highcharts?
We need it to work on IE11 (client's specs).
We can do it with a new polygon serie to make by getting it from codebehind or from database, but that may take too much development time and will slow down the queries. So we need to know if there is an easier way to do it via Highcharts or Javascript
Thanks in advance.
I am not very familiar with Highcharts, but i could not find such functionality in their API. However there is an easy algorithm to solve your problem.
All you need is to have an array containing the border elements and connect the points from this list like here.
Finding those points is not too hard. Compute the linear equation between two extreme points (like the one on the very top and very right). The resulting formula looks like f(x) = m*x + b
Now you check for all points within that x-range if their y-coordinate is higher than this line (or lower when doing it with the point on the very bottom). If so just add them to your border array and continue with the other extreme points.

D3.js scattergraph with large (>500,000) points? Clustering?

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)

D3: Merge interior svg paths?

I have an svg element composed of many different path objects, each of which represents one U.S state.
http://jsfiddle.net/jGjZ2/
I would like to merge the east territory (gold) into a single path object with no visible divisions.
The end result should look like this (ignore the inaccuracies):
I am using D3.
There is no GeoJSON or TopoJSON data - the map is svg directly embedded in html (see jsfiddle).
Thanks a lot!
Assuming you can ignore the stated restriction of manipulating an existing SVG image (which seems like an arbitrary restriction given the ready availability of cartographic boundaries in more easy-to-manipulate formats…), you can use topojson.mesh to merge multiple polygons. Though, note this approach has a few limitations as described in this example:
Another simple approach is to just draw the highlighted polygons twice: once with a thick black stroke and no fill, and a second time on top with orange fill and no stroke. This achieves the same effect without any need for topological manipulation:
I suppose if you really had to, you could reach into the SVG element and do the same thing by extracting the vector data, but it will be easier if you start from clean data.

determine efficiently which rectangle a point is in 2d space

I have a large set of rectangles that are drawn on html5 canvas.
I would like to be able to interact with this image using mouse tracking (I cannot use SVG because it does not scale to 10-100k rectangles). Is there any data structure/algo that, given the mouse x,y coordinates would be able to tell you which box the mouse was over (using the computed locations of the rectangles)? I was thinking something like a k-d tree but was not sure.
If your data is always of the form shown I think you should be able to do better than a spatial tree data structure.
Since the data is structured in y you should be able to calculate which 'strip' of rectangles the points is in based on offsets in O(1) time.
If you store the individual rectangles within each 'strip' in sorted order (using xmax say) you should then be able to locate the specific rectangle within the strip using a binary search (in O(log(n))).
Hope this helps.
The naive solution would be to iterate over all rectangles and check if you are in it. Checking for a single rectangle is easy (if you want I will write it down explicitly).
If you have many rectangles and care about performance, you can easily speed things up by putting the rectangles in a data structure which is faster to look in. Looking at the image you sent, one obvious property of your data is that there is a limited amount of vertical positions ("rows"). This means that if you check which row you are on, you then only need to check rectangles within that row. Finally, to select which row you are on or within a row select which rectangle, keep a sorted data structure (e.g. some search tree).
So your data structure could be something like a search tree for row, where each node holds a search tree of rectangles along the row.
R-tree is suitable for providing spatial access of this kind
But some questions:
Is your rectangle set static or dynamic?
How many point queries do you expect for rectangle set?
Edit:
Because rectangle set is static:
There is method, used in traditional graphics with bitmaps (don't know is it applicable to html5 canvas or not):
Make additional bitmap with the same size as main picture. Draw every rectangle with the same coordinates, but fill it with unique color (for example, color = rectangle index). Then check color under mouse point => get rectangle index in O(1)

Categories