Line Chart with Multiple Lines

100%

Line Chart with Multiple Lines

✓ Published0🌍 Public

Last edited Jun 12, 2020

Created on Jun 11, 2020

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

AI-generated description

This Scatter plot shows one week temperature in San Francisco.

MIT Licensed

Similar vizzes

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

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

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

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

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

91% match

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

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

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

90% match