Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
JJaswitha09
Last edited Nov 29, 2021
Created on Nov 28, 2021

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.

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 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
84% 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
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a scatter plot to explore the relationship between engine displacement and horsepower in a dataset of automobiles, with tooltips revealing the model name of each point. Built with the Vega-Lite API and Vega-Lite 4.0, it renders points as semi-transparent circles with a custom dark theme and large axis labels. The code loads data from a CSV file via D3’s `csv` method, configures the chart through Vega-Lite’s JavaScript API, and uses Vega Tooltip for interactive hover details.

JJaswitha09
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays individual cars as points in a scatter plot, mapping engine displacement on the x-axis against horsepower on the y-axis. The data comes from a CSV file, auto-mpg.csv, loaded via d3.csv. Built using the Vega-Lite API, the chart registers Vega, Vega-Lite, and Vega-Tooltip in index.js, then renders points with low opacity to reveal density. The visualization loads external scripts for Vega, Vega-Lite, the API wrapper, tooltip, and D3, and applies a custom config for axis styling and font sizes.

AAdriana Rodriguez Sanabria
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatterplot of automobile data from a CSV file. The visualization encodes origin as the x-axis, horsepower as the y-axis, weight as color, and mpg as point size, with tooltips showing car names. It applies custom axis and label styling via the Vega-Lite config, and uses the vega-tooltip handler for interactive hover details. The chart is rendered as an SVG that fits the full window using the vega-lite-api’s `render()` method.

Llatifiss
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping miles per gallon and horsepower with point size reflecting mpg and color indicating origin. The visualization uses the Vega-Lite API to declare the chart specification, with D3.js loading the CSV dataset from a GitHub gist. Rendering is handled by Vega and Vega-Lite, while Vega Tooltip provides interactive hover details. The chart fills the viewport, and custom axis, label, and title styling improve readability against the dark text on a light background.

MMalcolm Mead
83% 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 Vega-Lite API Template

This example visualizes weekly temperature readings for multiple locations, plotting each measurement as a point in a scatterplot with time on the x-axis and temperature on the y-axis. Hovering over a point reveals the location name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to produce an SVG rendering. Data is loaded asynchronously from a CSV file using D3’s `csv` function, and the chart is configured to fit the full browser window with custom axis styling.

FFonda Irena Santoso
82% match