D3 Example

100%

✓ Published0🌍 Public

Last edited Jan 28, 2017

Created on Jan 28, 2017

This visualization shows stacked bar charts of the estimated religious population breakdown across the seven countries affected by the 2017 U.S. travel ban, based on 2010 Pew Research data. Each bar represents a country, with segments colored by religion and hover interactions highlighting specific religious groups. The code uses D3.js version 3, with `d3.layout.stack` for stacking, `d3.svg.axis` for axes, `d3.legend.color` for the legend, and `d3-tip` for tooltips. SVG rendering includes animated hover effects that fade the background bars.

AI-generated description

Stacked bars showing estimated religion breakdown and population of the 7 countries from which Donald Trump banned immigration to the US. The 7 countries are Iraq, Syria, Iran, Libya, Somalia, Sudan and Yemen.

Data is from The Global Religious Landscape by Pew Research (2010), generated using this processing script. Note that the data is ESTIMATION ONLY, and is from 2010. Also, countries for which values are noted as "< 10000" are transformed to be "0".

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/0d2cc6698cad72a48027b8de0ebb417d'>Religions of Largest 20 Countries</a>

<div align="center"><img src="http://simplehitcounter.com/hit.php?uid=2226829&f=16777215&b=0" border="0" height="18" width="83"></div>

mit Licensed

Similar vizzes

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

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

88% match

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

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

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

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

86% match

Loading thumbnail…

Bar Stack

This stacked bar chart displays the estimated 2010 religious breakdown of the 20 most populous countries, using data from Pew Research. It uses D3.js v3 with SVG and animation, featuring d3.layout.stack for the stacked bars, d3.svg.axis for scales, d3.legend for a color legend, and d3.tip for tooltips. Hovering over bars reveals detailed tooltips, while hovering over the legend highlights individual religions by dimming the background through a semi-transparent overlay layer.

TThaverman

86% match

Loading thumbnail…

d3.js learning

A stacked bar chart shows the estimated 2010 religion breakdown for the 20 most populous countries, using data from the Pew Research Global Religious Landscape. Rendered with SVG via d3.v3, the chart maps each country on the x-axis with stacked segments representing religious groups. Hovering over bars displays tooltips with precise values, while hovering over the legend highlights corresponding religions within the chart. The code uses d3.scale.ordinal, d3.layout.stack(), and d3.svg.axis to construct the visualization.

BBrahmaredddy12

86% match