Interactive pie and bar

100%

Interactive pie and bar

✓ Published0🌍 Public

Last edited Jun 4, 2020

Created on Jun 4, 2020

This example links a pie chart and a bar chart to explore export data by category and state. Hovering over a bar filters the pie chart and legend to show the composition for that state; leaving resets the view. The visualization uses D3 v3 with SVG and animated transitions, employing ordinal and linear scales alongside user-defined update functions to synchronize the charts.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Interactive pie and bar

This interactive dashboard links a bar chart and a pie chart to explore export data by state and sector. Hovering over a bar filters the pie chart and legend to show the sector breakdown for that state, while hovering over a pie segment updates the bars to display the selected sector’s values. The visualization uses D3 v3 with SVG and animated transitions, rendering a histogram by ordinal and linear scales, and a pie chart with a legend that updates frequencies and percentages.

EEmilio Brenes

92% match

Loading thumbnail…

Interactive pie and bar

This example shows an interactive dashboard linking a bar chart of export totals for 2019 with a pie chart of category breakdowns by state. Hovering over a bar filters the pie chart and legend to show the proportions of Agricola, Industrial, and Pecuario exports for that state, with mouseout resetting the display to the overall totals. Built with React and D3.js v3, it uses ordinal and linear scales, SVG rectangles and paths, and animated transitions to update the bar heights, text labels, and pie segments.

IIgnacio Esquivel

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

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

91% match

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a bar chart of export values per state with a linked pie chart showing the breakdown by sector (Agricola, Industrial, Pecuario). Hovering over a bar filters the pie chart and legend to display that state’s sector frequencies, while mouseout resets to the total. Built with React and D3.js v3, it uses `d3.svg.axis`, ordinal and linear scales, and SVG transitions (`transition().duration(500)`) to animate bar heights, colors, and labels.

Pporrasgp

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

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

88% match

Loading thumbnail…

Interactive pie and bar

This interactive dashboard links a bar chart of 2019 export totals per state with a pie chart and legend that break down each state’s exports by agricultural, industrial, and livestock categories. Hovering over a bar updates the pie chart and legend to reflect that state’s sector frequencies, while hovering over a rectangle highlights it in blue. Built with React and D3 v3, the visualization uses ordinal and linear scales, SVG transitions, and mouseover/mouseout handlers to coordinate the views.

NNataliaHerreraMurillo

88% match