Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
LLittledevil7
Last edited Jun 8, 2020
Created on Jun 7, 2020

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.

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 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
98% 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. Each city appears as a distinct colored line, sorted by final temperature, with a legend showing city names. The visualization uses d3-scale for time and linear axes, d3-shape’s line generator with curveBasis smoothing, and d3-scaleOrdinal with schemeCategory10 for colors. Rendering employs SVG within a d3.v5 setup, including axis components and custom color legend logic.

Mmgrundell
97% 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.csv to load the data and renders an SVG with multiple lines representing different cities. The chart scales time on the x-axis and temperature on the y-axis using d3.scaleTime and d3.scaleLinear, while d3.scaleOrdinal maps each city to a color from schemeCategory10. The d3.line generator creates each path, and a custom colorLegend function displays the city labels with their corresponding colors.

Ssinsanjeeev
97% 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. Each city appears as a differently colored line, with a color legend identifying the cities. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smoothing, and d3.nest to group data by city. The SVG rendering includes gridlines, axis labels, and a title, with d3.axisBottom and d3.axisLeft generating the ticks.

OOliver Wills
97% 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 v5 to render SVG paths, with smooth curves generated by the `curveBasis` line generator. A color legend maps each city to a distinct category color, while the chart's nested data structure sorts cities by their final recorded temperature. The temperature values are measured in degrees Celsius across a time series.

Sssdesign
97% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. Each smooth, colored line represents a different city’s temperature over time, with an ordinal color scale and a legend function defined in a separate module. The visualization uses D3 v5’s `csv`, `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `nest` to group data by city. The SVG rendering includes axis labels, a title, and gridlines styled via CSS.

Ddanhuijia
97% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart shows one week of temperature readings in cities worldwide, sourced from Data Canvas - Sense Your City. It plots temperature over time for multiple cities, with each city assigned a unique color from the d3.schemeCategory10 palette and a legend generated via a custom colorLegend component. The visualization uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, d3.axisBottom, and d3.line with curveBasis for smooth curves. Data is loaded via d3.csv, parsed with timestamps converted to Date objects, and rendered as SVG paths with mix-blend-mode styling.

AAegon95
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 dataset. Temperature is plotted over time with distinct colored lines for each city, and a color legend identifies which line corresponds to which location. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `scaleOrdinal` with `schemeCategory10`, `nest` to group data by city, and `line` with `curveBasis` for smoothed paths.

Ssayli-lab
97% match