Skip to main content
SimilarExport ZIP
100%

D3 Example

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

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.

AI-generated description

This example shows how to split a rectangle into a stack using d3.layout.stack. This is example 12 from the screencast Splitting Charts.

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=1979130&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
91% 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
89% match
Loading thumbnail…

TODO D3 Example

This example visualizes the religious composition of the world's 20 most populous countries using a stacked horizontal bar chart. Each bar represents a country's total population segmented by religion, with colors distinguishing religious groups and a legend that highlights specific segments on hover. Built with React and D3.js, it employs `d3.layout.stack` for stacking, `d3.svg.axis` for scales, `d3.legend.color` for the interactive legend, and `d3-tip` for tooltips. Data comes from a CSV file showing population counts per religion and country, rendered as SVG with animated hover effects.

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

D3 Example

This example visualizes the religious composition of the top five countries by population, using grouped bar charts to compare the population counts for each religion side-by-side within each country. The chart is rendered as an SVG and built with D3.js, leveraging `d3.nest`, `d3.layout.stack`, and `d3.svg.axis` to structure and display the data, while a color legend from the d3-legend library identifies each religious group. Data is loaded from a CSV file containing country, religion, and population values.

CCurran Kelleher
88% 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
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
88% match