d3

The page covers new features in 3.0; see Upgrading to 3.0 for how to migrate from 2.x to 3.0.

• 日本語

Geo

<table> <tr height="146" valign="top"> <td>Antimeridian Cutting<br><a target="_blank" href="http://bl.ocks.org/3788999"><img src="http://bl.ocks.org/mbostock/raw/3788999/thumbnail.png" width="202"></a></td> <td>Three-Axis Rotation<br><a target="_blank" href="http://bl.ocks.org/4282586"><img src="http://bl.ocks.org/mbostock/raw/4282586/thumbnail.png" width="202"></a></td> <td>Rotating Winkel-Tripel<br><a target="_blank" href="http://bl.ocks.org/3790085"><img src="http://bl.ocks.org/mbostock/raw/3790085/thumbnail.png" width="202"></a></td> <td>Rotating Equirectangular<br><a target="_blank" href="http://bl.ocks.org/3734273"><img src="http://bl.ocks.org/mbostock/raw/3734273/thumbnail.png" width="202"></a></td> </tr> <tr height="146" valign="bottom"> <td>Clipping<br><a target="_blank" href="http://www.jasondavies.com/maps/clip/"><img src="https://raw.githubusercontent.com/d3/d3-3.x-api-reference/master/img/geo-clip.png" width="202"></a></td> <td>Adaptive Resampling<br><a target="_blank" href="http://bl.ocks.org/3795544"><img src="http://bl.ocks.org/mbostock/raw/3795544/thumbnail.png" width="202"></a></td> <td>Canvas Rendering<br><a target="_blank" href="http://bl.ocks.org/4183330"><img src="http://bl.ocks.org/mbostock/raw/4183330/thumbnail.png" width="202"></a></td> <td>Satellite & Graticule<br><a target="_blank" href="http://bl.ocks.org/3790444"><img src="http://bl.ocks.org/mbostock/raw/3790444/thumbnail.png" width="202"></a></td> </tr> <tr height="146" valign="bottom"> <td>Projection Transitions<br><a target="_blank" href="http://bl.ocks.org/3711652"><img src="http://bl.ocks.org/mbostock/raw/3711652/thumbnail.png" width="202"></a></td> <td>Choropleth<br><a target="_blank" href="http://bl.ocks.org/4060606"><img src="http://bl.ocks.org/mbostock/raw/4060606/thumbnail.png" width="202"></a></td> <td>Raster Reprojection<br><a target="_blank" href="http://bl.ocks.org/4329423"><img src="http://bl.ocks.org/mbostock/raw/4329423/thumbnail.png" width="202"></a></td> </tr> </table>

D3 includes a powerful new geographic projection system! Whereas previous versions of D3 only understood projections as point functions, D3 3.0 models projections as full geometry transformations. Thus, when straight lines are projected to curves, D3 applies configurable adaptive resampling to subdivide lines and eliminate projection artifacts; see for example the smooth appearance of Antarctica in the Larrivée and Van der Grinten projections. When lines or polygons cross the antimeridian, D3 cuts the geometry, rather than relying on pre-cut shapefiles. All projections now support small circle clipping and three-axis rotation.

Under the hood, D3 uses streaming geometry transformations (d3.geo.stream) that reduce memory by avoiding temporary objects. This design also enables direct-to-canvas rendering with dramatic performance improvements! Streams are used to compute projected area, centroid and bounds consistent with displayed geometry, and can even filter geometry for scale-dependent shape simplification.

The d3.geo package includes a number of useful new components, such as a graticule for displaying grid lines and sphere rendering for globe outlines. The d3.geo.circle class now supports small and great circle rendering, so you can approximate Tissot's indicatrix. A new d3.geo.interpolate simplifies interpolation of spherical coordinates along great arcs, and there are even new functions for accurately computing spherical area, centroid and bounds.

Plugins

<table> <tr height="146" valign="top"> <td>Peirce Quincuncial<br><a target="_blank" href="http://bl.ocks.org/4310087"><img src="http://bl.ocks.org/mbostock/raw/4310087/thumbnail.png" width="202"></a></td> <td>Wagner VI<br><a target="_blank" href="http://bl.ocks.org/3710148"><img src="http://bl.ocks.org/mbostock/raw/3710148/thumbnail.png" width="202"></a></td> <td>Equidistant Conic<br><a target="_blank" href="http://bl.ocks.org/3734317"><img src="http://bl.ocks.org/mbostock/raw/3734317/thumbnail.png" width="202"></a></td> <td>Mollweide<br><a target="_blank" href="http://bl.ocks.org/3734336"><img src="http://bl.ocks.org/mbostock/raw/3734336/thumbnail.png" width="202"></a></td> </tr> <tr height="146" valign="bottom"> <td>Sinu-Mollweide<br><a target="_blank" href="http://bl.ocks.org/4319903"><img src="http://bl.ocks.org/mbostock/raw/4319903/thumbnail.png" width="202"></a></td> <td>Goode Homolosine<br><a target="_blank" href="http://bl.ocks.org/mbostock/4448587"><img src="http://bl.ocks.org/mbostock/raw/4448587/thumbnail.png" width="202"></a></td> <td>Van der Grinten<br><a target="_blank" href="http://bl.ocks.org/3796831"><img src="http://bl.ocks.org/mbostock/raw/3796831/thumbnail.png" width="202"></a></td> <td>d3.hexbin<br><a target="_blank" href="http://bl.ocks.org/4330486"><img src="http://bl.ocks.org/mbostock/raw/4330486/thumbnail.png" width="202"></a></td> </tr> <tr height="146" valign="bottom"> <td>d3.geo.tile<br><a target="_blank" href="http://bl.ocks.org/4150951"><img src="http://bl.ocks.org/mbostock/raw/4150951/thumbnail.png" width="202"></a></td> <td>TopoJSON<br><a target="_blank" href="http://bl.ocks.org/4108203"><img src="http://bl.ocks.org/mbostock/raw/4108203/thumbnail.png" width="202"></a></td> <td>Map Coloring<br><a target="_blank" href="http://bl.ocks.org/4180634"><img src="http://bl.ocks.org/mbostock/raw/4180634/thumbnail.png" width="202"></a></td> <td>Smooth Zooming<br><a target="_blank" href="http://bl.ocks.org/3828981"><img src="http://bl.ocks.org/mbostock/raw/3828981/thumbnail.png" width="202"></a></td> </tr> </table>

The extended geographic projections plugin brings the number of supported projections to over 40! You can also compose new custom projections using d3.geo.projection and d3.geo.projectionMutator. The d3.geo.tile plugin makes it easy to drop-in 256x256 raster tiles into your map visualization. In conjunction with d3.behavior.zoom, you can quickly create slippy maps. The d3.hexbin and d3.interpolateZoom plugins are also useful for mapping.

TopoJSON is an extension to GeoJSON that typically provides 80-90% smaller file sizes. It also encodes topology, enabling topology-preserving shape simplification (à la MapShaper), map coloring, cartograms, boundary mesh computation, and more! TopoJSON is not a D3 plugin per se, but simply a standalone JavaScript library for converting TopoJSON to GeoJSON; a future release of d3.geo may add native TopoJSON support.

Transitions

<table> <tr height="146" valign="top"> <td>Chained Transitions, I<br><a target="_blank" href="http://bl.ocks.org/3903818"><img src="http://bl.ocks.org/mbostock/raw/3903818/thumbnail.png" width="202"></a></td> <td>Chained Transitions, II<br><a target="_blank" href="http://bl.ocks.org/3943967"><img src="http://bl.ocks.org/mbostock/raw/3943967/thumbnail.png" width="202"></a></td> <td>Chained Transitions, III<br><a target="_blank" href="http://bl.ocks.org/4341417"><img src="http://bl.ocks.org/mbostock/raw/4341417/thumbnail.png" width="202"></a></td> <td>Chained Transitions, IV<br><a target="_blank" href="http://bl.ocks.org/4341574"><img src="http://bl.ocks.org/mbostock/raw/4341574/thumbnail.png" width="202"></a></td> </tr> <tr height="146" valign="top"> <td>Transition Reselection, I<br><a target="_blank" href="http://bl.ocks.org/4323929"><img src="http://bl.ocks.org/mbostock/raw/4323929/thumbnail.png" width="202"></a></td> <td>Transition Reselection, II<br><a target="_blank" href="http://bl.ocks.org/3885705"><img src="http://bl.ocks.org/mbostock/raw/3885705/thumbnail.png" width="202"></a></td> </tr> </table>

D3’s transitions now bind tweens and other transition state to the DOM, similar to how data is bound to selections. This means you can now reselect scheduled transitions from the DOM and modify them, say for customized axes. You can also inspect them in the JavaScript console for easier debugging.

To make transitions easier to use, value functions are now evaluated immediately by transition.attr and transition.style, rather than waiting until the transition starts. This greatly simplifies chained transitions that depend on external state, such as scale domains. The transition.transition method now creates a transition that starts when the previous transition ends (rather than a concurrent transition), so you can chain transitions without listening for "end" events.

For more on how transitions work in D3, see the Working with Transitions tutorial, and the section on transitions in Upgrading to 3.0.

Requests

<table> <tr height="146" valign="bottom"> <td>Progress Events<br><a target="_blank" href="http://bl.ocks.org/3750941"><img src="http://bl.ocks.org/mbostock/raw/3750941/thumbnail.png" width="202"></a></td> <td>d3.xhr + Queue.js<br><a target="_blank" href="http://bl.ocks.org/4060606"><img src="http://bl.ocks.org/mbostock/raw/4060606/thumbnail.png" width="202"></a></td> </tr> </table>

D3's asynchronous methods for issuing requests now return a d3.xhr object. This offers much greater control over the request. You can have multiple listeners, including separate listeners for progress, load and error events. You can use xhr.abort to cancel in-flight requests, xhr.header to add request headers, and xhr.send to customize the HTTP method and body data. Also, D3 now begrudgingly provides CORS compatibility for IE9 by way of Microsoft's nonstandard XDomainRequest object.

The asynchronous request methods now support the Node.js callback pattern, where the first argument to the callback is the error, and the second argument is the result. This makes d3.xhr compatible with asynchronous JavaScript helper libraries, such as Queue.js, which makes it much easier to load multiple resources in parallel. See the section on requests in Upgrading to 3.0 for examples.

And More

In addition to all of the above, D3 includes a handful of bug fixes, performance improvements, and minor new features. A new d3.shuffle method provides the Fisher–Yates shuffle. The d3.format class now supports align and fill, and both d3.format and d3.time.format support POSIX localization at build time. The d3.layout.treemap now supports the "slice-and-dice" algorithm. Lastly, all of the D3 examples have been moved to bl.ocks.org and GitHub Gist for easier browsing & forking.

• Add multi-valued map support for selection.attr and similar methods.
• Add Lab* and HCL color spaces.
• Add d3.tween for easier customization of transition interpolators.
• Add d3.tsv for loading tab-separated values.
• Add static localization for d3.time.format, including fr_FR and ru_RU locales.
• Add a new quantitative scale: d3.scale.threshold.
• Add outer padding support for d3.scale.ordinal’s rangeBands.
• Add d3.layout.pack padding support.
• Custom interpolators can now be used with d3.svg.line and d3.svg.area.
• Add new random generators for log-normal and Irwin–Hall distributions.
• Improve d3.time.scale’s nice.
• Fix incorrect tangents with monotone interpolation.
• Simplify transform interpolation.

• Add defined methods to d3.svg.line and d3.svg.area.

• Add selection.datum (deprecating selection.map), which is like selection.data but doesn't compute a data-join; it can be used to get or set the data bound to elements.
• Brush component can now take decorative resizers.
• Add d3.map class (similar to ES6's map collection) for easier management of string-value maps; this is used internally by transitions, event listeners, the nest operator, and many other components.
• Add d3.bisector for bisecting sorted arrays with an accessor.
• Expose d3.selection.enter.prototype.
• Generalize d3.svg.mouse to support HTML elements, and renamed to d3.mouse.
• Add d3.scale.identity.
• Add axis.tickValues.
• Rewrite d3.behavior.zoom.
• Add "start" and "end" events to force layout, along with force.tick and force.alpha for synchronous execution.
• Add a variety of new time interval methods.

• The selection.filter method can now take a selector, such as filter(".foo").
• Add selection.order: reorders document elements to match selection order; this is faster than selection.sort if your data is already in-order.

• Namespaces for selection.append and selection.insert now optional (in most cases)!
• Ordinal scale support for axes and brushes.
• Drag behavior supports configurable origin.
• Dispatchers can be used to access current listeners.

• SI-prefix ("r") format.
• Multiple classes for the classed operator.
• Mean and median.

• Azimuthal and Bonne projections.
• Great arcs and great circle clipping.
• Variable log ticks.