Fork of Line Chart with Multiple Lines

Fork of Line Chart with Multiple Lines

This line chart visualizes a week of temperature data from cities worldwide, sourced from Data Canvas - Sense Your City. The chart uses D3 v5 to render multiple smoothed lines, one per city, with a color-coded legend. It employs `scaleTime` and `scaleLinear` for axes, `nest` to group data by city, and `curveBasis` for line smoothing. The SVG rendering includes a title, axis labels, and a custom color legend, with city lines sorted by their final temperature values.

JJspring42

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

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 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.

DDennis Angelov

AAdriana Rodriguez Sanabria

Fork of Line Chart with Multiple Lines

This fork of a line chart shows one week of temperature readings in Celsius for cities worldwide, using data from Data Canvas - Sense Your City. Each city appears as a smoothed, semi-transparent line with a corresponding color legend. The visualization employs d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, d3.nest, and d3.axisBottom/axisLeft to render SVG paths and axes, with a custom colorLegend module.

Fork of Line Chart with Multiple Lines

A fork of a line chart displays one week of temperature data for cities worldwide, sourced from the Data Canvas - Sense Your City dataset. The visualization uses d3.scaleTime and d3.scaleLinear axes with a d3.line generator and curveBasis to draw smooth paths, colored by city via d3.scaleOrdinal. A custom colorLegend component renders the categorical legend. The SVG is rendered with d3.nest to group data by city, and axes include tick marks and labels.

DDino

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