Fork of Vega-Lite API Template

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower for a collection of automobiles. The visualization uses the Vega-Lite API to generate a chart with customizable point styling, including a semi-transparent fill and a tooltip that reveals the car’s name on hover. It loads data from a CSV file fetched via d3.csv, renders the chart into an SVG using the Vega-Lite renderer, and applies a custom config to adjust axis labels and colors. The plot resizes to fit the browser window using autosize settings.

SSahaj Singh

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

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a collection of automobiles. It uses a scatter plot of points with a fixed size and low opacity to show data density, with tooltips revealing the car name. The visualization is built using the Vega-Lite API, registering it with Vega and Vega-Lite, and configures axes and label styling through a custom config object. Data is loaded from a remote CSV file via the `d3.csv` method.

MMayank Kumar

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

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

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, plotting engine displacement against horsepower, with each point representing a vehicle model. The visualization uses the Vega-Lite API template, which leverages the vega-lite-api library to construct the chart programmatically. The code loads data from a CSV file using d3's csv function, then renders the marks using Vega and Vega-Lite with SVG output. Tooltips are enabled via Vega-Tooltip, and the visualization dynamically sizes itself to fit the browser window.

JJay

Fork of Vega-Lite API Template

This scatter plot displays the relationship between engine displacement and horsepower for a collection of automobiles, with each circle’s area scaled by vehicle weight. The visualization is rendered using the Vega-Lite API, a programmatic wrapper around Vega-Lite and Vega, with tooltips supplied by the vega-tooltip library. Data is loaded as CSV from a remote source using d3.csv, and the plot’s axis styles and dimensions are customized via a configuration object.

NNikhilchiguru-8

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