Skip to main content
100%

Strip Plot VEGA-lite

✓ Published0🌍 Public
Aaaizemberg
Last edited Sep 10, 2019
Created on Sep 10, 2019

This example shows the distribution of grade point averages for university graduates, with each tick mark representing one student’s promedio plotted along a quantitative x-axis and grouped by degree title on an ordinal y-axis. The visualization is built using Vega-Lite 4.0, embedded via vega-embed 5.1.2, and renders a strip plot with the `mark: "tick"` encoding. Data is loaded from a remote TSV file hosted on GitHub, and the specification is defined in a JavaScript object passed directly to `vegaEmbed`.

AI-generated description

Similar vizzes

Loading thumbnail…

Histograma VEGA-lite

This example displays a histogram of graduation grade averages, showing the distribution of graduate counts across binned "nota" values. The visualization loads tab-separated data from a GitHub-hosted TSV file and renders it as a bar chart using Vega-Lite’s declarative specification, with the x-axis binned and the y-axis aggregated as a count. The code embeds the chart via `vegaEmbed`, relying on Vega 5, Vega-Lite 4, and the `vega-embed` library.

Aaaizemberg
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between study time and exam marks for individual students, using a scatter plot with semi-transparent circular marks. It is built with the Vega-Lite API, a high-level grammar for declarative visualization, which compiles specifications into Vega and renders them as SVG. The code reads student data from a remote CSV file via `d3.csv`, and incorporates a custom `config` object to adjust axis styling and label appearance. Tooltips are enabled through the Vega Tooltip handler, allowing users to inspect exact mark values.

SShivaPriyad
74% 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
73% match
Loading thumbnail…

Vega-Lite API Template

This example renders a scatterplot of individual-level data, plotting age against the number of convictions, using the Vega-Lite API. The visualization is built with the `vega-lite-api` library, which wraps Vega-Lite specifications in JavaScript, and relies on D3’s `csv` loader to fetch data from a GitHub gist. Circle marks are configured with size and opacity, and scales disable zero baselines for both axes. The chart’s appearance is customized through a config object, and the final SVG output is generated with Vega.

Llscholz1
72% 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
72% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses Vega-Lite API to plot a scatterplot of college football team data, mapping four-year average recruiting points on the x-axis and average points per game on the y-axis. Circle size encodes scoring average, and tooltips reveal team names. It loads CSV data from a GitHub gist via d3.csv, configures chart appearance in a separate config object, and renders interactively with vega-tooltip. The Vega-Lite chart is built programmatically through vl.markPoint, vl.x, vl.y, and vl.r encodings, then rendered as SVG.

BBenLeathers
72% match
Loading thumbnail…

Vega-Lite API Template 2

This example visualizes one person’s film-watching records, plotting each movie as a circle positioned by its watch date on the x-axis and its grade on the y-axis, with color encoding the grade value. The circles are semi-transparent and tooltips reveal the film title. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and data is loaded asynchronously from a CSV file via d3.csv. The code customizes axis and label styling through a config object, and the final SVG view is rendered full-screen, fitted to the window dimensions.

KKirsten Lund
72% match
Loading thumbnail…

Vega-Lite API: College Scorecard Outcomes

This visualization plots the relationship between entering students' median household income and their earnings six years after enrolling, with each point representing a college or university. The scatterplot uses a circular mark with 50% opacity, revealing overlapping institutions as darker clusters. It relies on the Vega-Lite API, a declarative grammar built atop Vega and Vega-Lite, with data fetched from a CSV hosted as a GitHub Gist. The code configures axis styling, tooltips, and a fit-based autosize using the d3.csv loader.

JJCarpenter-WPI
72% match