using Vega lite API

100%

using Vega lite API

✓ Published0🌍 Public

Last edited Mar 23, 2021

Created on Mar 23, 2021

Forked from Mexico Population Analysis (Area x Prop)

A circular scatterplot visualizes Mexican states based on population and surface area, with color encoding state names and tooltips revealing additional details. The view uses the Vega-Lite API to construct the spec programmatically, registering Vega and Vega-Lite instances for rendering. Data is loaded asynchronously via D3’s CSV parser and styled with custom axis and title settings for readability. The visualization renders to fit the full browser window in SVG format.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Mexico Population Analysis (Area x Prop)

This visualization plots Mexican states by population against surface area, with each circle colored and tooltipped by state name. It uses the Vega-Lite API (vl.markCircle, vl.encode with fieldQ/fieldN mappings) to generate the scatterplot from CSV data fetched via d3.csv, rendering through vega and vega-lite with custom config for axis styling. The chart is fitted to the full window size and includes an interactive tooltip handler.

AAndres de la Garza

82% match

Loading thumbnail…

Fork of Mexico Population Analysis (Area x Prop)

The visualization displays Mexico’s state-level population against surface area, with each circle sized by area and colored by state, while tooltips reveal exact population values. It uses the Vega-Lite API to declare the scatter plot, with d3.csv loading the data from a GitHub gist. The chart is rendered as a full-viewport SVG, and the config module customizes font sizes and axis styles for readability. Vega-Tooltip handles interactive hover details, and vega-lite-api coordinates the specification and rendering pipeline.

Kkimberly94

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of population by country using a scatter plot, with points colored by percentage and positioned along a categorical country axis and quantitative population axis. It loads data from the UCI Auto MPG dataset via a Gist, though the code references CSS named colors and population fields. Built with the Vega-Lite API, the visualization registers Vega and Vega-Lite, configures an SVG renderer with tooltips, and applies a custom dark theme for improved readability. The chart uses a point mark with reduced opacity and a zero-less scale to highlight population differences.

Gguitmonk-1290

79% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render an interactive scatter plot of population density data, plotting population in 2021 against density per square mile for various countries. The data is loaded from a CSV file via D3’s `csv` function, and the plot encodes country as color with tooltips showing country names. The code registers Vega, Vega-Lite, and the Vega-Lite API, applies a custom dark theme through a config object, and sizes the SVG renderer to fit the window using `autosize`. The mark-point specification sets point size and opacity, though tooltip fields are limited to the country name.

Ppfoulley

79% match

Loading thumbnail…

Vega light API demo

This example demonstrates a scatter plot where each circle represents a data point, with its position mapped to the `jan` and `year_val` fields and color encoding the `districtid` category. The Vega Lite API, using `vl.markCircle` and `vl.encode`, builds the visualization declaratively from CSV data fetched via `d3.csv`. Rendered as an SVG through the Vega rendering engine, the plot includes tooltips for `state`, `districtid`, `year_val`, and `jan` values, and employs a custom configuration for styled axes and labels.

Aarunkumarv1530@gmail.com

78% match

Loading thumbnail…

Vega-Lite API Template

This example renders a scatterplot of automobile data using the Vega-Lite API, with each circle representing a car model positioned by its country of origin and horsepower. The visualization shows overlapping points with low opacity to reveal density patterns. It loads data from a CSV file using d3.csv, constructs the mark and encoding specifications through vl.markCircle and vl.encode, then renders the final SVG using Vega charting libraries bundled with Vega-Tooltip. The code demonstrates a workflow that builds a Vega-Lite specification programmatically rather than writing JSON directly, minimizing boilerplate while retaining full expressiveness.

CCurran Kelleher

77% match

Loading thumbnail…

Vega-Lite API

A scatterplot maps foreign assistance spending across countries, plotting fiscal years against income group acronyms and coloring points by assistance objective. The visualization uses the Vega-Lite API to declaratively encode circle marks with size, opacity, and tooltip fields, while fetching CSV data from a GitHub repository via D3's `csv` loader. Custom configuration adjusts axis styles and theme colors, and the chart auto-fits to the browser window with an SVG renderer enhanced by Vega Tooltip.

Ssahildesignzz@gmail.com

77% match

Loading thumbnail…

rishita Vega-Lite API Template

This example shows the distribution of religious populations across countries using a circular scatter plot, with each point’s color mapped to a religion and its vertical position encoding population size. The visualization is built with the Vega-Lite API, which is registered alongside Vega, Vega-Lite, and D3.js. Data is loaded asynchronously via D3’s CSV module from a GitHub Gist sourced from the UCI Auto MPG dataset. The chart uses a custom configuration to style axes and labels, and Vega Tooltip provides interactive hover details.

Rrishyossarian

77% match