Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
YYibo Zhang
Last edited Jan 9, 2022
Created on Jan 9, 2022

This example visualizes automobile performance data, plotting engine displacement against horsepower as a dense scatterplot of semi-transparent points. The visualization uses the Vega-Lite API via `vega-lite-api` and `vl.markPoint`, with a custom dark-themed configuration that removes axis domains and enlarges typography. Data is loaded asynchronously from a CSV using D3’s `csv` function, while tooltips display each car’s name. Rendering is handled through Vega and Vega-Lite, with the chart sized to fit the full 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 displays a scatter plot of automobile data from an auto-mpg CSV, showing the relationship between engine displacement and horsepower. The visualization is built using the Vega-Lite API, which composes specifications and renders them through Vega-Lite while leveraging D3’s `csv` loader to fetch and parse the data. Points are rendered as semi-transparent filled circles with tooltips that reveal vehicle names. The plot uses a custom config and a fit-to-window layout, with axis styling adjusted for readability.

Ccaptind
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows an interactive scatterplot of automobile data, plotting engine displacement against horsepower for individual car models. Each point represents a vehicle, with tooltips revealing the car’s name on hover. The visualization uses the Vega-Lite API to declare the chart specification, while D3’s `csv` function loads the auto-mpg dataset from a GitHub gist. The rendering relies on Vega and Vega-Lite scripts, with a custom dark-themed configuration for axis labels and titles, and the chart automatically fits the browser window dimensions.

Xxieyaoyue
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for automobile models using the Vega-Lite API, with tooltips displaying car names on hover. It renders a scatter plot with semi-transparent points on a full-screen canvas, configured for a clean dark-on-light aesthetic. The code loads data from a CSV file via D3’s `csv` function, then builds the visualization declaratively with `vl.markPoint` and `vl.x().fieldQ()`, wiring everything together through Vega-Lite and Vega’s runtime, including custom tooltip handling via the `Handler` from `vega-tooltip`.

GGyromighty
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile attributes by plotting engine displacement against horsepower, with each point representing a vehicle and tooltips revealing the car’s name. Built using the Vega-Lite API, it registers Vega and Vega-Lite, fetches data from a CSV via d3’s `csv` method, and renders an SVG chart. The visualization uses custom axis and label styling from a configuration object, with marks as semi-transparent points sized at 90 pixels. It leverages `vl.markPoint`, `vl.x().fieldQ`, and `vl.y().fieldQ` for quantitative encodings, and fits the chart to the window dimensions.

AAki78
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatterplot of automobile data, plotting engine displacement against horsepower for individual car models. Each point is rendered with low opacity to reveal density patterns, and hovering reveals the car’s name via tooltip. Built with the Vega-Lite API, it uses `vl.markPoint()` and `vl.encode()` to define the chart, with data loaded asynchronously via `d3.csv()` from a GitHub-hosted dataset. The code integrates Vega, Vega-Lite, and Vega-Tooltip, customizing axis styling through the `config` object.

Ffjvoris
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatterplot of automobile data, plotting engine displacement on the x-axis against horsepower on the y-axis, with tooltips revealing car names. It uses the Vega-Lite API to construct the chart, configured with custom axis styling and a dark color scheme. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted automotive dataset, then rendered through Vega and Vega-Lite, with tooltips provided by the `vega-tooltip` handler. The visualization fills the browser window, applying responsive sizing and opacity to convey point density.

AAbhivadan
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from a CSV file, plotting engine displacement on the x-axis against horsepower on the y-axis as semi-transparent points. The Vega-Lite API configures the mark, encoding, and tooltips, with custom axis styling from the configuration file. Data is loaded asynchronously using d3.csv from a GitHub gist, and the resulting chart is rendered with Vega’s SVG renderer. The visualization fills the browser window, with tooltips enabled via Vega Tooltip.

Yyashbaddi
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a collection of automobiles. It uses a scatter plot of points with a fixed size and low opacity to show data density, with tooltips revealing the car name. The visualization is built using the Vega-Lite API, registering it with Vega and Vega-Lite, and configures axes and label styling through a custom config object. Data is loaded from a remote CSV file via the `d3.csv` method.

MMayank Kumar
94% match