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 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.

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

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

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

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

89% match

Loading thumbnail…

Line Chart with Multiple Lines

This example shows a week of temperature readings for multiple cities, with each city represented as a separate colored line plotted over time. The chart includes a color legend, labeled axes, and a title, with lines sorted by their final temperature values. It uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, `line` with `curveBasis` for path generation, and `nest` to group data by city. Temperature data is loaded from a CSV file and rendered as an SVG with axis and legend components.

Ssameer1986

87% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis to render smooth, semi-transparent temperature trends per city. Colors are assigned via d3.scaleOrdinal with schemeCategory10, and a custom colorLegend module generates the interactive legend. d3.nest groups measurements by city, while axis labels and a title are added as SVG text elements.

Bbattlescarredshogun

87% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. It uses D3.js v5 with SVG rendering to draw multiple colored lines, each representing a city's temperature over time. The code employs `d3.scaleTime` for the time axis, `d3.scaleLinear` for temperature, and `d3.line` with `curveBasis` for smooth paths. A separate color legend, created via nested selections, identifies each city. The chart includes axis labels and a title, with data loaded from a CSV file.

LLittledevil7

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

87% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of global temperatures across multiple cities, using colored lines to compare trends over time. The visualization uses D3 v5 with SVG rendering, employing `d3.nest` to group data by city and `d3.line` with `curveBasis` for smooth paths. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, while a custom color legend maps city names using `d3.scaleOrdinal` with `schemeCategory10`. Temperature data is loaded from a CSV file sourced from Data Canvas - Sense Your City.

Bbattlescarredshogun

87% match