Skip to main content
SimilarExport ZIP
100%

Filtering and Brushing - Multi-Series Line Chart

✓ Published0🌍 Public
115Dkatz
Last edited Mar 24, 2017
Created on Mar 24, 2017

This interactive multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, loaded from a TSV file. Users can click a city’s line to isolate it by fading others, or hover to gray out the remaining lines. Built with D3 v4, it uses `d3.tsv`, `d3.timeParse`, scales like `d3.scaleTime` and `d3.scaleLinear`, and `d3.line` for SVG paths. Color encoding relies on `d3.scaleOrdinal` with `d3.schemeCategory10`, while transitions animate opacity and stroke changes.

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>

gpl-3.0 Licensed

Similar vizzes

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
92% 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
92% match
Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart displays the daily average temperatures for New York, San Francisco, and Austin over a year, loaded from a TSV file using `d3.tsv`. The visualization uses D3 v4 to map dates to the x-axis with `d3.scaleTime`, temperatures to the y-axis with `d3.scaleLinear`, and city names to colors via `d3.scaleOrdinal` with `d3.schemeCategory10`. Each city’s values are rendered as a smooth `path` using `d3.line` with `d3.curveBasis`, while axes are generated with `d3.axisBottom` and `d3.axisLeft`. The chart includes a dark background around a white SVG and labels each line at its final data point.

115Dkatz
91% match
Loading thumbnail…

Multi-Series Line Chart

A multi-series line chart compares the daily average temperatures of New York, San Francisco, and Austin over a year. The visualization loads data from a TSV file using `d3.tsv`, parses dates with `d3.timeParse`, and encodes positions with `d3.scaleTime` and `d3.scaleLinear`. It renders colored lines via `d3.line` and `d3.schemeCategory10`. Interactive mouseover and click events highlight one city’s line while graying out others, using SVG transitions and class toggling for emphasis.

LLjfernando
91% match
Loading thumbnail…

30. 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 rendered as a distinct colored line. It uses D3 v4 to load a TSV file via `d3.tsv`, parse dates with `d3.timeParse`, and set scales for time, linear values, and color. The SVG rendering applies `d3.line` with basis curves, axes via `d3.axisBottom` and `d3.axisLeft`, and encodes city names as categorical colors using `d3.scaleOrdinal` with `d3.schemeCategory10`.

深深度碎片
91% 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
91% 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
91% match
Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart shows the daily average temperatures in New York, San Francisco, and Austin over one year, with each city’s values plotted as a separate colored line and labeled with its name. The data is loaded from a TSV file using `d3.tsv`, parsed with `d3.timeParse`, and encoded with `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` using `d3.schemeCategory10`. Lines are drawn with `d3.line`, while axes are rendered via `d3.axisBottom` and `d3.axisRight`, and the SVG also includes small circles for each data point plus text annotations showing the temperature extremes.

GGoomble
90% match