Skip to main content
SimilarExport ZIP
100%

test1

✓ Published1🌍 Public
JJoseph D. Galloway II
Last edited Apr 20, 2020
Created on Apr 20, 2020
Forked from HTML Starter

This example uses D3 v5 to render an interactive multi-series line chart comparing city temperatures in both Fahrenheit and Celsius. A dropdown menu toggles the unit of measurement, triggering animated transitions of the lines and axes. The chart displays daily temperature data across three cities with a time-based x-axis. Hovering reveals a vertical guide with circles and labels, showing exact values for each city. The code uses `d3.line` with `d3.curveCardinal` for smoothed lines, `d3.csv` for data loading, `d3.scaleTime` for the date scale, and D3’s selection and transition APIs for interactivity, all rendered as SVG.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

graph1

This visualization shows six line charts tracking temperature metrics for three cities in both Fahrenheit and Celsius across a year, switchable via a dropdown menu. The SVG is rendered with D3 v5, and the lines use an ordinal color scale and cardinal curve interpolation. A hover interaction uses a bisector to locate the nearest date, displaying a vertical guide line, date label, and city-specific values with formatted degrees. The y-axis transitions smoothly when switching units.

JJoseph D. Galloway II
86% match
Loading thumbnail…

Untitled

This interactive line chart displays temperature data through time, with a dropdown to switch between Fahrenheit and Celsius scales. The visualization renders multiple city temperature series as smooth cardinal curves, using D3 v5 with SVG and animated transitions. A mouse-over interaction uses a bisector to find the nearest date, displaying a vertical guide line, value labels, and colored circles for each city at the hovered position. The y-axis updates dynamically with the selected metric via a smooth transition.

RResl411
82% match
Loading thumbnail…

Multi-line chart

This example visualizes the changing temperature across multiple cities over a week, using time on the x-axis and temperature on the y-axis. Each city is represented by a distinct colored line, with a legend identifying each city. Built with React and D3.v5, the chart renders as an SVG using `line` and `curveBasis` for smooth paths, `scaleTime` and `scaleLinear` for axes, and `scaleOrdinal` with `schemeCategory10` for colors. Data is loaded via `csv` from a remote source, and the legend is generated using a custom `colourLegend` function.

JJoseph Popoola
80% match
Loading thumbnail…

Untitled

A multi-line chart displays daily temperature readings for New York, San Francisco, and Austin, with each city’s time series drawn as a smooth, colored path. The visualization uses d3.tsv to load the data, d3.scaleTime and d3.scaleLinear for positioning, and d3.line with curveBasis for the paths. Interactive labels trigger hover and click handlers that highlight or toggle the visibility of each city’s line using d3 selection styling. A d3.zoom behavior is applied to the SVG, though its zoom event handler remains empty.

Ddonaldminer
80% match
Loading thumbnail…

D3 Interaction

This example shows an interactive multi-series line chart of average temperatures in New York, San Francisco, and Austin from October 2011 through April 2012, loaded from a TSV file. Using d3.tsv and D3’s time scale, the code renders three colored temperature curves with SVG paths and a basis curve interpolation. Users can hover over the chart to highlight one city’s line while dimming others, or click a line to toggle its visibility. Interactions rely on event handlers and D3 selection methods, with a `d3.axisBottom` and linear y-scale providing the axes.

Mmariahdiaz
80% match
Loading thumbnail…

test_d3_multilinechart

This example shows temperature readings from multiple cities over one week, using smooth curved lines to compare trends. The visualization renders as an SVG with D3 v5, using `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with `curveBasis` for path generation, and `d3.nest` to group data by city. A custom color legend component is imported from a separate module, while data loads from a CSV containing timestamps and temperatures.

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

graph1

This interactive line chart displays daily temperature readings for Austin, Boston, and Arizona in both Fahrenheit and Celsius, with a dropdown menu to switch between the two units. The visualization uses d3.v5 to load the CSV data, parse dates, and render an SVG with a time-scaled x-axis and linear y-axis. Users can hover over the chart to see a vertical guide line, date label, and value annotations for each city. The code employs d3.scaleTime, d3.scaleLinear, d3.line with curveCardinal, and d3.axisBottom/Left, along with transitions to animate axis and line updates when the metric changes.

AArriannePandaraoan
79% match