Skip to main content
SimilarExport ZIP
100%

Multiple Views in a Single SVG

✓ Published3🌍 Public
CCurran Kelleher
Last edited Apr 9, 2024
Created on Apr 1, 2024

This example shows how to place multiple visualizations side by side within a single SVG, comparing the same daily air temperature dataset across different chart types. The left half displays a multi-line chart where each year is a colored line, with 2024 highlighted in red and thicker, while the right half reuses the same rendering logic in a separate group translated horizontally. The code uses d3’s `scaleLinear`, `scaleSequential`, `flatGroup`, and `line` generators, along with `observeResize` from `@curran/responsive-axes` to handle responsive dimensions. Data comes from the `@curran/daily-surface-air-temperature` package, and colors are mapped via `interpolatePlasma`.

AI-generated description

A way of adding multiple visualizations to a single page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example visualizes daily surface air temperature data, where each year is represented as a separate line plotted across the days of the year. The lines are colored using a plasma color scale based on the year, with 2024 highlighted in red and a thicker stroke for emphasis. Using D3's `scaleLinear`, `scaleSequential`, and `flatGroup` utilities, the code groups the dataset by year and draws multiple paths. The visualization relies on the `@curran/daily-surface-air-temperature` data package and incorporates responsive axes from the `@curran/responsive-axes` library.

Ssarveshcsc898@gmail.com
77% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example visualizes daily surface air temperature data, where each year is represented as a separate line plotted across the days of the year. The lines are colored using a plasma color scale based on the year, with 2024 highlighted in red and a thicker stroke for emphasis. Using D3's `scaleLinear`, `scaleSequential`, and `flatGroup` utilities, the code groups the dataset by year and draws multiple paths. The visualization relies on the `@curran/daily-surface-air-temperature` data package and incorporates responsive axes from the `@curran/responsive-axes` library.

Ssarveshcsc898@gmail.com
77% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example visualizes daily surface air temperature data, showing how temperature varies across the days of the year for multiple years. The chart uses multiple lines, one per year, with a color scale from the plasma interpolator to differentiate between years. The year 2024 is emphasized with a red, thicker line, while other years appear semi-transparent. The code leverages D3’s `scaleLinear`, `scaleSequential`, `flatGroup`, and `line` APIs, along with the `@curran/responsive-axes` library for axes, to render the visualization from the provided dataset.

Rreddysushma994@gmail.com
76% match
Loading thumbnail…

Multiple Simple graphs on one page

Two line charts display daily closing values from two separate CSV files, each plotted on its own SVG canvas stacked vertically. The example demonstrates how to reuse a shared set of D3 3.5.17 API components—including `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line`—to build multiple independent graphs on one page. Data is loaded with `d3.csv`, parsed with `d3.time.format`, and rendered as steel-blue paths with annotated axes. Both charts use identical margins, dimensions, and axis configurations, showing a simple way to generate small multiples.

Dd3noob
74% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example shows daily air surface temperatures from 1940 through 2024, with one line per year plotted against day of year. The current year (2024) is highlighted in red with a thicker stroke, while historical years fade into a plasma color scale. The code uses d3.scaleLinear, d3.scaleSequential, d3.flatGroup, and d3.line with a defined accessor. The @curran/responsive-axes library renders the axes, while @curran/daily-surface-air-temperature provides the dataset.

Ppeter.sime@gmail.com
74% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays daily surface air temperature data as a line chart, with each year represented by a separate line colored according to a plasma color scale, and 2024 highlighted in red. The graphic uses d3.scaleLinear for X and Y axes, d3.flatGroup to organize data by year, and d3.line to generate paths. Axes are rendered using the @curran/responsive-axes library, and data is loaded from a CSV file via d3.csv with d3.autoType.

AAlly Howell
74% match
Loading thumbnail…

Line Chart with Multiple Lines

This example displays a week of temperature data for multiple cities using an SVG line chart with one line per city, colored via a categorical scale. The chart includes labeled axes, a title, and a color legend positioned to the right. It uses d3.scaleTime and d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, d3.line with curveBasis for smooth paths, and d3.group to organize data by city. The data originates from the Data Canvas "Sense Your City" dataset.

HHe Jianfeng
74% match
Loading thumbnail…

Line chart with Multiple Lines

This example visualizes a week of temperature readings from multiple cities around the world as a multi-line chart. The visualization uses D3 v5 to render SVG paths, with color distinguishing each city via a categorical color scale. Temperature data is loaded from a CSV, and axes are drawn using D3’s `axisLeft` and `axisBottom` functions. A legend, built with a custom `colorLegend` module, maps each color to its city. The lines use a basis curve and a multiply blend mode to handle overlapping strokes.

YYedrup
73% match