Line Chart with Multiple Lines

100%

Line Chart with Multiple Lines

✓ Published0🌍 Public

Last edited Jul 27, 2019

Created on Jul 27, 2019

Forked from Line Chart with Multiple Lines

This line chart displays how vessel valuations change over time, with each line representing a different vessel and color-coded according to a categorical scale. The data comes from a CSV file loaded from VizHub. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest` for grouping, and `axisLeft`/`axisBottom` for axes, rendering to SVG with a custom `colorLegend` function.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Nnicolekevans

79% match

Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays temperature readings from multiple cities over a one-week period, with each city represented by a distinct colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A custom `colorLegend` component renders ordinal color categories, while axis labels and a title annotate the SVG output. The data is loaded from a CSV hosted on VizHub.

Ffahmijaafar

77% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays multiple time series from the Olympic dataset, with each line representing a different country or category. The visualization uses D3 v5’s `d3.line` and `d3.scaleTime` generators to map CSV data to SVG paths, while axes are rendered via `d3.axisBottom` and `d3.axisLeft`. React manages the component lifecycle, and the SVG output is styled with external CSS. The chart focuses on comparing trends across series, with each line distinguished by color and label.

MMuriel

77% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays multi-year budget estimates for Block IV SSN submarines, with each line representing a different submarine class and its projected delivery dates. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for both axes, `scaleOrdinal` for color mapping, and a `line` generator with `curveBasis` smoothing. A color legend is built using a custom `colorLegend` function, while the data is sourced from Data Canvas - Sense Your City and processed via D3's `nest` and `descending` sorting to order the lines.

SSean Moore

77% match

Loading thumbnail…

LineChart with Multiple Lines

A multi-line chart displays a week of temperature readings across multiple cities, with each city represented by a distinct colored line and a color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` generator with `curveBasis`, and `nest` to group data by city, while `axisBottom` and `axisLeft` render labeled axes. Data is loaded from a CSV file, and the chart is drawn as SVG with a title and a custom color legend.

Ccornshoots

76% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings from multiple cities, with each city represented by a colored, smoothed line. The visualization uses D3 v5's `nest()` to group data by city and `scaleTime`/`scaleLinear` for axes. A custom `colorLegend` component renders the categorical color scale, while `axisBottom` and `axisLeft` include gridlines. Data comes from a CSV file loaded via `csv()`, and the SVG rendering applies a multiply blend mode to overlapping lines.

Aannadehtiarova

76% match

Loading thumbnail…

LineChart+ColorLegend

A multi-line chart displays patient biomarker values over time, with each line representing a different marker and a color legend identifying them. The visualization uses D3 v5 within a React application, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for path generation, and `scaleOrdinal` with `schemeSet1` for colors. Data comes from a CSV file loaded via `d3.csv`, and hovering over a line highlights it while dimming others.

Ppplomith

76% match

Loading thumbnail…

Line chart with multiple lines

This visualization shows profit trends across product sub-categories over time, with multiple colored lines representing different states and a legend that filters lines by click. The chart uses d3.csv for data loading, d3.nest to group data by state, d3.scaleLinear for both axes, and d3.line with curveBasis for smooth line paths. A colorLegend component (built with D3 selections) enables interactive highlighting by dimming non-selected states. The SVG rendering includes axes with d3.axisLeft and d3.axisBottom, while the data comes from a CSV file with order details.

Pprincit

76% match