graph1

100%

✓ Published1🌍 Public

Last edited Apr 20, 2020

Created on Apr 20, 2020

Forked from test1

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.

AI-generated description

MIT Licensed

Similar vizzes

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

87% match

Loading thumbnail…

test1

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.

JJoseph D. Galloway II

86% match

Loading thumbnail…

Untitled

This interactive line chart displays temperature data in either Fahrenheit or Celsius from a CSV file, with a dropdown menu to switch between metrics. The visualization uses D3.js v5 to render SVG paths with cardinal curve smoothing, and includes a hover tooltip that reveals exact dates and values using bisector-based mouse tracking. The chart updates its y-axis domain and line paths dynamically when the metric changes, with CSS transitions providing smooth animations.

RResl411

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

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

80% match

Loading thumbnail…

D3 Line Chart with Multiple Lines

This visualization displays city temperature trends over time as a multi-series line chart titled “Temp Around the World.” It plots temperature readings (y-axis) against timestamps (x-axis) for multiple cities, with each city distinguished by color from a categorical color scale. Built with D3 v5, the chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.lineGenerator` with `d3.curveBasis` for smoothed paths, `d3.nest` to group data by city, and a custom legend component. The interactive SVG renders the data from a CSV file sourced from data-canvas-sense-your-city-one-week.

CCarloGato

80% match

Loading thumbnail…

D3 Line Chart with Multiple Lines

This visualization displays temperature trends for multiple cities over time, with a color-coded line for each city and a legend identifying each series. The chart uses a time-scaled x-axis, a linear temperature axis, and a categorical color scale. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` to construct axes. Data is loaded from an external CSV containing city temperature readings, then nested by city using `nest()`, with lines rendered as SVG paths using `lineGenerator` and a basis curve.

CCarloGato

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