Fork of Fork of Vega-Lite API Template

100%

Fork of Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Feb 19, 2021

Created on Feb 19, 2021

Forked from Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile characteristics from the UCI Auto MPG dataset, comparing fuel efficiency (mpg) against horsepower while encoding weight through point size and origin through color. The visualization is built using the Vega-Lite API, which programmatically constructs the specification through chained methods like `markCircle`, `encode`, and field mappings. It imports and registers Vega, Vega-Lite, and Vega-Tooltip libraries, fetches CSV data via `d3.csv`, and renders to SVG with custom styling for axis labels and tooltips.

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

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

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 Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data from the UCI Auto MPG dataset, mapping fuel efficiency (mpg) against horsepower. Each point’s size encodes vehicle weight, while color distinguishes the country of origin. The chart uses the vega-lite-api DSL to construct the specification, with vega, vega-lite, and d3.csv handling data loading and rendering. Custom axis styles and tooltips are applied via vega-tooltip, and the view auto-fits to the window using vega’s autosize configuration.

Mmuwu16

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatterplot visualizes the relationships among car attributes in the Auto MPG dataset from the UCI Machine Learning Repository, showing fuel efficiency (mpg) against horsepower, with color encoding by origin, size encoding by weight, and tooltips revealing car names. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite in the browser, fetches data via d3.csv, and configures visual styling such as axis tick colors and font sizes. It renders as inline SVG, sized responsively to the window, with Vega-Tooltip handling interactive details on hover.

Jj-PGi

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

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 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 explores the relationship between fuel efficiency and engine power across automobile models, with point size encoding weight and color encoding the region of origin. It loads Auto MPG data from the UCI Machine Learning Repository through a Gist URL via D3’s `csv` function. The visualization is built programmatically using the Vega-Lite API, which composes marks and encodings in JavaScript, then renders to SVG with Vega and adds tooltips via the vega-tooltip `Handler`. Custom axis and label styling come from a shared config object.

Ttjcocucci

95% match