Line Chart temperature

100%

Line Chart temperature

✓ Published1🌍 Public

Last edited Jan 6, 2020

Created on Jan 6, 2020

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.

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…

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

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

93% match

Loading thumbnail…

Line Chart with Multiple Lines

Wwishcsdev

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

93% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings (in degrees Celsius) from cities worldwide, sourced from Data Canvas - Sense Your City data. The chart plots each city as a separate colored line, using a smooth curve (curveBasis) to connect temperature measurements over time. The visualization is rendered as an SVG using d3.v5, leveraging scales and axes from `scaleTime`, `scaleLinear`, and `axisLeft`/`axisBottom`. The code nests data by city with `nest()`, assigns categorical colors via `scaleOrdinal(schemeCategory10)`, and includes a custom color legend built through the `colorLegend` function.

Ssleyus

93% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius from cities around the world, sourced from Data Canvas - Sense Your City. Each city appears as a separate smoothed line, color-coded using a categorical scale, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `curveBasis`, and `d3.nest` to group data by city. A custom color legend and gridlines with axis labels complete the chart.

Eec13000ibm

93% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Each line represents a city, with time on the x-axis and temperature on the y-axis, using a basis curve for smooth paths and a color legend to identify cities. The visualization is built with D3 v5, rendering as SVG, and uses `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.line`, `d3.nest`, and `d3.schemeCategory10` for color mapping. Gridlines and axis labels provide context, while paths are styled with mix-blend-mode for overlapping lines.

Gglimpsedchaos

93% 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. It uses D3 v5 to render an SVG visualization, with the `scaleTime` and `scaleLinear` functions mapping timestamps and temperatures to axes. The chart includes multiple smoothed lines (`line` with `curveBasis`) colored by city via a `scaleOrdinal` color scale, a legend built with a custom `colorLegend` function, and grid lines generated by `axisBottom` and `axisLeft`.

FFelipe Maion

93% match