Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ddonaldminer
Last edited Apr 5, 2022
Created on Apr 5, 2022
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A multi-line chart displays monthly temperature averages for New York, San Francisco, and Austin, with each city’s time series drawn as a smooth basis curve. The SVG rendering uses D3 v7 scales and axes to map dates and temperatures, while the `d3.zoom` API enables pan and zoom interactions on the chart. City labels follow the final data point, and the code includes placeholder hooks for hover and click handlers. Data is loaded from a TSV file via `d3.tsv`, with colors assigned through `d3.scaleOrdinal`.

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

Untitled

This interactive line chart compares daily high temperatures in New York, San Francisco, and Austin, with each city rendered as a steel-blue path. The chart uses D3.js v3 with `d3.time.scale` for the date axis and `d3.scale.linear` for the temperature axis, while `d3.interval` and `d3.svg.line` draw the smoothed curves. The data is embedded as a tab-separated string, parsed via `d3.tsv.parse`, and colors are assigned using `d3.scale.category10()`. A legend and mouse-over effects are included to highlight the selected city's values.

Ddanala0941
92% match
Loading thumbnail…

Untitled

This visualization displays daily temperature readings for New York, San Francisco, and Austin over a three-week period in October 2011. The code uses D3 v3 with SVG rendering to create smoothed line charts, with each city’s data series distinguished by color and labeled with a legend and endpoint text. The chart includes a time-scaled x-axis and linear y-axis labeled in Fahrenheit, with values parsed from a TSV data string embedded in the page. A mouse-over effects group is initialized but remains inactive in the rendered output.

Pperformautodev
91% match
Loading thumbnail…

Untitled

This example visualizes daily temperature readings for three cities—New York, San Francisco, and Austin—as a multi-series line chart over an October timeframe. The data is embedded directly in the source as a tab-separated string parsed with `d3.tsv.parse`. Using D3 v3 SVG rendering, it employs `d3.time.scale`, `d3.scale.linear`, and `d3.svg.line` with basis interpolation to draw smooth temporal trends. A categorical color scale distinguishes each city, and the chart includes axes, a legend, and city labels positioned at the final data point.

Iinu231
90% match
Loading thumbnail…

Untitled

This visualization demonstrates temperature trends over time for three cities—New York, San Francisco, and Austin—using a multi-series line chart. The chart displays daily temperature readings across roughly three weeks, with each city represented by a distinct colored line and accompanied by a legend and labeled endpoints. The visualization uses D3 version 3.5.3, specifically leveraging `d3.tsv.parse` to read tab-separated data, `d3.time.scale` for the x-axis, and `d3.svg.line` for drawing the paths. Temperature data is parsed as dates and mapped to a linear y-axis, with city names colored via `d3.scale.category10`.

CCrossZeigler
89% match
Loading thumbnail…

Line Chart Visualization

A multi-line chart displays daily temperature readings for New York, San Francisco, and Austin from October 2011 through April 2012, with each city represented by a colored line. Built with D3 v7, the visualization supports interactive filtering: hovering over a city name highlights its line while dimming others, and clicking toggles a line's visibility. Users can also brush or zoom along the time axis. The SVG-based rendering uses d3.line with curveBasis, d3.scaleTime, d3.scaleLinear, and d3.zoom, with data loaded from a TSV file.

GGoogs
87% match