test

100%

✓ Published0🌍 Public

Last edited Apr 27, 2015

Created on Apr 27, 2015

This example presents an interactive dashboard combining a histogram and a pie chart to explore demographic data across states. The visualization displays the frequency distribution of a variable for each state, with bars colored steel blue, while a pie chart and legend break down the same data by gender (male and female) using distinct colors. Users can hover over histogram bars to dynamically update the pie chart and legend, and the bar chart also responds to selections, updating its own frequency values. The visualization is built with D3.js v3, using SVG for rendering and transitions for smooth animations.

AI-generated description

Similar vizzes

Loading thumbnail…

DashBoard

This dashboard links a histogram, pie chart, and legend to enable interactive exploration of frequency data across states. Hovering over a histogram bar filters the pie chart and legend to show that state’s breakdown by age group, while hovering over a pie slice updates the histogram to display the distribution of that age group across all states. Built with D3 v3, it uses SVG for rendering and transitions for smooth updates, with mouseover and mouseout events driving the synchronized changes between the three visual components.

MMatteoTomassetti

84% match

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a histogram and pie chart to explore categorical data. The bar chart displays frequencies for each state, and hovering over a bar updates the pie chart to show the low, mid, and high breakdown for that state. Both visualizations use D3 v3’s `d3.svg.axis` and ordinal/linear scales, with smooth transitions via `transition().duration()`. The bar chart is rendered in SVG, and hovering also updates a linked legend showing frequencies and percentages.

Kkkkk

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

82% match

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a bar chart and a pie chart to explore categorical data across states. Hovering over a bar highlights the corresponding state’s frequency distribution in the pie chart, while moving the mouse away resets the view. The visualization uses d3.v3 with SVG rendering and animated transitions, updating both charts and a legend on mouseover. The bar chart uses ordinal and linear scales, while the pie chart is driven by the same data, with colors assigned per frequency segment.

Hhireign

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

81% match

Loading thumbnail…

Fork of Interactive pie and bar

This interactive dashboard combines a histogram with a pie chart and legend to explore categorical frequency data for different states. Hovering over a bar filters the pie chart and legend to display the distribution of low, mid, and high categories for that state, while moving the mouse away resets the view. Built with React and D3.js v3, it uses `d3.select` for SVG creation, `d3.scale.ordinal` with `rangeRoundBands` for the x-axis, `d3.scale.linear` for the y-axis, `d3.layout.pie` for the pie slices, and `d3.transition` for animated updates. The SVG elements also respond to mouseover and mouseout events, and the bar color changes to blue on hover.

AAnthony Zornig

81% match

Loading thumbnail…

Interactive pie and bar

This interactive dashboard synchronizes a bar chart and a pie chart to explore categorical frequency distributions across multiple states. Hovering over a bar updates the pie chart and legend to show the breakdown of the selected state’s data into low, mid, and high segments, while moving the mouse away restores the overall totals. Built with React and D3.js v3, the visualization uses SVG for rendering and animated transitions to smoothly update the bar heights, colors, and labels, as well as the pie chart slices. The bar chart uses an ordinal scale for the x-axis, and the pie chart’s updates are driven by calling its `update` function with new data.

Ssowbalas

81% match

Loading thumbnail…

DashBoard

The dashboard displays the distribution of frequencies across three categories—low, mid, and high—for each state, using a histogram and an interactive pie chart linked to it. Hovering over a histogram bar filters the pie chart and legend to show that state’s category breakdown, while hovering over a pie slice updates the histogram to reflect the selected category’s totals. Built with D3 v3, the visualization uses SVG for rendering and transitions for smooth updates, driven by the `histoGram` and `pieChart` functions. The data comes from a Gist, with the code styled via custom CSS for hover effects and axis formatting.

AAlainRo

80% match