Polished Scatter Plot with Menus: College Scorecard Data

100%

Polished Scatter Plot with Menus: College Scorecard Data

✓ Published1🌍 Public

Last edited Oct 2, 2019

Created on Oct 2, 2019

Forked from Polished Scatter Plot with Menus

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.

AI-generated description

A scatterplot with menus using College Scorecard Data. The dataset comes from the College Scorecard Select Variables dataset.

MIT Licensed

Similar vizzes

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

89% 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

82% 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

82% match

Loading thumbnail…

Interactive Color Legend with Menus

An interactive scatter plot of the College Dataset explores relationships among academic metrics. Dropdown menus switch the X and Y attributes, while hovering over the ordinal color legend highlights points from either public or private institutions by fading non-matching circles. The React and D3 v5 implementation uses `scaleLinear` for axes, `scaleOrdinal` for colors, and React state to manage selections and hover interactions, rendering the SVG marks with reusable axis and legend components.

AAlaouiadnane

82% match

Loading thumbnail…

Interactive Color Legend with Menus

This interactive scatter plot visualizes the College Dataset, showing relationships between academic attributes such as applications, enrollment, and faculty credentials. Users select X and Y axes via dropdown menus, while a color legend distinguishes public from private institutions. Hovering over legend items highlights matching points and fades others using React state management. The visualization uses D3 scales and SVG rendering, with React components for axes, marks, and interactive controls, demonstrating a React-D3 integration pattern for exploratory data analysis.

AAlaouiadnane

81% match

Loading thumbnail…

Polished Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris Dataset, featuring dropdown menus that allow users to dynamically select which attributes to display on the x- and y-axes. The visualization uses React to manage state and render SVG elements, with D3.js (d3.v5) providing the scaling, axis generation, and data formatting utilities. Points are rendered as circles with tooltips, and the chart includes labeled axes and a clean, polished aesthetic. The data is loaded asynchronously from a CSV file using D3's `csv` function within a custom `useData` hook.

AAndrey Katamanov

81% match

Loading thumbnail…

Polished Scatter Plot with Menus and Color

Interactive scatter plot of the MITx/HarvardX course dataset (a CSV loaded via `d3.tsv`) lets users select X and Y axes from dropdown menus built with `react-dropdown`. Each circle is colored by gender using a `d3.scaleOrdinal` with a three-color range. Axes are drawn with custom React components, and the chart state updates through React hooks like `useState` and `useEffect`, with SVG rendering.

Ssophburke

80% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot uses the classic Iris Dataset, rendered as an SVG in React, to explore relationships between four numeric measurements. Menus built with React-Dropdown let users dynamically select which attributes map to the x and y axes, while d3.scaleLinear and d3.extent compute the scales for each new selection. Axis components and data marks are custom React components that use D3 for tick generation, and a `<title>` element provides a tooltip. The chart deliberately sets `height` shorter than the container to reserve space for the dropdown controls.

Ee-ines

80% match