Skip to main content
SimilarExport ZIP
100%

Several City Chart

✓ Published0🌍 Public
Ssuperstark02
Last edited Jul 18, 2020
Created on Jul 18, 2020
Forked from Several City Chart

A week of temperature readings for several cities is displayed as overlapping, semi-transparent lines on a time-series chart, with a color legend identifying each city. The lines are ordered by their final temperature values using `d3.nest()` and a descending sort. The visualization uses D3 v5 with SVG rendering, including `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.line` with a basis curve, and axis components. Data is loaded from a CSV via `d3.csv` and formatted with `new Date` and numeric conversion.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Several City Chart

This visualization displays a week of temperature readings from multiple cities, using a multi-line chart to compare trends over time. Each city is represented by a colored path, with a categorical color scale and a legend identifying each location. The chart is built with React and D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with `curveBasis` for smooth paths. Data is loaded via `d3.csv` from a remote dataset, and the rendering uses SVG with nested groups for axes and a custom color legend function.

Jjeelong
93% match
Loading thumbnail…

Several City Chart

This chart displays a week of temperature readings from multiple cities, with each city drawn as a colored line over time. The data is loaded from a CSV, parsed, and rendered as smoothed SVG paths using d3.line with curveBasis. Axes are generated with d3.axisBottom and d3.axisLeft, and a color legend is built using d3.scaleOrdinal with schemeCategory10. React manages the app shell, while d3.nest groups records by city for sorting.

Ssuperstark02
93% match
Loading thumbnail…

City Temperatures

This visualization displays one week of temperature data for multiple cities, using color-coded line paths to distinguish each city’s trends over time. The chart includes a dropdown selector to choose which data attribute to explore, alongside a color legend for city identification. Built with D3 v5, it uses `d3.csv` for data loading, `d3.line` with `curveBasis` for smooth paths, and `d3.scaleTime` and `d3.scaleLinear` for axes. A `nest()` operation groups measurements by city, and the SVG rendering includes styled grid lines and axis labels.

Rrigt
90% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays temperature readings from multiple cities over one week, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time, temperature, and city categories, while `nest()` groups the data by city and `line()` with `curveBasis` generates smooth paths. Axes are rendered with `axisBottom` and `axisLeft`, and the legend is built using a custom function that appends circles and text. Data originates from the Data Canvas - Sense Your City dataset.

RRamin Melikov
88% match
Loading thumbnail…

Temperature - Linechart with multiple lines

This visualization shows a week of temperature readings from multiple cities, with each city represented as a colored line over time. The chart includes axes labeled "Time" and "Temperature," a title, and a color legend identifying each city. Built with React and D3 v5, it uses `d3.csv` to load data, `d3.nest` to group by city, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.line` with `curveBasis` for smooth paths. Axis ticks are styled with grid lines, and lines use `mix-blend-mode: multiply` for overlap.

AAnShed
88% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for cities worldwide, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, and `nest` to group data by city, while `axisBottom` and `axisLeft` render the labeled axes with grid lines. A `colorLegend` function, built with SVG circles and text, maps city names to a `schemeCategory10` palette. The data originates from Data Canvas - Sense Your City, and the chart emphasizes final temperature values by sorting city lines in descending order.

AAmirah Syafiqah
88% match
Loading thumbnail…

Temperature across cities

This example visualizes temperature variations across multiple cities over a one-week period, with each city represented as a distinct colored line. The chart displays time on the x-axis and temperature on the y-axis, and includes a color legend identifying each city. Data is loaded from a CSV file using `d3.csv`. The visualization uses `d3.line` with `curveBasis` to generate smooth paths, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.nest` to group data by city, and `d3.scaleOrdinal` with `schemeCategory10` for colors. A custom `colorLegend` component provides the interactive legend, and the rendering uses SVG with animated transitions on legend updates.

BB Sundaresan
87% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays temperature readings for multiple cities over a one-week period, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A color legend, built from `scaleOrdinal` with `schemeCategory10`, identifies each line. The SVG rendering includes axis labels, a title, and grid lines. Data comes from a CSV file loaded via D3’s `csv` function, with timestamps parsed as dates.

Ssafdarawan
87% match