Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
SStefano Renzetti
Last edited May 9, 2023
Created on May 8, 2023

This example presents a scatter plot of automotive data, showing the relationship between acceleration, horsepower, weight, and miles per gallon across different model years. Built with the Vega-Lite API, it uses `vl.markCircle` with encodings for x, y, color, size, and tooltip, pulling data from a CSV via `d3.csv`. The visualization is rendered as an SVG, with the tooltip handler integrated through `vega-tooltip`, and includes custom font styling from the `config` file.

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 shows a scatterplot of automotive data, plotting miles per gallon against horsepower, with weight encoded as color. The visualization is built using the Vega-Lite API, which is programmatically assembled in JavaScript via `vl.markPoint`, `vl.x`, `vl.y`, and `vl.color`. Data is loaded asynchronously from a CSV file using `d3.csv`. The chart renders as SVG with a custom dark theme and tooltips provided by `vega-tooltip`.

Aaniosindustries
96% 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
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile characteristics from the auto-mpg dataset, plotting acceleration on the x-axis against horsepower on the y-axis, with color encoding car weight and tooltips revealing model names. The visualization is constructed programmatically using the Vega-Lite API through its JavaScript bindings, with `vl.markPoint()` defining the marks and `vl.x().fieldQ()`, `vl.y().fieldQ()`, and `vl.color().fieldQ()` specifying the encodings. Data is loaded asynchronously with `d3.csv()` from a GitHub gist, while Vega and Vega-Lite render the SVG output, supported by `vega-tooltip` for interactive hovering and a custom configuration that enlarges fonts and removes axis domains for readability.

JJar-Jar-Blings
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example renders a scatter plot of automobile data from the `auto-mpg` dataset, mapping acceleration on the x-axis and horsepower on the y-axis, with tooltips revealing vehicle names. It demonstrates programmatic chart construction using the Vega-Lite API (`vl.markPoint`, `vl.x().fieldQ`) within a D3 v5 async data-loading pipeline (`d3.csv`). The visualization is compiled through `vega-lite` and rendered as SVG via the `vega` view, with custom axis styling and tooltip handling from `vega-tooltip`.

Bbillmccabeusa@hotmail.com
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data using a scatter plot of weight versus horsepower, colored by origin and with tooltips showing car names. The visualization is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart. Data is loaded asynchronously from a CSV file via d3.csv, then passed to a vega-lite-api markCircle specification. The chart fits the full window size with custom axis and label styling from a config object.

EEdgar Alves
94% match
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
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example builds a scatter plot of automobile data, mapping weight and horsepower along the axes and encoding the vehicle’s country of origin by color, with point size also tied to weight. It uses the Vega-Lite API (via `vl.markCircle`) to declaratively specify the visualization, which is then rendered to SVG. The underlying data is fetched as CSV using `d3.csv` from a GitHub gist, and interactivity (like tooltips) is added through the Vega Tooltip `Handler`. Custom styling is applied through a shared config object.

TTranHBach
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon, horsepower, weight, and origin. The visualization uses the Vega-Lite API with d3.csv for data loading, and configures an SVG renderer with a custom dark theme. It encodes x, y, color, size, and tooltip channels through the vl.markCircle and vl.encode methods, with vega-tooltip handling interactive hover details. The chart automatically resizes to fill the viewport.

Vvarmps
94% match