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.

Example of bivariate area chart that uses clippingto 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 TSVfile.

An example of d3.behavior.zoomapplied 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.

Multiple clarts within 1 container. This example shows a few interesting techniques with D3.js: 1. Stock prices in CSV formatare loaded asynchronously; 2. Stock prices are nestedby symbol; 3. The x-scaleis the minimum and maximum across symbols; 4. The y-scaleis local to each symbol; the domain is set per multiple; 5. Area and line shapes are used to fill and stroke separately.

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.

Example of chart with missed dataand d3-tiptooltip 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 bodyand positioned on top.Tooltips support: styling via CSS, offsets and directions. Direction can be n, s, e, w, nw, ne, swor 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.