Skip to main content
100%

from colab altair to vega-lite - w50 - makeovermonday

✓ Published0🌍 Public
Aaaizemberg
Last edited Dec 16, 2019
Created on Dec 16, 2019

A scatterplot displays fast-food chains by total sales against number of locations, with circle size encoding average sales per store and color distinguishing chains. The visualization uses Vega-Lite embedded via vega-embed, built from an inline dataset of 30 chains. Interactive panning and zooming are enabled through an interval selection bound to the scales, and tooltips reveal rank, chain, sales, locations, and average sales per store. The chart originates from a Makeover Monday exercise, adapted from a Colab Altair notebook.

AI-generated description

Similar vizzes

Loading thumbnail…

makeovermonday - w50

This scatterplot, titled "Fast Food Nation," visualizes sales and location data for major fast-food chains. It shows each chain’s total sales plotted against its number of locations, with point size representing sales per location (vpl), revealing how chains like Chick-fil-A achieve high revenue with relatively few stores compared to Subway’s many outlets. The visualization uses Vega-Lite with a point mark, encoding the quantitative fields loc and sales on the x- and y-axes, and vpl for size. Data is loaded from a CSV via a data.world URL, and the chart is rendered using vegaEmbed.

Aaaizemberg
85% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of global food consumption data from the UCI Machine Learning Repository’s Auto MPG dataset, sourced via a Gist. The visualization encodes Animal Products and Recovered values as x- and y-position, with color by country and point size by weight. It applies a custom dark-colored axis and label configuration, and uses Vega-Lite’s `markCircle`, `encode` with `fieldQ`, and `scale` methods, all rendered through Vega’s SVG view with tooltips from Vega-Tooltip.

Bblueyjuice
69% match
Loading thumbnail…

Vega-Lite API Template 5

This example presents two scatter plots of the Auto MPG dataset, visualizing relationships between different cellular attributes. The main chart maps Mitosis against Bland Chromatin, while a smaller navigation chart shows Bare Nuclei versus Uniformity of Cell Shape, both colored by class. The visualization uses the vega-lite-api to construct the plots, d3 to load the CSV data, and vega-tooltip for interactive tooltips. The plots are rendered using Vega's SVG renderer with a custom configuration for improved readability.

OOleJRask
69% match
Loading thumbnail…

Vega-Lite API Template 8

This visualization displays two scatter plots of Auto MPG data from the UCI Machine Learning Repository. The main chart plots two quantitative fields against each other, colored by vehicle class, while a smaller repeater panel shows multiple combinations of the same fields. Built with the Vega-Lite API, it uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode variables, with D3’s `csv` loader for data parsing. The code configures custom axes, tooltips via vega-tooltip, and responsive sizing that adapts to the window dimensions.

OOleJRask
68% match
Loading thumbnail…

Vega-Lite API Template

This example renders a scatter plot of daily weight measurements using the Vega-Lite API, with points sized uniformly and the y-axis scaled from zero for clearer trends. The visualization pulls data from a CSV file hosted as a Gist, originally sourced from the UCI Auto MPG dataset. Built with the vega-lite-api template, it uses d3.csv for data loading, Vega-Lite’s markCircle encoding for points, and Vega-Tooltip for interactive hover details. The display is configured via a custom config object that adjusts font sizes and axis styles, while the chart auto-fits to the window dimensions.

MMamveguh
68% match
Loading thumbnail…

Vega-Lite Iteration

This visualization displays a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, mapping miles per gallon against horsepower while encoding vehicle origin by color and weight by point size. Built using the Vega-Lite API, it registers handlers through `vega`, `vega-lite`, and `vega-tooltip` to render interactive SVG graphics with hover tooltips. The code loads CSV data with `d3.csv`, applies a custom configuration for axis styling, and dynamically sizes the chart to fit the window dimensions.

CChris Briggs
68% match
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
68% match
Loading thumbnail…

Viz with Vega

This example uses the Vega-Lite API to render a scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. It maps miles per gallon on the x-axis, horsepower on the y-axis, color to country of origin, and size to vehicle weight, with tooltips showing model names. The visualization is built programmatically via `vl.markCircle`, `vl.x().fieldQ()`, and related encodings, then rendered with Vega-Lite’s API and a custom `config` for styling. Data loading relies on d3’s `csv` function, while the final output uses Vega’s SVG renderer with an interactive tooltip handler.

SStarkerRegen
67% match