Skip to main content
SimilarExport ZIP
100%

MULTILINE CHART

✓ Published0🌍 Public
Pprincit
Last edited Apr 30, 2020
Created on Apr 30, 2020
Forked from MULTILINE CHART

This example shows how profit evolved over time for different regions using a multiline chart. The visualization uses d3.line with curveBasis to generate smooth paths, and d3.scaleTime and d3.scaleLinear for the axes. Data is loaded from a CSV file and nested by region using d3.nest. A custom color legend is rendered alongside the chart, and the SVG display includes axis labels and a title.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

MULTILINE CHART

This multiline chart compares profit across sub-categories for different regions, with each region represented by a distinct colored line. The visualization uses d3.nest() to group data by region and d3.line() with curveBasis to generate smooth paths, while d3.scaleOrdinal with schemeCategory10 assigns colors. A custom colorLegend component renders the region labels. Profit values are parsed from a CSV file containing sample sales data, and the chart includes axes with gridlines, a title, and axis labels.

Pprincit
90% match
Loading thumbnail…

Multiline chart

This multiline chart displays profit trends across regions over time, with each line representing a region and colored via a categorical scale. Built with D3 v5, the visualization uses `d3.nest` to group data by region, `d3.line` with `d3.curveBasis` for smooth paths, and custom axis and legend components. The data, sourced from Data Canvas - Sense Your City, is loaded from a CSV and rendered as SVG.

Ii202081
89% match
Loading thumbnail…

MULTILINE MOOD

This visualization displays profit trends across product sub-categories, with each line representing a different region. The chart uses a basis curve to smooth the multi-line paths, and a color legend identifies each region. Built with D3 v5 and Vue, the code employs `d3.nest()` to group data by region and `d3.scaleOrdinal` for color mapping. The SVG rendering includes axes with gridlines, and the data comes from a CSV file containing sales records.

Pprincit
88% match
Loading thumbnail…

MULTILINE CHART

This multiline chart compares profit across product sub-categories for different regions, using color to distinguish each region. Built with D3 v5, it renders an SVG with a time-scaled x-axis, linear y-axis, and a legend via the custom `colorLegend` function. Data is loaded from a CSV file and processed with `d3.nest()`, then lines are drawn using `d3.line()` with `curveBasis` smoothing.

Pprincit
87% 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
84% match
Loading thumbnail…

Line Chart with Multiple Lines

This example displays CO2 emissions by country, plotting profit against sub-category over time, with each region represented by a distinct colored line. The visualization uses D3 v5 within a Vue framework, rendering to SVG. It employs `d3.line` with `curveBasis`, `d3.nest` to group data by region, and `d3.scaleOrdinal` with `schemeCategory10` for coloring. Axis labels and legends are added via `d3.axisLeft`, `d3.axisBottom`, and a custom `colorLegend` function, based on sample data from annualco2.csv.

Pprincit
81% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart compares profit by sub-category for different customer segments and regions. It shows multiple colored lines, each representing a region, plotted across sub-categories with profit values on the y-axis. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleOrdinal`, `nest`, `line`, and `curveBasis` to aggregate and smooth the data. A color legend, built with `colorLegend`, identifies each region. The data, sourced from Data Canvas - Sense Your City, is loaded from a CSV and rendered as an SVG.

Ssafdarawan
79% match
Loading thumbnail…

MULTILINE MELTED

This visualization shows population change over time as a set of semitransparent, overlapping lines, with each line representing a different region and a color legend on the right. The data comes from a CSV file containing UN population estimates and projections, melted into a tidy format before rendering. Built with D3 v5, the code uses `d3.nest()` to group data by region, `d3.line()` with `curveBasis` for smooth paths, and `d3.scaleOrdinal` with `schemeCategory10` for colors. The chart is rendered as SVG with axes, gridlines, and a custom color legend component.

Pprincit
78% match