Fork of Interactive pie and bar

100%

Fork of Interactive pie and bar

✓ Published0🌍 Public

Last edited Feb 22, 2021

Created on Feb 22, 2021

This interactive dashboard displays religious population data across countries using a linked bar chart and pie chart. The bar chart shows total population by country, while hovering over a bar updates the pie chart to show the religious breakdown for that country. Built with D3 v3 in a React framework, it uses SVG rendering and transitions to animate updates. The visualization uses d3.scale.ordinal and d3.svg.axis for the bar chart, with mouseover and mouseout handlers triggering pie chart and legend updates.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Fork of Interactive pie and bar

This example presents an interactive dashboard comparing top countries across teaching, research, and citations, with a pie chart linked to a bar chart. Hovering over a bar filters the pie and legend to show that country’s breakdown, while the bar chart updates based on pie interactions. The visualization uses D3 v3 with SVG and transitions, building ordinal and linear scales, and binding events like mouseover and mouseout to sync the components. Data is embedded as frequencies per category, rendered through React.

NNikhilMakkena

87% match

Loading thumbnail…

Fork of Fork of Interactive pie and bar

This interactive dashboard combines a pie chart and bar chart to compare the top 5 countries across teaching, research, and citations. Hovering over a bar updates the pie chart and legend to display the corresponding data breakdown. Built with React and D3 v3, it uses SVG rendering with animations via `transition().duration(500)` to smoothly update bar heights and colors. The data is processed from a JavaScript object containing frequency values for each category.

JJerlineJJ

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

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

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

82% match

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This interactive visualization combines a bar chart and pie chart to explore religious demographics across the 20 most populous countries. Hovering over a country bar triggers an animated pie chart that breaks down that nation’s religious distribution, using d3.pie, d3.arc, and transition.attrTween for the sweeping animation. A colorLegend component maps religion categories to a d3.scaleOrdinal with schemeGreens colors. Data comes from Pew Research’s Global Religious Landscape, processed into a CSV and rendered as SVG. The bar chart uses d3.scaleBand and d3.scaleLinear to encode country population totals.

RRohit-2710

81% match

Loading thumbnail…

Fork of [TEST] Pie Chart

This example shows the religious composition of twelve countries as a pie chart, with each slice colored and labeled in a legend that displays the percentage of the total population. The chart is built using D3 v5, with `d3.pie()` generating the arc data and `d3.arc()` rendering the SVG paths. The data is loaded from a CSV file via `d3.json`, and values are converted from strings to numbers. The chart uses a custom color scale and positions the legend to the right of the pie.

RRohit-2710

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

81% match