This stacked bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs conventional margins and a number of D3 features:
This example demonstrates mouseenter and mouseleave events. Mouseenter and mouseleave events are triggered only when the mouse enters or leaves the parent container; unlike mouseover and mouseout, they are not triggered when the mouse moves between descendant elements. This makes it easier to listen for when the mouse enters a group of elements and avoid unnecessary flickering.
For browsers that do not yet support mouseenter and mouseleave events, D3 provides a polyfill on top of the mouseover and mouseout events.
| <!DOCTYPE html> | |
| <head> | |
| <title>Speedometer</title> | |
| <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Play:700,400' type='text/css'> | |
| <script type="text/javascript" src="http://iop.io/js/vendor/d3.v3.min.js"></script> | |
| <script type="text/javascript" src="http://iop.io/js/vendor/polymer/polymer.min.js"></script> | |
| <script type="text/javascript" src="http://iop.io/js/iopctrl.js"></script> | |
This is a code excerpt from the book D3 on Angular. http://leanpub.com/d3angularjs
The data was scraped from Wikipedia on 3/15/2014: https://en.wikipedia.org/wiki/List_of_The_Walking_Dead_episodes
Horizon charts combine position and color to reduce vertical space. Start with a standard area chart, then mirror negative values (in blue) or offset them vertically. Click the + button above to increase the number of bands, turning the area into a horizon.
Implemented with the d3.horizon plugin.
| <html> | |
| <head> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script> | |
| </head> | |
| <body> | |
| <svg> | |
| <defs> | |
| <mask id="rekt"> | |
| <g id="rrr"> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 14px sans-serif; | |
| } | |
| .axis path, .axis line { | |
| fill: none; |
This example is the first of three in the Path Transitions tutorial.
When you interpolate a path element’s “d” attribute using transition.attr, the default interpolator is typically d3.interpolateString. This interpolator is not specialized for SVG paths, and instead simply looks for numbers embedded in strings. Numbers in the start and end strings are paired and then interpolated. So, the default behavior when interpolating two paths pairs numbers like this:
M x0, y0 L x1, y1 L x2, y2 L x3, y3
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
M x0, y1 L x1, y2 L x2, y3 L x3, y4
The first point ⟨x0,y0⟩ is interpolated to ⟨x0,y1⟩. Since the x-values are the same for each pair of points, only the y-values change, and the path doesn’t slide left as intended.
This example is the second of three in the Path Transitions tutorial; see the previous example for context.
The desired pairing of numbers for path interpolation is like this:
M x0, y0 L x1, y1 L x2, y2 L x3, y3 L xR, y4
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
M xl, y0 L x0, y1 L x1, y2 L x2, y3 L x3, y4
Where xl is some negative value off the left side, and xr is some positive value off the right side. This way, the first point ⟨x0,y0⟩ is interpolated to ⟨xl,y0⟩; meaning, the x-coordinate is interpolated rather than the y-coordinate, and so the path appears to slide off to the left. Likewise, the incoming point ⟨xr,y4⟩ is interpolated to ⟨x3,y4⟩.