Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public
DDoãn Phụng
Last edited Jun 28, 2022
Created on Jun 28, 2022

This scatterplot visualizes the relationship between engine displacement and horsepower for a car dataset loaded from a CSV file. The example uses the Vega-Lite API, a JavaScript wrapper for Vega-Lite, to declaratively define the chart, with `vl.markPoint` for the points and `vl.x()` and `vl.y()` encoding quantitative fields. Rendering occurs through Vega, with the chart sized to the window and tooltips enabled via the Vega Tooltip handler. The code also imports custom axis and label styling from a separate config module.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower using a scatter plot of automotive data. Each point represents a vehicle, with tooltips revealing the car’s name on hover. The visualization is built with the Vega-Lite API, which composes specifications and renders them via Vega and Vega-Lite libraries. Data is loaded asynchronously from a CSV file using d3.csv, while appearance is customized through a config object that adjusts axis styles, font sizes, and colors. The chart fills the browser window and uses semi-transparent points to show overlapping data density.

DDoãn Phụng
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower across a sample of automobiles, with tooltips revealing each vehicle’s name. Built with the Vega-Lite API, it uses `vl.markPoint` and `vl.encode` to map the numeric fields onto x and y axes, while loading data via D3’s `csv` function from a remote dataset. The chart renders to SVG using Vega’s view, with a custom configuration that removes axis domains and adjusts font sizes for readability.

RRoman Tolmachev
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a set of automobiles, with tooltips revealing the vehicle name for each point. The scatter plot is constructed using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG. Data is loaded from a CSV file using D3’s `csv` function, while the visualization’s appearance is customized through a configuration object that adjusts axis styles and font sizes. The chart fills the entire viewport and uses semi-transparent points to reveal overlapping data.

SSarah Elkeurti
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower for a dataset of automobiles, with tooltips revealing the car name. Built with the Vega-Lite API, the visualization registers Vega and Vega-Lite, loads data from a CSV file via d3.csv, and renders as an SVG. The chart uses markPoint encoding with scaled axes and opacity to handle overlapping points, while the configuration customizes axis appearance and font styling.

MMohamed Ali
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a collection of automobiles. It renders a scatter plot with semi-transparent points, where hovering reveals the vehicle's name via tooltip. The visualization is built using the Vega-Lite API (`vl.markPoint`, `vl.x().fieldQ`, `vl.y().fieldQ`) within a D3.js framework, with data fetched as CSV from a remote GitHub gist. Appearance is customized through a Vega config object, and rendering is handled by Vega's SVG renderer.

Llplimier
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a collection of automobiles, using a scatter plot of semi-transparent points with tooltips displaying vehicle names. It is built with the Vega-Lite API, which compiles specifications into Vega and renders them as SVG, while D3.js loads the data from a CSV file hosted on GitHub. The visualization adapts to the full window size and applies a custom configuration to adjust axis and label styling for improved readability.

MMinh Luong
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for various car models, using a scatter plot where each point represents a vehicle. The visualization is built with the Vega-Lite API, which generates a Vega-Lite specification that is then rendered as SVG by the Vega library. Data is loaded asynchronously from a CSV file using d3.csv, and the visualization includes interactive tooltips provided by the vega-tooltip Handler. The chart is configured with custom axis styling and font sizes to improve readability.

NNioh
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower for a set of automobiles, with each point labeled by car name via tooltips. Built using the Vega-Lite API (vl) within a D3.js framework, it fetches data from a CSV file via `d3.csv` and renders an interactive SVG chart. The visualization applies a customized dark theme and responsive sizing, with points rendered as semi-transparent circles using `.markPoint`.

NNick Jefford-Horn
93% match