Skip to main content
SimilarExport ZIP
100%

College Student Performance and Placement Data Loading

✓ Published0🌍 Public
EEmily Hudson
Last edited Sep 4, 2025
Created on Sep 3, 2025
Forked from Loading Data

This example loads a CSV dataset of college student performance and placement factors and displays the raw parsed data as JSON in a `<pre>` element. The visualization initially shows a loading state before fetching `data.csv` via the Fetch API, then parses it with `d3.csvParse`. The chart itself is minimal, with D3 v7 used to bind data and update the DOM via `select` and `join`. The data includes variables such as IQ, CGPA, internship experience, and placement outcome.

AI-generated description

This data set cotains acadedmic and professional information from over 10,000 students and their acceptance to a college.

Here is the link to the Kaggle Dataset: https://www.kaggle.com/datasets/sahilislam007/college-student-placement-factors-dataset

  • 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 if the individual was placed at that school (categorical variable)
MIT Licensed

Similar vizzes

Loading thumbnail…

Loading Data

This example demonstrates how to load and parse a CSV file in D3.js, displaying the raw parsed data as a stringified JSON object in a `<pre>` element. The visualization uses a state management pattern with a `setState` function to handle asynchronous data loading, initially showing a "LOADING" placeholder. It fetches `data.csv`, parses it with `d3.csvParse`, and converts numeric columns to numbers before updating the display. The Iris flower dataset is used as the data source, with the rendering approach being a simple text-based output rather than a graphical chart.

IIshaChid76
79% match
Loading thumbnail…

Loading and Parsing CSV Data: College Scorecard Data

This example demonstrates loading and parsing a CSV file from the College Scorecard dataset, displaying the file size in kilobytes, the number of rows, and the number of columns as large text. It uses the D3.js library (v5) and its `d3.csv` method to fetch and parse the remote CSV data asynchronously. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, as well as a pyramid-of-doom nested fetch approach. The data is sourced from a GitHub-hosted CSV of selected Department of Education variables.

JJCarpenter-WPI
78% match
Loading thumbnail…

Loading Data

This example demonstrates how to load and parse a CSV file in D3.js, displaying the Iris dataset as formatted JSON text in a `<pre>` element. The visualization initially shows a "LOADING" state, then fetches `data.csv` via the Fetch API and parses it using `d3.csvParse`. The code explicitly converts string measurements into numbers for all four numeric columns. State management is handled through a simple `setState` pattern, where the `viz` function checks whether data is loaded, triggers the asynchronous fetch, and re-renders once the parsed array of objects is available.

CCurran Kelleher
78% match
Loading thumbnail…

D3 data loading

This example demonstrates asynchronous data loading in D3 by fetching a CSV file of iris flower measurements (`data.csv`) and displaying the parsed content as a JSON string inside a `<pre>` element. While the request is pending, the text shows “LOADING” before replacing it with the data. Using `d3.csvParse` alongside the `fetch` API, the code converts text into an array of objects, then coerces numeric fields such as `sepal_length` and `petal_width` into numbers with the unary plus operator. The visualization relies on D3 v7 selections with `.join()` to update the DOM, while `index.js` manages a simple state pattern.

SSubhendu Karmakar
77% match
Loading thumbnail…

Loading and Parsing CSV Data: College Scorecard Outcomes Data

This example demonstrates loading and parsing a CSV file from the College Scorecard Outcomes dataset. It displays the raw data size in kilobytes, the number of rows, and the number of columns as large text on a blank page. The code uses the `d3.csv` method with a promise callback to fetch and parse the remote CSV, then reports the results via `d3.csvFormat` to calculate the file size. An alternative commented-out approach uses `fetch`, `async`/`await`, and `d3.csvParse`.

JJCarpenter-WPI
77% match
Loading thumbnail…

Fork of Loading Data

This example demonstrates asynchronous data loading in D3, displaying the Iris Dataset as a raw JSON string in a `<pre>` element. The visualization initializes with a loading state, fetches the CSV file via `fetch`, and parses it using `d3.csvParse`. After conversion, numeric columns are cast to numbers before being rendered. The code uses `d3.select` and the `.join()` operation to update the displayed data, showcasing a minimal data-loading and state-management pattern with D3 v7.

Bbillmccabeusa@hotmail.com
77% match
Loading thumbnail…

Loading CSV

This example demonstrates loading a CSV dataset by fetching the Iris Dataset from a remote URL and displaying its raw JSON structure in the browser. The code uses d3.json to retrieve the data, then chains a promise to append a `<pre>` element to the body, formatting the response with JSON.stringify and indentation. The visualization itself is minimal, focusing solely on the data-loading workflow rather than rendering charts or graphs. It relies on D3 v5’s `json` method and standard DOM selection via `select`, making the asynchronous data-fetching pattern explicit.

Vvaynexie
77% match
Loading thumbnail…

Loading and Parsing CSV Data with D3

This example demonstrates loading a remote CSV file and displaying basic dataset statistics. It fetches CSS named colors from a GitHub gist and shows the file size in kilobytes, the total number of rows, and the column count. The visualization uses D3 v7’s `d3.csv` method to parse the data asynchronously, then `d3.csvFormat` to calculate the raw text length, with results rendered to a `<pre>` element. The code also includes commented alternatives using `fetch` and `d3.csvParse`.

AA
77% match