Chained transitions
This variation of a line chart demonstrates a sequence of chained transitions
. Clicking on the radio buttons changes the displayed metric. First, the line transitions to the new values. Then, the axes rescale to fit the new data. X-axes remain the same. Transitions may have per-element delays and durations, computed using functions of data similar to other operators. This makes it easy to stagger a transition for different elements, either based on data or index.
Difference area chart
Example of bivariate area chart that uses clipping
to alternate colors. This example demonstrates the difference in temperatures of 2 cities: When New York is warmer than San Francisco, the difference between the two is filled in green. When San Francisco is warmer, the difference is filled in orange. Colors can be set directly in JS code or in CSS. Demo data is stored in TSV
file.
Pan and zoom
An example of d3.behavior.zoom
applied using x-
and y-scales
. This behavior automatically creates event listeners to handle zooming and panning gestures on a container element. Both mouse and touch events are supported. Scale extent from 1 to 10, try to move the graph inside area and use mouse wheel for zoom in/zoom out.
Small multiples
Multiple clarts within 1 container. This example shows a few interesting techniques with D3.js: 1. Stock prices in CSV format
are loaded asynchronously; 2. Stock prices are nested
by symbol; 3. The x-scale
is the minimum and maximum across symbols; 4. The y-scale
is local to each symbol; the domain is set per multiple; 5. Area and line shapes are used to fill and stroke separately.
Path transitions
Example of path transitions
. When implementing realtime displays of time-series data, we often use the x-axis to encode time as position: as time progresses, new data comes in from the right, and old data slides out to the left. D3 has many built-in interpolators to simplify the transitioning of arbitrary values; an interpolator is a function that maps a parametric value t in the domain [0,1]
to a color, number or arbitrary value.
Missing data with tooltips
Example of chart with missed data
and d3-tip
tooltip extension. Regions with missed data remain unfilled and reserve the space, so the whole chart looks like a full chart with empty areas. D3 tooltips are added to the dots
, appended to the body
and positioned on top
.Tooltips support: styling via CSS, offsets and directions. Direction can be n
, s
, e
, w
, nw
, ne
, sw
or se
. The direction will also automatically be included as a classname on the tooltip element which allows for different style hooks based on the direction.