100%

Religions Map

✓ Published0🌍 Public

Last edited Apr 2, 2024

Created on Apr 2, 2024

An animated orthographic choropleth map displays the dominant religion of each country, with a color-coded legend that responds to hover. The globe rotates continuously as the user inspects the data. Built with D3.js, it uses `geoOrthographic`, `geoPath`, `geoGraticule`, and `scaleOrdinal` to project and style the map from a TopoJSON world atlas and a CSV of per-country religious demographics. The legend is generated by a custom `colorLegend` function.

AI-generated description

Religion Map

An interactive visualization tool for displaying religious demographics across different countries using D3.js and TopoJSON.

MIT Licensed

Similar vizzes

Loading thumbnail…

Religion Choropleth Map

This animated choropleth map visualizes the dominant religion in each country using a rotating orthographic globe. Country polygons are colored via a categorical scale, with gray indicating missing data. The visualization uses D3’s `geoOrthographic`, `geoPath`, `geoGraticule`, `scaleOrdinal`, and `schemeCategory10`, with an interactive legend from `colorLegend.js` that filters highlights on hover. Data comes from a 2020 CSV of religions by country, merged with country shapes from the visionscarto-world-atlas TopoJSON, fetched using `Promise.all` and parsed with `csvParse`.

Ffsajedi22

91% match

Loading thumbnail…

Top Religion Per Country with Filter

This visualization presents a choropleth map of the world, coloring each country by its predominant religion. Users can click on color legend entries to filter and highlight countries sharing that religion. The map is rendered using D3 v5’s `geoPath` with a natural Earth projection and a `scaleOrdinal` color scheme. The legend, built with a custom `colorLegend` component, offers interactive filtering. Data is loaded from a TSV file containing country codes and religion labels, joined with geographic features from the world-atlas TopoJSON source.

Ffsajedi22

84% match

Loading thumbnail…

Fork of Top Religion Per Country with Filter Round

This interactive choropleth map displays the dominant religion for each country, using an orthographic projection that rotates the globe. The map is rendered as SVG using d3.geoPath, with countries colored via a spectral color scale based on a data.tsv file. Users can click on the color legend to filter and highlight countries by a specific religion, and hover over a country to see its name and religion via a tooltip. The visualization is built with d3.v5, the topojson library for geographic features, and loads the world atlas geodata from unpkg.

Ffsajedi22

84% match

Loading thumbnail…

Top Religion Per Country

A world map colors each country according to its most prevalent religion, with a legend listing the eight categories. The visualization uses `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering, and `d3.scaleOrdinal` with a spectral color scheme. Data is loaded from a TSV file and merged with TopoJSON from world-atlas, while `d3.zoom` enables panning and zooming.

Ffsajedi22

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

77% match

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This interactive visualization combines a bar chart and pie chart to explore religious demographics across the 20 most populous countries. Hovering over a country bar triggers an animated pie chart that breaks down that nation’s religious distribution, using d3.pie, d3.arc, and transition.attrTween for the sweeping animation. A colorLegend component maps religion categories to a d3.scaleOrdinal with schemeGreens colors. Data comes from Pew Research’s Global Religious Landscape, processed into a CSV and rendered as SVG. The bar chart uses d3.scaleBand and d3.scaleLinear to encode country population totals.

RRohit-2710

76% match

Loading thumbnail…

Religions of Largest 20 Countries

This visualization displays the population and predominant religion of the world's 20 largest countries using horizontal stacked bars. The chart uses a color legend to allow interactive filtering, where hovering over a religion highlights the corresponding segments of each bar while dimming the rest. Built with React, the visualization leverages D3.js for data binding, scales, and layout, while employing the `d3.layout.stack` API to create the stacked bar structure and `d3-tip` for custom tooltips showing exact values. The data is formatted with a custom SI tick formatter that abbreviates billions as "B".

BBala Sai Krishna

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

76% match