Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 1, 2021

Created on Aug 1, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example visualizes the top five religions by country, using circle size to encode population and positioning to map country and religion attributes. It leverages the Vega-Lite API to construct a scatterplot, with data fetched via D3’s `csv` loader. The visualization is rendered as an SVG through Vega, incorporating a custom config for styling and automatic chart sizing to fit the viewport.

Aalexandermodell

93% match

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

91% match

Loading thumbnail…

4th Vega-Lite API Template

This example visualizes the top five religions by population per country, with bars sized and colored to reflect religious demographics. Built using the Vega-Lite API, it registers vega and vegaLite, and employs a bar mark with positional and size encodings. The visualization loads CSV data from a remote gist URL, renders as an SVG, and incorporates custom axis styling and tooltips via vega-tooltip's Handler.

NNicholas Francis O'Brien

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of the world’s top five religions across countries using a bubble chart, where each circle’s size represents population. The visualization is built with Vega-Lite’s API, leveraging `vl.markCircle` for the marks and encoding position by country and religion, with `vl.size().fieldQ('population')` for scaling. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and the chart is rendered to SVG through `vega` and `vega-lite` with a custom tooltip from `vega-tooltip`. A custom `config.js` adjusts font sizes and colors for readability.

Mmikekslv

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the top five religions by country using a stacked bar chart, with bars sorted by total population and colored by religious affiliation. The visualization is built with the Vega-Lite API, which programmatically constructs a bar mark with x, y, color, and tooltip encodings from CSV data loaded via d3.csv. The chart auto-sizes to the browser window and applies custom axis and label styling from a configuration object. Vega tooltips display temperature values on hover, though the underlying dataset contains population and religion fields.

Vvangenned

90% match

Loading thumbnail…

Vega-Lite API Template

This interactive visualization uses the Vega-Lite API to render a circular bubble chart, mapping religion by country with circle size encoding population. The chart reads data from a CSV containing religionByCountryTop5, loading it via d3.csv, and encodes country on the x-axis and religion on the y-axis. Tooltips show population on hover. The vega-lite-api library interfaces with Vega and Vega-Lite, applying a custom config for dark text and styled axis labels, and renders to SVG using d3.v5 for data fetching.

Nnahsiloh

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

90% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays the population distribution of five countries across religions using a bubble chart. It is built with the vega-lite-api, which registers vega, vega-lite, and vega-tooltip to render the chart as SVG. The data is loaded asynchronously via d3.csv from a Gist URL, with each bubble’s size mapping to the population field. The chart fills the browser window and uses the vega-lite API’s markCircle method with encoded x and y fields for country and religion.

CCurran Kelleher

90% match