Skip to main content
SimilarExport ZIP
100%

viz_plots

✓ Published0🌍 Public
Ssagar limbu
Last edited May 27, 2022
Created on May 25, 2022
Forked from Hello VizHub

This example displays a bar chart of the top 20 countries by population, with each bar colored according to the predominant religion of that country. The visualization is generated using the Vega-Lite API via `vega-lite-api`, which interfaces with the Vega and Vega-Lite rendering engines to create an SVG output. Data is fetched asynchronously from a CSV file hosted on GitHub using D3.js's `csv` function. The chart encodes country on the x-axis, population on the y-axis, and religion as both color and tooltip, with axes configured through a custom config object.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Vega Bar Chart

This bar chart visualizes the top 20 countries by population, with bars colored by religion and sorted in descending order, using a zero-free y-axis scale to emphasize proportional differences. Built with the Vega-Lite API within a React framework, the visualization loads CSV data via d3.csv and renders an interactive SVG with tooltips through the Vega tooltip handler. The configuration applies custom dark styling to axis labels and titles, while the chart responsively fits the full window dimensions.

AAmeer Nuri
87% match
Loading thumbnail…

Teste com vega lite api v2

This example visualizes the top 20 countries by religious population, using a bar chart where each bar is colored by country and sorted by population in descending order. Built with the Vega-Lite API v2, it registers with Vega and Vega-Lite, uses D3's `csv` to fetch data from a GitHub gist, and applies D3's `format` to round population values. The chart renders responsively to the window size, with custom axis styling and an interactive tooltip showing country and population details.

Xxilingus
85% match
Loading thumbnail…

Vega-Lite API Religeon by Country Top 5 Stacked Bar Chart

This stacked bar chart displays the top five countries by population, broken down by religious affiliation, using data from a CSV file of global religion statistics. Each bar is segmented by religion with a color encoding and interactive tooltips showing population values. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and renders SVG output. Data loading uses the `csv` function from d3, while the chart configuration and encoding are defined through the `vl` API methods like `markBar`, `encode`, and `config`.

NNelson M
85% match
Loading thumbnail…

Vega-Lite API Religions by Country

This visualization shows the population of each country, broken down by religion, using a stacked bar chart. Each bar represents a country, sorted by total population, with colored segments for different religions and tooltips revealing exact population values. It is built using the Vega-Lite API, where the chart specification is defined programmatically via `vl.markBar()` and encoding methods. The underlying data is fetched as CSV using `d3.csv` from a remote gist, and the final visualization is rendered as an SVG canvas using the `vega` renderer.

MMarta
85% match
Loading thumbnail…

Data visualization of population of religion in country with respect to country

This visualization displays the population of different religions across countries using a bar chart. Each bar’s position encodes the country and religion, while its color represents the population value, with tooltips revealing exact numbers. The visualization is built with Vega-Lite and the vega-lite-api, fetching data from a CSV via d3.csv. It uses customized axis and label styling from a config object, rendering full-screen with fit autosizing.

DDipak654
85% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes the top five religious affiliations by population for each country, using a bar chart where bars are colored by religion and sorted by total population. Built with the Vega-Lite API, it composes a specification programmatically via `vl.markBar()`, `encode()`, and field accessors, then renders it to SVG through Vega-Lite and Vega. Data is loaded asynchronously from a CSV file using `d3.csv`, and the chart is configured with custom axis styles and tooltips via the `vega-tooltip` Handler.

Jjulesgentry
85% match
Loading thumbnail…

Vega-Lite API Template

This example presents a bar chart of population by country, with bars segmented by religion, using the Vega-Lite API. The visualization reads CSV data from a GitHub gist via `d3.csv` and encodes country, population, and religion through `vl.x()`, `vl.y()`, and `vl.color()`. It renders as an SVG in the browser, applying custom axis and label styling from a config object. The chart also includes tooltips for population values, powered by the Vega Tooltip handler.

QQingyue99
84% match
Loading thumbnail…

Vega-Lite API - Bars

This example uses the Vega-Lite API to render an interactive bar chart of the top five religions by country population, sourced from a CSV file via d3.csv. The visualization encodes country on the x-axis, population on the y-axis, and religion as color, with a tooltip showing population on hover. It leverages vega-lite-api’s `markBar`, `encode`, `fieldN`, and `fieldQ` methods, along with d3.v5 for data loading. The chart is configured with a custom dark theme and automatically fits the full browser window size.

KKhadidja Arezki
84% match