Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
AAnu Wat
Last edited Oct 17, 2021
Created on Oct 17, 2021

This example visualizes the relationship between fuel efficiency (mpg) and horsepower for classic automobiles, with points colored by country of origin and tooltips revealing model names. It uses the Vega-Lite API (`vl.markCircle`, `vl.x().fieldQ()`, `vl.color().fieldN()`) to declaratively encode the data, with rendering handled by Vega and Vega-Lite. The CSV dataset is fetched via d3’s `csv` function, and the visualization adapts to the browser window using `.width()` and `.height()` with autofit behavior.

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 fuel efficiency (mpg) and horsepower for cars, with each point colored by country of origin and sized by vehicle weight. It uses data from the UCI Machine Learning Repository’s Auto MPG dataset, loaded via `d3.csv`. The graphic is built declaratively using the Vega-Lite API, specifying a circle mark with encodings for position, color, and size. The code registers Vega, Vega-Lite, and the Vega-Lite API, then renders an interactive SVG chart fitted to the browser window, with a tooltip provided by Vega-Tooltip.

Yyejichun@naver.com
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for classic automobiles. The data is loaded from a CSV file containing the standard Auto MPG dataset, with each car represented as a semi-transparent circle. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite in a JavaScript API, while the D3 library handles CSV parsing. Interactive tooltips display car names on hover, and the chart is rendered as an SVG, with appearance customized through a configuration object that adjusts axis labels and colors.

Kkarl.dalborg@mail.com
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (miles per gallon) and horsepower across automobile models, with color mapping to the country of origin and point size encoding vehicle weight, and includes tooltips displaying model names. It uses the Vega-Lite API (vl) to declaratively define the scatter plot specification, with data loaded from the UCI Machine Learning Repository’s Auto MPG dataset via d3.csv. The visualization is rendered through Vega’s and Vega-Lite’s JavaScript libraries, integrating the Vega Tooltip for interactive hover details, and applies a custom configuration for axis and label styling.

GGerasimos Katsagannis
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between automobile fuel efficiency (mpg) and horsepower, with points colored by country of origin and sized by vehicle weight. Built with the Vega-Lite API and rendered as an interactive SVG, it loads the Auto MPG dataset from the UCI Machine Learning Repository via a CSV file. The code uses vl.markCircle and vl.encode for the scatter plot, with a tooltip handler from vega-tooltip to show car model names on hover.

RRolf Niggemann
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg) and horsepower for a collection of automobiles, with points colored by origin and sized by mpg, using a tooltip to display car names. It employs the Vega-Lite API to declaratively define the scatterplot, registered with Vega and Vega-Lite, and renders it as SVG within a full-window layout. Data is loaded asynchronously from a CSV file using D3’s `csv` method, while the built-in Vega Tooltip handler manages interactive hover details. The configuration customizes axis styles and label fonts for improved readability.

Wwy2010344
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the relationship between a car’s fuel efficiency (miles per gallon) and its horsepower, colored by country of origin, using a scatter plot rendered with the Vega-Lite API in a D3.js environment. It loads auto-mpg data from a CSV via `d3.csv`, then builds the visualization declaratively with `vl.markCircle` and encodings for `x` (mpg), `y` (horsepower), `color` (origin), and a tooltip for the car’s name. The chart resizes to fill the browser window and applies custom axis and label styling from a shared configuration object.

GGuilinabaoge
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the auto-mpg dataset, plotting engine horsepower against miles per gallon. Circles are colored by country of origin and sized according to vehicle weight. The visualization is built programmatically using the Vega-Lite API, which compiles to Vega specifications, with data loaded asynchronously via D3’s `csv` function. Custom axis and label styling are applied through the `config` object, and an interactive tooltip displays each car’s model name on hover.

SSabbir
93% match
Loading thumbnail…

Fork of Vega-Lite API Template 2

This example displays a scatter plot of automobile fuel efficiency against horsepower, with points colored by country of origin and tooltips showing model names. The visualization uses the Vega-Lite API to construct the chart declaratively, combining `vl.markCircle` with encodings for the quantitative axes and nominal color. Data comes from the UCI Auto MPG dataset loaded via `d3.csv`. The code integrates vega, vega-lite, and vega-lite-api libraries, with additional tooltips from vega-tooltip and custom axis styling from a config object.

MMayank Kumar
92% match