Line Chart with Multiple Lines

100%

Line Chart with Multiple Lines

✓ Published0🌍 Public

Last edited Oct 3, 2019

Created on Oct 3, 2019

Forked from 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.

AI-generated description

This Line Chart shows one week of temprature in San Francisco city. Data comes from [Data Canvas- Sense your city] https://archive.ics.uci.edu/ml/datasets/auto+mpg

MIT Licensed

Similar vizzes

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

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

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

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

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

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

93% match

Loading thumbnail…

Line Chart with Multiple Lines

This example displays a week of temperature data from San Francisco as a smooth, multi-line chart over time. The visualization uses D3.v5's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a single maroon path, while styling comes from CSS. Data is loaded from a CSV via `csv` and drawn as an SVG, with labeled axes and a title.

Iianleekq

93% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes temperature data from San Francisco over one week, using multiple colored lines to differentiate regions. The chart encodes profit values on the x-axis and segment categories on the y-axis, with color mapping to region through an ordinal scale. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, `line` with `curveBasis`, and `nest` to group data by region. A custom `colorLegend` component displays the color scale, while the SVG rendering includes gridlines, axis labels, and a title.

Ssafdarawan

93% match