#### D3 - Advanced Lines

Statistics Invoices Schedule

##### 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.

New York
San Francisco

##### 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.