Iterating with Vega-Lite API

100%

Iterating with Vega-Lite API

✓ Published0🌍 Public

Last edited Dec 13, 2021

Created on Dec 13, 2021

This visualization displays automotive data as a bar chart, encoding horsepower along the x-axis and origin along the y-axis, with tooltips showing vehicle names. Built using Vega-Lite’s API, it leverages the `vl.markBar` and `vl.encode` methods to define the chart structure. The code loads the auto-mpg dataset via D3’s `csv` function, then renders the visualization with Vega-Lite and Vega, applying custom styling for axes and labels. The chart fills the browser window with bar size and opacity specified for readability.

AI-generated description

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

89% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a bar chart of the auto-mpg dataset, with bars representing origin categories and encoding horsepower on the y-axis, mpg through size, and color by origin. Hovering reveals car names via a tooltip. The code imports data through D3’s CSV loader, registers Vega and Vega-Lite via the vega-lite-api library, and configures axis styling and tooltip handling in the provided config.js and index.js files.

IIlyas Filali

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

88% match

Loading thumbnail…

Vega-Lite API Template - Part 1

This example demonstrates a scatter plot of automotive data, showing the relationship between horsepower and acceleration, with tooltips displaying car names. Built using the Vega-Lite API, it loads the auto-mpg dataset via D3’s `csv` function. The visualization uses `vl.markPoint`, `vl.x().fieldQ`, and `vl.y().fieldQ` to encode quantitative fields, with a custom config adjusting axis and font styles. Rendered through Vega-Lite’s SVG output, it integrates vega-tooltip for interactive hover details.

JJohn Jeevasaeyan

87% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data where each car model is represented as a bar positioned by its miles per gallon (mpg) and year, with color encoding the country of origin and bar size encoding horsepower. The visualization uses the Vega-Lite API to construct the specification, which is then rendered as an SVG by Vega, with data loading handled through d3’s `csv` function. Tooltips are enabled via vega-tooltip, and the chart is configured with custom axis and label styling from the `config.js` file, while the layout auto-fits to the browser window.

Rredeath96

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

87% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automobile performance data from the UCI Machine Learning Repository’s Auto MPG dataset, mapping horsepower against displacement while encoding origin by color and mpg by point size. Built with the Vega-Lite API, the visualization uses `vl.markCircle` and `vl.encode` to define visual channels, with `d3.csv` loading the remote dataset. The chart dynamically fits its container, applies custom axis and label styling via the `config` object, and integrates Vega Tooltip for hover interactions.

DDeaxNG

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

87% match