Interactive Color Legend with EdX Viewer Data

100%

Interactive Color Legend with EdX Viewer Data

✓ Published4🌍 Public

Last edited Oct 26, 2019

Created on Oct 9, 2019

A scatterplot shows the relationship between active days and video plays for EdX platform users, with each circle's color indicating a course. Hovering over the color legend filters the visualization to display only data points from that selected course while dimming others. The chart uses React with hooks, D3 scales via `d3.scaleLinear` and `d3.scaleOrdinal`, and SVG rendering. Data comes from a CSV of the MITx-HarvardX 2013 academic year dataset.

AI-generated description

A visualization of showing the number of plays per person according to the number of days they were active on the EdX platform during the 2013 academic year. The color legend shows which courses garnered the most views. The data can be found on the MITx-HarvardX Dataverse.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Color Legend with EdX Viewer Data

An interactive scatterplot displays video plays versus active days for EdX users in 2013, with each circle’s color representing a course. Hovering over the ordinal color legend fades non-matching points and overlays a highlighted subset. Built with React and D3 v5 (scaleLinear, scaleOrdinal), the SVG renders axes via custom components and circles with native HTML titles for tooltips. Data originates from the MITx-HarvardX Dataverse repository.

Ssophburke

97% match

Loading thumbnail…

EdX Viewer Data

This scatterplot visualizes the number of plays per person against their active days on the EdX platform for the 2013 academic year, with a color legend identifying courses by viewer name. Built with React and D3 v5, it renders SVG circles positioned by `scaleLinear` scales for the x and y axes, while a sequential `scaleOrdinal` color scale encodes the categorical player names. The chart includes interactive hover highlighting that fades non-selected marks to 20% opacity, and it loads CSV data from a GitHub gist derived from the MITx-HarvardX Dataverse.

FFAN CHI YU(范紀予)

90% match

Loading thumbnail…

Final Project - Video Analytics, EdX, 2013

This scatterplot dashboard explores relationships among learner activity metrics—active days, video plays, forum posts, and grade—from the 2013 HarvardX and MITx EdX dataset. Two dropdown menus allow users to select which metrics appear on the x- and y-axes. A categorical color scale encodes gender, and point tooltips show the exact metric values. The visualization is built with React, rendering SVG marks and axes via D3 v5. Data loads from a CSV hosted on GitHub through D3’s `tsv` request.

Ssophburke

84% 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…

Interactive Color Legend with Menus

This interactive scatter plot visualizes the College Dataset, showing relationships between attributes like enrollment numbers and faculty PhD percentages, with points colored by public/private status. Users select X and Y axes from dropdown menus built with ReactDropdown, while hovering over the color legend highlights matching points and fades others. The visualization uses React for component composition, D3 scales for positioning and color mapping, and renders data as SVG circles with axis components from D3.

Yyinhao0424

81% match

Loading thumbnail…

data2

A scatterplot shows the number of video plays versus days active for HarvardX and MITx students, with each point colored by course and a legend that filters points on hover. An inset US bubble map marks the location of each course’s team. The visualization uses D3 v5 scales and axes, React for components, and D3’s `geoAlbers` and `geoPath` for the map. Data comes from the MITx-HarvardX Dataverse and the US Atlas TopoJSON.

FFAN CHI YU(范紀予)

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

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

80% match