Skip to main content
SimilarExport ZIP
100%

withoutlabel

✓ Published4🌍 Public
Mmavercikalvin
Last edited Mar 21, 2023
Created on Mar 9, 2023
Forked from HTML Starter

The visualization displays graduate admissions across six departments, with counts grouped into four gender-outcome categories: male admit, male reject, female admit, and female reject. The data comes from the `admissions.csv` file and is rendered as a grouped bar chart using D3 v4 within a React application. The code uses `d3.nest()` to aggregate data, `d3.scaleBand()` for the categorical axes, and `d3.scaleOrdinal()` for color encoding. An interactive tooltip appears on mouseover, though mouseout behavior is not implemented. The chart includes axes and a legend, with bars drawn as SVG rectangles.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

withoutlabel

This example shows grouped bar charts of admission counts by department and gender, with male and female bars side by side for each department. The chart uses a steelblue style and compares counts across six academic departments. The code employs D3.js v4 to load CSV data, process it with `d3.rollups`, and render with `d3.scaleBand` and `d3.scaleLinear`. It generates SVG output, uses `d3.axisBottom` and `d3.axisLeft` for axes, and manually positions bars with a 40-pixel width for each gender.

Mmavercikalvin
86% match
Loading thumbnail…

visualization9d3

This stacked bar chart displays the count of students by their final academic outcome (Dropout, Graduate, or Enrolled), with each bar segmented by gender (Male or Female). The visualization uses D3 v7 to load CSV data via `d3.csv`, aggregate counts, and render SVG rectangles through `d3.stack` and `d3.scaleBand`. Interactive tooltips appear on mouseover, showing the exact count per gender and outcome. The chart includes axes labeled “Target Outcome” and “Number of Students,” with a categorical color scale assigning blue to males and orange to females.

GGanesh Gundekarla
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
75% match
Loading thumbnail…

Gender count for each department

This example visualizes the gender distribution across seven academic departments (CAM, COM, CSIS, GAV, MED, MUL, VIS) using a dot plot with pink and light blue circles representing female and male counts respectively. The chart displays both genders per department, connected by black lines to facilitate comparison of relative values. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and SVG circles and lines rendered from the `earning_averages_by_year.csv` data source. Gridlines and axis labels are generated using `d3.axisBottom` and `d3.axisLeft`.

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

Visualization4D3.js

This visualization is a heatmap showing the relationship between Gender and Application Mode, using counts derived from a dataset of student records. The chart displays application modes on the y-axis and gender on the x-axis, with color intensity indicating the number of students in each combination. Hovering over a cell reveals the exact count via a tooltip. The code uses D3 v7 to load data with `d3.csv`, aggregate counts via `d3.rollups`, and render the SVG heatmap using `scaleBand` for axes and `scaleSequential` with `interpolateBlues` for color encoding.

GGanesh Gundekarla
73% match
Loading thumbnail…

Graduate Admission

A horizontal bar chart ranks the statistical influence of six graduate admission criteria, with undergraduate GPA (40.20 percent) as the most significant factor and Statement of Purpose (0.05 percent) as the least. The visualization uses d3.v5 with SVG rendering, employing `scaleLinear` for the x-axis percentages and `scaleBand` for the categorical y-axis labels. Data comes from a UCLA graduate admissions dataset on Kaggle, loaded from CSV via `d3.csv`. The chart omits axis domain lines and tick marks for a cleaner presentation, while green bars and a title annotation highlight each requirement’s relative weight.

Ssamemurk21
73% match
Loading thumbnail…

Ice-6 DV marks and channels

A horizontal bar chart ranks the ten universities with the highest 2015 admission counts, using grey bars whose lengths are proportional to the admission numbers. The chart is built with React and D3 v5, using `d3.csv` to load the data from a GitHub Gist, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis. The SVG output includes axis ticks and labels, rendered via React components mapping over the scale domains.

PPallaviManupati
73% match