Skip to main content
100%

30. Multi-Series Line Chart

✓ Published0🌍 Public
深深度碎片
Last edited Aug 5, 2016
Created on Aug 5, 2016

This example shows a multi-series line chart tracking the daily average temperatures of New York, San Francisco, and Austin over one year. Each city is drawn as a separate colored line, with the y-axis labeled in degrees Fahrenheit, and city names labeled at the end of their respective lines. Written with D3 v4, the visualization loads and parses a TSV file using `d3.tsv` and `d3.timeParse`, encodes time on the x-axis with `d3.scaleTime`, temperature on the y-axis with `d3.scaleLinear`, and city categories with `d3.scaleOrdinal` and `d3.schemeCategory10`. Lines are rendered as SVG paths via `d3.line` with a basis curve, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

This 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:

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>

forked from <a href='http://bl.ocks.org/EmbraceLife/'>EmbraceLife</a>'s block: <a href='http://bl.ocks.org/EmbraceLife/ccc9d6ee47f9e13c5bbdbd0ee9503da3'>30. Multi-Series Line Chart</a>

gpl-3.0 Licensed

Similar vizzes