Untitled

100%

✓ Published0🌍 Public

Last edited Nov 4, 2023

Created on Nov 4, 2023

This example shows a stacked area chart of house and unit sales over time, with the MA (moving average) values across seven property types. The chart uses a silhouette offset, centering the data around zero. A list on the side enables the user to reorder the stacking sequence, and the chart redraws accordingly. It is built with D3.js, using `d3.stack`, `d3.area`, `d3.scaleTime`, and `d3.scaleOrdinal`. The data comes from a CSV file loaded via `d3.csv`, and hover interactions highlight individual areas with a tooltip.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive stacked area chart displays the changing values of multiple categories over time, using the D3.js library (version 2) with SVG rendering and animations. The chart employs a silhouette offset layout to visualize data from a CSV file, with color-coded layers representing different groups. Hovering over a layer highlights it and shows a tooltip with the category name and its specific value, while mouse movement on the chart also triggers a vertical guideline.

LLAOKE1997

79% match

Loading thumbnail…

Untitled

A ThemeRiver visualization displays changes in Massachusetts home sale prices over time, stacked into flowing streams by bedroom count. The chart uses D3 v6 to load CSV data, transforms it via the `d3.stack` generator, and renders smooth SVG areas with `d3.area` and `curveBasis`. Time and price scales map dates to the x-axis and cumulative price ranges to the y-axis, while each stream is colored by housing category.

Nnanegole

76% match

Loading thumbnail…

Untitled

This visualization shows how multiple data series change over time using a streamgraph with a silhouette offset, where each colored area represents a different category. The chart loads CSV data from a GitHub repository and displays it as stacked areas with a diverging y-axis centered around zero. The code uses d3.scaleLinear for axes, d3.scaleOrdinal for the categorical color palette, and d3.stack with d3.stackOffsetSilhouette to compute the layered areas, which are rendered as SVG paths using d3.area.

LLAOKE1997

76% match

Loading thumbnail…

Untitled

This example demonstrates a stacked bar chart with diverging offsets, visualizing categorical data across ordinal x-values. The chart uses D3.js v7 to create an SVG rendering, with a Tableau10 color scheme distinguishing categories. The implementation employs D3's `stack` API with `stackOffsetDiverging` and `stackOrderNone`, mapping data through `d3.map` and `d3.rollup` to structure series. The interface includes a y-axis with gridlines and a monospace font, while interaction shows tooltips displaying x-value, category, and formatted y-value.

JJoshua Higginbotham

76% match

Loading thumbnail…

Untitled

This chart visualizes the popularity of research topics over time using a stacked area chart with a silhouette offset. The visualization uses d3.layout.stack, d3.svg.area, and d3.time.scale to render SVG paths with cardinal interpolation, while d3.svg.axis displays the x and y axes. Interactive features include tooltips on mouseover that show topic values, hover highlighting that dims other layers, and a vertical guide line that follows the cursor. Data comes from a comma-separated CSV file loaded with d3.csv.

LLAOKE1997

75% match

Loading thumbnail…

Untitled

This example demonstrates a stacked bar chart built with D3.js, loading the library from UNPKG. The chart uses `d3.stack`, `d3.scaleBand`, and `d3.scaleOrdinal` to arrange categories. The rendering shows how to structure a D3 visualization project with local ES6 modules, including a separate file for a simple message. The displayed chart uses divergent stacking, color-coded series, and axis gridlines, while the HTML page also includes a separate message text.

JJoshua Higginbotham

74% match

Loading thumbnail…

Untitled

A stacked bar chart displays sales data across cities for a selected customer segment, with bars divided by product sub-category. An interactive dropdown filters by segment, while a checkbox toggles between sorting cities alphabetically or by total sales. Built with React and D3 v5, the visualization uses `d3.csv` to load data, `d3.stack` for stacking layers, and transitions to animate updates. SVG rects and axes render the chart, with text labels showing quantities above each bar.

Ssafdarawan

73% match

Loading thumbnail…

Untitled

This chart displays multiple lines tracking the change in a numeric value over time, with each line representing a different named group. It uses d3.csv to load the dataset from a GitHub URL, then d3.nest groups rows by name to create a series per category. Each series is drawn as a separate path using d3.line, with a d3.scaleOrdinal assigning colored strokes from a categorical palette. An SVG is rendered into the page, with d3.axisBottom and d3.axisLeft providing the x and y scales for the time-based and numeric axes.

Hhshs1115

73% match