Line Chart with Multiple Lines

100%

Line Chart with Multiple Lines

✓ Published0🌍 Public

Last edited Jan 31, 2020

Created on Jan 31, 2020

Forked from Line Chart with Multiple Lines

This visualization displays one week of temperature data from cities worldwide, using a multiline chart to compare trends over time in degrees Celsius. Each city’s temperature series is drawn as a distinct colored path, with a color legend identifying the cities. The chart is built with D3 v5, using scales and axes for time and temperature, and the `line` generator with `curveBasis` for smoothing. Data is loaded from a CSV, parsed, and nested by city, with rendering handled via SVG.

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 one week of temperature readings in degrees Celsius across multiple world cities, with each city represented by a distinct colored line. The visualization uses D3 v5’s scaleTime, scaleLinear, scaleOrdinal, and nest to group data by city, while a line generator with curveBasis smooths each temperature trend. A color legend, rendered via a custom colorLegend module, identifies the cities. The data comes from the Data Canvas - Sense Your City dataset, loaded as CSV, and the chart is drawn as SVG with gridlines and axis labels.

JJosé

95% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data across multiple cities worldwide, with each city represented by a distinct colored line plotted over time. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values, while d3.line with curveBasis generates the smoothed paths. A nested data structure organizes measurements by city, and a custom colorLegend component renders the categorical scale using d3.scaleOrdinal with schemeCategory10. The chart includes gridlines, axis labels, and a title, with data loaded from a CSV file.

Ssafdarawan

95% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from multiple cities worldwide, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line()` with `curveBasis`, and `nest()` to group measurements by city. The SVG rendering features gridlines, axis labels, and a title, with the data sourced from Data Canvas - Sense Your City and loaded as CSV. Lines are sorted by their final temperature value for comparison.

JJef

95% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for multiple cities worldwide, with each city represented by a colored line and a categorical legend. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group data by city. Data comes from Data Canvas - Sense Your City, rendered as SVG with a color legend built from d3.scaleOrdinal and schemeCategory10. The chart includes gridlines from axis ticks and a title.

KKarkG

95% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities around the world, sourced from Data Canvas - Sense Your City. Multiple colored lines, one per city, show temperature trends over time, with a color legend identifying each city. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for path generation, and d3.nest to group data by city. The SVG rendering includes gridlines, axis labels, and a title.

SSarahKiyani

95% match

Loading thumbnail…

Line Chart with Multiple Lines

This visualization shows one week of temperature data in degrees Celsius for cities around the world, with each city represented by a colored line. The chart uses d3.scaleTime for the time axis, d3.scaleLinear for temperature, and d3.scaleOrdinal with schemeCategory10 for city colors. Lines are generated with d3.line and curveBasis, while d3.nest groups measurements by city. A color legend is rendered using a custom component, and the data comes from the Data Canvas - Sense Your City project.

SSagar Malviya

95% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities around the world, with each city represented by a colored line. The visualization uses d3.line with curveBasis to smooth the temperature trajectories, while d3.scaleTime and d3.scaleLinear map time and temperature values to positions. A custom colorLegend function renders the categorical color scale using d3.scaleOrdinal. Data comes from Data Canvas - Sense Your City, loaded via d3.csv, and is rendered as SVG paths with a multiply blend mode.

FFazerl

95% 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. The visualization plots temperature over time, with each city represented by a colored line and a legend identifying the cities. It uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, d3.nest to group by city, and d3.line with curveBasis for smooth paths. The SVG rendering includes gridlines, axis labels, and a custom color legend built with d3.scaleOrdinal and schemeCategory10.

Ssiim1

95% match