Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Zzhoufangqin
Last edited Jan 2, 2020
Created on Jan 2, 2020
Forked from D3 Example

This interactive stacked bar chart visualizes religious populations across countries using data from the OSMI Mental Health in Tech Survey 2018. It renders horizontal bars with SVG and d3.svg.axis, color-coded by religion via d3.scale.category10. A d3.legend.color legend supports hover interactions: selecting a religion fades the base bars with an overlay rect and re-renders only that layer using d3.layout.stack. d3-tip displays tooltips showing exact population values on hover.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
87% 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
86% 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
85% match
Loading thumbnail…

Stacked Bars

This stacked bar chart visualizes population distribution across countries by religious affiliation, using a horizontal layout where each bar segment represents a different religion’s share. Built with D3.js, the chart encodes categorical data via `d3.scale.ordinal` and `d3.layout.stack`, and supports interactive highlighting: hovering over the color legend dims non-selected layers and re-renders the foreground bars. Animated transitions via `transition.attr` control overlay opacity, while tooltips from `d3-tip` display exact values. The SVG rendering uses axes, a color legend from `d3-legend`, and loads population data from a CSV file.

Pprincit
85% 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
85% 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
84% match
Loading thumbnail…

ACT6_TASK2.2

This interactive stacked bar chart visualizes religious demographics across countries, showing population distributions by religion for nations like China, India, and the United States. The D3.js v7 visualization uses d3.stack to process CSV data into hierarchical series, with d3.scaleBand for x-axis positioning, d3.scaleLinear for y-axis scaling, and d3.scaleOrdinal for categorical color encoding. Built with React's useContainerDimensions hook for responsive sizing, the visualization renders SVG elements and supports click interactions that highlight the selected country with a black border stroke.

RRevanth putta
84% match
Loading thumbnail…

Test

This stacked bar chart displays the estimated 2010 religious composition of the 20 most populous countries, with each bar segmented by religion. Hovering over bars reveals tooltips with exact population figures, while hovering over the color legend highlights a specific religion and dims the others. The visualization is built with D3.js, using `d3.layout.stack()` for stacking, `d3.legend.color()` for the interactive legend, and `d3-tip` for tooltips. Data comes from the Pew Research Global Religious Landscape dataset, rendered as an animated SVG.

Eeherchen
83% match