Skip to main content
SimilarExport ZIP
100%

Massachusetts Retention w/ Menu and Color Legend

✓ Published1🌍 Public
EErik Erickson
Last edited Oct 8, 2019
Created on Oct 7, 2019

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.

AI-generated description

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

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 Interactive 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`.

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
88% 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
82% 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
82% match
Loading thumbnail…

Massachussets

This example visualizes Massachusetts school districts as a choropleth map, with each town randomly assigned one of three colors from a categorical scale. The geographic boundaries are rendered using a conic conformal projection through `d3.geoPath`, while React manages the component structure. Data is loaded from a local TopoJSON file containing town boundaries, and the color mapping is applied via `d3.scaleLinear`. The map is displayed as SVG paths with black strokes highlighting district borders.

11993-INDALKAR
78% 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
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