Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Sep 20, 2022

Created on Sep 20, 2022

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.

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 uses the Vega-Lite API with D3 to render a scatterplot of automobile data from a CSV file. The visualization encodes origin as the x-axis, horsepower as the y-axis, weight as color, and mpg as point size, with tooltips showing car names. It applies custom axis and label styling via the Vega-Lite config, and uses the vega-tooltip handler for interactive hover details. The chart is rendered as an SVG that fits the full window using the vega-lite-api’s `render()` method.

Llatifiss

87% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatterplot of automotive data from a CSV, mapping engine displacement and horsepower onto the x- and y-axes, with color encoding by origin and point size representing miles per gallon. It loads the data via `d3.csv` and builds the visualization with `vl.markPoint`, `vl.x`, `vl.y`, and other encoding functions, then renders to SVG using Vega and Vega-Lite, with a custom tooltip handler and configuration for improved readability.

AAnHaiTrinh

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of a Vega-Lite API template displays a scatter plot of quantitative fields `gap` and `depth` from a CSV file fetched via d3’s `csv` function, with points colored by the categorical `place` field and a tooltip showing that same attribute. The visualization uses the Vega-Lite API (`vl.markCircle` and `vl.x().fieldQ()`) to define the mark encoding, then renders it as an SVG via Vega-Lite, with the `vega-tooltip` handler attached. The chart’s width and height are set to fill the browser window, and axis styling is customized through a config object for readability.

YYenTingWu

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes accommodation data from a custom CSV dataset, plotting a scatter chart of Longitude against AddressRegion with tooltips showing Tags. Built using the Vega-Lite API, it registers Vega and Vega-Lite libraries with vega-tooltip for interactive hover details. The chart renders as an SVG, fills the entire window, and uses custom configuration for axis styling and dark label colors. The data is loaded via d3.csv, and the visualization is generated programmatically through the vl.markPoint and vl.encode APIs.

TThomas Cormican

85% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automobile data from a CSV file, plotting engine displacement against horsepower with a tooltip that displays the car name. The code registers Vega, Vega-Lite, and Vega-Lite API with a tooltip handler, loads the data via d3.csv, and applies custom styling through a config object. It demonstrates a programmatic workflow where the chart specification, data loading, and rendering are separated across modules, culminating in a full-screen, interactive visualization.

Aaymen0023

85% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatterplot of automobile data, mapping miles per gallon and horsepower from a CSV dataset, with points colored by origin and sized by mpg. The visualization uses the Vega-Lite API (vl) to construct the chart declaratively, while D3.js fetches the data via `d3.csv`. Custom styling is applied through a Vega-Lite config for axis and label appearance. The code registers Vega and Vega-Lite with the API, renders to SVG, and integrates a tooltip handler for interactive exploration.

LLeandro Miguel Narciso

85% match

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

85% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

VVahe Abovyan

85% match