Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published2🌍 Public
LLewis Ward
Last edited Jun 25, 2021
Created on Jun 24, 2021

This visualization plots automobile data from a CSV file, showing the relationship between horsepower, origin, and weight. Each point represents a vehicle, colored by weight and positioned by horsepower across different origin categories, with tooltips revealing car names. The example uses the Vega-Lite API, specifically `vl.markPoint`, `vl.x`, `vl.y`, `vl.color`, and `vl.tooltip`, to construct the specification. It loads data via d3’s `csv` function from a GitHub gist, then renders the chart as an SVG using Vega and Vega-Lite, with the final output generated through `import vega from 'vega'` and `import vegaLite from 'vega-lite'`.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from a CSV file, plotting engine displacement against horsepower. Each point represents a vehicle, with color encoding the model year and size encoding vehicle weight. Tooltips reveal the car name when hovering. The chart uses the Vega-Lite API to construct the specification, with D3.js handling data loading via `d3.csv`. The visualization is rendered to SVG and fills the browser window, using a custom configuration to improve readability with larger fonts and adjusted axis styling. The code imports `vega`, `vega-lite`, and `vega-lite-api`, registering them with a tooltip handler to enable interactive data exploration.

Ssmsk2980
93% 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
92% 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
92% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency using data from an auto-mpg dataset loaded via D3’s `csv` function. It renders a scatterplot where each point’s position encodes mpg and horsepower, color encodes origin, and size encodes weight, with tooltips showing car names. The visualization is built declaratively with the Vega-Lite API (`vl.markPoint`, `vl.encode`), registered with Vega and Vega-Lite, and rendered in SVG with a customized dark theme and axis styling.

JJenna Hamza
92% match
Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot of automotive data maps acceleration on the x-axis against horsepower on the y-axis, with points colored by origin and sized by weight. A tooltip reveals car names on hover. The visualization is created programmatically using the Vega-Lite API (vl), which compiles specifications to Vega and renders via SVG. It loads CSV data from a remote URL using d3.csv, applies custom axis and label styling from a separate config module, and fits the chart to the viewport.

Nnicklaus-roy
91% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to plot automotive data from the auto-mpg.csv dataset, showing car origin along the x-axis, horsepower on the y-axis, and encoding weight through color and mpg through point size. The chart renders as an SVG using vega, vega-lite, and vega-lite-api, with d3.csv loading the data and vega-tooltip providing interactive hover details that reveal each car’s name. A custom config adjusts font sizes and axis colors for readability.

LLei Lei
91% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile characteristics from the auto-mpg CSV dataset using the Vega-Lite API. It plots weight against horsepower as a scatter plot, with circle size encoding miles per gallon and color encoding country of origin, plus tooltips showing vehicle names. The code registers Vega-Lite with Vega, uses d3.csv for data loading, and applies a custom configuration for axis styling and typography. The visualization renders as SVG, sized to fit the browser window, with a semi-transparent fill and opacity adjustments for readability.

AAoibhinnRed
91% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatterplot visualizes automobile data by plotting horsepower against origin, with each point representing a car model and tooltips revealing its name. Built with the Vega-Lite API, the chart uses `vl.markCircle` with encoding functions for x and y axes, while custom config adjusts font sizes and axis styling. Data is loaded asynchronously from a CSV using D3’s `csv` method, and the visualization renders full-screen with an SVG view and integrated tooltip handler.

Bbreadcircle
91% match