d3 Dispatch V4

100%

d3 Dispatch V4

✓ Published1🌍 Public

Last edited Mar 28, 2022

Created on Mar 28, 2022

This example demonstrates linked selections across a bar chart and a pie chart, using a drop-down menu to choose a state. It shows how the D3 `dispatch` module (V4) coordinates custom events like `statechange` across separate visual components. The bar chart uses `d3.scaleLinear` and `d3.axisLeft` to display total state population, while the pie chart uses `d3.pie`, `d3.arc`, and `transition.attrTween` for animated arcing by age group. Data comes from a CSV of US census age demographics, loaded with `d3.csv` and processed via `d3.map`.

AI-generated description

Dispatching Events https://bl.ocks.org/mbostock/5872848

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 Dispatch V5

A dropdown menu selects a state, and d3.dispatch coordinates updates to a bar chart of total population and a pie chart of age-group composition. The code loads U.S. Census data from a CSV and uses d3.csv, d3.map, d3.scaleLinear, d3.axisLeft, d3.scaleOrdinal, d3.arc, d3.pie, and transition.attrTween for animated transitions. The pie chart interpolates arc angles, while the bar chart animates height, with SVG rendering throughout.

JJimMaltby

92% match

Loading thumbnail…

d3 Dispatch V5 - reusable

This reusable D3 v5 example displays U.S. state population data by age group, initially showing a bar chart for a single state that can be updated dynamically. It uses an event dispatcher (`d3.dispatch`) to handle state changes, triggering transitions between bar and pie chart visualizations. The code builds SVG output with scales (`d3.scaleLinear`, `d3.scaleOrdinal`) and axes (`d3.axisLeft`), while loading data from a CSV file. Although the bar and pie drawing functions are present, the visible interaction logic is incomplete.

JJimMaltby

88% match

Loading thumbnail…

Dispatching Events

Two linked views of U.S. census data show population by age group for a selected state: a bar chart displays total population, while a pie chart breaks down the seven age cohorts. Using d3.dispatch, custom "load" and "statechange" events coordinate a dropdown menu, bar chart, and pie chart through named listeners like "load.bar" and "statechange.pie." The pie chart animates slice transitions with transition.attrTween and d3.interpolate, while the bar chart animates its height via a rect transition. Data loads from a CSV file, rendered as SVG with d3.axis.

Mmbostock

84% match

Loading thumbnail…

d3js clickable, sortable stacked bar chart

This interactive stacked bar chart displays the age distribution of U.S. state populations, with a clickable legend to isolate a single age category and a checkbox to sort bars by value. Built with d3.v3 and SVG, it uses `d3.scale.ordinal`, `d3.scale.linear`, and `d3.svg.axis` to render axes and bars, while animation and a tooltip enhance interactivity. The code reads `state_data.csv` and corrects a pixel-level height calculation error from Mike Bostock’s original example.

KKatiRG

77% match

Loading thumbnail…

Interactive pie and bar

This example shows an interactive dashboard combining a bar chart with a pie chart. Hovering over a bar filters the pie chart to display the frequency distribution for that state, while moving the mouse away resets it to the overall totals. The bar chart uses an ordinal scale for x-axis positioning and a linear scale for y-axis heights, with transitions animating both bar heights and colors. The pie chart is built using D3’s arc generator and updates its data on hover events. The data comes from a JSON file with per-state frequency values.

Vvans01

77% match

Loading thumbnail…

d3js clickable stacked bar chart

This stacked bar chart displays the age distribution of each U.S. state’s population, with segments colored by age group. A clickable legend toggles individual categories on and off, and hovering over a bar segment highlights it and shows a tooltip with the exact value. Built with D3.js v3, it uses ordinal and linear scales with SVG axes, and animates bar transitions via legend-driven class selections. Data comes from the included `state_data.csv` file.

KKatiRG

76% match

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a bar chart and pie chart to explore categorical frequency data across several US states. The bar chart displays total counts for each state, with hovering over a bar updating the pie chart and legend to show the breakdown by subcategory (CAM, CSIS, GAV) using animated transitions. Built with React and D3 v3, it uses SVG elements, ordinal and linear scales, and d3.svg.axis to render the visualizations, with mouseover and mouseout handlers driving the dynamic updates.

JJens Grochtdreis

76% match

Loading thumbnail…

Untitled

This stacked bar chart displays the total population for each state across selected years, with bars segmented by three categories. A dropdown menu lets viewers switch between years, triggering a smooth transition that updates bar heights and the y-axis scale. The visualization is built with D3.js v5, using d3.stack for data aggregation, d3.scaleBand and d3.scaleLinear for positioning, and SVG transitions to animate changes. Data comes from a local CSV file, with each bar labeled with its total value.

Pp189

76% match