Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Feb 19, 2022

Created on Feb 19, 2022

This visualization displays daily gas prices across multiple stations, plotted over time as a scatterplot of firebrick-colored points. Tooltips reveal station names on hover. The chart is built using the Vega-Lite API (vl) with Vega and Vega-Lite libraries, rendering to SVG via d3.v5, and pulls data asynchronously from a CSV hosted on GitHub Gist, sourced from the UCI Auto MPG dataset.

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

This visualization displays a scatter plot of data from the UCI Auto MPG dataset, plotting intensity against end year and coloring points by pestle, with tooltips showing sector information. Built with the Vega-Lite API, it uses d3’s `csv` function to load remote data, `vl.markCircle` for the marks, and encodes x, y, color, and tooltip channels. The code registers Vega-Lite with a custom config to adjust axis styling and label fonts, and renders the chart as an SVG fitted to the window size.

KKIRRAN P L

85% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of Auto MPG data, showing relationships between vehicle attributes through a dense cluster of points. It uses the Vega-Lite API to construct the chart, with D3.js handling data loading via `d3.csv`. The visualization features tooltips that display RGB hex values when hovering over points. The chart is rendered dynamically, adapting its size to the browser window using the `vl.width()` and `vl.height()` methods from the vega-lite-api library, and includes custom styling from the config file for improved readability.

TtrwMK

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

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of a Vega-Lite API template displays a scatter plot of Auto MPG data from the UCI Machine Learning Repository, showing each car's miles per gallon versus horsepower. Points are colored by origin, sized by weight, and include tooltips revealing the vehicle name. The visualization uses the `vega-lite-api` and `vega-lite` libraries to define the encoding, while `d3.csv` loads the data and Vega-Tooltip provides interactive hover details. Rendering occurs as an SVG view that fills the browser window.

CChavaP06

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

Llokeshp-0813

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of Auto MPG data from the UCI Machine Learning Repository, sourced via a Gist CSV. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, colors points by origin, scales size by weight, and adds tooltips for vehicle names. It registers Vega, Vega-Lite, and the vega-lite-api library, then loads the data with d3.csv, applies a custom dark-themed config for axis styling, and fits the chart to the window dimensions.

SShaneBowen1

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of the Vega-Lite API Template presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, sourced via a GitHub Gist. The visualization shows vehicle fuel efficiency (mpg) against horsepower, with color encoding by country of origin and point size encoding weight, plus tooltips displaying car names. Built with the Vega-Lite API (vl), it registers Vega and Vega-Lite for rendering, uses d3.csv to load data, and applies custom axis and label styling from a config file. The chart auto-fits to the browser viewport with an SVG renderer and integrates vega-tooltip for hover interactions.

AArookie-2020

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of the Auto MPG data set from the UCI Machine Learning Repository. The plot encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses color for the car’s origin while point size represents weight. It loads CSV data via d3.csv and builds the chart with vl.markCircle and vl.encode. The Vega-Lite API is registered with vega, vega-lite, and vega-tooltip, and the chart is automatically fitted to the window size.

Nny2cali

83% match