Skip to main content
100%

D3 Example

✓ Published0🌍 Public
TTedables
Last edited Feb 7, 2017
Created on Feb 7, 2017

This example shows a stacked bar chart comparing the estimated population of eight religious groups across five countries (China, India, USA, Indonesia, and Brazil) in 2010. The visualization uses D3.js with `d3.layout.stack` to layer the bars, `d3.svg.axis` for axes, and `d3.legend.color` for the interactive legend. Hovering over a legend entry fades the underlying bars with a semi-transparent overlay and re-renders only the selected layer in the foreground, with tooltips via `d3.tip`. The data is the Pew Research report on the global religious landscape.

AI-generated description

Stacked bars showing estimated religion by top 5 countries in 2010. This is an example from the tutorial Splitting Charts. The data shown is from this report on The Global Religious Landscape from Pew Research, generated using this processing script.

<!-- Start of SimpleHitCounter Code --> <div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1967777&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div> <!-- End of SimpleHitCounter Code -->

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/805413fb3b2efaada1ce'>Stacked Bars</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Example

This stacked bar chart visualizes estimated religious demographics for the top 5 most populous countries in 2010, using data from the Pew Research Center. The visualization uses D3's SVG rendering and animation to display population figures by religion across China, India, USA, Indonesia, and Brazil. Each bar is segmented by religion, with a color legend for identification. The chart supports interactive exploration: hovering over a legend item highlights the corresponding religion across all countries by dimming the other bars, and tooltips show exact population values. Axes use a custom tick format converting billions to "B". The example is based on a Stacked-to-Grouped Bars block and incorporates tooltip logic from another block.

663anp3ca
93% match
Loading thumbnail…

D3 Example

An interactive stacked bar chart visualizes the estimated religious composition of the world's 20 most populous countries in 2010, using data from the Pew Research Center. Hovering over a bar segment displays a tooltip with the specific religion, country, and population figure. The visualization also supports highlighting individual religions by hovering over the color legend, which fades other bars and re-renders the selected layer in the foreground. Built with D3.js, it employs the `d3.layout.stack` API for stacking, `d3.legend.color` for the interactive legend, and `d3-tip` for tooltips, all rendered as SVG with smooth animations.

CCurran Kelleher
92% match
Loading thumbnail…

D3 Example

This example visualizes the estimated religious composition of the top five most populous countries in 2010 using stacked bar charts. Each bar represents a country, with segments colored by religion and sized by population, based on data from a Pew Research report. The chart supports interactive highlighting: hovering over an entry in the color legend fades the background bars and re-renders only the selected religion’s segments in the foreground. Built with D3, the visualization uses `d3.nest` and `d3.layout.stack` for data processing, along with SVG axes, `d3.legend.color`, and `d3-tip` for tooltips.

MMalicia
91% match
Loading thumbnail…

D3 Example

This stacked bar chart displays the estimated 2010 religious composition of the world’s 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. The visualization splits each country’s total population into colored segments representing different religions. Hovering over individual bars reveals tooltips with precise values, while hovering over the legend highlights the corresponding religion across all countries. Built with D3 v3, the chart uses the `d3.layout.stack` for stacking, `d3.scale.ordinal` and `d3.scale.linear` for positioning, and renders as SVG. Data is loaded from a local CSV file.

Ssafdarawan
91% match
Loading thumbnail…

D3 Example

This example visualizes religious demographics in the top five most populous countries for 2010, using stacked bars to show the population of each religion within a country. The visualization, built with D3 and SVG, supports animation and interactivity. Users can hover over color legend entries to highlight specific religions, with a tooltip displaying the population for the hovered category. The chart draws on the Stacked-to-Grouped Bars technique and includes custom styling for axes and tooltips.

CCurran Kelleher
89% match
Loading thumbnail…

D3 Example

This stacked bar chart displays the distribution of religious populations across the top 20 countries by total population, using horizontal bars with color-coded religious categories. The visualization uses D3.js version 3, the d3-legend library for the color legend, and d3-tip for hover tooltips. It employs d3.layout.stack for stacking data layers, d3.svg.axis for chart axes, and animated SVG transitions to fade and highlight specific religion segments when hovering over legend items.

Tthemacmarketer
89% match
Loading thumbnail…

D3 Example

This example displays grouped bar charts comparing the populations of five countries across eight religious categories. The visualization uses a stacked-to-grouped layout, with each religion represented by a distinct color from a categorical scale. The code loads data from a CSV file and leverages D3.js (version 3.5.5) with d3.nest, d3.layout.stack, d3.svg.axis, and d3.legend to render the SVG chart. Axes and legends are styled with the Open Sans font.

JJan0RodGar
89% match
Loading thumbnail…

D3 Example

This interactive stacked bar chart visualizes the distribution of religious populations across different countries, using horizontal bars segmented by religion. The visualization leverages D3.js, with d3.layout.stack to create the stacked segments and d3.scale.ordinal for country positioning. Hovering over a country brings up a tooltip displaying the specific religion and population value, while hovering over the color legend dims unrelated segments. The chart uses an SVG rendering approach with a responsive axis and custom legend, drawing from the included religion survey dataset.

Zzhoufangqin
89% match