D3 Example

100%

✓ Published0🌍 Public

Last edited Jun 25, 2016

Created on Jun 16, 2016

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.

AI-generated description

Radial bar chart. Inspired by this D3 issue - Variant of Bar Chart #2857.

This is possible with D3, but I'm not sure it's a good visualization technique. The values for each slice to not correspond to the area they occupy on the screen. The slices that are farther from the center will occupy more area per unit of value, so perceptually it actually distorts the data, rather than presenting it clearly.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/1c23d9c7070deb6f8488'>Religions Pie Chart</a>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/8f7f5a72faff9ecc5088'>Religions Donut Chart</a>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/76c077c3f779fe4534c6fdf4ff100158'>Staggered Donut Chart</a>

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=2122324&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a><br><a href="http://www.simplehitcounter.com" target="_blank" style="text-decoration:none;">web counter</a></div>

Similar vizzes

Loading thumbnail…

D3 Example

This example shows a radial bar chart that divides world religious populations into concentric, color-coded slices. The chart uses D3’s `d3.layout.pie` and `d3.svg.arc` to generate the layout, with each slice’s inner and outer radii scaled by its index, creating a donut-like spiral. The visualization loads data from a local CSV file (`religionWorldTotals.csv`) and renders as SVG, using `d3.legend.color` for the legend and axis scales for categorical labels. The code is an intermediate variant inspired by pie and donut charts, adapting them into a new radial form.

CCurran Kelleher

94% match

Loading thumbnail…

D3 Example

A pie chart of world religions uses a color legend to distinguish seven global religious groups by population. The D3.js code loads data from a CSV file and renders an SVG pie chart with an ordinal x-axis and categorical color scale. It employs `d3.layout.pie` and `d3.svg.arc` for the slices, and the `d3.legend.color` API from the d3-legend library to generate the color legend. The visualization highlights the relative sizes of religious populations, with Christianity as the largest segment.

CCurran Kelleher

89% match

Loading thumbnail…

D3 Example

A polar area diagram displays the world’s religious populations, with each slice’s area proportional to its data value and colored by religion via a categorical color legend. Built with D3.js and d3-legend, it uses `d3.layout.pie`, `d3.svg.arc`, and a square-root scale to compute radii. Data comes from a CSV of Pew Research Center figures, rendered as SVG with a custom x-axis label.

CCurran Kelleher

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

88% match

Loading thumbnail…

D3 Example

This example shows a donut chart of world religions, with each slice sized by population and colored by religion, accompanied by a color legend. It reads from a CSV dataset on global religious demographics. The visualization uses D3’s `d3.layout.pie` and `d3.svg.arc` to generate the donut, while `d3.scale.ordinal` maps religious names to the x-axis and `d3.scale.category10` assigns colors. The `d3.legend.color` API from the d3-legend library renders the legend. SVG is the rendering method, with axes and labels styled using Open Sans.

CCurran Kelleher

88% match

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

87% match

Loading thumbnail…

D3 Example

A small multiples visualization of polar area charts displays the breakdown of religious populations across countries, with each pie chart positioned around a central circle and sized by population. The view animates country charts into place and supports clicking the color legend to re-rank countries by the selected religion’s population. Built with D3.js and SVG, the code uses nested selections, `d3.layout.pie`, `d3.svg.arc`, and ordinal, sqrt, and category color scales, with data from the Pew Research Center’s Global Religious Landscape dataset.

CCurran Kelleher

87% match

Loading thumbnail…

D3 Example

This example shows small multiples pie charts comparing the religious breakdown of the world’s five most populous countries, with each pie’s area scaled proportionally to that country’s total population. The visualization uses D3’s nested selections and d3.layout.pie with d3.svg.arc to draw the charts, d3.scale.sqrt for the population-based radius, and d3.legend.color for the categorical color key. Data comes from the Pew Research Center’s Global Religious Landscape dataset, loaded from a CSV file.

CCurran Kelleher

87% match