Vizhub3

Example Zoomable #3

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting miles per gallon against horsepower as a scatter plot. Each point’s size encodes vehicle weight, while its color represents the region of origin, and hovering reveals the model name. The visualization is built with the vega-lite-api library, which compiles specifications into Vega-Lite and renders them via Vega, with d3.csv used to load the data. The chart is configured for full-window sizing and uses a custom dark theme for improved readability.

Aamnicpo

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

Vega-Lite API_Car

This interactive scatter plot explores automobile fuel efficiency and performance using the UCI Machine Learning Repository's Auto MPG dataset. It displays miles per gallon against horsepower, with circles sized by vehicle weight, colored by country of origin, and offering tooltips for car names. Built with the Vega-Lite API for D3, the visualization leverages `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode these dimensions. The code loads data via `d3.csv`, applies a custom configuration for readable axes and fonts, and renders an SVG that fills the browser window.

SSkye Chen

Fork of Vega-Lite API Template

This visualization presents the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower. Each car is represented as a circle, with color indicating the country of origin, size mapped to vehicle weight, and tooltips revealing the car name. The chart is built using the Vega-Lite API, which translates a declarative specification into a rendered SVG. The code leverages `vl.markCircle` and the encode functions to bind data fields to visual channels. The underlying Vega and Vega-Lite libraries, along with the `vega-tooltip` handler for interactive hover details, render the final output.

AAshutosh5333

explor vegalite

This visualization explores the Auto MPG dataset from the UCI Machine Learning Repository. It renders a scatter plot with circles encoding miles per gallon on the x-axis, horsepower on the y-axis, origin as color, and vehicle weight as point size, with tooltips showing model names. Built using the vega-lite-api, it registers Vega and Vega-Lite to generate an SVG view with a custom dark-themed configuration. The code loads CSV data via `d3.csv` and renders the chart at full window size with a tooltip handler.

Wwzhang88

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

HW1

This visualization displays a scatter plot of automobile data from the UCI Auto MPG dataset, mapping miles per gallon on the x-axis and horsepower on the y-axis. Each circle represents a vehicle, with color indicating the country of origin and size encoding vehicle weight. The plot uses the vega-lite-api to construct the chart and d3.csv to load the data. Custom axis and label styling are applied through the vega-lite configuration object, with a tooltip showing vehicle names on hover.

Ping-Yu Yang

Fork of Vega-Lite API Template

This visualization presents a scatter plot of auto MPG data from the UCI Machine Learning Repository, mapping miles per gallon against horsepower. Each circle’s size encodes vehicle weight, while color distinguishes origin, and hovering reveals the car’s name. The visualization is built using the Vega-Lite API, with d3.csv loading the data and vega-tooltip providing interactive details. The chart fills the browser window, and a custom config adjusts axis and label styling for readability.

SSumit Kumar