My first Line Chart temperature

100%

My first Line Chart temperature

✓ Published0🌍 Public

Last edited Jan 10, 2020

Created on Jan 10, 2020

Forked from My first Line Chart temperature

This line chart displays temperature variations over time for multiple cities, using color-coded lines to distinguish each city. The visualization includes a smoothed curve fitting via the `curveBasis` function and a color legend for city identification. Built with D3 v5, the chart uses SVG rendering and reads data from a CSV file, with animated transitions in the legend. The time and temperature axes are labeled, and the data is nested by city using the `nest()` function before being plotted.

AI-generated description

A line chart shows that the temperature in degrees Celcius. The data comes from Data Canvas

MIT Licensed

Similar vizzes

Loading thumbnail…

My first Line Chart temperature

This line chart visualizes temperature trends across multiple cities over a week, with each city represented as a colored line and a legend identifying the color mapping. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, and `nest` to group data by city, while `axisBottom` and `axisLeft` render labeled axes. Data is loaded from a CSV file using `d3.csv`. The chart is rendered as SVG with an animated color legend that transitions its appearance over one second, and the code includes a working example using temperature data from Data Canvas.

HHessamLa

91% match

Loading thumbnail…

My first Line Chart temperature

A multi-line chart displays temperature in degrees Celsius over time, with each line representing a different city. The visualization uses D3.js v5 to render SVG paths with rounded curves, scales time and linear axes, and includes an interactive color legend. Data is loaded asynchronously from a remote CSV file, and lines are sorted by their final temperature value using a nested data structure.

HHessamLa

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

85% match

Loading thumbnail…

Line Chart temperature

A line chart displays temperature readings in degrees Celsius across a week for multiple cities, with each city’s data drawn as a colored, smoothed path. The visualization renders in SVG with animation, using D3 v5’s `scaleTime`, `scaleLinear`, `line`, `curveBasis`, and `nest` to group data by city. A `colorLegend` component, built with `scaleOrdinal` and `schemeCategory10`, identifies each series. The data comes from the Data Canvas “Sense Your City” dataset, fetched via `d3.csv`. Axis ticks include gridlines, and the chart includes a rotating y-axis label and a title.

Ggilbster

84% match

Loading thumbnail…

Multiple line Chart

This visualization displays temperature trends over time for multiple cities, with each city represented by a distinct colored line and labeled in a legend. The lines are smoothed using `curveBasis` and data is grouped by city via `d3.nest()`, while axes and scales are built with `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The color scale uses `d3.scaleOrdinal` with `schemeCategory10`, and the SVG rendering includes styled grid lines and a title. Data is loaded as CSV from an external URL.

AAjit Singh

84% match

Loading thumbnail…

D3 Line Chart with Multiple Lines

This example displays temperature readings from multiple cities over time as smoothed, multi-hued lines, with a color legend identifying each city. It uses the D3 v5 library, building the chart with SVG and relying on `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map data. Data is loaded from a CSV file, and lines are generated using `line` with `curveBasis`, while axes use `axisBottom` and `axisLeft`. The visualization also employs a custom `colorLegend` function to render the categorical color key.

JJunilo Pagobo

83% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays temperature trends for multiple cities over time, with each city represented by a colored line and a corresponding color legend. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group data by city. SVG rendering includes gridlines via axis tick marks, while d3.scaleOrdinal with schemeCategory10 assigns line colors.

Eedxiao97

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

83% match