Skip to main content
SimilarExport ZIP
100%

D3 Example

✓ Published1🌍 Public
Zzhoufangqin
Last edited Jan 2, 2020
Created on Jan 2, 2020
Forked from 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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
94% 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
91% 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
90% match
Loading thumbnail…

D3 Example

This example visualizes religious demographics in the top five most populous countries for 2010, using stacked bars to show the population of each religion within a country. The visualization, built with D3 and SVG, supports animation and interactivity. Users can hover over color legend entries to highlight specific religions, with a tooltip displaying the population for the hovered category. The chart draws on the Stacked-to-Grouped Bars technique and includes custom styling for axes and tooltips.

CCurran Kelleher
90% match
Loading thumbnail…

Bar chart Country with religions

This stacked bar chart visualizes population by country, segmented across multiple religions. Built with React and D3.js, it uses `d3.layout.stack` and `d3.scale.ordinal` to construct the bars, with SVG rendering for crisp graphics. Interactive tooltips via `d3-tip` reveal precise values on hover, while a legend (using `d3.legend`) triggers a responsive overlay effect that highlights bars from a selected religion and dims others via animated transparency transitions.

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

Bar chart Country with religions

This interactive bar chart visualizes the population of countries, with each bar segmented by religion and stacked using d3.layout.stack. Hovering over a color legend entry highlights the corresponding religion’s segments across all countries while fading the rest via an SVG overlay. The chart uses React with D3.js to render axes, tips via d3-tip, and a color legend from d3-legend, with data presented in a custom bar layout.

NNita
88% match