Skip to main content
100%

multi-line test

✓ Published0🌍 Public
ZZoeLeBlanc
Last edited Sep 13, 2018
Created on Aug 16, 2018

This example displays a multi-line chart tracking a single time series dataset from 1750 onward, with each year’s value plotted as a point on an SVG canvas. The visualization uses d3.v4 to generate the line path and adds a hover interaction with a tooltip and a Voronoi overlay for precise mouse tracking. The chart includes context lines and a focus highlight on hover, with all rendering handled via SVG elements and D3’s data-binding methods.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

d3.js line chart with multiple lines and points

This example shows two multi-series line charts overlaid in a single SVG, with each line distinguished by its own path and circular data points. It demonstrates how to map linear scales to x- and y-axes, render gridlines and tick labels, and add interactive hover effects that enlarge points on mouseover. The code uses D3.js v3 APIs including `d3.svg.line()`, `d3.scale.linear()`, and selection methods like `append`, `attr`, and `on`. The data is a hardcoded array of two numeric arrays, with axes and points generated programmatically from the same scales.

CCaged
81% match
Loading thumbnail…

MultiSeries Line Chart

This example shows a multiseries line chart tracking two series of random weekly values over a one-year period, with a focus on interactive exploration. It includes a main time-series chart and a smaller brushing context view below it for zooming and panning. The visualization uses D3.js v3 with SVG rendering, leveraging `d3.svg.line`, `d3.svg.axis`, `d3.time.scale`, and `d3.svg.brush`. Data is generated randomly in the browser and rendered with animation support. The chart also includes a legend and mouse-tracker for hovering, though the code does not implement the hover interaction beyond the tracker rectangle.

663anp3ca
80% match
Loading thumbnail…

MultiLine with tooltip

A multi-line chart displays several vital-sign measurements over time for a single patient, with each line colored by metric type. The visualization uses D3 v5 to render SVG paths and includes a custom tooltip that appears on hover. The code relies on d3.nest, d3.line, d3.area, and d3.scaleOrdinal, with jQuery used for tooltip interactions. Data comes from a local CSV file with patient measurements. Mouseover events highlight the hovered line and dim the others, while a vertical gridline helps compare values across time points.

Ppplomith
80% 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
79% 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
79% match
Loading thumbnail…

multiple line chart

This multi-line chart visualizes stock data over time, plotting a series of data points connected by lines and displaying corresponding values. Built with D3.js v4, the visualization uses SVG for rendering and includes animated transitions on mouseover—circles change color and trigger a tooltip plus a dashed guide line. The chart employs `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and processes data loaded from a JSON file with `d3.json` and `d3.dsvFormat` parsing.

EElisaDnr
79% match
Loading thumbnail…

Multi-Line Chart

This example shows a multi-line chart using D3 version 7, plotting sales data across years. The visualization is rendered as an SVG within an HTML container, with axes and lines drawn from a hardcoded array of sale and year values. The code uses `d3.select` to target the SVG element and sets fixed width, height, and margin dimensions. While the current script only writes "Hello D3 version 7" to the body, the accompanying markup and data structures indicate a simple line chart with no external data source, relying entirely on inline sample data.

LLily Gaffney
79% match
Loading thumbnail…

multiline chart

This example shows a small multiline chart comparing two data series over time: actual values and target values, with the target line appearing as a dashed path and the actual line as a solid path. The chart uses D3 v4’s `d3.line()` with `d3.curveCatmullRom` to smooth both lines, and `d3.scaleTime()` and `d3.scaleLinear()` to map dates and numeric values to SVG coordinates. Data is loaded from a local CSV file via `d3.csv`, and a circle is appended at the end of the target line to mark its final point. The visualization is rendered as an SVG with a simple margin-based layout.

Aallyraza
79% match