Fork of Line Chart with Multiple Lines (Log)

100%

Fork of Line Chart with Multiple Lines (Log)

✓ Published0🌍 Public

Last edited Mar 4, 2021

Created on Mar 4, 2021

Forked from Line Chart with Multiple Lines (Square Root)

This fork of a line chart visualizes one week of temperature readings in cities worldwide, sourced from the Data Canvas - Sense Your City project. The chart uses `d3.scaleLog` for the temperature axis and `d3.scaleTime` for time, with SVG rendering via D3 v5. A legend is rendered with a `colorLegend` function, and circles with value labels are added every 10th data point for Rio de Janeiro. The code nests data by city using `d3.nest` and draws smooth lines with `d3.line` and `d3.curveBasis`.

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 line chart displays a week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. Multiple colored lines represent each city, with a highlight on Rio de Janeiro showing temperature values at regular intervals. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scales, along with d3.nest to group data by city. A custom colorLegend function renders the legend, while axes are generated using d3.axisBottom and d3.axisLeft. The SVG rendering applies d3.line with curveBasis for smooth paths.

BBKirst3

94% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a D3 v5 line chart visualizes one week of temperature data for cities worldwide, sourced from Data Canvas – Sense Your City. The SVG rendering uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Lines are generated via `d3.line` with `d3.curveBasis`, while a custom `colorLegend` function handles the categorical legend. Data is loaded from a CSV, parsed with timestamps converted to `Date` objects, and nested by city using `d3.nest`.

Aabhimanyu-dhar

93% match

Loading thumbnail…

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

93% match

Loading thumbnail…

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.

AAdriana Rodriguez Sanabria

93% 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

93% match

Loading thumbnail…

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 plots temperature over time, using distinct colored lines for each city and a color legend for identification. It is rendered as an SVG using D3 v5, with the code employing `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.line`, and `d3.nest`. The `d3.axisLeft` and `d3.axisBottom` create labeled axes, while a custom `colorLegend` function generates the interactive legend.

AAremu Oluwagbamila (SMOG)

93% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide from the Data Canvas - Sense Your City dataset, with each city rendered as a separate colored line using D3’s `nest` and `scaleOrdinal`. The visualization uses `d3.line` with `curveBasis` for smooth paths, `d3.scaleTime` and `d3.scaleLinear` for axes, and a custom `colorLegend` function for the categorical legend. The SVG includes labeled axes, a title, and gridlines generated via `axisBottom` and `axisLeft`, with lines styled using `mix-blend-mode: multiply`.

Aaditikandoi

93% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart visualizes one week of temperature data in degrees Celsius for cities worldwide, sourced from the Data Canvas "Sense Your City" project. It uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` with a categorical color scheme to distinguish cities. Curves are generated with `d3.line` and `d3.curveBasis`, while a custom `colorLegend` function adds an interactive legend. The SVG rendering relies on `axisBottom` and `axisLeft` for gridlines, with nested data grouped via `d3.nest`.

JJan Medina

93% match