Skip to main content
SimilarExport ZIP
100%

A7 - Small Multiples in D3

✓ Published0🌍 Public
RRiya Mathur
Last edited Apr 10, 2024
Created on Mar 24, 2024

This example uses small multiples to display the frequency of Atlantic storms from 1995 to 2016, with each chart representing a different storm name. The visualization shows a line chart for each storm, mapping year on the x-axis and frequency on the y-axis, with all charts sharing identical scales for easy comparison. Built with D3 v6, it uses `d3.csv`, `d3.group`, `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` to parse data, group by storm name, and render SVG paths, axes, and a legend. The color scale uses `d3.schemeCategory10`, and the data comes from an external CSV file linked in the code.

AI-generated description

Small Multiples depicting the frequency of each storm from 1995 to 2016.

MIT Licensed

Similar vizzes

Loading thumbnail…

A7 - Multi Line Chart in D3

A multi-line chart displays the frequency of three named Atlantic storms from 1995 to 2016, with each storm represented by a colored line over a time-based X axis and a frequency Y axis. The visualization loads CSV data from a GitHub gist, groups and parses it with `d3.group` and `d3.timeParse`, and renders SVG paths using `d3.line` and `d3.scaleTime`. A legend and axis labels clarify the series, while a categorical color scale assigns each storm a distinct color.

RRiya Mathur
92% match
Loading thumbnail…

A7 - Heatmap in D3

This heatmap visualizes the frequency of tropical storms in the Atlantic from 1995 to 2019, with years on the x-axis, storm names on the y-axis, and color intensity indicating frequency. It uses D3 v6 to construct an SVG heatmap, reading data from a CSV file and applying the Inferno color scale. Tooltips display exact frequencies on hover, while a gradient legend clarifies the color mapping. The chart includes axis labels and a title, making the distribution of storm activity over time and by storm type readily apparent.

RRiya Mathur
84% match
Loading thumbnail…

A7_ Small multiples (of lines) chart

This example displays monthly temperature variations for four U.S. cities—NYC, LA, Chicago, and Houston—as small multiples of line charts, with dots marking each data point and a color-coded legend. Hovering over a dot enlarges it and shows the exact temperature value as a tooltip. The code uses D3 v7’s `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to render SVG charts, with data pulled from a GitHub-hosted CSV file. A `d3.legendColor` scale generates the legend, and the visualization is built with React in a single HTML file.

DDuc Pham
76% match
Loading thumbnail…

Small Multiples

This small multiples chart displays average wind speed by month for ten different cities, with each city’s time series shown in a separate SVG panel. The visualization uses d3.v6 to load CSV weather data via d3.csv, group records by station city using d3.group, and render each line with d3.line. A shared ordinal color scale maps cities to distinct hues, and a legend generated with the d3-legend library identifies each color. Axes are drawn using d3.axisBottom and d3.axisLeft, while hover interactions are implemented with CSS on the line dots.

AAllen Ho
76% match
Loading thumbnail…

A7 - Time Series in D3

This example demonstrates four time-series visualizations: a multi-line chart, a heatmap, small multiples of lines, and a streamgraph. It uses the D3.js library to render SVG elements and scales, with a color legend for each chart to distinguish categories. The data is mapped to time-based axes, and the streamgraph employs stacked area shapes. The code includes interactive tooltips that appear on hover, enhancing data exploration. All charts share a consistent color scheme, and the visualizations are built using D3’s data-binding and selection APIs.

DDuc Pham
76% match
Loading thumbnail…

Fork of A7 Line Chart

This example visualizes monthly wind speed measurements across multiple cities, with each city represented by a distinct colored line. The chart uses an ordinal color scale with a legend to distinguish the ten city categories. Built with D3 v6 and rendered as SVG, the visualization includes both lines connecting data points and circular markers for each measurement. The code employs `d3.group` to structure the data by city, `d3.scaleOrdinal` for color mapping, and `d3.line` for path generation. A hover effect changes the dot color to red, and axis labels identify the months and wind speed units.

Bbharatpatil0701@gmail.com
74% match
Loading thumbnail…

Untitled

This example presents earthquake frequency and impact data from a CSV file across four small multiples, each plotting one magnitude bin (5.0–5.9, 6.0–6.9, 7.0–7.9, 8.0+) against time. The charts share a linear y-axis for quake counts, with point size encoding estimated deaths via a square-root scale. The code uses D3 v5 to parse the data, create time and linear scales, and render SVG axes and symbols for each subset. Circle, triangle, diamond, and square shapes distinguish the magnitude categories across the four linked views.

Ddarshue
73% match
Loading thumbnail…

A7 Line Chart

This line chart displays the monthly average wind speeds for various cities in 2016, with each city represented by a distinct colored line and a circle marker at each data point. The visualization uses D3.js (v6) to load CSV data, group it by city with `d3.group`, and render lines with `d3.line` and scales from `d3.scaleLinear`. A color legend is created using the `d3-legend` library, and the SVG output includes axis labels for months and wind speed.

AAllen Ho
73% match