Circle for religion vs. country

100%

Circle for religion vs. country

✓ Published1🌍 Public

Last edited Dec 22, 2020

Created on Dec 22, 2020

This example shows the distribution of major religions across countries using circle marks sized by population. The x-axis sorts countries by total population, while the y-axis lists religious affiliations, with tooltips revealing the specific religion for each circle. Data comes from a CSV file loaded via `d3.csv` and is rendered using the Vega-Lite API’s `markCircle` method, with quantitative encoding for population and nominal fields for country and religion. Styling is customized through a config object, and the visualization auto-fits the browser window.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template - religion - circle

This example visualizes the world’s major religions by country using a circle plot, where each circle’s area encodes population size and its position maps country and religious affiliation. The visualization is built with the Vega-Lite API, registered within D3.js (v5), and renders as an SVG. It loads data from the UCI Machine Learning Repository via a CSV file, fetched with `d3.csv`. The chart’s appearance is customized through a Vega-Lite config, adjusting font sizes and axis styling for readability.

MMahesha999

84% match

Loading thumbnail…

Vega-Lite API Template

This visualization shows the top five religions by population across countries, with each circle’s color encoding population size and position mapping country and religion. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3.v5, using `vl.markCircle()` for marks and `vl.x().fieldN()`/`vl.y().fieldN()` for categorical axes. The code loads CSV data from a Gist via d3’s `csv()` function, applies a custom config for axis and label styling, and renders responsively to the full window with SVG output.

Ttharuta

83% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the religious demographics of countries, with circles sized to represent population counts across religious affiliations. The chart plots countries on the x-axis and religions on the y-axis, using circle size as an encoding channel for quantitative population data. The example is built with the Vega-Lite API, which compiles specifications to Vega for rendering in SVG. Data is loaded asynchronously from a CSV file via `d3.csv`, and the visualization is configured for full-window display with custom axis styling and tooltip support via the Vega-Tooltip handler.

11tang

83% match

Loading thumbnail…

D3 Example

This example visualizes the population sizes of world religions using colored circles positioned along a horizontal axis. It shows the data as an array of circles, with each circle’s area encoding the population value and its color representing the religion category. The visualization is rendered as an SVG using D3.js (version 3.5.5), with an ordinal x-scale for categorical spacing, a square-root scale for radius, and a categorical color scale. The x-axis is rotated slightly, and data is loaded from a CSV file (`religionWorldTotals.csv`) using `d3.csv`.

CCurran Kelleher

82% match

Loading thumbnail…

Vega-Lite API Template

A bubble chart displays the population of each religion across countries, with circle size encoding population and color distinguishing religions. Built with the Vega-Lite API, the visualization uses `vl.markCircle` and encodings for `x` (country), `y` (religion), `size`, and `tooltip`. Data is loaded via D3’s `csv` from a GitHub gist, and the chart renders through Vega and Vega-Lite with a custom config for styling.

MMosheAron

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the global distribution of religious populations across countries using a bubble chart, where each circle’s size encodes the population count and its position maps country and religion on the axes. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and it renders as an SVG via the `vl.markCircle` and `vl.encode` functions. Data is loaded asynchronously from a CSV using D3’s `csv` method, and a custom config object adjusts axis styling and font sizes for readability.

AAlexander Dorling

81% match

Loading thumbnail…

Vega-Lite API

This visualization displays the distribution of world religions across countries, using circle size to represent population. Built with the Vega-Lite API, it maps country and religion categories along the axes with a single circular mark per data point. The example demonstrates the library’s fluent interface, registering Vega and Vega-Lite, and applying a dark config for labels and axes. Data is loaded via D3’s `csv` function from a Gist, and the chart auto-fits to the window size with interactive tooltips supplied by the Vega Tooltip handler.

JJoeleen Kado

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the global distribution of religious populations by country using a bubble chart. Circle size and tooltip values encode population counts, with countries ordered by total population on the x-axis and religions on the y-axis. The visualization is built with the Vega-Lite API, which programmatically constructs the chart specification, and renders it via the Vega and Vega-Lite libraries. Data is loaded as CSV from a remote gist using D3’s `csv` function, and custom axis styling improves readability.

BBHAVYA0042

81% match