Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
TT.T
Last edited May 3, 2021
Created on May 3, 2021

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.

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

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.

GGuido Perdomo
94% 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
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
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile data, plotting horsepower against model year, with points colored by vehicle weight and labeled interactively via tooltips. The visualization is constructed declaratively using the Vega-Lite API (vl) and rendered with Vega, while D3 is used to load the CSV dataset from a GitHub gist. The code applies custom configuration for axis styling and tooltip appearance, then dynamically sizes the chart to the full window. It demonstrates integrating Vega-Lite’s high-level grammar with D3’s data fetching capabilities.

PPaweł Oleniak
92% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile data, with acceleration on the horizontal axis and horsepower on the vertical axis. Each point represents a car model, and hovering reveals the car’s name via a tooltip. The visualization is built programmatically using the vega-lite-api library, which generates a Vega-Lite specification that Vega renders to SVG. Data is loaded from a CSV file via d3.csv, and the chart auto-fits the browser window. Axis styling is customized with a dark theme for improved readability.

Eelia-dot
92% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between a vehicle's acceleration and its horsepower. Each point in the scatter plot represents a car model, with tooltips revealing the car's name. Built using Vega-Lite's API for declarative charting, the visualization loads auto-mpg.csv data via d3.csv. The chart is rendered to SVG with custom axis styling and configured to fit the browser window.

TT-Reiser
92% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon and horsepower across automobile models, with each point labeled by vehicle name via tooltips. It uses the Vega-Lite API to declaratively encode the scatterplot’s x- and y-axes with quantitative scales, while relying on D3’s CSV loader to fetch remote data. The visualization is rendered as SVG through Vega and Vega-Lite, with custom axis styling and a dark color scheme for readability. Vega Tooltip handles interactive hover details, and the chart auto-fits to the full browser window.

Jjames.haarbauer@dunya-analytics.com
92% match