Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 24, 2021

Created on May 24, 2021

This visualization presents a density plot of automobile horsepower over time, using a filled line mark with 10% opacity to reveal overlapping data patterns. The visualization is built with the Vega-Lite API, where the visualization specification is defined declaratively in `viz.js` using functions like `markLine` and `encode`, then rendered to SVG via the Vega view system. Data is loaded asynchronously from a CSV file containing auto-mpg records using d3.csv, with mouse interactions handled through Vega Tooltip. The chart dimensions dynamically adapt to the browser window, and the axis styling is customized through a shared configuration object.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of historical automobile data, plotting horsepower against miles per gallon, with point color encoding weight and size encoding displacement. Built with the Vega-Lite API, the code uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to define the encoding channels, while `vega-tooltip` provides interactive hover details. The data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file containing auto-mpg measurements. The visualization renders using the Vega renderer within an SVG view, configured with custom axis styles for readability.

EEkuremaro

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows an interactive scatterplot of automobile data from 1980, plotting miles per gallon against horsepower, with each point colored by origin and sized by weight. The visualization is built using the Vega-Lite API (vl) with a custom configuration that removes axis domains and enlarges label and title fonts. Since it is a fork of an API template, it loads data from a CSV file using `d3.csv`, then renders the marks with `vl.markCircle`, encoding position, color, size, and tooltip fields directly in `viz.js`. The view resizes to the window and includes a tooltip handler from Vega Tooltip.

PPiotr Paszek

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a Vega-Lite area mark to plot a scatter-like distribution of automobile data, displaying engine displacement against horsepower, with tooltips revealing car model names. The entire view fills the browser window, using a semitransparent fill and custom axis styling from a dark-themed config. It loads data from a CSV of auto-mpg records via D3’s `csv` method, and builds the chart with the `vega-lite-api` library, registering Vega, Vega-Lite, and a tooltip handler for interactive popups.

Iikeepup

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automotive data from the auto-mpg.csv dataset, plotting horsepower against year with a tooltip displaying vehicle names. The visualization is built using the Vega-Lite API, which programmatically constructs a scatter plot with semi-transparent points. The code leverages vega-lite-api, vega-lite, and vega-tooltip to render the chart as SVG, while D3.js fetches and parses the CSV data. Custom axis and label styling are applied via a shared configuration object to improve readability across the full browser window.

JJay M Gonzalez

90% match

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

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to plot automotive data from the auto-mpg.csv dataset, showing car origin along the x-axis, horsepower on the y-axis, and encoding weight through color and mpg through point size. The chart renders as an SVG using vega, vega-lite, and vega-lite-api, with d3.csv loading the data and vega-tooltip providing interactive hover details that reveal each car’s name. A custom config adjusts font sizes and axis colors for readability.

LLei Lei

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API with D3 to plot automobile data, showing each car as a circle positioned by weight and horsepower, colored by origin, and sized by fuel efficiency (mpg). The code loads CSV data from a GitHub gist via D3’s `csv` method, then builds the chart with `vega-lite-api`’s `markCircle` and encodes position, color, size, and tooltip fields. Rendered as an SVG through the Vega renderer, the visualization includes a Vega tooltip handler for interactive inspection.

90% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatterplot of auto-mpg data, plotting engine displacement against horsepower, with points colored by opacity and tooltips revealing car names. The code uses the Vega-Lite API integrated with D3.js (d3.v5) to fetch CSV data and render the chart via Vega. It loads the visualization libraries (vega, vega-lite) and configures custom axis and label styling. The chart resizes to fit the browser window and employs an opacity of 0.1 to handle overlapping points.

RReymond Mesuga

90% match