Skip to main content
SimilarExport ZIP
100%

My first Line Chart temperature

✓ Published2🌍 Public
HHessamLa
Last edited Jan 10, 2020
Created on Jan 9, 2020

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.

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

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.

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

Temperature in multiple cities Line Chart

A line chart displays a week of temperature readings across multiple cities, with each city rendered as a distinct colored path sorted by its final temperature. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, d3.nest to group by city, and d3.line with curveBasis for smooth paths. A custom colorLegend component generates the ordinal color scale legend, while SVG rendering includes labeled axes and a title.

HHasideluxe
82% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Each city’s temperature over time is drawn as a smooth, multi-hued path using `d3.line`, `curveBasis`, and `d3.nest`. The SVG rendering uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal(schemeCategory10)` for axes and colors, while a custom `colorLegend` function maps city names.

Wwishcsdev
82% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Each city’s temperature over time is drawn as a smooth, multi-hued path using `d3.line`, `curveBasis`, and `d3.nest`. The SVG rendering uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal(schemeCategory10)` for axes and colors, while a custom `colorLegend` function maps city names.

Wwishcsdev
82% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings in degrees Celsius across multiple global cities, with each city represented by a colored line. The visualization uses d3.scaleTime and d3.scaleLinear to map time and temperature axes, while d3.nest groups the data by city for individual line paths generated with d3.line and curveBasis. A custom colorLegend component renders the categorical color scale using d3.scaleOrdinal. The data comes from Data Canvas - Sense Your City, and the SVG rendering includes gridlines, axis labels, and a title.

Aajaykumar2014
82% match
Loading thumbnail…

Line Chart with Multiple Lines

A line chart displays a week of temperature readings in Celsius for cities worldwide, with each city’s data as a distinct colored line. The visualization prioritizes readability by ordering lines by their final temperature value and using semi-transparent strokes. It uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, `nest()` to group data by city, and a custom color legend module. Data comes from the Data Canvas - Sense Your City dataset, rendered as an SVG with axis labels and a title.

BBiki Deka
82% match