Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published2🌍 Public
NNeepaB
Last edited Jan 5, 2021
Created on Jan 5, 2021

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.

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.

MIT Licensed

Similar vizzes

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
97% match
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
96% match
Loading thumbnail…

Line Chart with Multiple Lines

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.

TToooooooT
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
96% 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
95% 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 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.csv to load the data and renders an SVG with multiple lines representing different cities. The chart scales time on the x-axis and temperature on the y-axis using d3.scaleTime and d3.scaleLinear, while d3.scaleOrdinal maps each city to a color from schemeCategory10. The d3.line generator creates each path, and a custom colorLegend function displays the city labels with their corresponding colors.

Ssinsanjeeev
92% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes one week of temperature data from multiple cities, sourced from Data Canvas - Sense Your City. It uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map timestamps, temperatures, and city colors, with d3.nest grouping the data. Rendered as SVG, the chart includes d3.axisBottom and d3.axisLeft with grid lines, and a color legend built via a custom function. Lines are drawn with d3.line using curveBasis, and styled with translucent strokes that blend via CSS mix-blend-mode.

SSadafKay
92% match