Multi-Series Line Chart
This multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin over a year, with each city represented by a distinct colored line. The visualization uses D3.js with SVG rendering, employing conventional margins and scales: a time scale for dates on the x-axis, a linear scale for temperature on the y-axis, and a categorical color scale for the three series. Data is loaded from a TSV file using d3.tsv, and dates are parsed with d3.time.format. The chart computes its domains using d3.extent, d3.min, and d3.max over the parsed dataset, derives series names dynamically with d3.keys, and renders axes and line paths with d3.svg.axis and d3.svg.line. The example demonstrates a clean, reusable pattern for multi-series time-series data, with a legend distinguishing New York, San Francisco, and Austin.
AI-generated descriptionThis line chart is constructed from a TSV file storing the daily average temperatures of New York, San Francisco and Austin over the last year. The chart employs conventional margins and a number of D3 features:
- d3.tsv - load and parse data
- d3.time.format - parse dates
- d3.time.scale - x-position encoding
- d3.scale.linear - y-position encoding
- d3.scale.category10, a d3.scale.ordinal - color encoding
- d3.extent, d3.min and d3.max - compute domains
- d3.keys - compute column names
- d3.svg.axis - display axes
- d3.svg.line - display line shape
forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3884955'>Multi-Series Line Chart</a>