Skip to main content
SimilarExport ZIP
100%

D3 Example

✓ Published0🌍 Public
CCurran Kelleher
Last edited Nov 20, 2015
Created on Nov 17, 2015

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.

AI-generated description

A bar chart showing world religions. Example 9 from the screencast Splitting Charts. This shows how to make tilted tick labels. Draws from How to rotate the text labels...

MIT License

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

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
92% 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
88% 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
88% match
Loading thumbnail…

D3 Example

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.

CCurran Kelleher
87% match
Loading thumbnail…

D3 Example

This example presents grouped bar charts comparing religious affiliations across the five most populous countries, using population data loaded from a CSV via `d3.csv`. The code leverages `d3.nest` to structure data by religion and `d3.layout.stack` to layer the groups, while `d3.scale.ordinal` and `d3.scale.linear` map countries and population counts to SVG rectangles. A color legend is rendered with `d3.legend`, and axes are customized using `d3.svg.axis`. The visualization highlights stacked-to-grouped bar transitions, with styling via Open Sans fonts and D3 version 3.5.5.

AAsadeviB
87% match
Loading thumbnail…

D3 Example

This example shows the population distribution across five countries, broken down by religious affiliation, using a stacked bar chart. The chart is rendered with SVG via the D3.js library, utilizing the `d3.nest` and `d3.layout.stack` APIs to group and stack the data, with `d3.scale.ordinal` and `d3.scale.linear` for the axes. The data is loaded from a CSV file, and the bars are colored using `d3.scale.category10`. The chart uses a custom SI formatter to display large numbers, such as "B" for billions, on the y-axis.

Yyuting89830@gmail.com
86% 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
86% match
Loading thumbnail…

D3 Example

This example shows grouped bars comparing population counts across five countries, with each bar colored by religion. It uses D3.js version 3.5.5 for scales, axes, and the d3.layout.stack for stacked-to-grouped transformation, along with the d3-legend library for the color legend. Data is loaded from a CSV file, and the view is rendered as an SVG with ordinal and linear scales. The y-axis uses tick formatting with SI prefixes.

AAsadeviB
86% match