multi-line Chart in D3

100%

multi-line Chart in D3

✓ Published0🌍 Public

Last edited Mar 14, 2024

Created on Mar 11, 2024

This multi-line chart visualizes the average daily cigarette consumption among smokers in the top five countries from 1980 to 2012, using data from the CORGIS smoking dataset. The chart displays five distinct colored lines, one per country, with dots marking individual yearly data points. Built with D3 v7, the visualization employs `d3.csv` to load data, `d3.group` to organize by country, and `d3.scaleLinear` for both axes. The color scale uses a ColorBrewer qualitative scheme, while the legend is generated using the d3-legend library's `d3.legendColor` function. The SVG rendering includes labeled axes and a title.

AI-generated description

Multi-line Chart visualization of the average amount of cigarettes smoked per day by smokers of only top 5 countries from the CORGIS dataset 'https://corgis-edu.github.io/corgis/csv/smoking/' in D3. Color legend from Susie Lu and colorbrewer.

MIT Licensed

Similar vizzes

Loading thumbnail…

Small multiple line chart in D3

This small multiple line chart displays the average daily cigarette consumption for smokers across eight countries between the years 2000 and 2010, using data from the CORGIS smoking dataset. Each country’s time series is rendered as a separate line within a small SVG panel, with a shared y-axis scale, while a categorical color legend distinguishes the countries. The visualization is built with D3 v7, using `d3.csv` for data loading, `d3.scaleLinear` for axes, `d3.line` for path generation, and `d3.legendColor` for the color key. The color palette comes from ColorBrewer, and the overall layout follows a referenced small-multiple line chart pattern.

EEunice Tu

95% match

Loading thumbnail…

A7 Line

This line chart, created with D3, visualizes the trend of smoking prevalence (as a percentage of total population) from 1980 onward across several Asian countries and the World. The x-axis encodes time using a time scale, while the y-axis maps the percentage of smokers. Each line represents a country, distinguished by color via an ordinal scale, with a legend included. The visualization uses a cleaned dataset from the CSV, filtering for countries like China, India, Pakistan, Sri Lanka, and the World, to compare smoking trends. The chart includes labeled axes, a title, and a legend, making it easy to compare the trajectories across these regions. The example demonstrates how to build a multi-series line chart with D3.js, including data loading, nested data grouping, scales, axes, and legends. The visualization is rendered in SVG.

RRavneet Singh Bhatia

82% match

Loading thumbnail…

A5 Line Chart D3

This line chart displays the percentage of smokers in the United States from 1980 to 2012, comparing total, male, and female rates over time. It uses d3.csv to load data from smokersus.csv, d3.scaleBand and d3.scaleLinear for axes, and d3.line to generate three separate paths for each demographic group. Circles are drawn using SVG circle elements with hover tooltips created via appended title tags. The chart is rendered as an SVG element sized to the window dimensions, with color-coded points and lines for each category.

EEric Yao

82% match

Loading thumbnail…

A7 Small Multiples of Line Chart

This visualization employs a small multiples layout to compare smoking prevalence trends across three countries—China, Pakistan, and India—from the "smoking.csv" dataset. Each panel contains a line chart with time on the x-axis and smoking rate on the y-axis, encoded with a distinct color. The SVG is rendered using D3.js, with each country's data isolated via grouping and plotted in its own cell. The use of small multiples allows for easy comparison of trends over time, while the legend and axes provide context. The design emphasizes clarity through consistent scales and minimal visual noise, enabling viewers to focus on the shape of each line. The example demonstrates the power of small multiples for comparative analysis, though it leaves room for interactive enhancements.

RRavneet Singh Bhatia

79% match

Loading thumbnail…

A6 Barchart D3

This example visualizes the percentage of smokers in the United States from 1980 to 2012 using a vertical bar chart. Each bar’s height and color encode the recorded percentage value, with a sequential blue color scale mapped via `d3.scaleSequential` and `d3.interpolateBlues`. The chart includes axes, labels, a title, and a legend generated with the `d3-legend` library’s `d3.legendColor`. Data is loaded from a CSV file and rendered as SVG using D3 v7, with tooltips provided by appended `<title>` elements.

EEric Yao

78% match

Loading thumbnail…

A6 Diverging Bar Chart D3

This diverging bar chart visualizes the percentage-point change in smoking rates between 2011 and 2012 across five countries, with positive differences extending rightward in blue and negative differences leftward in red from a central zero axis. The chart uses D3.js v7 to load the CSV dataset, compute the absolute maximum difference for symmetric axis scaling, and render SVG rectangles with horizontal orientation. A d3-scale linear color scale maps negative to positive values through light grey, while the d3-legend plugin adds a horizontal color legend. Hovering highlights bars in orange, and the chart includes labeled axes for both percentage difference and country names.

EEric Yao

78% match

Loading thumbnail…

D3 - Multi-Line Chart

This multi-line chart displays carbon dioxide emissions per country from 1970 to 1979, using four distinct colored lines with circular data points. The visualization loads CSV data from a GitHub gist and renders an SVG with a light gray background panel, axis labels, and a title. It uses d3.csv for data loading, d3.line to construct the paths, and d3.axisBottom and d3.axisLeft for the axes. Interactive tooltips appear on mouseover, showing the emission value for the hovered point, with circles enlarging to indicate selection. The chart also incorporates colorbrewer colors and the d3-legend library.

CChandana Srinivas

78% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays annual carbon dioxide emissions per capita for the top 10 countries, using multi-color lines to compare trends over time. The visualization reads data from a CSV file and renders it as SVG, with each line representing a country, a color legend for identification, and labeled axes for year and emissions. The implementation uses D3 v5 APIs including `d3.csv`, `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.nest`. A custom `colorLegend` function generates the legend, and gridlines and axis labels are styled for clarity.

Ssafdarawan

76% match