d3 mouseover multi-line chart

100%

d3 mouseover multi-line chart

✓ Published0🌍 Public

Last edited Jul 13, 2018

Created on Jul 10, 2018

This interactive multi-line chart displays temperature data for New York, San Francisco, and Austin over time, using a time-scaled x-axis and linear y-axis. The visualization renders three colored lines with a legend and city labels, using SVG paths generated by `d3.svg.line` with basis interpolation. A black vertical guide line follows the mouse across the chart, with the code also setting up per-line mouseover effects to highlight individual data series. The data is parsed from a tab-separated string using `d3.tsv.parse`, with scales and axes built via d3.time.scale, d3.scale.linear, and d3.svg.axis.

AI-generated description

An interactive multi-line chart.

Note, I borrowed a bit of code from Duopixel's excellent code sample here.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/larsenmtl/'>larsenmtl</a>'s block: <a href='http://bl.ocks.org/larsenmtl/e3b8b7c2ca4787f77d78f58d41c3da91'>d3 mouseover multi-line chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Untitled

A multi-line chart displays temperature readings for New York, San Francisco, and Austin over several days in October 2011, using D3.js v3 with SVG rendering. The visualization uses `d3.time.scale` for the x-axis, `d3.scale.linear` for temperature, and `d3.svg.line` with basis interpolation to draw smooth curves. It colors each city's line via `d3.scale.category10`, adds a legend, and includes a mouse-over effect with a vertical guide line. Data is parsed from tab-separated text using `d3.tsv.parse`.

LL1EO

87% 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

87% match

Loading thumbnail…

A11 - Interaction in D3

This interactive multi-series line chart shows daily temperature trends for New York, San Francisco, and Austin, rendered as SVG paths with distinct colors. The visualization supports pan and zoom through d3.zoom, with a rescaleX transform that dynamically updates the x-axis and redraws each line using d3.line with curveBasis smoothing. Hovering highlights a city’s label and line via CSS classes that increase stroke width and reduce opacity of other lines. Data is loaded from a TSV file using d3.tsv, with time parsed via d3.timeParse and scales defined by d3.scaleTime and d3.scaleLinear.

RRiya Mathur

87% 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

86% match

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

86% match

Loading thumbnail…

Multi-Series Line Chart-8/29

This interactive multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year from a TSV file. Users can zoom by scrolling or dragging, with three colored temperature trends drawn as SVG paths using a basis curve. The code uses d3.tsv for data parsing, d3.scaleTime and d3.scaleLinear for axes, and d3.scaleOrdinal for color encoding. A d3.voronoi overlay enables hover interactions, while d3.zoom handles the pan-and-zoom functionality on the SVG.

SShuangjiaoHu

86% match

Loading thumbnail…

Untitled

This interactive multi-line chart displays daily temperature trends for New York, San Francisco, and Austin, with each city represented by a colored curve on a shared time axis. Hovering over a line highlights it in its original color while graying out the others, and clicking a line toggles its visibility. Built with D3 v6, the visualization uses SVG rendering with animated transitions, d3.axisBottom and d3.axisLeft for axes, and d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scaling. Data is loaded via d3.tsv from a remote source.

Hhollyjpotter

86% match

Loading thumbnail…

Multi-Series Line Chart-8/29-4

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. Three colored lines represent each city, with a legend label at the end of each line. Clicking a label toggles the opacity of its corresponding line, while hovering over a label temporarily highlights that line and dims the others. The chart uses d3.tsv for data parsing, d3.timeParse and d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, d3.schemeCategory10 for colors, and d3.line with d3.curveBasis for smooth line rendering.

SShuangjiaoHu

86% match