Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
TToooooooT
Last edited Sep 19, 2022
Created on Sep 19, 2022

This line chart displays one week of temperature readings in degrees Celsius for San Francisco, drawn from the Data Canvas - Sense Your City dataset. Multiple colored lines represent individual cities, with a color legend and time-based x-axis. The code uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.nest for grouping data by city. Axes are rendered with d3.axisBottom and d3.axisLeft, while a custom colorLegend module handles the legend.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in San Francisco. The data comes from Data Canvas - Sense Your City.

Made in this video:

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. It plots temperature in degrees Celsius over time, with multiple lines representing different cities. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with d3.curveBasis to generate smooth paths. d3.nest groups data by city, and d3.axisLeft and d3.axisBottom render axes with custom labels.

NNoWizards
97% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for multiple cities in San Francisco, sourced from Data Canvas - Sense Your City. Lines are rendered in SVG using d3.line and d3.curveBasis to smooth the series, with colors assigned via d3.scaleOrdinal and a categorical color scheme. Axes use d3.axisLeft and d3.axisBottom, while a custom colorLegend function draws circles and labels for the city names, and the data is loaded with d3.csv.

NNeepaB
96% match
Loading thumbnail…

Line Chart with multiple lines

This line chart visualizes a week of temperature data in San Francisco, with multiple lines representing different cities and a color legend identifying each one. The data comes from the Data Canvas - Sense Your City dataset. Built with D3 v5, the visualization uses `d3.line` with `curveBasis` for smooth paths, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `schemeCategory10` for colors. Axes include gridlines via `tickSize`, and the chart is rendered as SVG with a title and axis labels.

Zzenoe
95% match
Loading thumbnail…

Line Chart with Multiple Lines_a

This line chart displays one week of temperature data for San Francisco, sourced from Data Canvas’s “Sense Your City” dataset. Multiple city lines are plotted over time, with a color legend distinguishing each location, and the lines use a basis curve for smooth rendering. The visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, and `line` to generate SVG paths. Axes include tick marks and labels, while a title and legend clarify the chart’s content.

NNeepaB
95% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart shows a week of temperature data for San Francisco, with multiple colored lines representing different cities over time. The visualization uses d3.line with curveBasis to create smooth paths, d3.scaleTime and d3.scaleLinear for the x and y axes, and d3.scaleOrdinal with schemeCategory10 for color encoding. Data is loaded via d3.csv from a Data Canvas dataset, with nested grouping via d3.nest and a custom colorLegend component rendering as SVG.

SSagarikaS
94% match
Loading thumbnail…

Line Chart with Multiple Lines

The visualization displays a week of temperature readings for San Francisco as a multi-line chart, with the y-axis labeled "temperature" and the x-axis representing time hourly. It uses D3 v5’s `d3.line` with `curveBasis` to draw each city’s temperature path, grouped by `d3.nest` and colored via `scaleOrdinal` with `schemeCategory10`. The SVG includes axes with `axisLeft` and `axisBottom`, a title, and a color legend built from a custom `colorLegend` component. Data comes from a semicolon-delimited CSV file, and rendering is entirely in SVG.

KKurt J Nilsen
93% match
Loading thumbnail…

Line chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from Data canvas-sense your city. The visualization uses D3 v5 to render an SVG with a time-scaled x-axis and linear y-axis, featuring red circles for individual data points connected by a thick red line path. The code implements `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs, with gridlines and axis labels styled via CSS.

MMuiruriscode
93% match
Loading thumbnail…

Line Chart

This line chart displays one week of temperature (in Celsius) in San Francisco using data from Data Canvas - Sense Your City. The D3 v5 code loads the CSV dataset and maps timestamps to a time scale and temperatures to a linear scale, rendering the smoothed line with a curveBasis generator. SVG axes are customized via axisBottom and axisLeft, with labels and a title added to the visualization.

Ddangquangt
92% match