Fork of Vega-Lite API Template 2

100%

Fork of Vega-Lite API Template 2

✓ Published0🌍 Public

Last edited Sep 24, 2023

Created on Sep 24, 2023

This example displays a scatter plot of automobile fuel efficiency against horsepower, with points colored by country of origin and tooltips showing model names. The visualization uses the Vega-Lite API to construct the chart declaratively, combining `vl.markCircle` with encodings for the quantitative axes and nominal color. Data comes from the UCI Auto MPG dataset loaded via `d3.csv`. The code integrates vega, vega-lite, and vega-lite-api libraries, with additional tooltips from vega-tooltip and custom axis styling from a config object.

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 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.

Sseitzfab

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance as an interactive scatter plot, with engine horsepower on the y-axis, miles per gallon on the x-axis, and points colored by country of origin. Hovering reveals each car’s name via a tooltip. Built with the Vega-Lite API, the visualization loads data from a remote CSV file using d3.csv, then renders to SVG through Vega and Vega-Lite. The code customizes axis and label styling in a separate config module and fits the chart to the full browser window.

Aantanta28

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes car performance data from the auto-mpg dataset, plotting horsepower against miles per gallon and coloring points by country of origin. The visualization uses the Vega-Lite API to define a scatter plot with circles, where both color and size encode variables, and tooltips display car names. It loads data via d3.csv, configures a dark theme with custom axis styling, and renders the chart as SVG using Vega-Lite’s vega-lite-api library, integrated with vega-tooltip for interactive hover details.

AasafJortilles

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower, with points colored by region of origin. Mouse hover reveals tooltips with vehicle names. The visualization is built using the Vega-Lite API, which encodes the data through `vl.markCircle` and `vl.encode` specifications, with D3.js handling CSV loading via `d3.csv`. The final chart is rendered as SVG through Vega and Vega-Lite, with appearance customized through a shared config object.

AAman Bhashkar

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository, displaying a scatter plot of miles per gallon against horsepower. Color encodes the car’s country of origin, while the size of each circular mark scales with weight, and tooltips reveal the vehicle name. It uses the Vega-Lite API to construct the chart declaratively, with the `vl.markCircle`, `vl.x().fieldQ`, and `vl.color().fieldN` functions. The code imports data via `d3.csv`, registers Vega-Lite with `vega-tooltip`, and renders the output as an SVG using the Vega view.

TThiago Sawada

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