Line Chart with multiple lines

100%

Line Chart with multiple lines

✓ Published1🌍 Public

Last edited Aug 25, 2019

Created on Aug 24, 2019

This line chart displays temperature readings from cities around the world over a one-week period, with each city represented by a colored line. The visualization uses D3 v5, rendering SVG paths with a spline curve (`curveBasis`) and a categorical color scale (`scaleOrdinal` with `schemeCategory10`). A legend, generated via a custom `colorLegend` component, identifies each city. The data comes from the Data Canvas Sense Your City project, loaded with `csv()`, and the chart includes labeled axes and a title.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities around the world, with each city represented by a colored line. The visualization uses d3.line with curveBasis to smooth the temperature trajectories, while d3.scaleTime and d3.scaleLinear map time and temperature values to positions. A custom colorLegend function renders the categorical color scale using d3.scaleOrdinal. Data comes from Data Canvas - Sense Your City, loaded via d3.csv, and is rendered as SVG paths with a multiply blend mode.

FFazerl

96% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from multiple cities worldwide, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line()` with `curveBasis`, and `nest()` to group measurements by city. The SVG rendering features gridlines, axis labels, and a title, with the data sourced from Data Canvas - Sense Your City and loaded as CSV. Lines are sorted by their final temperature value for comparison.

JJef

96% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart shows one week of temperature readings in cities worldwide, sourced from Data Canvas - Sense Your City. It plots temperature over time for multiple cities, with each city assigned a unique color from the d3.schemeCategory10 palette and a legend generated via a custom colorLegend component. The visualization uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, d3.axisBottom, and d3.line with curveBasis for smooth curves. Data is loaded via d3.csv, parsed with timestamps converted to Date objects, and rendered as SVG paths with mix-blend-mode styling.

AAegon95

96% 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. It uses D3.js v5 with SVG rendering to draw multiple colored lines, each representing a city's temperature over time. The code employs `d3.scaleTime` for the time axis, `d3.scaleLinear` for temperature, and `d3.line` with `curveBasis` for smooth paths. A separate color legend, created via nested selections, identifies each city. The chart includes axis labels and a title, with data loaded from a CSV file.

LLittledevil7

95% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings from multiple cities around the world, with each city represented by a distinct colored line plotted over time. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `curveBasis`, and `d3.nest` to group data by city. A color legend built with `d3.scaleOrdinal` and `schemeCategory10` identifies each line. The data comes from a CSV file loaded via `d3.csv` and rendered with custom axes, grid lines, and a title.

EEllednera

95% match

Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays one week of temperature readings for cities worldwide, with each city represented by a smooth, semi-transparent line. The chart uses d3.line with curveBasis to generate paths, d3.scaleTime and d3.scaleLinear for axes, and d3.scaleOrdinal with schemeCategory10 for colors. A custom color legend uses exported functions from colorLegend.js. Data comes from the Data Canvas - Sense Your City dataset, loaded via d3.csv, with nested grouping via d3.nest to separate city series.

Hhuankoh

95% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities around the world, with each city represented by a distinct colored line. The chart uses a time-scaled x-axis and linear temperature scale, with legend and axis labels for readability. Built with D3 v5, the code employs `d3.line` with `curveBasis` for smooth paths, `d3.nest` for grouping by city, and `scaleOrdinal` with `schemeCategory10` for colors. Data originates from Data Canvas - Sense Your City, rendered as SVG in an HTML page.

PPhilRG

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

95% match