Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 5, 2021

Created on Apr 5, 2021

This example displays a scatter plot of car data, with each point representing a vehicle. The visualization uses a circular mark with low opacity to show the distribution of horsepower across different regions of origin, with tooltips revealing the car’s name. The chart is built using the Vega-Lite API, which programmatically defines the visualization, while D3’s `csv` method loads the dataset. The rendering is handled by Vega and Vega-Lite, with a custom tooltip handler and styling to improve 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 shows a scatter plot of automobile displacement against horsepower, with tooltips revealing vehicle names. Each point uses a semi-transparent fill to visualize overlapping data. The visualization is built using the Vega-Lite API, with custom configuration for axis styling and label fonts. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG using Vega-Lite’s `markPoint` encoding with quantitative scales for both axes.

DDaMei1993

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automotive data from a CSV file, showing the relationship between engine displacement and horsepower. Each point represents a vehicle, with a tooltip displaying the car's name. The visualization leverages the Vega-Lite API to construct the mark and encoding specifications, while Vega and Vega-Lite handle rendering. The code loads the data using `d3.csv` from the `d3` library, applies custom styling through a configuration object, and uses the `vega-tooltip` handler for interactive hover details.

Aalliefeld

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data from an auto-mpg CSV, showing the relationship between engine displacement and horsepower. The visualization is built using the Vega-Lite API, which composes specifications and renders them through Vega-Lite while leveraging D3’s `csv` loader to fetch and parse the data. Points are rendered as semi-transparent filled circles with tooltips that reveal vehicle names. The plot uses a custom config and a fit-to-window layout, with axis styling adjusted for readability.

Ccaptind

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, with horsepower on the y-axis and weight on the x-axis. Each point represents a vehicle, colored by its origin and sized according to miles per gallon, with a tooltip showing the car’s name. Built using the Vega-Lite API running on D3.js, it loads a CSV from a GitHub gist and renders into a full-window SVG with custom axis styling and tooltip configuration from Vega Tooltip.

Dducan114

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses Vega-Lite API to render a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with each point representing a car model and tooltips displaying the vehicle name. The visualization loads data from a CSV file using d3.csv and builds the chart programmatically through the vega-lite-api library, which registers with Vega and Vega-Lite. The code customizes the appearance through Vega-Lite configuration options, adjusts the chart size to fit the window, and enables interactive tooltips via the vega-tooltip Handler.

HHarshavardhan Kamarthi

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

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automotive data, with each circle representing a vehicle based on its miles per gallon, horsepower, origin, and weight. The visualization uses the Vega-Lite API within a D3.js context to render interactive SVG graphics. It loads a CSV dataset from a GitHub gist and applies custom encoding for position, color, and size, while tooltips reveal vehicle names. The code integrates vega, vega-lite, vega-lite-api, and vega-tooltip libraries, with the figure automatically fitting the browser window.

TTylerSaikaleyTheriault

93% match