Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jan 12, 2023

Created on Jan 12, 2023

This visualization renders a line chart of the Auto MPG dataset from the UCI Machine Learning Repository, using the Vega-Lite API wrapper for JavaScript. It plots horsepower against weight, with a dual color encoding for weight as both a point color and origin as a categorical color, creating a gradient effect. The chart is built with `vega-lite-api`, `vega`, and `vega-lite`, with data loading via `d3.csv` and tooltips enabled through `vega-tooltip`. The visualization fills the browser window with a custom config for dark text and light gray axes.

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 automobile data from the UCI Auto MPG dataset, plotting horsepower against origin while encoding weight through color and MPG via point size. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip, then renders an interactive SVG scatter plot that fits the full window. The code uses `vl.markPoint()` with `encode()` mappings and `vl.x().fieldN()`, `vl.y().fieldQ()`, and tooltip fields, pulling CSV data asynchronously via d3.csv. Custom axis and label styling configures the dark-on-light appearance for readability.

TTyr Chen

92% 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 with points colored by origin and sized by vehicle weight. Tooltips display car names on hover. The visualization is built using the Vega-Lite API and rendered through D3.js, with data loaded via D3’s `csv` function. The chart is created programmatically using `vl.markCircle` with encodings for quantitative and nominal fields, and includes custom configuration for axis styles and text formatting.

Aantanta28

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a line chart of automobile data from the UCI Auto MPG dataset, showing horsepower over time. The chart colors the lines by weight and uses the `fieldT` and `fieldQ` encoding methods to map temporal and quantitative data. The D3-based `vega-lite-api` library, along with the `vega` and `vega-lite` rendering engines, produces an interactive SVG visualization with a tooltip displaying car names. The configuration sets custom axis and label styling for improved readability.

Ccolbygogan

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle weight against horsepower with points colored by origin and sized by miles per gallon. Built with the Vega-Lite API, it renders an interactive scatter plot using d3.csv for data loading and Vega-Lite’s markCircle encoding for graphical marks. The visualization uses a custom configuration to adjust axis styling, font sizes, and tooltip appearance, all rendered as SVG with dynamic width and height based on the viewport.

AAlex Gomes

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

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle weight against horsepower while encoding origin via color and mpg through circle size. The code uses the Vega-Lite API to declaratively construct the scatter plot, registering Vega, Vega-Lite, and Vega-Tooltip for rendering and interactivity. D3’s `csv` function loads the remote data, while custom configuration adjusts axis styles and font sizes. The visualization fills the window, with tooltips displaying vehicle origin on hover.

IIlgar Akalın

91% match

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

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting engine displacement against horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries and renders an SVG chart via the vega-tooltip handler for interactive tooltips. Data is loaded asynchronously with d3.csv from a Gist, while the chart encodes quantitative fields for axes and sizes. The code also applies a custom configuration for axis styling and font readability.

AAD-W99

91% match