Line Chart with Multiple Lines

Line Chart with Multiple Lines

A line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Multiple colored lines, one per city, are plotted over time using d3.line with curveBasis interpolation to smooth the paths. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.nest to group data by city, and d3.scaleOrdinal with schemeCategory10 for colors. A custom color legend is rendered alongside axes with tick marks and labels, all created using SVG rendering in d3 v5.

Ssiim1

Line Chart with Multiple Lines

This visualization displays one week of temperature readings for cities worldwide, with each city represented by a smooth, semi-transparent line. The chart uses d3.line with curveBasis to generate paths, d3.scaleTime and d3.scaleLinear for axes, and d3.scaleOrdinal with schemeCategory10 for colors. A custom color legend uses exported functions from colorLegend.js. Data comes from the Data Canvas - Sense Your City dataset, loaded via d3.csv, with nested grouping via d3.nest to separate city series.

Hhuankoh

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

Line chart with multiple lines

This line chart displays one week of temperature data from multiple cities, with each city represented by a distinct colored line from the d3 schemeCategory10 scale. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group measurements by city. A custom colorLegend function renders the categorical color keys, while d3.axisLeft and d3.axisBottom create labeled axes with gridlines. Data comes from the Data Canvas - Sense Your City dataset, loaded via d3.csv and rendered as SVG elements.

TThomas Seberechts

Line Chart with Multiple Lines

A line chart displays one week of temperature readings in Celsius for multiple cities, sourced from the Data Canvas - Sense Your City dataset. The visualization uses d3.line with curveBasis to create smooth paths per city, colored via an ordinal scale from schemeCategory10, and includes axes with gridlines, labels, and a color legend. It relies on d3.csv for data loading, scaleTime and scaleLinear for scales, nest() for grouping by city, and a custom colorLegend module, all rendered as SVG elements with d3.v5.

Iishmam11

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

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

Line Chart - Multiple Lines

This line chart displays one week of temperature data from multiple cities, with a color legend identifying each city and a title reading “A Week of Temperature Around the World.” The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth path generation, and d3.nest to group data by city. D3’s ordinal color scale assigns category colors to each line. The chart includes grid lines from axis ticks and uses SVG rendering, with data sourced from Data Canvas - Sense Your City.

Ggabcoderboi