Massachusetts Retention w/ Menu and Interactive Color Legend

100%

Massachusetts Retention w/ Menu and Interactive Color Legend

✓ Published1🌍 Public

Last edited Oct 31, 2019

Created on Oct 8, 2019

Forked from Massachusetts Retention w/ Menu and Color Legend

This scatter plot shows Massachusetts school district retention rates across multiple years, with dropdown menus to change the x-axis, y-axis, and circle-size attributes among attendance and absence metrics. An interactive color legend filters points by year on hover, dimming non-matching circles via opacity. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles to render the data from a CSV loaded with `d3.csv`.

AI-generated description

A scatter plot of Massaschusetts School Districts student retention with additional interactive menus and color legend.

The original dataset can be found here. This report presents data on grade retention rates in Massachusetts public schools. The Massachusetts Department of Elementary and Secondary Education defines a student retention as: a student who was reported to have repeated the grade in which he or she was enrolled during the previous school year.

MIT Licensed

Similar vizzes

Loading thumbnail…

Massachusetts Retention w/ Menu and Color Legend

This interactive scatter plot visualizes Massachusetts school district retention data, with dropdown menus controlling the x-axis, y-axis, and point size, while a color legend encodes the year. Built with React and D3.js, it uses SVG circles to represent districts, with axes generated from D3 scales and color encoded via a sequential ordinal scale. The data is loaded from a CSV file using D3’s `csv` function, and the interface relies on React state to update the chart dynamically.

EErik Erickson

98% match

Loading thumbnail…

Massachusetts Retention w/ Menu and Interactive Color Legend

A scatter plot of Massachusetts school district retention data shows relationships between attendance metrics, where dropdown menus select the X, Y, and circle-size attributes, and an interactive color legend filters data by year. The visualization uses React with D3 v5 scales to map data to SVG circles, which include tooltips displaying X values. Hovering over the color legend dims unrelated years while highlighting the selected one, revealing how retention rates correlate across different school districts and time periods.

JJerfaas

97% match

Loading thumbnail…

Massachusetts Retention compared to Chronically Absent Rates with Menus

This interactive scatter plot shows Massachusetts school district retention rates in relation to chronic absenteeism, with three dropdown menus letting viewers compare different metrics on the x-axis, y-axis, and point size. The visualization uses d3.scaleLinear to map data values to pixel coordinates, with circles rendered as SVG marks whose radius corresponds to a selected attribute. Data is loaded from a CSV via d3.csv, and the React interface updates the axes and circle sizes dynamically when menu selections change, while tooltips display formatted values for each district.

EErik Erickson

89% match

Loading thumbnail…

Massachusetts Retention compared to Chronically Absent Rates

This scatter plot compares Massachusetts school districts’ chronic absenteeism rates on the x-axis with the number of student retentions on the y-axis, while encoding each district’s retention rate through circle radius. The visualization uses React to manage rendering and d3.scaleLinear for all three scales, generating an SVG with custom AxisBottom, AxisLeft, and Marks components. Data comes from the Massachusetts Department of Elementary and Secondary Education, loaded via d3.csv, and styled with opacity and a custom font.

EErik Erickson

84% match

Loading thumbnail…

Massachusetts Rention Rates by year and quartile 10/31/2019 final

This visualization maps Massachusetts school district student retention rates, overlaying circles scaled by quartile value onto a geographic outline of the state. Interactive dropdown menus filter the displayed data by retention quartile and academic year, revealing potential geographic patterns over time. The map renders with `d3.geoAlbers` and `d3.geoPath`, while point radii use `d3.scaleSqrt`. Data from the Massachusetts Department of Elementary and Secondary Education is loaded via `d3.json` and `d3.csv`, and the interface is built with React and `react-dropdown`.

EErik Erickson

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

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

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

77% match