v1_Fork of Vega-Lite API Template

100%

v1_Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jan 23, 2023

Created on Jan 23, 2023

This visualization displays automobile data as a scatter plot, mapping engine displacement on the x-axis against horsepower on the y-axis, with points colored by model year and sized according to vehicle weight. The chart uses the Vega-Lite API to declaratively encode these fields, with D3’s CSV loader fetching the auto-mpg dataset from a GitHub gist. Custom axis and label styling in the configuration enhance readability, while tooltips reveal each car’s name. The visualization renders as an interactive SVG, automatically sizing to fill the browser window.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automotive data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point representing a vehicle. The plot uses semi-transparent, filled circles to show overlapping data density and includes hover tooltips revealing car model names. It is built using the Vega-Lite API, which wraps the Vega and Vega-Lite libraries, and loads the auto-mpg dataset via D3’s `csv` function. The visualization renders as an SVG, with custom configuration for axis styling and tooltip text.

AAlNahean

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

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 visualization plots automobile displacement against horsepower using a scatterplot of individual points, with tooltips revealing the car model name on hover. It leverages the Vega-Lite API for declarative chart specification, backed by Vega and Vega-Lite rendering engines, while D3’s `csv` loader fetches the auto-mpg dataset from a GitHub gist. The code customizes axis styling and global appearance through a config object, and the chart’s size dynamically adapts to the browser window dimensions.

SSteinarV-design

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatterplot of automobile data, plotting horsepower against displacement for individual car models. Each point is rendered as a semi-transparent circle, with tooltips revealing the vehicle name on hover. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to compile specifications and render SVG output. Data is loaded asynchronously from a remote CSV file using d3.csv, while the vega-tooltip Handler enables interactive tooltips. The chart dynamically fits its dimensions to the browser window through an autosize configuration.

Ggayatrisridhar

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping displacement against horsepower, with points colored by country of origin and tooltips revealing model names. The example uses the Vega-Lite API (via `vega-lite-api`) to declaratively construct the chart, while D3's `csv` method loads the auto-mpg dataset. Rendering is handled by Vega and Vega-Lite with SVG output, and the tooltip functionality comes from the `vega-tooltip` Handler. Axis styling and color scheme are customized through a JSON config object, which is merged into the visualization's default appearance.

MMathieuSchaff

93% match