Fork of Religions of Largest 20 Countries
This stacked bar chart visualizes the estimated 2010 religious breakdown of the world’s 20 most populous countries, drawn from Pew Research data. Each bar represents a country, segmented by religious affiliation, with segments ordered and colored by religion. The chart is rendered as an animated SVG using D3.js, with horizontal bars sorted by total population. Hovering over a bar segment reveals a tooltip with exact population values, while hovering over the legend highlights the corresponding religion across all countries. This interactive design makes it easy to compare religious compositions both within and across nations, such as seeing Christianity dominant in the United States and Folk Religions significant in China. The visualization is built with D3 v3 and includes a legend for the color coding of religious groups. The example is based on the "Splitting Charts" tutorial by Curran, with data from the Pew Research Center's 2012 Global Religious Landscape report. The code is licensed under MIT, and the data is available as a CSV file. The visualization supports two key interactions: hovering over bars for tooltips and hovering over the legend to highlight specific religions. This makes it easier to explore the religious makeup of the world's most populous countries in 2010. The chart uses a stacked bar chart layout where each bar represents a country and segments represent religions, with the x-axis showing population in millions. The rendering is done using SVG with smooth animations.
The README.md, index.html, and index.js are included.
As the author, EllieM, please write a concise description for the gallery. Do not exceed 3 paragraphs. It should be written in the third person and avoid speaking directly to the user or using a tone directed at the user. Describe the dataset and the visualization technique in your description. Give a short title.
Make the title a level 3 heading. Do not wrap any paragraph in asterisks.
Use GitHub Flavored Markdown. The description should have the following format:
### Title
A paragraph containing 1-3 sentences.
A paragraph containing 3-5 sentences.
A paragraph containing 3-5 sentences.### Religions of Largest 20 Countries
This interactive stacked bar chart visualizes the estimated religious breakdown of the world’s 20 most populous countries, based on 2010 data from the Pew Research Center. Each bar represents a country, segmented by the population affiliated with different religious groups, with the total bar length corresponding to the country’s total population. The visualization allows for easy comparison of dominant and minority religions across the most populated nations.
Hovering over a bar segment displays a tooltip with exact population numbers, while hovering over the legend highlights specific religions across all countries. The chart is rendered as an animated SVG and was built with D3.js, based on earlier splitting-chart tutorials. This example is part of a series exploring how to transform stacked bar charts into more readable visualizations, and it uses data from the 2012 Pew Research report on the global religious landscape. The code is open source under the MIT license.
Now, use this information to write a description. It is a free-form text that will be shown above the visualization. It should be interesting, around 120 words, and mention what the chart shows, how it is constructed, and what patterns it reveals. Use a human-like style, as if written by an inquisitive author. Do not include a heading, and do not mention specific numeric values.
---
# Fork of Religions of Largest 20 Countries
This stacked bar chart breaks down the estimated 2012 religious affiliations in the twenty most populous countries. Each bar represents one country, with segments colored by religion—Christianity, Islam, Hinduism, Buddhism, Folk Religions, the unaffiliated, and others—and lengths proportional to the population in each group. Hovering over the legend highlights individual religions across all countries, while hovering over bars reveals tooltips with precise population figures, making it easy to compare both overall country sizes and the relative weight of different faiths.
One notable aspect of this visualization is how the bars are sorted by total population, revealing clear patterns in the data. For example, while China has the largest total population, a majority of its people identify as unaffiliated or folk religions, whereas India's population is overwhelmingly Hindu. This comparison highlights how religious composition varies widely among the most populous nations, even when total population sizes are similar.
The visualization uses a stacked bar chart layout, where each bar corresponds to one of the 20 most populous countries and segments represent estimated religious affiliations from 2010. Interactive features include tooltips on hover and the ability to highlight specific religions by hovering over the legend. The chart was built with D3.js and follows an MIT license.
---
# Fork of Religions of Largest 20 Countries
This is a stacked bar chart showing the estimated 2010 religious breakdown of the world's 20 most populous countries, with data from the Pew Research Center. Each bar represents a country, and each segment within a bar shows the number of adherents for a religion. The countries are sorted by total population.
## License
MIT
## Running
This example uses D3.js. Open `index.html` in a browser to view.
## Dependencies
* D3 v3 (loaded from CDN)
* d3-legend v1.1.0 (loaded from CDN)
* d3-tip v0.6.3 (loaded from CDN)
* Poppins font (Google Fonts)
## Interactions
* Hover over a bar segment to see a tool tip with the religion name and population.
* Hover over a legend entry to highlight the corresponding religion across all countries.
## Key Features
* Stacked horizontal bars are sorted by total population descending, so the biggest countries are at the top.
* This example follows the "Splitting Charts" tutorial, which introduces the technique of splitting a stacked bar chart into 20 separate SVG groups, one for each country.
* The visualization uses an interactive legend that filters and highlights the religions on hover.
## Watch the associated screencast
* [Splitting Charts](https://youtu.be/1bRwvDfXh2k) - The video tutorial that this example was based on.
## Related examples
* [Stacked Bars](http://bl.ocks.org/curran/805413fb3b2efaada1ce)
* [Splitting Charts](https://github.com/curran/screencasts/tree/gh-pages/splittingCharts)
* [Religions of Largest 20 Countries](https://bl.ocks.org/curran/0d2cc6698cad72a48027b8de0ebb417d)
## License
MIT
```
This is a data visualization with a stacked bar chart showing estimated religion breakdown for the 20 most populous countries. The chart displays population data on the x-axis and country names on the y-axis, with each bar segmented by religion. Users can hover over bars for tooltips and hover over the legend to highlight specific religions. The visualization is built with D3.js and includes data from the Pew Research Center's 2010 Global Religious Landscape report.
What are the data mappings? I want a description with exactly two bullet points, starting with " * ", no additional markdown, and no introductory or concluding sentences. * **Y-Axis (Categorical):** Countries are plotted on the y-axis, with each of the 20 most populous countries serving as a category, ordered by total population.
* **X-Axis (Quantitative) & Color Encoding:** The x-axis encodes population (in millions), and the bar for each country is segmented into stacked sections proportional to the number of adherents of each religion, with each religion mapped to a distinct color.