Skip to main content
SimilarExport ZIP
100%

Vega-Lite API: College Scorecard Outcomes

✓ Published0🌍 Public
JJCarpenter-WPI
Last edited Sep 18, 2019
Created on Sep 12, 2019

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.

AI-generated description

A visualization constructed using the vega-lite-api. This visualization uses College Scorecard Data to show the relationship between students' median household income and earnings six years after entry to an institution. The dataset comes from the College Scorecard Outcomes Select Variables dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API: College Scorecard Price

This visualization shows the relationship between average SAT scores and the net price of public institutions using College Scorecard data. A circular mark plots each institution, with hover tooltips revealing the institution name. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses D3’s `csv` method to load the dataset. The chart is configured with custom axis styling in `config.js` and automatically fits to the full window size.

JJCarpenter-WPI
84% 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
76% 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
76% match
Loading thumbnail…

Vega-Lite API Template

A scatter plot visualizes modern mathematicians, statisticians, computer scientists, engineers, inventors, biologists, and physicists born after 1950 across seven countries, mapping historical prominence index (hpi) and lifespan (l) on the axes. Each point’s color and fill encode occupation, shape indicates birth country, and size reflects non-English page views. The example uses the Vega-Lite API to construct the specification programmatically, with D3’s `csv` loading data from the Pantheon.world dataset, and renders through Vega with tooltip support.

Ssriramvsharma
74% match
Loading thumbnail…

Vega-Lite API Template

This visualization shows the relationship between commuting flow and margin of error across work counties, using a scatter plot with logarithmic scales on both axes. Circle size encodes commuting flow, with tooltips revealing work county names. Built with the Vega-Lite API, it registers vega and vega-lite libraries, loads data via d3.csv from a GitHub gist, and applies custom axis and label styling. The chart renders as SVG with automatic fitting to the viewport, enhanced by the vega-tooltip handler for interactive data inspection.

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

Vega-Lite API Template

This visualization displays a scatter plot of vehicle fuel efficiency data from the UCI Auto MPG dataset, with horsepower on the y-axis, miles per gallon on the x-axis, and points colored by origin while sized by weight. It is built using the Vega-Lite API, which programmatically constructs Vega-Lite specifications, and renders through the Vega and Vega-Lite libraries. The code loads CSV data with d3.csv, applies custom axis and label styling from a config object, and renders an interactive SVG view with tooltips via vega-tooltip.

GGenpinZ
74% match
Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and horsepower while encoding car origin by color and weight by circle size. Hovering reveals the vehicle name via tooltips. Built with the Vega-Lite API, the visualization chains declarative specifications programmatically, registering Vega-Lite and Vega with the vega-lite-api library. The code customizes axis styling through a shared config object, loads data via d3.csv, and renders to an SVG using Vega’s renderer with automatic window sizing.

GGang Chen
74% match