Skip to main content
SimilarExport ZIP
100%

Gokul's Vega-Lite API Template

✓ Published0🌍 Public
GGokulkrishnan1996
Last edited Jul 8, 2022
Created on Jul 8, 2022

This example visualizes automobile performance by plotting miles per gallon against horsepower, with circles colored by origin and sized by weight, and tooltips revealing car names. It loads the classic Auto MPG dataset from a CSV file using D3’s `csv` function. The visualization is built with the Vega-Lite API (`vl.markCircle`, `vl.x`, `vl.y`), which compiles to Vega and renders to SVG, while the `vega-tooltip` handler enables interactive hover details. Configuration settings adjust axis fonts and gridline appearance for readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example visualizes automotive data from an auto-mpg CSV dataset, plotting engine weight against horsepower with circles colored by origin and sized by miles per gallon. The code constructs the visualization using the Vega-Lite API, registering it with vega and vega-lite, and rendering as SVG via d3.dsv. A custom configuration adjusts axis labels and tick styling for readability, while d3.csv loads the remote dataset. Tooltips display car model names on hover using vega-tooltip.

PPUUDI
91% match
Loading thumbnail…

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
90% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data from a CSV file, plotting miles per gallon against horsepower. Colored circles represent the country of origin, while circle size encodes vehicle weight, with tooltips displaying detailed attributes. The visualization is built using the Vega-Lite API, registering Vega and Vega-Lite libraries with a custom configuration for axis styling and tooltip handling. Data is loaded asynchronously via D3's `csv` function, and the chart renders responsively to fill the browser window using an SVG renderer.

Pparshwa30122002@gmail.com
90% match
Loading thumbnail…

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
90% match
Loading thumbnail…

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 as colored circles representing the car’s origin. It uses the Vega-Lite API to declare the scatter plot, with point size mapped to vehicle weight and tooltips showing car names. The visualization is rendered as SVG via Vega, with D3.js loading the CSV data and Vega Tooltip providing interactive labels. Custom axis and label styling in the configuration improve readability, and the chart resizes to fit the browser window.

EEngineerRajeev
90% match
Loading thumbnail…

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 with points colored by origin and sized by vehicle weight. Tooltips display car names on hover. The visualization is built using the Vega-Lite API and rendered through D3.js, with data loaded via D3’s `csv` function. The chart is created programmatically using `vl.markCircle` with encodings for quantitative and nominal fields, and includes custom configuration for axis styles and text formatting.

Aantanta28
90% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting horsepower against miles per gallon. Points are colored by origin and sized by vehicle weight, with tooltips revealing model names. The visualization uses the Vega-Lite API, a JavaScript wrapper for Vega-Lite specifications, registered with Vega and Vega-Lite libraries, plus D3’s `csv` loader for data ingestion. Rendering occurs as an SVG via the `markCircle` and `encode` API methods, with custom axis styling from a config object.

Jjuanmy400
90% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s fuel efficiency (mpg) against its horsepower. Each circle’s size encodes vehicle weight, while color distinguishes the region of origin, and hovering reveals the car’s name. The visualization is built programmatically using the Vega-Lite API (`vl.markCircle`, `vl.x`, `vl.y`), with data loaded asynchronously via `d3.csv`. Rendering is handled by Vega and Vega-Lite, with tooltips provided by Vega-Tooltip, and custom axis and label styling is applied through a shared config object.

MMohammed Jumail Shibily
90% match