D3 Example

100%

✓ Published0🌍 Public

Last edited Jan 26, 2016

Created on May 7, 2015

A horizontal bar chart displays the 2010 populations of major world religions, from Christians at over two billion to Jews at under fourteen million. The visualization encodes data from the Pew-Templeton Global Religious Futures Project using an SVG rendered with D3.js, where bar lengths reflect population and a tooltip reveals exact figures. The code employs d3.scale.linear, d3.scale.ordinal, and d3.svg.axis, with a custom SI format replacing "G" with "B" for billion. The Playfair Display font and d3-tip library support styling and interactive hover effects, while the data is loaded from a local CSV file.

AI-generated description

A bar chart showing population of World religions in 2010. Data shown is from the Pew-Templeton Global Religious Futures Project.

This data is taken exactly as-is from the Pew-Templeton Web site, including labels for religions, and does not represent my opinions. This data may not be 100% accurate, I'm not sure. I'd be curious to see results from others sources that show a similar comparison of World religions.

The code for this chart is derived from example 105 of the screencast Introduction to D3.js. Also, the tool tip approach draws from d3noob’s Simple d3.js tooltips block

Similar vizzes

Loading thumbnail…

D3 Example

A bar chart displays the populations of major world religions, with each bar colored by its corresponding religion using the `d3.scale.category10` ordinal color scale. The visualization loads data from `religionWorldTotals.csv` via `d3.csv`, and renders axes with `d3.svg.axis`, applying a custom SI format to abbreviate large numbers. Bars are sized with `d3.scale.ordinal` and `d3.scale.linear` for positioning and height, while the y-axis uses a rotated tick label style from the `Open Sans` font. The code is authored by Curran and uses D3 version 3.5.5, drawing everything as SVG elements.

CCurran Kelleher

88% match

Loading thumbnail…

D3 Example

A bar chart displays global religious populations, ranked by size, with tilted x-axis labels for readability. The visualization uses D3.js (v3) to bind CSV data, scale bars with `d3.scale.ordinal` and `d3.scale.linear`, and render axes via `d3.svg.axis`. Tick labels rotate by -16 degrees, and y-axis values use a custom SI formatter (e.g., "B" for billions). The chart’s SVG is built with margin conventions, while the x-axis text styling applies the Open Sans font.

CCurran Kelleher

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

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

86% match

Loading thumbnail…

D3 Example

This radial bar chart displays world religious populations using curved slices that extend outward from a central point. Each slice's length corresponds to population size, with values read along a shared horizontal axis, while colors distinguish religious groups. The code uses D3.js with `d3.layout.pie`, `d3.svg.arc`, and `d3.scale.ordinal` for positioning, and loads data from a CSV file. A color legend and bottom axis are rendered in SVG. The author notes that this technique distorts area-per-value perception, making it potentially misleading.

CCurran Kelleher

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

86% match

Loading thumbnail…

D3 Example

This example shows a single stacked bar chart that breaks down the world’s total population by religious affiliation, using one bar per region (here, a single “World” region) with each segment colored by religion. The visualization uses the D3.js library’s `d3.layout.stack` to compute the stacking of values, while `d3.scale.ordinal` and `d3.scale.linear` map categorical regions and numeric populations to screen positions. Axes are rendered with `d3.svg.axis`, and a color legend is added via `d3.legend.color`. Data comes from the bundled CSV file `religionWorldTotals.csv`, which lists population counts for each religion, and the chart is drawn in SVG.

CCurran Kelleher

85% match

Loading thumbnail…

D3 Example

This example shows a bar chart comparing the population of five religions, using SVG rendering within a React framework. The bars are filled with distinct texture patterns—hexagons, crosses, caps, woven, and waves—generated by the textures library, with each religion assigned a unique pattern via an ordinal color scale. The code uses D3 v3 APIs including `d3.scale.ordinal`, `d3.svg.axis`, and `d3.csv` to load and visualize the `religionWorldTotals.csv` data, with axes formatted using a custom SI tick formatter that converts "G" to "B" for billions.

Zzoniyac

85% match