Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 30, 2021

Created on Apr 30, 2021

This visualization displays the relationship between vehicle weight, horsepower, and fuel efficiency across different countries of origin, using a bubble chart where each point represents a car model. The data comes from the auto-mpg.csv dataset, loaded via d3's csv method. Built with the Vega-Lite API, it registers both Vega and Vega-Lite libraries, and constructs the plot using vl.markCircle with encodings for x, y, color, size, and tooltip. The visualization is rendered as an SVG, with custom config styling for axes and guide labels, and includes an interactive tooltip via the vega-tooltip Handler.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between vehicle horsepower, fuel efficiency (mpg), and weight, with points colored by country of origin and labeled by model name using hover tooltips. It renders an interactive scatter plot from the UCI Auto MPG dataset, loaded via CSV through `d3.csv`. The chart is built using the Vega-Lite API, which composes specifications programmatically, leverages `vl.markCircle` for rendering, and integrates `vega-tooltip` for interactivity within an SVG-based D3 view.

RRoberto M

95% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, and weight for a sample of automobiles, colored by country of origin. Using the Vega-Lite API with D3.js for data loading, it renders a scatter plot where circle size encodes vehicle weight and tooltips reveal the car model name. The data comes from the UCI Machine Learning Repository's Auto MPG dataset, loaded via `d3.csv`. The visualization pipeline combines `vl.markCircle`, `vl.x`, and `vl.y` encodings with a custom configuration for styling and tooltip handling.

EEngineerRajeev

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle fuel efficiency (mpg) against horsepower with points colored by country of origin and sized by vehicle weight. The chart is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render an SVG view. Data is loaded asynchronously via d3.csv, and the visualization encodes quantitative x- and y-fields, a nominal color field, and tooltips showing car names. The implementation includes custom axis styling and tooltip configuration for readability across the full browser window.

YYi-Qing

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization explores the relationship between a car’s country of origin, its horsepower, weight, and miles per gallon, using a bubble chart built with the vega-lite-api. Each circle’s x-axis position encodes origin, y-axis horsepower, color encodes weight, and size encodes mpg, with tooltips revealing the car’s name. The code loads auto-mpg data via d3.csv, applies custom axis and label styling, and renders the SVG using vega-lite, vega, and a vega-tooltip handler.

Ssurikmeetr

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) in the Auto MPG dataset from the UCI Machine Learning Repository. Each circle represents a car, positioned by mpg on the x-axis and horsepower on the y-axis, with color encoding the country of origin and size encoding weight. The visualization is built using the vega-lite-api library in conjunction with Vega-Lite and Vega, while d3.csv loads the remote dataset. A custom config object adjusts axis styling, and the chart automatically fits the browser window with a tooltip displaying the car model name.

RROU

93% match

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 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 interactive scatter plot visualizes the relationship between vehicle weight, year of manufacture, and fuel efficiency (MPG) across different countries of origin, using data from the UCI Auto MPG dataset. The visualization is built with the Vega-Lite API, which compiles specifications to render SVG graphics. The code applies a custom configuration for axis styling and uses Vega Tooltip for interactive hover details. Data loading is handled by the d3.csv function, fetching from a remote Gist URL.

MMATTE-blz

92% match