Skip to main content
SimilarExport ZIP
100%

Bowes Vega-Lite API Template

✓ Published0🌍 Public
BBobby Bowes
Last edited Mar 27, 2022
Created on Mar 27, 2022

This example displays a bar chart of student course enrollments and their year-end grades (Y1) from a school grades dataset. The visualization uses the Vega-Lite API to define a bar mark, encoding course titles as the x-axis and an aggregate count of Y1 grades as the y-axis. Data loading relies on D3’s `csv` function, while the chart is rendered with Vega and Vega-Lite in a browser. The tooltip handler and configuration object customize the visual appearance and interactivity.

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 example uses the Vega-Lite API to render a bar chart of student performance data, showing chapters on the x-axis and total scores on the y-axis, with bars colored by difficulty level and tooltips revealing the total score. The underlying data is a small set of chapter names, percentages, scores, levels, and elapsed times. The visualization is built with the `vega-lite-api` library, which generates a Vega-Lite specification that is rendered by the Vega engine. The code registers both Vega and Vega-Lite, applies custom configuration for axis styling, and uses the d3 `csv` function to fetch data from a remote URL, though the live render uses hardcoded data instead.

JJeyasuriya M
79% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of student data, plotting marks against time spent studying, with color and size encoding the number of courses and an integer attribute, respectively. The tooltip reveals each student’s name. Built with Vega-Lite API and D3, it loads CSV data from the UCI Auto MPG dataset, renders an SVG via Vega, and customizes axes and label styling through a config object.

NNaimisha-M
75% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays student performance data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting exam marks against study time as circles colored by number of courses and sized by an integer attribute. Built with the Vega-Lite API and D3 v5, it renders an interactive scatter plot with tooltips showing student names. The code uses `vl.markCircle`, `vl.x().fieldQ`, and `vl.y().fieldQ` to encode variables, while fetching data via `d3.csv`. The chart fills the browser window and employs a custom config for improved label readability.

NNaimisha-M
74% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example from the Vega-Lite API template displays a bar chart showing the count of records per business unit, colored by work class and positioned along a temporal axis derived from date-of-birth data. The visualization is built using the Vega-Lite API (vl) with D3.js v5 for data loading via the `csv` function from a GitHub Gist. It uses vega-lite-api’s declarative encoding to map fields to x, y, color, and tooltip, then renders to SVG with a tooltip handler and custom axis styling from a config object.

Mmarkbayley
74% match
Loading thumbnail…

Vega-Lite API Template

A bar chart displays the number of convictions for each age group, sorted in descending order by age. The visualization is built using the Vega-Lite API library, which programmatically constructs the chart specification via `vl.markBar()`, `vl.x()`, and `vl.y()`. Data is loaded asynchronously from a CSV URL using `d3.csv`. The chart renders with Vega-Lite's SVG renderer, and hovering triggers a tooltip via the `vega-tooltip` handler. Appearance is customized through a shared config object that removes axis domains and adjusts tick colors, label sizes, and dark text styling.

Llscholz1
74% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a bar chart of presidential election totals by candidate, with bars sorted in descending order and tooltips showing the total votes for each candidate. The visualization uses the Vega-Lite API to declaratively define the chart specification, while D3’s `csv` loader fetches the dataset from a Gist, and the UCI Auto MPG data source is referenced. The code registers Vega and Vega-Lite libraries, applies a custom configuration for axis and label styling, and renders the output as a full-screen, responsive SVG using the `vega-lite-api` `render()` method.

GGonzalo Alarcón Usui
74% match
Loading thumbnail…

Vega-Lite API Template

This example renders an interactive bar chart of population by country for 2015, using data from a Gist CSV file. It visualizes the rank-ordered values with a dark theme and custom axis styling. The visualization is built with the Vega-Lite API, which composes specifications programmatically in JavaScript, integrated with Vega and Vega-Lite libraries. It also uses D3’s `csv` loader for data ingestion, and Vega Tooltip for hover interactions, with the chart fitted to the full viewport.

TTengHoo3
73% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bar chart of salary by country, with bars colored according to a categorical "Purchased" field. Built with the Vega-Lite API, it registers the vega, vega-lite, and vega-tooltip libraries, then fetches CSV data via `d3.csv` and renders the visualization into the full browser window. The chart uses bar mark sizing, field encodings for x, y, color, and tooltip, and applies a custom configuration for axis styles and typography.

Mmail.lohade@gmail.com
73% match