Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Dec 8, 2021

Created on Dec 8, 2021

This visualization uses the Vega-Lite API to create an interactive scatter plot of auto MPG data, showing the relationship between miles per gallon and horsepower, with points colored by country of origin and sized by horsepower. The code calls on `vega-lite-api`, `vega`, `vega-lite`, `vega-tooltip`, and `d3` to render the plot. It loads data from the UCI Machine Learning Repository’s Auto MPG dataset via a CSV URL using `d3.csv` and applies a customized configuration for darker text and styled axes for readability.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a Vega-Lite API template to display an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The chart plots miles per gallon against horsepower, with points colored by country of origin and sized by vehicle weight. Built with the `vega-lite-api` library alongside D3.js, the visualization reads data from a CSV file and renders as an SVG. Axis labels and tick marks are styled with a custom configuration to improve readability.

AAmir

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays an interactive scatter plot of the Auto MPG dataset, plotting miles per gallon against horsepower while encoding vehicle origin by color and weight by point size. Built with the Vega-Lite API, it combines vega, vega-lite, vega-tooltip, and d3.csv for data loading. The code configures axis styling, applies a responsive fit to the window, and uses interactive tooltips showing vehicle names. Data comes from the UCI Machine Learning Repository via a GitHub gist.

Cchar0496

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, with engine horsepower on the y-axis and miles per gallon on the x-axis. Points vary in color by country of origin and size by vehicle weight, with tooltips revealing car names. The code uses the `vega-lite-api` to build the chart, which registers with Vega and Vega-Lite, while D3’s `csv` loads the data. A custom `config` object adjusts axis and label styling for readability.

Lleongtini

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset as a scatter plot, showing miles per gallon against horsepower, with color encoding the country of origin and point size representing vehicle weight. The plot uses a dark-themed, large-label aesthetic for clarity. It is built with the Vega-Lite API, which is registered with Vega and Vega-Lite, and uses D3’s `csv` loader to fetch the data. The interactive tooltip is provided by Vega Tooltip, and the chart renders as SVG, fitting the full browser window.

Lleopoldovce2

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. It displays miles per gallon on the x-axis, horsepower on the y-axis, with color encoding by origin and size encoding by weight, plus tooltips for car names. The visualization fetches data via `d3.csv` and renders using `vega`, `vega-lite`, and `vega-lite-api`, with a custom config for axis styling and a Vega Tooltip handler. The chart is fit to the full window size.

JJessica Tucker

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It visualizes vehicle horsepower against miles per gallon, with circle size encoding weight and color representing country of origin via a quantitative size encoding and a nominal color field. The visualization is built using the `vega-lite-api` library, which programmatically constructs the plot through chained method calls like `vl.x()`, `vl.y()`, and `vl.color()`, with data loaded via d3’s `csv` function. The code registers Vega-Lite and Vega-Tooltip for rendering and interactive tooltips, while a custom configuration adjusts axis styling for readability.

Ccynobill

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a scatter plot to display the relationship between miles per gallon and horsepower for vehicles from the Auto MPG dataset, with color indicating origin and dot size representing weight. Built with the Vega-Lite API, it loads data via `d3.csv` from a remote URL and uses custom configuration for axis styling. The visualization also incorporates the `vega-tooltip` handler for interactive hover details, and the chart automatically fits the browser window dimensions.

SShasvathan Pathmanaban

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and vehicle origin as color, with point size reflecting weight. It uses the Vega-Lite API to declare the chart specification programmatically, registering it with Vega and Vega-Lite for rendering in SVG. The code also imports the dataset via d3.csv, applies custom axis and label styling through a config object, and enables interactive tooltips using the vega-tooltip Handler. The visualization auto-fits to the browser window dimensions.

Vvvs1680

94% match