Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 17, 2021

Created on Apr 17, 2021

This example visualizes the relationship between vehicle weight, horsepower, and miles per gallon from the auto-mpg dataset. It renders a scatter plot using Vega-Lite’s API, with circle size mapped to mpg, color to weight, and tooltips showing car names. The code builds the chart via `vl.markCircle` and `vl.encode`, then renders it with `vega`, `vega-lite`, and `vega-tooltip`, using `d3.csv` to load the data and custom config to adjust axis styling.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency using data from an auto-mpg dataset loaded via D3’s `csv` function. It renders a scatterplot where each point’s position encodes mpg and horsepower, color encodes origin, and size encodes weight, with tooltips showing car names. The visualization is built declaratively with the Vega-Lite API (`vl.markPoint`, `vl.encode`), registered with Vega and Vega-Lite, and rendered in SVG with a customized dark theme and axis styling.

JJenna Hamza

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, exploring the relationship between miles per gallon, horsepower, and weight. Points are colored by origin and sized by weight, with hover tooltips displaying car names. Built with the Vega-Lite API, the code uses `vl.markCircle` and `vl.encode` to define the visualization, while `vl.x().fieldQ('mpg')` and `vl.y().fieldQ('horsepower')` map quantitative fields. The data loads via `d3.csv`, and the chart renders through the Vega-Lite API's `render()` method.

XXiyu Zhai

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle attributes from the auto-mpg dataset, plotting weight against horsepower while using the size and color of circles to encode miles per gallon and country of origin. The visualization is constructed using the Vega-Lite API, which builds a declarative specification rendered through D3 and Vega-Lite libraries. It draws scatterplot circles with custom styling, reads CSV data asynchronously via D3’s csv loader, and includes interactive tooltips that display car names when hovered.

EEugenio2192

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of automotive data, showing the relationship between vehicle weight and horsepower. Each circle’s position encodes these quantitative fields, while color represents the country of origin and size encodes miles per gallon (mpg). Hovering reveals the car’s name via a tooltip. The visualization is built with the vega-lite-api, which wraps Vega-Lite and Vega, and uses d3.csv to load the auto-mpg dataset. The code configures axes, scales, and styling through the vega-lite-api’s fluent method chaining.

GGuus Lammers

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, displaying vehicle weight against horsepower with points colored by origin and sized by weight. A tooltip reveals the car’s name on hover. The code builds the visualization declaratively via `vl.markCircle`, `vl.encode`, and field mappings, then registers Vega-Lite with vega and vega-lite-api, using d3’s `csv` loader for data retrieval and custom configuration for styling axes and labels.

Mmaker57sk

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to create an interactive scatter plot of auto-mpg data, displaying vehicle weight against horsepower as colored and sized circles. The plot encodes weight on the x-axis and color scale, with mpg controlling circle size and opacity for readability. The code loads data from a CSV using d3.csv, then renders the chart as SVG via Vega-Lite’s API in index.js. A custom config adjusts axis styles and removes domain lines, while tooltips reveal car model names on hover.

MMark Zwart

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile characteristics from the auto-mpg CSV dataset using the Vega-Lite API. It plots weight against horsepower as a scatter plot, with circle size encoding miles per gallon and color encoding country of origin, plus tooltips showing vehicle names. The code registers Vega-Lite with Vega, uses d3.csv for data loading, and applies a custom configuration for axis styling and typography. The visualization renders as SVG, sized to fit the browser window, with a semi-transparent fill and opacity adjustments for readability.

AAoibhinnRed

93% match