Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 27, 2023

Created on Jul 27, 2023

This visualization displays an interactive scatter plot of vehicle data, mapping miles per gallon against horsepower, with points colored by region of origin and sized according to vehicle weight, along with tooltips revealing car model names. Built using the Vega-Lite API, the code registers vega, vega-lite, and vega-tooltip, then renders a circle mark with quantitative and nominal encodings. Data is loaded asynchronously via `d3.csv` from the UCI Auto MPG dataset hosted on GitHub, and the chart fills the browser window with a custom configuration for axis styling.

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 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 interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, encoding horsepower, miles per gallon, origin, and weight for each vehicle. The visualization uses the Vega-Lite API to construct a circle mark with quantitative fields mapped to x and y axes, a nominal field for color, and a tooltip displaying the vehicle name. Built with vega-lite-api, vega, vega-lite, and vega-tooltip, the chart is styled with a custom configuration that disables axis domains and uses light gray ticks. Data is loaded asynchronously via d3.csv, with the plot sized to fill the viewport.

GGyromighty

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile performance data from the UCI Auto MPG dataset, showing miles per gallon against horsepower across different origins. The visualization uses square marks with color encoding for origin and size for vehicle weight, while tooltips display model names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3.csv for data loading, then renders an SVG view with custom axis and label styling. The plot automatically fits the browser window and uses Vega Tooltip for interactive hover details.

LLainu Kuruvilla

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of auto MPG data, mapping miles per gallon on the x-axis, horsepower on the y-axis, and using color and point size to encode vehicle origin and weight. The code uses the vega-lite-api to construct the chart declaratively, with vega-lite and vega handling rendering, and d3 fetching the CSV data from a Gist. It includes a tooltip showing vehicle names, configured through vega-tooltip.

Rrajamrit-singh

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon and horsepower for various car models, with color encoded by region of origin and point size representing vehicle weight. Hovering reveals the car's name via tooltip. Built using the Vega-Lite API, the visualization programmatically constructs the chart through method chaining in `viz.js`, then renders it with Vega and Vega-Lite. Data is loaded asynchronously from a CSV in `getData.js` using `d3.csv`, and custom axis and label styling is applied from `config.js`.

GGunjan Paul

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping miles per gallon against horsepower. Points are colored by country of origin and scaled in size by vehicle weight, with tooltips showing car model names. The example demonstrates the vega-lite-api library, which provides a JavaScript interface for building Vega-Lite specifications, combined with Vega and vega-lite for rendering. Data is loaded asynchronously via d3.csv from a remote CSV file containing auto-mpg statistics. The visualization uses SVG rendering, custom axis styling from a config object, and adjusts to fill the browser window.

Ssuserocc

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, encoding vehicle weight as point size, origin as color, and miles per gallon against horsepower. Built with the Vega-Lite API, it registers Vega and Vega-Lite alongside the vega-tooltip Handler for hover interactions. The visualization uses a d3.csv fetch to load data, with a custom config adjusting axis styling and label fonts, and renders responsively to fit the full browser window.

DDataFeast_71

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower as colored circles representing the car’s origin. It uses the Vega-Lite API to declare the scatter plot, with point size mapped to vehicle weight and tooltips showing car names. The visualization is rendered as SVG via Vega, with D3.js loading the CSV data and Vega Tooltip providing interactive labels. Custom axis and label styling in the configuration improve readability, and the chart resizes to fit the browser window.

EEngineerRajeev

95% match