Fork of Vega-Lite API Template

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for vehicles from the auto-mpg dataset, with tooltips showing car names on hover. It is built using the Vega-Lite API, which generates a scatter plot encoded with quantitative fields for both axes, rendered as semi-transparent points. The code registers Vega, Vega-Lite, and Vega-Lite API libraries, applies a custom dark-themed configuration in config.js, and loads CSV data asynchronously via d3.csv. The chart fills the entire browser window by dynamically setting width and height to the viewport dimensions.

HHongleang Lim

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower in the auto-mpg dataset, plotting points as a scatterplot with opacity to reveal density. Built using the Vega-Lite API, it defines a point mark with quantitative fields for both axes and tooltips showing car names. The code registers Vega and Vega-Lite, fetches CSV data via d3.csv, and renders the chart as SVG, applying custom axis and label styling from a config object.

CChris Bushong

Fork of Vega-Lite API Template

This visualization displays the relationship between engine displacement and horsepower for a collection of automobiles, with tooltips revealing the model name for each point. It uses the Vega-Lite API to declaratively define the scatter plot, with D3.js (d3.csv) loading the auto-mpg dataset from a GitHub gist. The code registers Vega, Vega-Lite, and Vega-Tooltip, and renders the chart as SVG, adjusting the view to fit the window size.

GGregS1290

Fork of Vega-Lite API

This example visualizes the relationship between engine displacement and horsepower for cars, with tooltips showing vehicle names. The scatter plot uses the Vega-Lite API to declare the mark type and encodings, while D3.js loads the auto-mpg CSV dataset. The visualization is rendered through Vega and Vega-Lite, with Vega Tooltip handling interactions and custom configuration adjusting font sizes and axis styling for readability.

Mmuhammadshumas

Fork of Vega-Lite API Template

This example visualizes the relationship between car engine displacement and horsepower, with a tooltip revealing the car name for each point on the line chart. It loads the auto-mpg.csv dataset from a GitHub gist using D3’s CSV function. The visualization is built programmatically with the Vega-Lite API, registering Vega and Vega-Lite, and renders as SVG with custom axis and label styling from a config object. The chart fully fits the browser window via autosize settings.

ZzhehaowUNC

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

Fork of Vega-Lite API Template

This example depicts a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips revealing car names. Built with the Vega-Lite API, it uses `vl.markPoint` and `vl.encode` to define visual encodings, while D3’s `csv` loads the auto-mpg dataset. The chart is rendered as an SVG via Vega and Vega-Lite, with custom axis and label styling from the config file. Tooltips are handled by the Vega Tooltip handler.

MMagarsa Gudeta

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a set of automobiles, with tooltips revealing the car name for each point. The visualization is built using the Vega-Lite API, which composes a scatter plot using `vl.markPoint()` with `fieldQ` encodings for the quantitative axes. Data is loaded asynchronously from a CSV file containing the auto-mpg dataset via `d3.csv`. The chart is rendered as SVG, with custom axis styling defined in a config object and interactive tooltips supplied by the vega-tooltip handler.

Zzykel