Skip to main content
SimilarExport ZIP
100%

Iterating Fast with Vega Lite API

✓ Published0🌍 Public
Ssmsk2980
Last edited Apr 25, 2021
Created on Apr 25, 2021

This example visualizes the relationship between computer price, speed, ads, and screen size from an R dataset loaded via d3.csv. It uses the vega-lite-api to programmatically construct a scatter plot with circular marks, encoding price on the x-axis and speed on the y-axis, while color represents ads and size encodes screen. The visualization renders as SVG through Vega and Vega-Lite, with a custom dark theme config for improved readability and interactive tooltips provided by vega-tooltip.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Iterating Fast with Vega Lite API

This example demonstrates an interactive scatterplot of the classic auto-mpg dataset, plotting horsepower against miles per gallon, with color encoding by origin and size by weight. The visualization is built using the Vega-Lite API, a JavaScript wrapper that constructs Vega-Lite specifications programmatically. The code registers the API with vega and vega-lite, configures a custom tooltip via vega-tooltip’s Handler, and loads the CSV data using d3.csv. The plot renders directly into the document body, sized to the browser window, with stylistic adjustments for axis labels and overall readability.

NNikhil Reddy Manda
82% match
Loading thumbnail…

Vega-Lite API Template fast iteration

This example demonstrates rapid iteration with the Vega-Lite API by rendering a scatter plot of automobile data from the UCI Machine Learning Repository. It shows the relationship between highway miles per gallon, engine displacement, model year, and city MPG using circle marks with opacity. The visualization is built programmatically using `vega-lite-api` to construct the specification, then rendered as an SVG via Vega and Vega-Lite, with tooltips handled by `vega-tooltip`. The code uses `d3.csv` to fetch data, applies custom axis and label styling from a config object, and dynamically sizes the chart to fit the window.

DDanny Stephens
82% match
Loading thumbnail…

Iterating fast with Vega-Lite API

This example demonstrates an interactive scatter plot of automotive data, showing how weight, horsepower, and origin relate to fuel efficiency (mpg). The visualization uses the Vega-Lite API to declaratively specify the chart, with circle marks encoding horsepower on the y-axis and weight on the x-axis, while origin determines color and mpg controls size. The code loads data from a CSV via D3’s `csv` function, registers Vega and Vega-Lite with the API, and renders the result as SVG. Custom axis and label styling from a configuration object improves readability.

EElvira Nassirova
81% match
Loading thumbnail…

Iterating Fast with Vega-Lite API

This example demonstrates an interactive scatter plot of automobile data, visualizing fuel economy attributes across different countries of origin. It uses the Vega-Lite API to declaratively encode horsepower, weight, and origin onto circle marks with tooltips. The code chains API methods like `vl.x()`, `vl.y()`, and `vl.color()` to construct the specification, then renders it via Vega and Vega-Lite with a customized dark theme. Data is loaded asynchronously from CSV using d3.csv, sourced from the UCI Machine Learning Repository.

Tthomasjungcoe
81% match
Loading thumbnail…

Dataviz 5 - Iterating fast with Vega Lite API

A scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for various car models, with color encoding country of origin and size encoding weight. Built using the Vega-Lite API with D3.js for data loading, the visualization renders interactively with tooltips showing model names. The code reads from an auto-mpg CSV dataset via d3.csv. The example demonstrates rapid iteration through concise declarative specifications, where the vl.markCircle function encodes all visual channels directly.

RRyAlpha
80% match
Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It maps miles per gallon on the x-axis, horsepower on the y-axis, vehicle origin to color, and weight to point size, with tooltips showing car names. The visualization is built programmatically via `vl.markCircle` and `vl.encode` methods, then rendered as SVG using the Vega and Vega-Lite libraries with a custom config for larger fonts and a dark color scheme. Data is loaded asynchronously using `d3.csv` from a remote gist.

Hhuashe418
79% match
Loading thumbnail…

Vega-Lite Iterations

This example demonstrates an interactive scatter plot of automotive fuel economy data, showing the relationship between cylinder count and origin while revealing individual car names through tooltips. Rendered as a Vega-Lite visualization via the `vega-lite-api`, the chart applies a custom configuration for axis styling and font sizes before resizing to fit the viewport. The data is loaded asynchronously from a CSV using `d3.csv`. The plot uses semi-transparent, oversized marks with opacity encoding to avoid overplotting, and the code registers `vega-tooltip` for hover interactions.

Ssikadali
79% match
Loading thumbnail…

Episode 18 - Iterating Fast with Vega Lite API

This example uses the Vega-Lite API to create an interactive scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization encodes vehicle weight on the x-axis, horsepower on the y-axis, origin as color, and miles per gallon as point size, with tooltips showing car names. Built with `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()`, the chart renders via Vega and Vega-Lite, while d3.csv loads the data. Custom styling in `config.js` and a dark theme improve readability for presentation.

Zzjulijie0618
79% match