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
Pan and zoom
An example of
d3.behavior.zoom applied using
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.
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. 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
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.