Skip to main content
SimilarExport ZIP
100%

Multiline chart

✓ Published0🌍 Public
Ii202081
Last edited May 31, 2020
Created on May 29, 2020

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.

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…

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.

Pprincit
89% match
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
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…

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
85% 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
84% 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
80% match
Loading thumbnail…

MULTILINE CHART

This multiline chart displays one week of temperature data across multiple global cities, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map timestamps, temperatures, and city colors, while d3.nest groups readings by city and d3.line with curveBasis draws smoothed paths. An interactive color legend, built with a custom colorLegend function, identifies each city. The SVG rendering includes responsive axes with grid lines, and stroke blending via mix-blend-mode: multiply enhances line overlap.

Ccocktaildata
79% match
Loading thumbnail…

MultiLine Chart

This multi-line chart displays temperature measurements over time for multiple cities, with each city represented by a distinct colored line. The visualization uses d3.csv to load the dataset and d3.nest to group data by city, then renders smooth curves with d3.line and curveBasis. Axes are created using d3.axisLeft and d3.axisBottom, with scales from d3.scaleTime and d3.scaleLinear, while colors are assigned via d3.scaleOrdinal with schemeCategory10. SVG rendering with grid lines and axis labels completes the chart.

PPabloReyesBetanzo
79% match