Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
Zzykel
Last edited Oct 22, 2021
Created on Oct 22, 2021

This example demonstrates how to build interactive visualizations using the Vega-Lite API within a D3.js framework. It displays a line chart of automobile data from a CSV file, plotting horsepower over time with a viridis color scale and tooltips showing vehicle names. The visualization leverages the vega-lite-api library to construct the chart declaratively, while D3’s csv function loads the data. Custom configuration adjusts axis styling and font sizes, and the final SVG output is rendered across the full viewport with auto-sizing.

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 uses the Vega-Lite API to render a line chart of automobile data from the UCI Auto MPG dataset, showing horsepower over time. The chart colors the lines by weight and uses the `fieldT` and `fieldQ` encoding methods to map temporal and quantitative data. The D3-based `vega-lite-api` library, along with the `vega` and `vega-lite` rendering engines, produces an interactive SVG visualization with a tooltip displaying car names. The configuration sets custom axis and label styling for improved readability.

Ccolbygogan
92% match
Loading thumbnail…

Fork of Vega-Lite API Template practice

This example visualizes automobile performance data from a CSV file, plotting acceleration against horsepower with points colored by origin and tooltips showing car names. The visualization is built using the Vega-Lite API (vl) with D3.js for data loading via the csv function. The code constructs a scatter plot with circular marks, customizes axis appearance through a config object, and renders the chart to fit the browser window using canvas-based rendering and Vega tooltip handlers.

MMarkvanHaperen
92% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example renders a filled line chart without strokes, mapping engine displacement on the x-axis and horsepower on the y-axis from the classic auto-mpg dataset. It uses the Vega-Lite API to construct the chart via its mark and encoding methods, with tooltips bound to each point’s vehicle name. The code loads CSV data through d3.csv, applies a custom configuration for axes and label styling, and displays the result as a full-window SVG using Vega-Lite’s renderer and view options.

HHiImSebastian
91% 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
91% 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
91% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automotive data from the auto-mpg.csv dataset, plotting horsepower against year with a tooltip displaying vehicle names. The visualization is built using the Vega-Lite API, which programmatically constructs a scatter plot with semi-transparent points. The code leverages vega-lite-api, vega-lite, and vega-tooltip to render the chart as SVG, while D3.js fetches and parses the CSV data. Custom axis and label styling are applied via a shared configuration object to improve readability across the full browser window.

JJay M Gonzalez
91% match
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
91% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automobile data from a CSV file, plotting engine displacement against horsepower with a tooltip that displays the car name. The code registers Vega, Vega-Lite, and Vega-Lite API with a tooltip handler, loads the data via d3.csv, and applies custom styling through a config object. It demonstrates a programmatic workflow where the chart specification, data loading, and rendering are separated across modules, culminating in a full-screen, interactive visualization.

Aaymen0023
91% match