Skip to main content
SimilarExport ZIP
100%

Forbes Best Colleges Scatter Plot With Menus

✓ Published1🌍 Public
MMartin Blatz
Last edited Oct 25, 2020
Created on Oct 11, 2020

A scatter plot maps Forbes’ 2019 Best Colleges data, plotting schools by two user-selectable attributes chosen from dropdown menus for the X and Y axes. The visualization emphasizes correlations between rank, alumni salary, net price, student population, and total annual cost. Built with React and D3 v5, it uses `scaleLinear`, `extent`, and `csv` to parse and scale the data, rendering SVG circles with tooltips via the `Marks` component. Color differentiates private and public institutions.

AI-generated description

A program that loads and parses some CSV data from the Forbes Best Colleges of 2019 list.

Forked from the class Polished Scatter Plot with Menus viz and adapted for the data set I used in an earlier assignment.

The visualization shows the distribution of colleges plotted by two of several available variables the user can select from the X and Y menus. Color indicates the university is either private or public.

The top ranked schools clearly provide an edge to graduates in the job market as indicated by Rank vs Alumni Salary. There is also a visible correlation between rank and annual cost.

MIT Licensed

Similar vizzes

Loading thumbnail…

Best Colleges: Cost vs Salary

This scatterplot displays colleges from the Forbes Best Colleges of 2019 list, plotting net price on the x-axis against alumni salary on the y-axis. Each dot represents a school, with color distinguishing public from private institutions, revealing that private schools cost more but show no clear salary advantage. The visualization is built using Vega-Lite, d3.csv for data loading, and rendered as an SVG via the vega-lite-api, with custom configuration for axis styling and tooltips.

MMartin Blatz
82% match
Loading thumbnail…

Best College: Rank vs Salary

This visualization plots colleges by their Forbes 2019 rank along the x-axis and alumni salary on the y-axis, with color distinguishing public from private institutions. It reveals that top-ranked schools offer higher graduate salaries, with the slope leveling off after the first 50 ranks. The chart is built using Vega-Lite API and D3.js, reading CSV data directly from a GitHub gist. Circles are rendered with a fixed size and slight opacity, while axes are customized through a shared config object to improve readability.

MMartin Blatz
81% match
Loading thumbnail…

College Polished Scatter Plot with Menus

A scatter plot displays the relationship between two selectable attributes from the College Dataset, with ten numeric fields such as acceptance rates and enrollment counts. Two React dropdown menus let the user independently choose which attributes appear on the x- and y-axes, which are generated with d3.scaleLinear and rendered as SVG. The plot uses React components (AxisBottom, AxisLeft, Marks) and d3.csv to load data, with circle marks showing each college’s values and formatted tick labels.

Yyinhao0424
80% match
Loading thumbnail…

Polished Scatter Plot with Menus: College Scorecard Data

This interactive scatter plot visualizes relationships among variables from the College Scorecard dataset, focusing on institutional characteristics like average SAT scores and net price for public universities. The visualization uses React with D3.js scales and axes to render SVG circles, with each point representing a college. Users can dynamically select which attributes to plot on the x- and y-axes through dropdown menus. The D3 data loading via `d3.csv` parses the remote CSV file, while the `d3.scaleLinear` API handles continuous axis scaling.

JJCarpenter-WPI
78% match
Loading thumbnail…

Interactive Color Legend with Menus

This interactive scatter plot explores the College Dataset, showing relationships between academic metrics like enrollment, admissions, and faculty qualifications. Users dynamically select which attributes appear on the x and y axes using React dropdown menus, while the color legend distinguishes public versus private institutions. Built with React and D3 v5, the visualization uses `scaleLinear` and `scaleOrdinal` for positioning and coloring, rendering as SVG. Hovering over legend items filters the displayed points and fades non-matching data, providing an interactive way to compare institutional characteristics.

AAlaouiadnane
76% match
Loading thumbnail…

Interactive Color Legend with Menus

This interactive scatter plot explores the relationship between two user-selected attributes from the College Dataset, showing each institution as a circle colored by its public or private status. Two dropdown menus, built with ReactDropdown, control which numeric columns (such as Enroll, PhD, or Outstate) appear on the x and y axes. A custom color legend, implemented as an SVG component, highlights points of one category on hover while fading the others, using d3.scaleOrdinal for color mapping and d3.scaleLinear for axis scales. All marks and axes render as React components with d3 scales, with data loaded asynchronously via d3.csv.

AAlaouiadnane
76% match
Loading thumbnail…

Best Colleges: Rank vs Cost

This example plots 650 colleges from the Forbes Best Colleges 2019 list, with rank on the x-axis and net price on the y-axis, using a circle mark colored by public or private status. It shows that while public schools tend to cost less, there is no strong correlation between rank and price. The visualization is built with the Vega-Lite API, which registers vega and vega-lite, and loads CSV data via d3.csv. Axis labels and titles are customized through a config object, and tooltips display the college name.

MMartin Blatz
76% match
Loading thumbnail…

Scatter Plot Data Viz Final

This scatter plot compares starting median salary against mid-career median salary for various colleges, with each dot colored by school type (e.g., public, private). It uses D3 v7 with SVG rendering, implementing linear scales for both axes, an ordinal color scale, and a legend mapping school types to colors. Interactive tooltips appear on hover, showing the school name, both salaries, and school type. Data comes from a CSV file loaded via `d3.csv`, and the visualization includes labeled axes and a title.

SShazil Taqi
76% match