Skip to main content
SimilarExport ZIP
100%

Basic Scatter Plot Showing College Acceptance Data

✓ Published1🌍 Public
EEmily Hudson
Last edited Sep 10, 2025
Created on Sep 10, 2025

This example shows the relationship between IQ scores and cumulative GPA for students at one college, filtered from a Kaggle dataset. Each black dot represents a student plotted by IQ on the x-axis and CGPA on the y-axis. The React app loads the data with `d3.csv`, filters by `College_ID`, and renders the SVG circles using D3's `scaleLinear`, `extent`, and `select` APIs. The viz module computes scales and draws the scatter plot with `attr` assignments for position, radius, and opacity.

AI-generated description

College Data Visualization

This project visualizes student data from one college using React and D3.js. Students are plotted based on their IQ scores (x-axis) and CGPA (y-axis). If I continue with this data set, I would need to chose a subset of the colleges in the data set.

Link to the data set: https://www.kaggle.com/datasets/sahilislam007/college-student-placement-factors-dataset

original description: college id -- unique id of the college (quantitative variable)

  • IQ -- knowledge measured by IQ score of an individual student (quantitative variable)
  • prev sem result -- GPA from the previous semester of an individual student (quantitative variable)
  • CGPA -- cumulative GPA (quantitative variable)
  • academic performance -- rating of academic performance (ordinal variable)
  • internship experience -- yes or no indicating if the individual has had an internship in the past (categorical variable)
  • extra curricular score -- score given to an individual based on their level of involvement in activities outside of school (ordinal variable)
  • communication skills -- score given to an individual rating their soft skills (ordinal variable)
  • projects completed -- number of academic or technical projects completed by an individual (quantitative variable)
  • placement -- yes or no indicating acceptance
MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Color Legend on Graduate Admission dataset

A scatter plot visualizes graduate admissions by plotting GRE Score against CGPA, with university rating encoded as color through an ordinal scale. Built with React and D3 v5, the visualization renders SVG circles and includes an interactive color legend where hovering over a rating value fades non-matching points, using React's useState for hover state management. The axes use d3.scaleLinear with custom tick formatting via d3.format, and data loads from a CSV file using d3.csv.

ZZG
77% match
Loading thumbnail…

Scatter Plot with Menus on Graduate Admission Dataset

This interactive scatter plot explores the Graduate Admission dataset, allowing users to compare any two attributes by selecting them from dropdown menus for the X and Y axes. The plot displays each admission record as a circle, with a tooltip showing the X-axis value. React manages the interactive state, while D3 v5 handles the linear scales and SVG rendering. The visualization is built with a React component structure, using D3's `scaleLinear` for axis scaling and `csv` for data loading.

ZZG
76% 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
75% 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
75% match
Loading thumbnail…

Graduate Admission

This scatter plot examines graduate school admission factors, plotting CGPA against GRE Score for individual applicants. Point color encodes University Rating, while point size reflects Research output, revealing potential correlations between academic metrics and university prestige. The visualization is built using the Vega-Lite API, with data fetched from a GitHub-hosted CSV via d3.csv. Custom configuration in config.js adjusts axis styling and tooltip fonts, and the chart auto-fits to the browser window dimensions.

ZZG
74% match
Loading thumbnail…

Data Visualization Assignment 3

This interactive scatterplot explores relationships between attributes of college majors, such as total graduates, gender distribution, employment numbers, and median salary. Users select the X and Y axes from dropdown menus or swap them, and hovering over the categorical color legend highlights a specific major category. Built with React and D3 v6, the visualization renders SVG circles positioned by linear scales, with a color legend encoding major categories. Data is loaded from a FiveThirtyEight CSV, which is processed with D3's `csv` function.

HHowardHan99
72% match
Loading thumbnail…

Basic Scatter Plot with React & D3

This example presents a basic scatter plot that visualizes the Iris dataset, which users load as a CSV file through a file input. The React application parses the data and, using D3's `select` and `join` API, renders circles within an SVG element. The `viz.js` module configures linear scales via `scaleLinear` and `extent` to map sepal length and width values to the plot's dimensions, styling each point with a fixed radius and fill color. The chart updates whenever a new file is selected.

BBismark Kofi Owusu Sarfo
72% match
Loading thumbnail…

Scatter Plot Showing Women's Volleyball Data

This scatter plot displays the relationship between the number of completed projects and academic performance for students in a dataset of college records, with each circle representing an individual student. The visualization uses D3 v7's `scaleLinear` and `extent` functions to map the data to SVG coordinates, with `d3.select` and `.join` handling circle rendering. The React-based application loads the data from a CSV file via D3's `csv` parser, processes it in a data processor module, and renders through a reusable Chart component with fixed dimensions.

EEmily Hudson
72% match