Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 19, 2021

Created on May 19, 2021

This scatter plot visualizes the relationship between microwave and office lighting power consumption, using a semi-transparent line mark to reveal density patterns in the data. The visualization is built with the Vega-Lite API, which translates specifications into Vega and renders as SVG. Data is loaded asynchronously from a CSV file using `d3.csv`, with the plot dimensions automatically fitting the browser window. Visual styling for axes and labels is customized through a separate configuration object, and interactive tooltips are enabled via the vega-tooltip handler.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between DenOutlets, DenOutdoorLights, and KitchenDenLights in kilowatts, using a scatter plot where each point’s color encodes the third variable. Built with the Vega-Lite API on top of D3 v5, it loads CSV data from a GitHub Gist and renders an interactive SVG chart with tooltips. The code uses `vl.markCircle`, `vl.x().fieldQ()`, `vl.y().fieldQ()`, and `vl.color().fieldQ()` to encode fields, while `vega-tooltip` provides hover details. The visualization auto-fits to the window size with a custom config for axis styling and readability.

Hhasti khajeh

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of Auto MPG data, showing relationships between vehicle attributes through a dense cluster of points. It uses the Vega-Lite API to construct the chart, with D3.js handling data loading via `d3.csv`. The visualization features tooltips that display RGB hex values when hovering over points. The chart is rendered dynamically, adapting its size to the browser window using the `vl.width()` and `vl.height()` methods from the vega-lite-api library, and includes custom styling from the config file for improved readability.

TtrwMK

83% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of data from the UCI Auto MPG dataset, plotting intensity against end year and coloring points by pestle, with tooltips showing sector information. Built with the Vega-Lite API, it uses d3’s `csv` function to load remote data, `vl.markCircle` for the marks, and encodes x, y, color, and tooltip channels. The code registers Vega-Lite with a custom config to adjust axis styling and label fonts, and renders the chart as an SVG fitted to the window size.

KKIRRAN P L

83% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates an interactive scatterplot visualization built with the Vega-Lite API, plotting work class and gender attributes from a CSV dataset loaded via d3.csv. The points are rendered with low opacity and large size to show density distributions, with tooltips displaying gender values on hover. The code registers Vega-Lite with the vega and vegaLite libraries, configures an SVG renderer with custom axis styling, and uses the vega-tooltip Handler for interactive feedback. The visualization fills the window and adapts its dimensions dynamically.

Mmarkbayley

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of auto-mpg data, plotting engine displacement against horsepower for individual car models. Each point is semi-transparent to reveal overlapping density, and tooltips display the vehicle name on hover. The code loads CSV data via D3’s `csv` method, customizes axis and label styling through a Vega-Lite config object, and leverages the `vega-tooltip` Handler for interactive feedback.

Mmmohatra

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between square footage and price, with each point representing a property and tooltips revealing the property type. Built using the Vega-Lite API, it loads CSV data from a GitHub gist and renders an interactive scatterplot. The code registers Vega and Vega-Lite, then configures the visualization with custom axis styling, a point mark with size and opacity settings, and a tooltip handler for interactivity.

JJaswitha09

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to create an interactive scatter plot of auto-mpg data, displaying vehicle weight against horsepower as colored and sized circles. The plot encodes weight on the x-axis and color scale, with mpg controlling circle size and opacity for readability. The code loads data from a CSV using d3.csv, then renders the chart as SVG via Vega-Lite’s API in index.js. A custom config adjusts axis styles and removes domain lines, while tooltips reveal car model names on hover.

MMark Zwart

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of auto-mpg data with vehicle origin mapped to color, weight to point size, and tooltips revealing model names. It uses the vega-lite-api to compose marks and encodings, with a custom config for axis styling. Data loads via d3.csv from the UCI Machine Learning Repository, while vega-tooltip handles interactions. Rendering focuses on full-window SVG output.

SShijiaYan

81% match