Skip to main content
100%

w209 week 09 in-class exercise, completed

✓ Published0🌍 Public
Aandyreagan
Last edited Mar 28, 2020
Created on Mar 28, 2020

This interactive scatterplot shows the relationship between horsepower and miles per gallon for vehicles from the Altair dataset, with points colored by Origin. Built with Vega-Lite, the visualization includes linked interval selections on both axes, allowing users to brush to zoom and pan across the data. Tooltips display the exact miles-per-gallon value for each point when hovered.

AI-generated description

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for classic automobiles from the UCI Auto MPG dataset. The visualization uses the Vega-Lite API in JavaScript to define the marks and encodings, with data loaded asynchronously via D3’s `csv` method. The chart is rendered as an SVG, and the Vega-Tooltip handler displays detailed vehicle names on hover. The code also customizes axis and label styles for improved readability, following the Vega-Lite configuration format.

AAamir Hameed mir
79% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon and horsepower for various car models, with color encoded by region of origin and point size representing vehicle weight. Hovering reveals the car's name via tooltip. Built using the Vega-Lite API, the visualization programmatically constructs the chart through method chaining in `viz.js`, then renders it with Vega and Vega-Lite. Data is loaded asynchronously from a CSV in `getData.js` using `d3.csv`, and custom axis and label styling is applied from `config.js`.

GGunjan Paul
78% match
Loading thumbnail…

Scatter Plots

This interactive scatter plot visualizes the relationship between a vehicle’s miles per gallon and its horsepower, with each dot colored by country of origin and sized by weight. The visualization is built using the Vega-Lite API, which programmatically constructs the chart specification by chaining methods like `vl.x().fieldQ('mpg')` and `vl.color().fieldN('origin')`. Data is loaded asynchronously from the UCI Auto MPG dataset using the `csv` function from d3. The chart fills the browser window and includes tooltips, which are enabled through the Vega-Tooltip handler.

MMeAzuree
78% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, mapping miles per gallon against horsepower for individual car models. Each point is colored by origin and sized by vehicle weight, with hover tooltips revealing the car name. Built with Vega-Lite API, the visualization leverages `vl.markCircle`, positional encodings via `vl.x()` and `vl.y()`, and tooltips through `vl.tooltip()`. D3’s `csv` loader fetches the data, while Vega tooltip enhances interactivity, all running within a responsive, full-window layout.

JJoshua Holloway
78% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon and horsepower for automobiles, with each point colored by origin and sized by horsepower. The visualization uses the Vega-Lite API in JavaScript to construct a circle mark with quantitative x and y encodings, along with color, size, and tooltip encodings. It loads data from a CSV file via `d3.csv` and renders as an SVG using the vega-lite-api library. Appearance is customized through a config file that adjusts axis and label styling for readability.

Bbryce-walsh
78% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays an interactive scatter plot of the Auto MPG dataset, plotting miles per gallon against horsepower while encoding vehicle origin by color and weight by point size. Built with the Vega-Lite API, it combines vega, vega-lite, vega-tooltip, and d3.csv for data loading. The code configures axis styling, applies a responsive fit to the window, and uses interactive tooltips showing vehicle names. Data comes from the UCI Machine Learning Repository via a GitHub gist.

Cchar0496
78% match
Loading thumbnail…

Vega-Lite API Template - Part 2

This example displays a scatter plot of automotive data, showing the relationship between miles per gallon and horsepower. Each circle encodes vehicle weight through color and engine displacement through size, with interactive tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which composes specifications programmatically, and renders through Vega with D3.js for data loading via `d3.csv`. The data originates from the classic auto-mpg dataset hosted as a GitHub gist.

JJohn Jeevasaeyan
78% match
Loading thumbnail…

Visualization with Vega-Lite

This visualization uses Vega-Lite and the vega-lite-api to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The plot displays miles per gallon and horsepower on the axes, with color encoding for the country of origin and size encoding for vehicle weight. The code fetches the CSV data using d3.csv, configures the chart with custom axis and label styles, and renders it as an SVG while enabling tooltips through vega-tooltip.

MMartin Coronel
78% match