Fork of Line Chart with Multiple Lines

Fork of 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 multiple colored lines, each representing a different city, with a color legend positioned to the right. The implementation employs d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with schemeCategory10, along with d3.line and curveBasis for smooth paths. Data is loaded via d3.csv and processed with d3.nest, while axes are rendered using d3.axisBottom and d3.axisLeft.

MMaicolJGM

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

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities around the world, sourced from the Data Canvas - Sense Your City initiative. Each colored line represents a city, with dots marking individual readings and a color legend identifying each series. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, `curveBasis`, and `axisLeft`/`axisBottom` to render the SVG. Data is loaded via `csv` and processed from a linked GitHub dataset, while custom axes, gridlines, and a title are generated programmatically.

GGerasimos Katsagannis

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data in cities worldwide, sourced from Data Canvas – Sense Your City. Each colored line represents a city, with a legend using `d3.scaleOrdinal` and `schemeCategory10` to distinguish them. The chart uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with `curveBasis` for smooth paths. D3 v5 renders the SVG, with axes created via `d3.axisLeft` and `d3.axisBottom`, and `d3.nest` groups data by city for plotting.

Eendlesstory

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities worldwide, sourced from Data Canvas – Sense Your City. Each smoothed line, rendered with d3.line and curveBasis, represents a city’s temperature over time, colored using d3.scaleOrdinal with schemeCategory10. The chart includes axes with grid lines, a title, and a custom color legend. The code uses d3.csv for data loading, d3.nest for grouping by city, and d3.scaleTime for the time axis, rendering in SVG.

AAvonlea Fisher

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

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

Fork of Line Chart with Multiple Lines

Ppurplemaestro