Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

AAkramjon1995

Last edited Jan 26, 2023

Created on Jan 26, 2023

This example visualizes the relationship between fuel efficiency and engine power for various car models, using a scatter plot where point color indicates country of origin and point size reflects vehicle weight. The visualization is built with Vega-Lite’s API, with the specification defined in `viz.js` and rendered via D3. Data comes from the UCI Auto MPG dataset, loaded asynchronously using `d3.csv`. The chart is configured with custom axis styling from `config.js`, and includes interactive tooltips via `vega-tooltip`.

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

This example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for cars from the UCI Auto MPG dataset. The scatter plot encodes miles per gallon on the x-axis, horsepower on the y-axis, color by origin, and point size by weight. It is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render an interactive SVG chart. Data is loaded asynchronously via D3’s `csv` function, while the visualization code uses `vl.markCircle`, `.encode`, and `vl.x().fieldQ()` to define the marks and scales.

Aakiannejad123

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualization explores the relationship between fuel efficiency and horsepower across car models, using color to encode the region of origin and point size to represent vehicle weight. The plot is built with the Vega-Lite API, which registers with Vega and Vega-Lite libraries to render an SVG chart, while D3.js handles fetching and parsing the CSV data. Tooltips display vehicle names via the Vega Tooltip handler. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, loaded from a GitHub Gist.

SS-Au-Zn

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

This example visualizes the relationship between fuel efficiency (mpg), horsepower, and weight for various car models, with origin mapped to color and point size reflecting weight. It uses the Vega-Lite API to construct a scatter plot, pulling data from the UCI Machine Learning Repository's Auto MPG dataset. The visualization is rendered via d3.v5, leveraging Vega-Lite's declarative specification through the `vl` API, with an interactive tooltip displaying car names. The code imports vega, vega-lite, and vega-tooltip, and customizes axis styling and font sizes via a config object.

Aazad-ali786

93% match

Loading thumbnail…

Fork of Vega-Lite API Template b

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for various car models, with points colored by origin and sized by weight, using data from the UCI Auto MPG dataset. The visualization is built with the Vega-Lite API, which generates a Vega-Lite specification that is subsequently rendered by Vega. It uses D3.js to load the CSV data from a Gist, customizes axis and label styling through a configuration object, and includes interactive tooltips displaying the car name via the Vega-Tooltip handler.

Bbilalialikissankpeyi

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, and weight for various car models, with the country of origin represented by color. Built using the Vega-Lite API, it loads data from the UCI Auto MPG dataset and renders circles with a fixed size and opacity. The visualization leverages `vl.markCircle` and `vl.encode` for encoding, while `window.innerWidth` and `window.innerHeight` determine the canvas size. The code uses `d3.csv` for data ingestion and a custom `config` for axis styling, with tooltips handled via vega-tooltip. The visualization is generated dynamically and appended to the document body.

HHgeginat

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for classic automobiles. The visualization uses the Vega-Lite API to declaratively encode data dimensions onto circle position, size, and color, with tooltips revealing car names. It renders as a responsive SVG, loading data from the UCI Auto MPG dataset via d3’s `csv` function. The example primarily demonstrates how the `vega-lite-api` library can construct specifications programmatically, complemented by vega-tooltip for interactivity and custom config for styling.

Llingfa

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between fuel efficiency and engine power across automobile models, with point size encoding weight and color encoding the region of origin. It loads Auto MPG data from the UCI Machine Learning Repository through a Gist URL via D3’s `csv` function. The visualization is built programmatically using the Vega-Lite API, which composes marks and encodings in JavaScript, then renders to SVG with Vega and adds tooltips via the vega-tooltip `Handler`. Custom axis and label styling come from a shared config object.

Ttjcocucci

93% match