Interactive pie and bar

100%

Interactive pie and bar

✓ Published0🌍 Public

Last edited Apr 21, 2020

Created on Apr 21, 2020

This interactive dashboard combines a pie chart and a bar chart to explore COVID-19 case frequency data across Beijing districts by date range. Hovering over a bar updates the pie chart to show the district breakdown for that period, with smooth transitions between updates. Built with React and d3.v3, the example uses d3.svg.arc, d3.layout.pie, and d3.scale.ordinal to render SVG elements with mouseover-driven interactivity. The legend and pie chart adapt their data and colors dynamically, while the histogram bars respond with animated height changes via transition.attr.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Interactive pie and bar

An interactive dashboard combines a histogram and pie chart to explore COVID-19 case frequencies across Beijing districts over time. The bar chart displays weekly total cases, while hovering over a bar updates the pie chart to show the district breakdown for that week. The visualization uses D3 v3 with SVG rendering and transitions, updating both charts dynamically via mouseover and mouseout events. Data is loaded from a JSON file, with the pie chart segmented by district categories (朝阳, 海淀, 西城, etc.) and the histogram using ordinal and linear scales for axes.

JJiaMing

96% match

Loading thumbnail…

北京疫情可视化

This interactive dashboard visualizes COVID-19 case distributions across Beijing districts using a coordinated histogram and pie chart. Hovering over a bar filters the pie chart and legend to show the selected district’s breakdown by infection source, including categories like Chaoyang, Haidian, and imported cases. Built with D3 v3, the example uses d3.svg.axis, ordinal and linear scales, and transition().duration() to animate bar height and color changes, while SVG paths render the interactive pie slices.

JJiaMing

87% match

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a bar chart and a pie chart to explore categorical data across different regions. Hovering over a bar filters the pie chart and legend to show the breakdown of sub-categories for that region. The visualization uses D3.js (v3) to render SVG elements with animated transitions, and is built within a React framework. The bar chart displays frequencies for each region, while the pie chart and legend update dynamically to reflect the selected region's distribution, using mouseover and mouseout events to trigger the updates.

Vvans01

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

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

84% match

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a bar chart and a pie chart to explore categorical frequency data across states. Hovering over a bar updates the adjacent pie chart and legend to display the breakdown of that state’s frequency by three categories (low, mid, high), with smooth transitions between states. Built with React and D3.js v3, the visualization uses SVG paths for the pie slices and rects for the bars, with mouseover and mouseout handlers triggering `pC.update()` and `leg.update()` to synchronize the views. The bar chart’s y-axis rescales dynamically as the pie selection changes the underlying data.

AAbirKhan96

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

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

83% match