Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 25, 2023

Created on Jul 25, 2023

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for classic automobiles, with circles colored by region of origin and sized by vehicle weight. Built using the Vega-Lite API, it defines the visualization through method-chaining operations including `markCircle`, `encode`, and scale specifications. The example loads car data from the UCI Machine Learning Repository via d3’s `csv` function, and renders interactively with tooltips provided by the `vega-tooltip` Handler. Custom axis and label styling are applied through a shared configuration object.

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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for classic automobiles, with point size encoding weight and color indicating country of origin. The visualization is built using the Vega-Lite API, which wraps Vega-Lite specifications in JavaScript methods. Data is loaded asynchronously from a CSV file via d3.csv, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The code configures axis labels, tooltips, and a fixed-point rendering style, and renders the chart to SVG using the Vega renderer.

Iiblub

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between horsepower, fuel efficiency (MPG), and vehicle weight for classic cars, with color encoding by country of origin. Built using the Vega-Lite API on top of Vega and Vega-Lite, it renders as a single SVG, configured through `vl.markCircle` and the `encode` method. Data is loaded asynchronously from a CSV via `d3.csv`, sourced from the UCI Auto MPG dataset. The visualization adapts to the browser window and includes tooltips via the Vega Tooltip handler.

EEkuremaro

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot shows the relationship between fuel efficiency (mpg) and horsepower for a sample of automobiles, with color encoding by region of origin and point size encoding vehicle weight. The visualization is built using the vega-lite-api library, which programmatically constructs a Vega-Lite specification that renders as an SVG. Data is loaded asynchronously via d3.csv from the UCI Auto MPG dataset, and the resulting chart includes interactive tooltips displaying the car model name. The code customizes the visual appearance through a separate config.js file and appends the rendered visualization to the document body.

DDaniel Vanpelt

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower for cars, with point color indicating region of origin and point size representing vehicle weight. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification that is rendered to SVG via Vega and Vega-Lite libraries. Data comes from the UCI Auto MPG dataset, loaded asynchronously with d3.csv. The code customizes axis styling through a config object and adds interactive tooltips displaying car names through the Vega Tooltip handler.

Ttknaik

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for classic automobiles, using a scatter plot where each car is a circle. The visualization is built with the Vega-Lite API, which constructs a specification rendered by Vega, with data fetched from the UCI Machine Learning Repository’s Auto MPG dataset via D3’s `csv` function. The API encodes the x-axis as miles per gallon, the y-axis as horsepower, color by origin, and size by weight, while a tooltip displays each car’s name. The chart fills the browser window and uses custom axis labels and colors for improved readability.

VVander Fillipe de Souza

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

A scatter plot displays the relationship between fuel efficiency (mpg) and horsepower for historical automobile models, with tooltips revealing each car's name. The visualization is built using the Vega-Lite API, which constructs a specification executed by Vega Lite and rendered as SVG by Vega. Data is loaded asynchronously from a CSV file via `d3.csv`. The chart dynamically resizes to fit the browser window, and the dark-themed configuration adjusts axis tick colors and label font sizes. Interactions are enabled through the `vega-tooltip` Handler class.

Uuniversal-innovative

94% match