Multi-Series Line Chart V7

100%

Multi-Series Line Chart V7

✓ Published1🌍 Public

Last edited Apr 2, 2022

Created on Apr 1, 2022

This interactive multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin from October 2011 through April 2012. It displays three color-coded temperature trends over time, with a legend for city selection. The visualization supports zooming and panning along the time axis, and users can click legend items to toggle the visibility of individual city lines. Hovering over a legend dims non-selected series. The code uses D3 v7 with `d3.scaleTime`, `d3.line` with `d3.curveBasis`, and an SVG rendering. It loads data from a TSV file and includes animation via D3's transition and zoom APIs.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Multi-Series Line Chart V3

This multi-series line chart displays daily temperature readings for New York, San Francisco, and Austin over several months, with each city drawn as a distinct colored line. Users can toggle cities on and off by clicking legend entries, and hovering over a line highlights it while dimming others. The chart uses D3 v3 with SVG rendering, employing d3.svg.line, d3.time.scale, and d3.behavior.zoom for panning/zooming. Temperature data comes from a tab-separated data.tsv file, with axes labeled in degrees Fahrenheit.

Pprateekvasi

94% match

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over one year, using color to distinguish each city's trend. The visualization encodes dates on the x-axis via `d3.time.scale` and temperatures on the y-axis via `d3.scale.linear`, with `d3.svg.axis` rendering the axes. Data is loaded from a TSV file using `d3.tsv`, and each city’s line is drawn with `d3.svg.line`, colored by `d3.scale.category10`. The chart uses conventional margins and an SVG rendering approach, with city labels placed at the final data point.

CCdcole

93% match

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart displays 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 v4’s SVG rendering, parsing a TSV file with `d3.tsv` and `d3.timeParse`. It encodes time on the x-axis via `d3.scaleTime`, temperature on the y-axis with `d3.scaleLinear`, and city categories using `d3.scaleOrdinal` with `d3.schemeCategory10`. The chart includes interactive zooming through `d3.zoom` and clickable city labels that toggle line visibility.

CCatherine-Yu

93% match

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart visualizes the daily average temperatures for New York, San Francisco, and Austin over one year. Loaded from a TSV file, the data is parsed with `d3.tsv` and `d3.timeParse`, with dates mapped to the x-axis via `d3.scaleTime` and temperatures to the y-axis with `d3.scaleLinear`. Lines are drawn with `d3.line` and colored using `d3.scaleOrdinal` with a `d3.schemeCategory10` palette. The chart supports pan and zoom through the `d3.zoom` interaction, and clicking a city’s label highlights its line while dimming others via CSS transitions.

GGoomble

93% match

Loading thumbnail…

Multi-Series Line Chart

This visualization displays the daily average temperature for New York, San Francisco, and Austin over a year, with three colored lines allowing direct comparison of seasonal patterns. The chart uses D3 v3 APIs, including `d3.tsv` for data loading, `d3.time.format` for date parsing, `d3.time.scale` for the x-axis, `d3.scale.linear` for the y-axis, and `d3.scale.category10` for color encoding. It renders with SVG, using `d3.svg.axis`, `d3.svg.line`, and `d3.keys` to structure city series from the TSV data.

CCdcole

93% match

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin over a year, with three colored lines plotted against a time-based x-axis and a temperature y-axis. The visualization is built with D3 v3 and rendered as SVG, using conventional margins. It loads data from a TSV file via d3.tsv and leverages d3.time.format to parse dates, d3.time.scale for the x-position, d3.scale.linear for the y-position, and d3.scale.category10 for color encoding. Domains are computed with d3.extent, d3.min, and d3.max, while column names are derived using d3.keys. Axes are rendered with d3.svg.axis and the lines with d3.svg.line. The chart illustrates seasonal temperature variations across the three cities over a year, with each line distinguished by color.

HHelenHChen

92% match

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over one year, loaded from a TSV file via d3.tsv. The visualization uses d3.time.scale for the x-axis, d3.scale.linear for the y-axis, d3.scale.category10 for color encoding, and d3.svg.line with basis interpolation to draw each city’s temperature trend. Axes are rendered with d3.svg.axis, while d3.extent, d3.min, and d3.max compute the domains. City labels appear at the end of each line, and the SVG output uses conventional margins.

CCdcole

92% match

Loading thumbnail…

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.

AAdamBlaine1

92% match