Dataviz 5 - Iterating fast with Vega Lite API

100%

Dataviz 5 - Iterating fast with Vega Lite API

✓ Published0🌍 Public

Last edited Nov 20, 2021

Created on Nov 20, 2021

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.

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 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

91% match

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

91% match

Loading thumbnail…

Dataviz 2020_Ep18 - 11. Vega Lite API template

This example demonstrates a scatter plot visualization of auto-mpg data, showing relationships between vehicle weight, horsepower, and miles per gallon. The visualization uses colored circles sized by mpg values, with tooltips displaying car model names. It is built using the Vega Lite API, which registers with d3.v6 for data loading, and renders as SVG. The code retrieves data from a CSV file and applies custom configuration for axis styling and typography.

MMinwoo Pak

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, and weight for various car models, with the country of origin represented by color. Built using the Vega-Lite API, it loads data from the UCI Auto MPG dataset and renders circles with a fixed size and opacity. The visualization leverages `vl.markCircle` and `vl.encode` for encoding, while `window.innerWidth` and `window.innerHeight` determine the canvas size. The code uses `d3.csv` for data ingestion and a custom `config` for axis styling, with tooltips handled via vega-tooltip. The visualization is generated dynamically and appended to the document body.

HHgeginat

89% match

Loading thumbnail…

Vega-Lite API Template

This example shows a scatter plot of automotive data, mapping engine horsepower against fuel efficiency (mpg), with points colored by country of origin and tooltips revealing car model names. It uses the Vega-Lite API to declaratively construct the visualization, while D3’s `csv` method loads the auto-mpg dataset. The vega-lite-api library registers vega and vega-lite, and the chart is rendered into an SVG via a vega view with tooltip support from vega-tooltip. The code customizes axis styles and appearance through a config object.

CCurran Kelleher

89% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, visualizing relationships between fuel efficiency (mpg), engine power (horsepower), vehicle origin, and weight using five visual channels. Constructed with the Vega-Lite API and D3.js, it loads CSV data from a gist and renders an interactive plot through Vega’s SVG renderer. The code uses `vl.markCircle` and `vl.x().fieldQ` to map quantitative fields, with tooltips enabled via `vega-tooltip`. Styling configurations adjust axis tick colors and label fonts for readability.

RReinaFeng

89% 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

89% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates how to build an interactive scatter plot using the Vega-Lite API wrapper for D3.js, visualizing the relationship between miles per gallon and horsepower for various car models. The visualization encodes fuel efficiency on the x-axis, engine power on the y-axis, country of origin as color, and vehicle weight as point size, with a tooltip showing the car name. It loads automobile dataset from a CSV file using D3’s `csv` function and renders the chart via the `vega-lite-api` library, which converts the specification into Vega for display. The custom styling comes from a `config` object that adjusts axis and label fonts.

SSushan Prajapati

89% match