Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Dec 29, 2024

Created on Dec 29, 2024

This fork of the Vega-Lite API template uses the Vega-Lite API to create a scatter plot of automobile data, encoding engine displacement and horsepower on the x- and y-axes, with points colored by origin and tooltips revealing car names. The visualization reads from a CSV of auto-mpg data via d3.csv, and the config.js file customizes axis styles and fonts for readability. Rendered as SVG, it uses the vega-lite-api to build the spec programmatically, with vega-tooltip handling interactive hover details.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of the Vega-Lite API template renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Circles encode car origin on the x-axis, horsepower on the y-axis, weight as color, and miles per gallon as size, with tooltips revealing car names. The visualization uses the vega-lite-api library to construct the specification programmatically, registering Vega and Vega-Lite for rendering in SVG. The code loads CSV data via d3.csv, applies custom axis and label styling from config.js, and adapts to the full window size.

NNick Jefford-Horn

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatterplot of automobile data from a CSV file. The visualization encodes origin as the x-axis, horsepower as the y-axis, weight as color, and mpg as point size, with tooltips showing car names. It applies custom axis and label styling via the Vega-Lite config, and uses the vega-tooltip handler for interactive hover details. The chart is rendered as an SVG that fits the full window using the vega-lite-api’s `render()` method.

Llatifiss

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of automotive data from the UCI Auto MPG dataset, loaded via d3.csv. The active chart displays vehicle origin on the x-axis and horsepower on the y-axis, with large translucent circular marks and tooltips showing car names. The code registers Vega-Lite with vega, vega-lite-api, and vega-tooltip, and applies custom axis and label styling from a config object. The visualization is responsive, fitting the full browser window.

MMyGitUserName-dh

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of auto-mpg data, plotting engine displacement against horsepower for individual car models. Each point is semi-transparent to reveal overlapping density, and tooltips display the vehicle name on hover. The code loads CSV data via D3’s `csv` method, customizes axis and label styling through a Vega-Lite config object, and leverages the `vega-tooltip` Handler for interactive feedback.

Mmmohatra

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of the Vega-Lite API template displays a scatter plot of automobile data from the UCI Auto MPG dataset, obtained via a Gist-hosted CSV. The visualization encodes miles per gallon and horsepower on the x and y axes, while the car's origin determines the color and its weight scales the circle size. Built with the Vega-Lite API registered to D3 and Vega, the chart uses the provided `viz.js` specification, applies custom styling from `config.js`, and renders to an SVG canvas sized to the window.

Xxhd2015

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to create a scatter plot of auto-mpg data, plotting engine displacement against horsepower. Each point is a semi-transparent circle colored uniformly, with tooltips displaying the vehicle name. The visualization reads CSV data from a GitHub gist via D3’s `csv` function, and configures axes and label styling. It renders an SVG chart that fills the window using Vega-Lite’s `.width()` and `.height()` methods, with a custom tooltip handler from Vega-Tooltip.

Iiffath.namira@csedge.org

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the classic Auto MPG dataset. The visualization encodes quantitative fields for acceleration (x-axis) and horsepower (y-axis), with origin as color and cylinders as size, plus a tooltip for car name. The code loads data via `d3.csv`, renders with `vega` and `vega-lite`, and applies custom styling from `config.js` for axis ticks and label fonts. The chart auto-fits to the window, uses SVG rendering, and integrates `vega-tooltip` for hover details.

Ssmile2git

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

92% match