Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public
DDennis Angelov
Last edited Dec 10, 2021
Created on Dec 10, 2021

This visualization presents one week of temperature data from cities worldwide, sourced from the Data Canvas - Sense Your City project. It uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with schemeCategory10 to map timestamps, temperatures, and cities. Multiple paths are drawn with d3.line and curveBasis, colored by city, and sorted by final temperature. A custom colorLegend module displays the city labels, while styled axes and gridlines enhance readability in the SVG rendering.

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…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. It uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city color, with d3.line and curveBasis generating smooth paths. The chart renders in SVG and includes a custom colorLegend function for city labels. Data is loaded via d3.csv, and axes are created with d3.axisBottom and d3.axisLeft.

Ppurplemaestro
97% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. It uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city color, with d3.line and curveBasis generating smooth paths. The chart renders in SVG and includes a custom colorLegend function for city labels. Data is loaded via d3.csv, and axes are created with d3.axisBottom and d3.axisLeft.

Ppurplemaestro
97% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays a week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city color, respectively, while d3.line and d3.curveBasis generate smooth paths for each city's temperature trend. The chart includes axes with tick marks, a color legend, and a title, with the SVG rendered directly on the page.

Ddasari234
97% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This chart displays a week of temperature data from cities worldwide, sourced from Data Canvas - Sense Your City, with each city represented by a differently colored line. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.nest to group data by city, and d3.line with curveBasis for smooth line generation. A custom colorLegend component renders the scale, while axis labels and a title complement the SVG rendering.

GGerasimos Katsagannis
97% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a line chart displays a week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 to render multiple lines in SVG, with each line representing a city. The code constructs time and linear scales for the axes, and applies a curve basis smoothing to the line paths. It also includes a custom color legend component and sorts the city lines in descending order based on their final temperature value.

DDaniel Tkach
97% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization shows a week of temperature data for cities around the world, with each city represented by a colored line plotted against time and temperature axes. The chart uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with d3.schemeCategory10 to map data values, while d3.line with curveBasis generates the smoothed paths. A custom colorLegend displays the city names, and the data comes from the Data Canvas - Sense Your City project, loaded from a CSV file. The SVG rendering includes axis labels, grid lines, and a title, with the line paths styled using mix-blend-mode for visual distinction.

Bbindhureddy98
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities worldwide, sourced from the Data Canvas - Sense Your City project. Using d3.csv to load data and d3.nest to group by city, the visualization renders multiple temperature trends over time with d3.line, applying a curved basis interpolation. The chart includes custom axes with d3.axisLeft and d3.axisBottom, a categorical color scale using d3.scaleOrdinal with schemeCategory10, and a legend generated from a separate colorLegend function. The SVG output features semi-transparent lines with mix-blend-mode for overlapping clarity.

Mmtan8
96% match
Loading thumbnail…

Fork of 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. Each city is represented by a distinct colored line, with time on the x-axis and temperature on the y-axis, sorted by each city's final temperature reading. The visualization uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line, d3.curveBasis, d3.nest, and d3.axisBottom/axisLeft to render the chart and its axes. A custom colorLegend function draws the categorical legend, and the SVG output includes styled grid lines and labels.

Jjwadh
96% match