Line Chart with Multiple Lines

100%

Line Chart with Multiple Lines

✓ Published1🌍 Public

Last edited Aug 11, 2020

Created on Aug 5, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes a week of temperature data in San Francisco, using D3 v5 to render an SVG. The code loads CSV data from a remote URL, parses timestamps and numeric temperatures, and scales the axes with `scaleTime` and `scaleLinear`. It draws a single smoothed line via `d3.line` with the `curveBasis` curve, and includes styled grid lines, axis labels, and a title. The line path uses a thick gray stroke, while the axis tick labels and titles are styled through CSS classes.

Ggilbster

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

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

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

93% match

Loading thumbnail…

Line Chart

This line chart visualizes a week of temperature data in San Francisco, plotting temperature against time with a smooth curved line and semi-transparent circular markers for each data point. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line()` with `curveBasis` for the smooth path, and `axisBottom` and `axisLeft` for labeled, grid-lined scales. Data is loaded as CSV from a remote dataset and parsed into numeric and date formats before rendering.

Vvic126

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

93% match

Loading thumbnail…

Line chart

This line chart visualizes a week of temperature data in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses SVG rendering with D3 v5, employing scales like `scaleTime` and `scaleLinear`, along with `axisBottom` and `axisLeft` for the axes. The line is drawn using D3’s `line` generator with a basis curve to smooth the path. Data comes from a CSV file loaded via `csv`, and the chart includes labeled axes and a title.

Jjsong

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