D3 - Advanced Lines
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 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.
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.
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.
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 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.