Line Chart with Multiple Lines

100%

Line Chart with Multiple Lines

✓ Published1🌍 Public

Last edited Nov 7, 2019

Created on Nov 7, 2019

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

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings in degrees Celsius for multiple cities around the world, sourced from the Data Canvas - Sense Your City dataset. Each city is represented by a smooth, colored line, with a color legend identifying the cities and their final temperature values. The visualization uses D3 v5, employing `scaleTime` and `scaleLinear` for the axes, `nest` to group data by city, and `line` with `curveBasis` to generate the paths. The SVG output includes grid lines and labeled axes for time and temperature.

Eec13000ibm

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

98% match

Loading thumbnail…

Line Chart with Multiple Lines

Wwishcsdev

98% 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 city is represented by a distinct colored line, with a legend positioned to the right. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time, temperature, and city categories, respectively. Lines are generated with `d3.line` and `curveBasis` smoothing, while axes are rendered via `axisBottom` and `axisLeft`. Data is loaded from a CSV and nested by city using `d3.nest`.

Bbattlescarredshogun

97% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for cities worldwide, using data from Data Canvas - Sense Your City. Each city is represented by a smooth, color-coded line, with multiple lines overlaid to compare temperature trends over time. Built with D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scaling, `line` with `curveBasis` for path generation, and `nest` to group data by city. Axis labels and a color legend clarify the time, temperature, and city mappings, while SVG rendering and CSS styling support the visual output.

RRamin Melikov

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

97% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius from multiple cities around the world, using data from Data Canvas - Sense Your City. Each city appears as a separate smooth curve, colored via a categorical scale, with a legend positioned to the right. The visualization is built with D3 v5, using `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with `curveBasis` for path generation, and `d3.nest` to group readings by city. An ordinal color scale assigns distinct hues, and a custom color legend renders circles and labels.

SSourav Sarker

97% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from the Data Canvas - Sense Your City initiative. The visualization plots time on the horizontal axis and temperature in degrees Celsius on the vertical axis, with each city represented by a distinct colored line. Built with D3 version 5, the code uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, along with `axisBottom` and `axisLeft` for axes. A `nest` operation groups data by city, and a custom `colorLegend` function renders the categorical color key. Multiple lines are drawn using `line()` with a basis curve, rendered as SVG paths.

Jjesramyep1263

97% match