Fork of Vega-Lite API Template

Fork of Vega-Lite API Template

This visualization displays automobile data from a CSV file, plotting engine displacement against horsepower. Each point represents a vehicle, with color encoding the model year and size encoding vehicle weight. Tooltips reveal the car name when hovering. The chart uses the Vega-Lite API to construct the specification, with D3.js handling data loading via `d3.csv`. The visualization is rendered to SVG and fills the browser window, using a custom configuration to improve readability with larger fonts and adjusted axis styling. The code imports `vega`, `vega-lite`, and `vega-lite-api`, registering them with a tooltip handler to enable interactive data exploration.

Ssmsk2980

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 visualization displays the relationship between engine displacement and horsepower for a collection of automobiles, with each point representing a vehicle and tooltips revealing the car’s name. It is constructed using the Vega-Lite API (vl) within a D3.js (d3.v5) framework, which registers Vega and Vega-Lite for rendering. The data is fetched as CSV from a GitHub gist using d3.csv. The code configures axis styling, disables zero-scaling for both quantitative fields, and uses semi-transparent, filled points for overlap visibility.

DDataFeast_71

v1_Fork of Vega-Lite API Template

This visualization displays automobile data as a scatter plot, mapping engine displacement on the x-axis against horsepower on the y-axis, with points colored by model year and sized according to vehicle weight. The chart uses the Vega-Lite API to declaratively encode these fields, with D3’s CSV loader fetching the auto-mpg dataset from a GitHub gist. Custom axis and label styling in the configuration enhance readability, while tooltips reveal each car’s name. The visualization renders as an interactive SVG, automatically sizing to fill the browser window.

SsunilthkGmail

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a dataset of automobiles, with each point representing a car model. The plot uses a scatterplot with tooltips displaying the car name, rendered as a full-screen SVG. Built using the Vega-Lite API, the code leverages `vega`, `vega-lite`, and `vega-lite-api` libraries while fetching data from a CSV via `d3.csv`. The visualization is configured with custom axis styling and an interactive tooltip handler for enhanced readability.

Aaniosindustries

Fork of Vega-Lite API Template

A scatterplot of automobile data maps engine displacement to horsepower, with points colored by model year. The visualization uses the Vega-Lite API to declaratively encode the fields, while config.js customizes axis and label styling for readability. Data loads asynchronously from a CSV of auto-mpg records via d3.csv. Tooltips display car model names on hover, and the plot omits axis domains while using light gray tick marks against the dark text palette.

KKamilPodsiadlo

Fork of Vega-Lite API Template

This visualization displays the relationship between engine displacement and horsepower for a collection of automobiles, with tooltips revealing the model name for each point. It uses the Vega-Lite API to declaratively define the scatter plot, with D3.js (d3.csv) loading the auto-mpg dataset from a GitHub gist. The code registers Vega, Vega-Lite, and Vega-Tooltip, and renders the chart as SVG, adjusting the view to fit the window size.

GGregS1290

Fork of Vega-Lite API Template

This example visualizes the relationship between car engine displacement and horsepower, with a tooltip revealing the car name for each point on the line chart. It loads the auto-mpg.csv dataset from a GitHub gist using D3’s CSV function. The visualization is built programmatically with the Vega-Lite API, registering Vega and Vega-Lite, and renders as SVG with custom axis and label styling from a config object. The chart fully fits the browser window via autosize settings.

ZzhehaowUNC