auto_rus of Vega-Lite API Template

100%

auto_rus of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 29, 2021

Created on Mar 29, 2021

This visualization displays Russian auto sales data by year, plotting the year on the x-axis and sales quantity on the y-axis as circular marks. The circles are colored by quantity and include tooltips showing brand names. It uses the Vega-Lite API with D3.js (`d3.csv`) to load data from a Gist, then renders the chart via Vega-Lite’s API, configured with custom axis styles and a dark theme for readability.

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…

Vega-Lite API Template

This visualization displays automobile data from the auto-mpg dataset, plotting the origin of each vehicle against its horsepower as circles. The chart uses the Vega-Lite API within a D3.js framework, leveraging `vl.markCircle()` for the points and `vl.x().fieldN()` and `vl.y().fieldQ()` for the categorical and quantitative encodings. Data is loaded via `d3.csv`, and the rendering pipeline combines Vega, Vega-Lite, and Vega-Tooltip to provide interactive tooltips with vehicle names. A custom configuration adjusts axis styling and font sizes for improved readability.

MMonish Vassantrai

80% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays automobile data from a CSV file, plotting horsepower against origin with points colored by year and labeled by name. It demonstrates the vega-lite-api library, which programmatically constructs Vega-Lite specifications using JavaScript method chaining. The code registers Vega, Vega-Lite, and the API with vega-tooltip, then renders an interactive SVG chart that adapts to the window size. Custom axis and label styles in config.js improve readability against a dark theme.

NNadir-Zenith

79% match

Loading thumbnail…

Vega-Lite API Template

This visualization uses the Vega-Lite API to plot automobile data from the auto-mpg CSV dataset, showing the relationship between weight, horsepower, fuel efficiency (mpg), and car model name. Circles are sized by mpg and colored by weight, with tooltips displaying the model name. The code registers Vega, Vega-Lite, and the Vega-Lite API, fetches data via d3.csv, and renders an SVG view that fits the window dimensions with customized axis and label styling.

Mmkt-ds

78% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting origin on the x-axis, horsepower on the y-axis, and encoding mpg as circle size with tooltips showing car names. Built with the Vega-Lite API, it registers vega, vega-lite, and vega-tooltip in index.js, loads CSV data via d3.csv, and renders an interactive SVG chart configured with custom axis and label styling from config.js. The visualization updates dynamically to fit the browser window.

JJohn Lewis

78% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automotive data from an auto-mpg CSV dataset, plotting engine weight against horsepower with circles colored by origin and sized by miles per gallon. The code constructs the visualization using the Vega-Lite API, registering it with vega and vega-lite, and rendering as SVG via d3.dsv. A custom configuration adjusts axis labels and tick styling for readability, while d3.csv loads the remote dataset. Tooltips display car model names on hover using vega-tooltip.

PPUUDI

78% match

Loading thumbnail…

Vega-Lite API Template

This example presents a scatter plot of auto-mpg data from the UCI Machine Learning Repository, visualizing vehicle attributes across model years. Each circle’s position encodes the year and horsepower, while its color differentiates the region of origin and its size reflects vehicle weight, with tooltips revealing model names. The visualization is built using the Vega-Lite API, where `vl.x()`, `vl.y()`, `vl.color()`, and `vl.size()` are chained to define encodings. Data is loaded asynchronously via `d3.csv`, and the rendered SVG view is configured with custom axis styling and a tooltip handler from `vega-tooltip`.

JJoe Hutchins

78% match

Loading thumbnail…

Vega-Lite API Template

This example presents a scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing relationships between miles per gallon, horsepower, weight, and country of origin. The visualization is built using the Vega-Lite API (`vl.markCircle`, `vl.encode`) in a JavaScript framework, with data loading handled by `d3.csv` from D3 v7. The code registers Vega-Lite and Vega, applies custom axis styling from `config.js`, and renders a responsive SVG chart that fills the browser window with tooltips enabled via the Vega Tooltip handler.

OOleg Zhernovoy

78% match

Loading thumbnail…

Vega-Lite API Template

A scatter plot displays automobile origin, horsepower, and weight, with each point sized and colored by weight and tooltips revealing model names. The visualization uses the Vega-Lite API (`vl.markCircle`, `vl.x().fieldN`, `vl.y().fieldQ`) to construct a declarative spec, rendered as SVG via Vega-Lite and Vega. Data loads from a CSV of the Auto MPG dataset, and a custom config adjusts axis styling and font sizes. The example demonstrates programmatic chart building, programmatic width/height fitting, and tooltip integration via the `vega-tooltip` Handler.

Mmiklud

78% match