Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public
Nnicklaus-roy
Last edited Apr 25, 2021
Created on Apr 8, 2021

A scatterplot of automotive data maps acceleration on the x-axis against horsepower on the y-axis, with points colored by origin and sized by weight. A tooltip reveals car names on hover. The visualization is created programmatically using the Vega-Lite API (vl), which compiles specifications to Vega and renders via SVG. It loads CSV data from a remote URL using d3.csv, applies custom axis and label styling from a separate config module, and fits the chart to the viewport.

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 data, with acceleration on the horizontal axis and horsepower on the vertical axis. Each point represents a car model, and hovering reveals the car’s name via a tooltip. The visualization is built programmatically using the vega-lite-api library, which generates a Vega-Lite specification that Vega renders to SVG. Data is loaded from a CSV file via d3.csv, and the chart auto-fits the browser window. Axis styling is customized with a dark theme for improved readability.

Eelia-dot
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 visualization presents a scatterplot of automobile data, mapping weight to the x-axis and horsepower to the y-axis, with color encoding for country of origin and point size reflecting miles per gallon. Tooltips display the vehicle name. The code uses the Vega-Lite API, registering vega and vega-lite libraries, and loads CSV data asynchronously via d3.csv from a gist URL. Config settings customize axis and label appearance, while the view is rendered as SVG with fit sizing to the window.

Ddanielscheeper@gmail.com
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 example shows a scatterplot of automotive data, mapping engine displacement to horsepower, with each point colored and labeled by car name. The visualization is built using the Vega-Lite API, with code that registers the vega, vega-lite, and vega-lite-api libraries, and uses vega-tooltip for interactive hover details. The data is loaded via d3.csv from a remote GitHub gist, and the chart is configured with custom axis styles and an opacity effect to reduce overplotting. The rendering targets an SVG output, sized to fill the browser window.

ZZakaria Salogo
94% 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
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data using a scatter plot of weight versus horsepower, colored by origin and with tooltips showing car names. The visualization is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart. Data is loaded asynchronously from a CSV file via d3.csv, then passed to a vega-lite-api markCircle specification. The chart fits the full window size with custom axis and label styling from a config object.

EEdgar Alves
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of automotive data, showing the relationship between acceleration, horsepower, weight, and miles per gallon across different model years. Built with the Vega-Lite API, it uses `vl.markCircle` with encodings for x, y, color, size, and tooltip, pulling data from a CSV via `d3.csv`. The visualization is rendered as an SVG, with the tooltip handler integrated through `vega-tooltip`, and includes custom font styling from the `config` file.

SStefano Renzetti
93% match