Line Chart with Multiple Lines (Square Root)

100%

Line Chart with Multiple Lines (Square Root)

✓ Published1🌍 Public

Last edited Mar 7, 2021

Created on Mar 4, 2021

Forked from Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. It uses D3's `scaleTime` and `scaleSqrt` to map time and temperature, with multiple lines colored via `scaleOrdinal` and `schemeCategory10`. The visualization emphasizes Rio de Janeiro by showing its data points as circles and value labels, while a legend indicates rank. The code leverages D3's `nest` for grouping, `line` with `curveBasis` for smoothing, and renders as an SVG with styled paths and axis labels.

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…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings (in degrees Celsius) from cities worldwide, sourced from Data Canvas - Sense Your City data. The chart plots each city as a separate colored line, using a smooth curve (curveBasis) to connect temperature measurements over time. The visualization is rendered as an SVG using d3.v5, leveraging scales and axes from `scaleTime`, `scaleLinear`, and `axisLeft`/`axisBottom`. The code nests data by city with `nest()`, assigns categorical colors via `scaleOrdinal(schemeCategory10)`, and includes a custom color legend built through the `colorLegend` function.

Ssleyus

90% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Each city is represented by a distinct colored line, with a legend positioned to the right. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time, temperature, and city categories, respectively. Lines are generated with `d3.line` and `curveBasis` smoothing, while axes are rendered via `axisBottom` and `axisLeft`. Data is loaded from a CSV and nested by city using `d3.nest`.

Bbattlescarredshogun

90% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City, with each line representing a different city. The visualization aggregates the data using a nested hierarchy and renders the result as SVG paths, with color encoding to distinguish between cities. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `nest` to process the data, while `axisBottom`, `axisLeft`, and a custom `colorLegend` module handle the axes and legend. The chart includes a time-based x-axis, a linear y-axis, and a categorical color scale with a legend.

Uu148

90% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Each line represents a city, with time on the x-axis and temperature on the y-axis, using a basis curve for smooth paths and a color legend to identify cities. The visualization is built with D3 v5, rendering as SVG, and uses `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.line`, `d3.nest`, and `d3.schemeCategory10` for color mapping. Gridlines and axis labels provide context, while paths are styled with mix-blend-mode for overlapping lines.

Gglimpsedchaos

90% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for cities worldwide, using data from Data Canvas - Sense Your City. Each city is represented by a smooth, color-coded line, with multiple lines overlaid to compare temperature trends over time. Built with D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scaling, `line` with `curveBasis` for path generation, and `nest` to group data by city. Axis labels and a color legend clarify the time, temperature, and city mappings, while SVG rendering and CSS styling support the visual output.

RRamin Melikov

90% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature data (in degrees Celsius) for cities worldwide, sourced from Data Canvas - Sense Your City. It uses D3 v5 to render an SVG visualization, with the `scaleTime` and `scaleLinear` functions mapping timestamps and temperatures to axes. The chart includes multiple smoothed lines (`line` with `curveBasis`) colored by city via a `scaleOrdinal` color scale, a legend built with a custom `colorLegend` function, and grid lines generated by `axisBottom` and `axisLeft`.

FFelipe Maion

90% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from the Data Canvas - Sense Your City initiative. The visualization plots time on the horizontal axis and temperature in degrees Celsius on the vertical axis, with each city represented by a distinct colored line. Built with D3 version 5, the code uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, along with `axisBottom` and `axisLeft` for axes. A `nest` operation groups data by city, and a custom `colorLegend` function renders the categorical color key. Multiple lines are drawn using `line()` with a basis curve, rendered as SVG paths.

Jjesramyep1263

90% match

Loading thumbnail…

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 line represents a city, color-coded using `d3.scaleOrdinal` with `schemeCategory10`, and plotted over time with `d3.scaleTime` and `d3.scaleLinear`. The visualization uses `d3.line` with `curveBasis` for smooth curves, `d3.nest` to group data by city, and a custom `colorLegend` function rendered as SVG. Axes are created via `d3.axisBottom` and `d3.axisLeft`, with gridlines and a title, all styled through the SVG.

BBen Rambo-Martin

89% match