Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Oct 25, 2021

Created on Oct 25, 2021

This example uses the Vega-Lite API to create a scatterplot of automotive data, mapping engine horsepower against fuel efficiency (mpg) with points colored by country of origin. The visualization loads a CSV dataset via d3.csv, applies custom axis and label styling from the config, and renders circles with tooltips showing car names. It demonstrates the vega-lite-api wrapper for declarative chart construction, utilizing vl.markCircle, vl.x, vl.y, and vl.tooltip encodings, with vega-tooltip for interactive hover details.

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 to render a scatter plot of automotive data from the UCI Auto MPG Data Set. The visualization positions each vehicle by miles per gallon on the x-axis and horsepower on the y-axis, with color encoding for country of origin and circle size representing weight. Tooltips display the car name. The code imports data via d3.csv, configures axes and label styling through a custom config object, and uses the Vega-Lite API to define marks and encodings programmatically before rendering with Vega in SVG format.

RRoshan Kumar

94% 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 the auto-mpg.csv dataset. It plots miles per gallon on the x-axis against horsepower on the y-axis, with points colored by country of origin and sized with a fixed 300-pixel radius at 50% opacity. The visualization is generated declaratively using `vl.markCircle`, `vl.x().fieldQ`, `vl.y().fieldQ`, and `vl.color().fieldN` to encode the quantitative and nominal fields, with tooltips showing car names. Data is loaded asynchronously via `d3.csv` before the chart is rendered into the DOM.

Aape-ape-ape

93% match

Loading thumbnail…

Fork of Vega-Lite API Template 2

This example displays a scatter plot of automobile fuel efficiency against horsepower, with points colored by country of origin and tooltips showing model names. The visualization uses the Vega-Lite API to construct the chart declaratively, combining `vl.markCircle` with encodings for the quantitative axes and nominal color. Data comes from the UCI Auto MPG dataset loaded via `d3.csv`. The code integrates vega, vega-lite, and vega-lite-api libraries, with additional tooltips from vega-tooltip and custom axis styling from a config object.

MMayank Kumar

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of the Auto MPG dataset, showing the relationship between miles per gallon and horsepower for various car models. Points are colored by origin and sized by weight, with tooltips revealing the car name. The visualization is created programmatically using `vl.markCircle` and `vl.encode`, with data loaded via D3’s `csv` function. The view is fitted to the window size and styled using custom Vega-Lite configuration, relying on the Vega, Vega-Lite, and Vega-Tooltip libraries.

MMohammad jahangir alam

93% 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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes car performance data from the auto-mpg dataset, plotting horsepower against miles per gallon and coloring points by country of origin. The visualization uses the Vega-Lite API to define a scatter plot with circles, where both color and size encode variables, and tooltips display car names. It loads data via d3.csv, configures a dark theme with custom axis styling, and renders the chart as SVG using Vega-Lite’s vega-lite-api library, integrated with vega-tooltip for interactive hover details.

AasafJortilles

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes a scatter plot of automobile data, mapping weight on the x-axis, horsepower on the y-axis, and encoding country of origin as color and fuel efficiency (mpg) as point size. The visualization is built using the Vega-Lite API, which composes a declarative specification in `viz.js` and renders it as an SVG. Data is loaded from a remote CSV file via `d3.csv`, and the chart’s appearance is customized through a config object that adjusts axis styles and label typography. Interactivity is added via the Vega Tooltip handler, enabling hover details.

FFrancisco Ortega

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset, using circle marks to show the relationship between miles per gallon and horsepower. Point color encodes the country of origin, while size maps to vehicle weight. Built with the Vega-Lite API, the visualization loads data via D3’s `csv` function and renders to SVG. The code configures the chart’s dimensions and appearance through a custom config object, and tooltips are enabled via the Vega Tooltip handler.

Ggzm17

92% match