Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
TThomas Cormican
Last edited Jan 7, 2022
Created on Jan 7, 2022

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.

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…

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 visualizes weekly temperature readings for multiple locations, plotting each measurement as a point in a scatterplot with time on the x-axis and temperature on the y-axis. Hovering over a point reveals the location name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to produce an SVG rendering. Data is loaded asynchronously from a CSV file using D3’s `csv` function, and the chart is configured to fit the full browser window with custom axis styling.

FFonda Irena Santoso
83% 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
83% 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
82% 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 the auto-mpg CSV dataset, plotting displacement against horsepower with a tooltip revealing the car model. The visualization is built programmatically via `vl.markPoint` and encode methods, with the chart filling the browser window. Appearance is customized through a config object that removes axis domains and adjusts label styling, while `d3.csv` loads the data and a Vega Tooltip handler enables interactive hover details.

KKristopher Skelton
82% 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
82% match
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
82% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, with color representing the origin of the car, and point size mapped to vehicle weight. Tooltips display the car model name on hover. The code explicitly registers Vega, Vega-Lite, and Vega-Tooltip, then asynchronously loads CSV data via `d3.csv`, applies a custom `config` for axis labels and styling, and renders a full-window SVG using `vl.mar` with size and opacity encodings.

Ttim10133222
81% match