Skip to main content
SimilarExport ZIP
100%

MULTILINE CHART

✓ Published1🌍 Public
Pprincit
Last edited May 8, 2020
Created on May 8, 2020
Forked from MULTILINE CHART

This multiline chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 with nested line paths to plot temperature over time, with each city assigned a distinct color from the ordinal color scale. The code employs d3.line with curveBasis for smooth curves, d3.nest to group data by city, and custom axis labels and legends rendered as SVG elements.

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…

MULTILINE CHART

This multiline chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 with nested line paths to plot temperature over time, with each city assigned a distinct color from the ordinal color scale. The code employs d3.line with curveBasis for smooth curves, d3.nest to group data by city, and custom axis labels and legends rendered as SVG elements.

Pprincit
100% match
Loading thumbnail…

MULTILINE CHART

This multiline chart displays one week of temperature data across multiple global cities, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map timestamps, temperatures, and city colors, while d3.nest groups readings by city and d3.line with curveBasis draws smoothed paths. An interactive color legend, built with a custom colorLegend function, identifies each city. The SVG rendering includes responsive axes with grid lines, and stroke blending via mix-blend-mode: multiply enhances line overlap.

Ccocktaildata
94% match
Loading thumbnail…

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 D3 v5 to render SVG paths, with smooth curves generated by the `curveBasis` line generator. A color legend maps each city to a distinct category color, while the chart's nested data structure sorts cities by their final recorded temperature. The temperature values are measured in degrees Celsius across a time series.

Sssdesign
93% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays one week of temperature data in degrees Celsius for cities worldwide, sourced from the Data Canvas - Sense Your City project. The multi-line chart plots temperature over time, with each city represented by a distinct colored line and a color legend identifying each location. Built with D3 v5, the code uses d3.nest to group data by city, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis to generate smooth paths. Custom axis labels, gridlines, and a title frame the SVG rendering.

SSagarikaS
92% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for cities worldwide, with data sourced from Data Canvas - Sense Your City. Each city appears as a distinct colored line, sorted by final temperature. The visualization uses d3.line with curveBasis for smoothing, d3.scaleTime and d3.scaleLinear for axes, and d3.nest to group data by city. A custom colorLegend function renders the categorical color scale, while axis labels and a title contextualize the chart.

Ppaularl
92% 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
92% 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. Each city’s temperature over time is drawn as a smooth, multi-hued path using `d3.line`, `curveBasis`, and `d3.nest`. The SVG rendering uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal(schemeCategory10)` for axes and colors, while a custom `colorLegend` function maps city names.

Wwishcsdev
92% 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. Each city’s temperature over time is drawn as a smooth, multi-hued path using `d3.line`, `curveBasis`, and `d3.nest`. The SVG rendering uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal(schemeCategory10)` for axes and colors, while a custom `colorLegend` function maps city names.

Wwishcsdev
92% match