Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
DD2552
Last edited May 31, 2020
Created on May 31, 2020

Two cities, Rome and Milan, show their daily temperature patterns as smooth, multi-colored line charts. The visualization compares hourly temperature readings across a 24-hour period, with each city represented by a distinct line and color. The chart uses a D3.js v5 SVG rendering approach with a basis curve interpolation to create flowing lines. The data originates from the Data Canvas - Sense Your City project, and the code includes a color legend (colorLegend.js) to help distinguish between the two city temperature profiles.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This chart compares daily temperature patterns between Rome and Milan, using the "vscore" metric recorded at each hour, to visualize how heat varies across an average day in each city. The data comes from Data Canvas - Sense Your City. Two smooth basis-curve lines are drawn with d3.line, using margin and axis specifications from d3.scaleLinear, with axes generated and styled through d3.axisBottom and d3.axisLeft. The SVG canvas is positioned using D3's chained append and transform methods.

Rryandebattista
89% 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…

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
80% 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…

MULTILINE CHART

This multiline chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 with nested line paths to plot temperature over time, with each city assigned a distinct color from the ordinal color scale. The code employs d3.line with curveBasis for smooth curves, d3.nest to group data by city, and custom axis labels and legends rendered as SVG elements.

Pprincit
79% match
Loading thumbnail…

MULTILINE CHART

This multiline chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 with nested line paths to plot temperature over time, with each city assigned a distinct color from the ordinal color scale. The code employs d3.line with curveBasis for smooth curves, d3.nest to group data by city, and custom axis labels and legends rendered as SVG elements.

Pprincit
79% match
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
79% 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
79% match