Small multiple line chart in D3

100%

Small multiple line chart in D3

✓ Published0🌍 Public

Last edited Mar 14, 2024

Created on Mar 14, 2024

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.

AI-generated description

Small multiple line Chart visualization of the average amount of cigarettes smoked per day by smokers of only 8 countries from the CORGIS dataset 'https://corgis-edu.github.io/corgis/csv/smoking/' in D3. Color legend from Susie Lu and colorbrewer. Referenced to Small multiple for line chart'

*Full Screen to see the complete chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

multi-line Chart in D3

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.

EEunice Tu

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

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

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

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

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

77% match

Loading thumbnail…

A4 Barchart D3

This bar chart tracks the percentage of total smokers in the United States from 1980 to 2012, revealing a steady decline over three decades. The visualization uses an SVG canvas rendered with D3.js v7, where bars are drawn using SVG `rect` elements scaled by a band scale on the x-axis and a linear scale on the y-axis. Data is loaded from a CSV file via `d3.csv` and axes are generated with `d3.axisBottom` and `d3.axisLeft`. Hovering changes bar color to orange, and tooltips show the exact percentage per year.

EEric Yao

74% match

Loading thumbnail…

D3 - Small Multiples Line Chart

This example shows a series of small multiples line charts, each depicting CO2 emissions over time for a specific country. The D3.js code (version 7) loads data from a CSV file and uses `d3.scaleLinear` for axes, `d3.line` for the line paths, and `d3.legendColor` for a legend. It renders as SVG, with interactive hover tooltips revealing emission values per year.

CChandana Srinivas

74% match