Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 4, 2021

Created on Jun 3, 2021

This example demonstrates a bar chart that visualizes the relationship between automobile model year and horsepower, colored by country of origin. Built with the Vega-Lite API, it uses `vl.markBar()` to encode data through the `vl.x()`, `vl.y()`, `vl.color()`, and `vl.tooltip()` channels. The visualization loads automotive data from a CSV file via `d3.csv`, and integrates with `vega-tooltip` for interactive hover details, with custom styling applied through a configuration object.

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 visualizes automobile data where each car model is represented as a bar positioned by its miles per gallon (mpg) and year, with color encoding the country of origin and bar size encoding horsepower. The visualization uses the Vega-Lite API to construct the specification, which is then rendered as an SVG by Vega, with data loading handled through d3’s `csv` function. Tooltips are enabled via vega-tooltip, and the chart is configured with custom axis and label styling from the `config.js` file, while the layout auto-fits to the browser window.

Rredeath96

90% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between horsepower and country of origin, with tooltips revealing car names. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification through method chaining (e.g., `vl.markPoint`, `vl.x().fieldN`). The code registers Vega, Vega-Lite, and the Vega-Lite API in a D3 v5 environment, fetches CSV data via `d3.csv`, applies custom axis and label styling from a separate config module, and renders to SVG with an interactive tooltip handler from Vega-Tooltip.

PPriteshlip10

88% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between miles per gallon, horsepower, weight, and country of origin. It uses the Vega-Lite API to build the visualization declaratively, with the `vl.markCircle` and `vl.encode` methods specifying the visual encodings. The data is loaded from a CSV file via `d3.csv`, and the plot is rendered to an SVG canvas using the Vega rendering engine. The template also configures chart styling through a custom `config` object and enables interactive tooltips with the Vega Tooltip handler.

MMarta

88% match

Loading thumbnail…

Vega-Lite API Template

This example shows the relationship between engine displacement and horsepower for a collection of automobiles, with points colored by region of origin and tooltips revealing model names. The visualization uses the Vega-Lite API to construct a scatter plot declaratively, with `vl.markCircle`, `vl.x`, `vl.y`, and `vl.color` encoding channels. Data loads asynchronously via D3’s `csv` function from a GitHub gist, and the resulting chart renders as SVG, styled through a custom config object that adjusts axis and label appearance. The code integrates Vega, Vega-Lite, Vega-Lite API, and Vega-Tooltip to enable interactive hover details.

CCurran Kelleher

88% match

Loading thumbnail…

Vega-Lite API Template I

This visualization displays automobile performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with each point colored by country of origin and sized by vehicle weight. Built with the Vega-Lite API, the example constructs chart specifications programmatically, encoding tooltips for car names and customizing axis styling through a config object. The implementation uses `vl.markCircle` with field encodings for quantitative and nominal data, while `getData` imports the dataset via d3's `csv` function, and the `run` function renders the visualization directly into the document body.

OOleJRask

88% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automotive data, showing the relationship between miles per gallon and horsepower, with points colored by country of origin. Built with the Vega-Lite API wrapper for JavaScript, it composes visualizations programmatically using methods like `vl.markPoint()`, `vl.x()`, `vl.y()`, and `vl.color()`. The code loads CSV data via `d3.csv`, applies a custom configuration for axis styling, and renders an interactive SVG view with tooltips through vega-tooltip.

SSam

88% match

Loading thumbnail…

Vega-Lite API

This example demonstrates a scatterplot of automotive data, mapping the country of origin along the x-axis, horsepower on the y-axis, with weight mapped to color and miles per gallon mapped to point size. Built with the Vega-Lite API, it constructs the visualization declaratively using `vl.markCircle()`, `vl.x()`, `vl.y()`, `vl.color()`, and `vl.size()`. The chart loads data from a CSV via D3’s `csv()` and uses the Vega-Lite runtime to render interactively with tooltips.

Bboreilly26

87% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatterplot visualization of automobile data, plotting weight against horsepower for various car models. Each point is colored by country of origin and sized by miles per gallon. The visualization is built using the Vega-Lite API, a programmatic interface to Vega-Lite, which leverages the Vega rendering engine. The code imports data from a CSV file, configures axis styles and tooltips, and uses the vega-tooltip library to display car names on hover.

AALI Akbar SABZI

87% match