Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Jul 11, 2023

Created on Jul 11, 2023

This example displays a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower. Each circle’s size encodes vehicle weight and its color represents the country of origin, with tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which compiles specifications into Vega and renders with D3. Data is fetched as CSV via D3’s `csv` function, and styling customizes axis labels and titles 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 example presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing relationships between fuel efficiency, horsepower, vehicle weight, and country of origin. Each circle’s position maps to miles per gallon and horsepower, while size encodes weight and color distinguishes origin, with tooltips revealing car names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip through D3’s CSV loader for data retrieval, then renders a fit-sized SVG view with custom styling for readability.

SSepehr Roshanpour

97% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower. Each point encodes the car’s country of origin by color and its weight by size, with tooltips revealing the model name. The visualization is built using the Vega-Lite API, registered with Vega and Vega-Lite libraries, and renders as an SVG. Data is loaded asynchronously via d3.csv, while the Vega Tooltip handler enables interactive inspection of individual data points.

Ppakoensi

97% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset, mapping fuel efficiency against horsepower with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to compile specifications, and uses D3’s `csv` loader to fetch the data. The chart is rendered as an SVG, with a custom configuration for axes and labels, and includes an interactive tooltip showing the vehicle name via the Vega Tooltip library.

Mmagnushaese

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and engine power (horsepower) for various car models. Each circle is colored by country of origin and sized by vehicle weight, with tooltips revealing model names. Built with the Vega-Lite API, it uses d3’s CSV parser to load data, then renders an interactive SVG graphic with configurable axis styling and a custom dark theme.

GGeorge Williams

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower for various car models. Each point’s size encodes vehicle weight, color indicates the country of origin, and hovering reveals the car name. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3, using `vl.markCircle` for encoding and `d3.csv` for loading data. The plot spans the full browser window with a custom dark color config for axis labels and titles.

NNana Kwame

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of automobile data from the UCI Machine Learning Repository, showing the relationship between MPG and horsepower. Each point is colored by origin, sized by weight, and includes a tooltip revealing the vehicle name. The visualization uses the Vega-Lite API, registered with Vega and Vega-Lite, to declaratively encode the marks. Data is loaded asynchronously via D3's `csv` function, and the chart is rendered with a custom configuration that adjusts axis and label styling.

Mme-as-a-web-designer

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, plotting fuel efficiency against horsepower. Each circle encodes vehicle origin through color and weight through size, with hover tooltips revealing model names. The visualization uses the Vega-Lite API to declaratively specify the chart, while D3.js (d3.csv) handles data loading. The code leverages vega-lite-api’s `vl` builder to chain mark and encoding specifications, with vega-tooltip providing interactive legends and tooltips.

Mmarquesjr79

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, mapping fuel efficiency against horsepower, with color by origin and point size by weight. It uses the Vega-Lite API to declaratively define the visualization, with D3.js loading the CSV data. The example demonstrates integrating Vega-Lite's high-level grammar with a custom configuration for improved readability, including styled axes and labels, and fits the chart responsively to the full viewport while enabling tooltips through Vega Tooltip.

SSemyon

96% match