Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 8, 2021

Created on Jun 8, 2021

A scatter plot visualizes automobile data from an auto-mpg CSV, mapping model year to horsepower with tooltips showing vehicle names. Built using the Vega-Lite API, it registers Vega and Vega-Lite libraries, configures axes and styling, and renders an SVG view that fits the window. The code formats year as temporal and horsepower as quantitative, while using a config object for font and color customization.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile horsepower across model years, with translucent circular marks and hover tooltips revealing vehicle names. Built with the Vega-Lite API, it loads data from the UCI Auto MPG dataset via d3.csv and renders the visualization as SVG using the vega-lite-api library. The plot encodes year on the x-axis, horsepower on the y-axis, and uses a custom config for axis styling and tooltip font size.

Tthe-1000th-summer

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automotive data from the auto-mpg.csv dataset, plotting horsepower against year with a tooltip displaying vehicle names. The visualization is built using the Vega-Lite API, which programmatically constructs a scatter plot with semi-transparent points. The code leverages vega-lite-api, vega-lite, and vega-tooltip to render the chart as SVG, while D3.js fetches and parses the CSV data. Custom axis and label styling are applied via a shared configuration object to improve readability across the full browser window.

JJay M Gonzalez

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile data, plotting miles per gallon against horsepower, with tooltips revealing car names. It renders using the Vega-Lite API, which compiles specifications to Vega and renders to SVG. The code loads the auto-mpg dataset via `d3.csv`, configures axis and label styling, and fits the visualization to the window. Custom styling includes removing axis domains and settings for guide labels and titles.

TTung Pham

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile horsepower trends over time using a scatter plot, where each point represents a vehicle model year. The visualization uses a Vega-Lite API specification to encode the year on the x-axis and horsepower on the y-axis, with tooltips displaying vehicle names. Data is loaded asynchronously from a CSV file via d3.csv, and the chart is rendered with the vega, vega-lite, and vega-lite-api libraries, along with vega-tooltip for interactive hover details. The configuration customizes axis and label styling for improved readability.

TT.T

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis. Each point represents a vehicle, with color encoding the model year, size encoding vehicle weight, and tooltips revealing the car name. The code uses the vega-lite-api to construct the chart, with data loaded from a CSV of auto-mpg statistics via d3.csv. It renders as an SVG through Vega-Lite, applying custom configuration for axis styling and font sizes, and integrates a Vega Tooltip handler for interactive hover details.

Eericemc3

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot of automobile data maps engine displacement to horsepower, with points colored by model year. The visualization uses the Vega-Lite API to declaratively encode the fields, while config.js customizes axis and label styling for readability. Data loads asynchronously from a CSV of auto-mpg records via d3.csv. Tooltips display car model names on hover, and the plot omits axis domains while using light gray tick marks against the dark text palette.

KKamilPodsiadlo

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatterplot visualizes automobile data by plotting horsepower against origin, with each point representing a car model and tooltips revealing its name. Built with the Vega-Lite API, the chart uses `vl.markCircle` with encoding functions for x and y axes, while custom config adjusts font sizes and axis styling. Data is loaded asynchronously from a CSV using D3’s `csv` method, and the visualization renders full-screen with an SVG view and integrated tooltip handler.

Bbreadcircle

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, mapping miles per gallon on the x-axis against horsepower on the y-axis, with color encoding for the country of origin and point size reflecting vehicle weight. Tooltips reveal each car’s name. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip, loads CSV data via d3.csv, and applies a custom configuration for styled axes and labels. The chart renders in SVG and fits the browser window.

YYing-Liu21

93% match