d3 mouseover multi-line chart

100%

d3 mouseover multi-line chart

✓ Published0🌍 Public

Last edited Nov 8, 2017

Created on Nov 8, 2017

An interactive multi-line chart displays temperature readings for New York, San Francisco, and Austin over time, with each city represented by a distinct colored line and legend. The visualization uses D3 v3 to render SVG elements, including axes, lines, and text labels, while parsing tab-separated data via `d3.tsv.parse`. Mouseover effects, implemented with D3 event handlers, highlight the closest data point and display a vertical guide line, enhancing comparison across the three series.

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…

d3 mouseover multi-line chart

This interactive multi-line chart displays temperature readings for New York, San Francisco, and Austin over a two-week period. The visualization uses D3 v3 to render an SVG with smooth basis-interpolated lines, a time-scaled x-axis, and a linear y-axis showing temperature in Fahrenheit. Each city has a distinct color from the category10 scale, with a legend and end-of-line labels. The code includes a mouse-over effect that draws a vertical tracking line, using the d3.svg.line and d3.time.scale APIs to follow the cursor across the plotted data.

Aaniston

96% match

Loading thumbnail…

d3 mouseover multi-line chart

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.

ZZoeLeBlanc

96% match

Loading thumbnail…

d3 mouseover multi-line chart

This example displays a multi-line chart tracking daily temperatures for New York, San Francisco, and Austin, with each city’s data drawn as a smooth, colored line over a time axis. It uses d3.svg.line with basis interpolation and d3.time.scale for dates, while d3.scale.category10 assigns line colors. A legend and end-of-line labels identify each series. Mouseover effects add a vertical guide line, implemented with d3 selections and SVG paths, though the code shown stops mid-interaction setup. The data originates from an embedded tab-separated string parsed via d3.tsv.parse.

Aaniston

95% match

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 interact

This interactive multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin over one year. It uses D3 v4 to load a TSV dataset, parse dates with d3.time.format, and encode time on the x-axis with a time scale and temperature on the y-axis with a linear scale. A categorical color scale distinguishes the three cities, each rendered as an SVG line path. The chart applies conventional margins, computes domains using d3.extent and d3.min/max, and displays axes with d3.svg.axis. Hovering over the chart animates the lines, highlighting the nearest city's temperature values for interactive exploration.

Aanaeliaovalle

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

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

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