Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 9, 2024

Created on Jul 9, 2024

This example visualizes automobile performance data, plotting engine weight against horsepower for individual car models. The scatter plot encodes car origin through color, while point size reflects fuel efficiency (mpg). It uses the Vega-Lite API (vl.markPoint, vl.x, vl.y) to compose the visualization declaratively, with data loaded from a CSV via d3.csv. The vega view renders as SVG, and vega-tooltip provides interactive hover details. Appearance is customized through a config object that adjusts axis styling and typography.

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 performance data using a scatter plot of weight versus horsepower, colored by origin and with tooltips showing car names. The visualization is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart. Data is loaded asynchronously from a CSV file via d3.csv, then passed to a vega-lite-api markCircle specification. The chart fits the full window size with custom axis and label styling from a config object.

EEdgar Alves

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

YYibo Zhang

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automotive data, plotting miles per gallon against horsepower, with weight encoded as color. The visualization is built using the Vega-Lite API, which is programmatically assembled in JavaScript via `vl.markPoint`, `vl.x`, `vl.y`, and `vl.color`. Data is loaded asynchronously from a CSV file using `d3.csv`. The chart renders as SVG with a custom dark theme and tooltips provided by `vega-tooltip`.

Aaniosindustries

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatterplot of automobile data, mapping weight to the x-axis and horsepower to the y-axis, with color encoding for country of origin and point size reflecting miles per gallon. Tooltips display the vehicle name. The code uses the Vega-Lite API, registering vega and vega-lite libraries, and loads CSV data asynchronously via d3.csv from a gist URL. Config settings customize axis and label appearance, while the view is rendered as SVG with fit sizing to the window.

Ddanielscheeper@gmail.com

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement, horsepower, and color-coded weight for automobiles from the auto-mpg dataset. It uses the Vega-Lite API to declare a scatterplot with points sized and colored by weight, and includes tooltips showing vehicle names. The visualization is generated through Vega-Lite API’s `vl` object, registered with Vega and Vega-Lite, and renders as an SVG fitted to the window. Data is loaded via `d3.csv`, with customization handled through a config object for axis and label styling.

NNaitik Pitroda

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses a scatter plot to explore the relationships among automobile performance metrics, including engine displacement, horsepower, weight, and origin. The visualization is built with the Vega-Lite API, which programmatically constructs a Vega-Lite specification, and is rendered via Vega. It loads the auto-mpg dataset using D3’s `csv` function, then encodes the data with size and color channels. The chart is configured for full-screen display with custom axis and label styling from a separate config file, and includes a tooltip showing the car name.

Wweny1109

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of Auto MPG data, where each point represents a car with its miles per gallon on the x-axis, horsepower on the y-axis, and weight encoded by point size. The color distinguishes the car’s origin. The visualization is built using the Vega-Lite API, which programmatically constructs a specification that renders to SVG via Vega and Vega-Lite. Data is loaded asynchronously from a CSV URL using d3.csv. Interactive tooltips display car names, and custom configuration adjusts axis and label styling.

JJoseph Bermudez

94% match