This hexbin map shows the proximity of earthquakes (magnitude 3.0 or greater) in the Canterbury region of New Zealand during the month of September, 2010.
The map is created using Leaflet. The hexbin layer is a custom Leaflet layer which uses d3js to generate a svg hexbin overlay. The source for the custom leaflet layer is viewable here.
Earthquake data sourced from GeoNet.
| license: gpl-3.0 |
Example for the Stackoverflow question: How can I contain D3 JS animation within a container
The balls use a modified version of the D3.js Force Layout. Parts of the code, such as the collision function are taken from Mike Bostock's example Multi-Foci Force Layout.
The example lacks of a method to avoid the leak of circles when the collision algorithm and the container object detection act together.
Click on the grey circles. The green arcs will transition using attr, whereas the red ones will use the attrTween method.
If you have not seen/read Bostock's arc tween example, it's probably the best place to start. Secondly, I've posted up a basic example of drawing static, concentric arcs (gist), which might be helpful before adding on tweens/animations.
Below is some annotated source code from my experience playing with arcs. The biggest issue I came across was understanding the role of the arcTween helper function in relation to attrTween. Unlike attr, which takes a value as its second argument, attrTween requires a helper function, arcTween, which will be called during the intermediary animation ticks. This method was used for my [muniNow project](http
Object selection is tough, particularly when the things you'd like to select are moving around (like nodes in a force-directed layout, perhaps). Allowing a user the fudge factor of an area cursor helps, but can get in the way when targets are small enough. The use of a Voronoi tessellation promises a map of closest node for any given point.
This example illustrates the use of a Voronoi overlay to clip nodes in a force-directed simulation. By using the Voronoi shapes as the clipping path the nodes themselves can be drawn much simpler.
This builds on these two examples from Mike Bostock on force-directed graphs and voronoi tesselation, as well as Nate Vack's Voronoi selection example here and this first pass at an integration from Christopher Manning.
| <?xml version="1.0" encoding="UTF-8"?> | |
| <graphml xmlns="http://graphml.graphdrawing.org/xmlns" | |
| xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" | |
| xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns | |
| http://graphml.graphdrawing.org/xmlns/1.0/graphml.xsd"> | |
| <key id="x" for="node" attr.name="x" attr.type="double"/> | |
| <key id="tooltip" for="node" attr.name="tooltip" attr.type="string"/> | |
| <key id="y" for="node" attr.name="y" attr.type="double"/> |
Drag gray nodes into one of the colored clusters. They will snap to the group. You can also move nodes out of groups to regroup them.
Created using D3's force layout. Forekd from Multi-Foci Force Layout.
This code is distributed under MIT license. Copyright (c) 2013 George Mamaladze. See MIT license.
Imitate hand-drawn (imperfect) circles using cubic Bézier segments, based on a Bézier approximation to a perfect circle. TLDR: a good approximation to a quarter circle of unit radius is a cubic Bézier curve with control points P0 = (0,1), P1 = (c,1), P2 = (1,c), P3 = (1,0) where c = 0.551915024494. By varying the points in a sensible way, we can do a good impression of hand-drawn circles.
This example is an extension of Mike Bostock’s tutorial Lets Make a Map that implements automatic label placement using collision detection. This is a proof of concept more than anything, not polished in any way.
