Fork of Cars mpg

Fork of Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon and horsepower for automobiles, with color encoding by origin and interactive tooltips displaying car names. It uses the vega-lite-api to construct a circle mark scatter plot, which is then rendered and configured via Vega-Lite, Vega, and d3.csv for data loading. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, and the view auto-sizes to the window with custom axis and label styling.

Aakarki79

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower for individual cars. Each circle’s color encodes the car’s origin, while its size represents weight; hovering reveals the car’s name via a tooltip. The visualization is built using the Vega-Lite API, which composes a scatter plot with a circle mark and quantitative scales. It loads CSV data via d3.csv, renders with SVG through Vega-Lite’s view, and applies custom axis and label styling from a shared configuration object.

Ssofiamourap

Fork of Vega-Lite API Template

This visualization presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower for various car models. Each point’s size encodes vehicle weight, color indicates the country of origin, and hovering reveals the car name. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3, using `vl.markCircle` for encoding and `d3.csv` for loading data. The plot spans the full browser window with a custom dark color config for axis labels and titles.

NNana Kwame

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower, miles per gallon, and vehicle weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. A scatter plot uses circle marks, with color encoding vehicle origin and size encoding weight, while tooltips reveal the car model name. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite, and includes a custom configuration to style axes and labels. Data is loaded asynchronously with d3.csv, and the chart canvas fills the browser window.

SShishiraRudrabhatla

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon, horsepower, and weight for auto-mpg data from the UCI Machine Learning Repository. A scatter plot shows each car as a circle, with color encoding the region of origin and size encoding vehicle weight; hovering reveals the car’s name via tooltip. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite libraries, and renders to SVG. Data is loaded asynchronously via d3.csv, with custom axis and label styling defined in a separate configuration file.

SSezer Gümüş

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, mapping miles per gallon on the x-axis against horsepower on the y-axis. Each point represents a car model, with a tooltip displaying the vehicle name on hover. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite specifications, while D3’s `csv` function loads the remote data. The chart renders as an SVG, with custom configuration adjusting axis style, label font sizes, and colors for improved readability.

KKimberly Nguyen

Fork of Vega-Lite API Template

This visualization displays the relationship between miles per gallon and horsepower for a subset of automobile models, with point size encoding vehicle weight and color distinguishing geographic origin. Hovering reveals each car’s name via a tooltip. Built with the Vega-Lite API for chart specification, it loads CSV data from the UCI Auto MPG dataset and renders interactively using D3.js, Vega, and the vega-tooltip handler.

Ggon araseon

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower, with additional encodings for origin (color) and weight (size). The plot uses a scatter plot with semi-transparent circles, presenting data as points with tooltips displaying car names. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications, with the `vl.markCircle` method configuring the marks and `vl.x()`/`vl.y()` for quantitative scales. Data is loaded asynchronously via `d3.csv`, and the final render uses Vega’s SVG output with a custom tooltip handler.

SSong Tao Chen