Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Feb 20, 2020

Created on Feb 20, 2020

A scatter plot shows the relationship between pressure and acceleration, with tooltips revealing each point's name. Built with Vega-Lite API, it loads CSV data from a remote GitHub repository using d3.csv. The visualization uses Vega and Vega-Lite libraries, configures axes and label styling, and renders as a full-window SVG with interactive tooltips from vega-tooltip.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between acceleration and horsepower, with tooltips revealing car names on hover. Created using the Vega-Lite API, it loads CSV data from a GitHub gist via d3.csv, then renders the visualization through Vega-Lite’s markPoint encoding. The code registers vega, vega-lite, and the vega-tooltip handler, applies a custom dark-themed configuration for axes and labels, and embeds the result in the browser window.

Fforcox43

89% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to create a scatterplot of automobile data from a CSV file, mapping acceleration and horsepower on the axes with tooltips for car names. The visualization is rendered as an SVG via the vega and vega-lite libraries, with vega-lite-api constructing the mark specification programmatically. The code loads data asynchronously using d3.csv, applies custom axis and label styling from a config object, and fits the chart to the viewport with a tooltip handler from vega-tooltip.

Llubin-liu

88% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile acceleration against horsepower, with tooltips revealing car names. Built using the Vega-Lite API, the visualization dynamically sizes to the browser window and applies custom styling for dark axis labels and green tick marks. Data is loaded from a CSV file via d3.csv, and the plot is rendered through Vega’s SVG renderer with tooltip support from vega-tooltip. The code leverages vl.markPoint, vl.x(), and vl.y() to define the encoding, showcasing a template for rapid declarative visualization development.

HHernanls

88% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of auto-mpg data, mapping acceleration to the x-axis and horsepower to the y-axis, with tooltips showing car names. Built with the Vega-Lite API, it uses vl.markPoint(), vl.x(), vl.y(), and vl.tooltip() to define the encoding, while the getData.js module loads CSV data via d3.csv. The visualization is rendered as SVG through Vega, with appearance customized in config.js and an interactive tooltip provided by vega-tooltip.

RRenan Barbosa

86% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates an interactive scatterplot of automobile data, plotting acceleration against horsepower with points colored by origin. Built using the Vega-Lite API, the visualization renders via SVG and includes tooltips displaying car names. The code loads data from a CSV using d3.csv, registers Vega-Lite with vega and vega-tooltip, and configures axes and label styling. The visualization auto-fits its container dimensions and uses a custom dark color scheme.

JJohn Patrick Banas

86% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatterplot of automotive data from a CSV file, plotting engine horsepower against the origin of each vehicle. The visualization employs semi-transparent black circles to reveal overlapping points, with tooltips displaying car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip libraries, fetches data via d3.csv, and applies a custom configuration for axis styling and label fonts. The chart dynamically fits the browser window using an autosize type of “fit” with padding.

CCurran Kelleher

86% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between acceleration and horsepower for a collection of automobiles, with each point representing a car and a tooltip revealing its name. It is built using the Vega-Lite API, which programmatically constructs a scatter plot through method chaining in `viz.js`. The code loads data from a CSV file via D3’s `csv` function, then renders the chart with Vega and Vega-Lite in an SVG view. The `config.js` file customizes axis styling and typography for improved readability.

AAntonio Rungo

86% match

Loading thumbnail…

Vega-Lite API Template

This example renders a scatter plot of daily weight measurements using the Vega-Lite API, with points sized uniformly and the y-axis scaled from zero for clearer trends. The visualization pulls data from a CSV file hosted as a Gist, originally sourced from the UCI Auto MPG dataset. Built with the vega-lite-api template, it uses d3.csv for data loading, Vega-Lite’s markCircle encoding for points, and Vega-Tooltip for interactive hover details. The display is configured via a custom config object that adjusts font sizes and axis styles, while the chart auto-fits to the window dimensions.

MMamveguh

86% match