Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited May 1, 2021

Created on Apr 25, 2021

This visualization displays automobile data from a CSV file, plotting engine displacement against horsepower. Each point represents a vehicle, with color encoding the model year and size encoding vehicle weight. Tooltips reveal the car name when hovering. The chart uses the Vega-Lite API to construct the specification, with D3.js handling data loading via `d3.csv`. The visualization is rendered to SVG and fills the browser window, using a custom configuration to improve readability with larger fonts and adjusted axis styling. The code imports `vega`, `vega-lite`, and `vega-lite-api`, registering them with a tooltip handler to enable interactive data exploration.

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 visualizes automobile data from a CSV file, plotting engine displacement against horsepower as a scatter plot with semi-transparent points. Tooltips reveal vehicle names on hover, while the custom configuration adjusts font sizes, axis colors, and removes axis domains for a cleaner appearance. The visualization is built using the Vega-Lite API, registered with Vega and Vega-Lite, and rendered as SVG through D3. Data loading relies on D3's `csv` function, with the chart automatically sizing to fit the browser window.

IInnocent Ernest

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting engine displacement against horsepower with tooltips showing vehicle names. Built with the Vega-Lite API and D3’s CSV loader, it renders as an SVG scatterplot using semi-transparent points to reveal density. The visualization sizes itself to the window and applies custom styling for larger axis labels, with the Vega tooltip handler enabled for interactive inspection.

Ddev-ignacio-h

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from a CSV file, plotting engine displacement on the x-axis against horsepower on the y-axis as semi-transparent points. The Vega-Lite API configures the mark, encoding, and tooltips, with custom axis styling from the configuration file. Data is loaded asynchronously using d3.csv from a GitHub gist, and the resulting chart is rendered with Vega’s SVG renderer. The visualization fills the browser window, with tooltips enabled via Vega Tooltip.

Yyashbaddi

95% 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

This visualization displays a scatter plot of automobile data, plotting engine displacement against horsepower, with each point representing a vehicle model. The visualization uses the Vega-Lite API template, which leverages the vega-lite-api library to construct the chart programmatically. The code loads data from a CSV file using d3's csv function, then renders the marks using Vega and Vega-Lite with SVG output. Tooltips are enabled via Vega-Tooltip, and the visualization dynamically sizes itself to fit the browser window.

JJay

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data by plotting engine displacement against horsepower, with each point colored by model year. Built using the Vega-Lite API and rendered with VEGA-Lite’s vega.min.js and vega-lite.min.js libraries, it fetches the auto-mpg.csv dataset via d3’s csv function. The chart encodes quantitative fields for both axes, uses a config file to customize axis and label styling, and enables tooltips showing car names. The visualization automatically fits its width and height to the browser window.

Vvigneswaran009

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a dataset of automobiles, with each point representing a car model. The plot uses a scatterplot with tooltips displaying the car name, rendered as a full-screen SVG. Built using the Vega-Lite API, the code leverages `vega`, `vega-lite`, and `vega-lite-api` libraries while fetching data from a CSV via `d3.csv`. The visualization is configured with custom axis styling and an interactive tooltip handler for enhanced readability.

Aaniosindustries

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower across a sample of automobiles, with tooltips revealing the car model name for each point. It uses the Vega-Lite API to define a filled line mark with opacity, and renders the visualization as an SVG via the vega, vega-lite, and vega-lite-api libraries. The data is loaded asynchronously from a CSV file using d3.csv, and the chart is automatically sized to fit the browser window. The appearance is customized through a config object that adjusts axis and label styling.

Vvedant2003

94% match