Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
VVahe Abovyan
Last edited Mar 9, 2022
Created on Mar 9, 2022

This example displays a scatterplot-like visualization of user data, with points positioned along categorical axes for country and status, using an arc mark with a fill and low opacity. The visualization is built with the Vega-Lite API, which is registered with Vega and Vega-Lite, and uses a tooltip handler for interaction. Data is fetched asynchronously via D3's `json` function from a local server endpoint, and the chart is configured with custom axis styles and dark label colors.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates an interactive scatterplot visualization built with the Vega-Lite API, plotting work class and gender attributes from a CSV dataset loaded via d3.csv. The points are rendered with low opacity and large size to show density distributions, with tooltips displaying gender values on hover. The code registers Vega-Lite with the vega and vegaLite libraries, configures an SVG renderer with custom axis styling, and uses the vega-tooltip Handler for interactive feedback. The visualization fills the window and adapts its dimensions dynamically.

Mmarkbayley
86% 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
85% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of religious affiliations across countries using a circular scatter plot, where each circle’s position encodes country and religion, and its size represents population. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to generate an SVG renderer. Data is loaded asynchronously from a remote CSV via D3’s `csv` method, then passed to a `vl.markCircle()` encoding that maps fields to axes, size, and tooltips. The view is configured to fit the window dimensions, and a custom config adjusts axis styling and font sizes. The Vega Tooltip handler enables interactive hover details.

CCHOI SEUNG HYUN
85% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of latitude and longitude coordinates loaded from a remote CSV file via d3.csv. The visualization shows data points positioned by their geographic coordinates, with axes scaled to exclude zero. Styling is customized through a Vega-Lite config object that adjusts font sizes, removes axis domains, and sets tick colors for readability. The chart is rendered as an SVG using vega and vega-lite, with tooltips provided by vega-tooltip, and its dimensions automatically fit the browser window.

GGuilinabaoge
85% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of car data, with each point representing a vehicle. The visualization uses a circular mark with low opacity to show the distribution of horsepower across different regions of origin, with tooltips revealing the car’s name. The chart is built using the Vega-Lite API, which programmatically defines the visualization, while D3’s `csv` method loads the dataset. The rendering is handled by Vega and Vega-Lite, with a custom tooltip handler and styling to improve readability.

Jjaowei
85% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping miles per gallon and horsepower with point size reflecting mpg and color indicating origin. The visualization uses the Vega-Lite API to declare the chart specification, with D3.js loading the CSV dataset from a GitHub gist. Rendering is handled by Vega and Vega-Lite, while Vega Tooltip provides interactive hover details. The chart fills the viewport, and custom axis, label, and title styling improve readability against the dark text on a light background.

MMalcolm Mead
85% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot built with the Vega-Lite API and D3.js, visualizing the distribution of different religions by country, with circle size encoding population. The visualization uses the vega-lite-api library to construct the chart, leveraging the d3.csv loader to fetch data on religion by country from a GitHub Gist. The interface is configured with custom axis styling and tooltip handlers, and is rendered to SVG, adapting its size to fit the browser window.

Nn.koldovsky@gmail.com
85% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automotive data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point’s opacity and size fixed. The visualization uses the Vega-Lite API, registered with vega and vega-lite, to render the mark as SVG. Data is loaded asynchronously via D3’s `csv` from a remote GitHub gist, with axis labels and tooltips showing the vehicle name. The view adapts to the full window size and includes a config for styling.

Aarmansepahvand
85% match