Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template 2

✓ Published0🌍 Public
Tthomasjungcoe
Last edited Jun 1, 2021
Created on Jun 1, 2021

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for a collection of automobiles, with each point colored by country of origin, sized by vehicle weight, and labeled with the car model name. The visualization is built using the Vega-Lite API, which constructs a specification rendered via D3.js and Vega. Data is loaded from a CSV file fetched through D3’s `csv` method, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The chart’s appearance is customized through a configuration object that removes axis frames, adjusts tick colors, and increases font sizes for readability.

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) and horsepower for a collection of automobiles, with each point’s color indicating the country of origin and its size representing vehicle weight. It was built using the Vega-Lite API, which compiles specifications into a rendered Vega visualization. The code reads the Auto MPG dataset from a CSV via `d3.csv`, then dynamically sets the chart’s width and height to fill the browser window. The visualization includes a tooltip handler and custom styling for axis labels and titles.

JJanna Uutela
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
96% 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 scatter plot visualizes the relationship between fuel efficiency (mpg) and engine power (horsepower) for a set of automobiles, with each point color-coded by the vehicle’s country of origin. Built on the Vega-Lite API, it loads the Auto MPG dataset from the UCI Machine Learning Repository via a CSV fetched with d3.csv. The visualization uses `vl.markCircle`, `vl.x`, `vl.y`, `vl.color`, and `vl.tooltip` to encode the data, while custom config axis rules and a tooltip handler improve readability and interactivity.

Sseanowh
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower across vehicles from different origins, with point size encoding weight and color indicating country of origin. Built using the Vega-Lite API on top of D3, the visualization leverages `vl.markCircle`, `vl.x().fieldQ()`, `vl.y().fieldQ()`, `vl.color().fieldN()`, and `vl.size().fieldQ()` to map the Auto MPG dataset from the UCI Machine Learning Repository. The code registers Vega-Lite specifications, applies a custom dark-themed configuration for readability, and renders to an SVG canvas with tooltips for inspecting data points.

Mmuwu16
94% match
Loading thumbnail…

Fork of Vega-Lite API Template I

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Auto MPG dataset. The visualization uses the Vega-Lite API to declaratively encode data fields onto circular marks, with color distinguishing origin and size mapping to weight. It reads CSV data via `d3.csv`, renders with Vega’s SVG renderer, and includes Vega-Tooltip for interactive hover details. The chart resizes to fit the browser window and applies custom axis and label styling for readability.

FFonda Irena Santoso
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

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