EdX Viewer Data

Interactive Color Legend with EdX Viewer Data

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.

90% match

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.

89% match

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.

EdX Viewer Data by Course and Country, AY2013

This stacked bar chart shows the total number of EdX video views for each country during AY2013, with each bar segment color-coded by course. The visualization uses the vega-lite-api to build a bar mark with an aggregate sum of `nplay_video` on the y-axis and country on the x-axis, sorted by total views. A sinebow color scheme distinguishes courses, and tooltips display the aggregated view counts per segment. Data is loaded from a CSV file hosted on GitHub, originally sourced from the MITx-HarvardX Dataverse, with custom axis and label styling via vega-lite configuration.

EdX Viewer Data by Course with Stacked Bars, AY2013

This example uses stacked bars to show the total number of video plays per course on EdX for the 2013 academic year, with each bar segment colored by the view counts’ country of origin, revealing the geographic distribution of engagement for each course. The visualization is built with the vega-lite-api, which registers Vega and Vega-Lite, and it loads CSV data from a GitHub-hosted dataset derived from the MITx-HarvardX Dataverse. The chart sums the ‘nplay_video’ field across courses, sorts courses by total views, and applies a sinebow color scheme to the country categories, with a custom config adjusting axis and label styling.

EdX Viewership 2013: Aggregating in App!

This visualization maps EdX video viewership for HarvardX and MITx online courses in 2013, plotting circles sized by total video plays per country on a Mercator-projected world map. The circles, generated with d3.scaleSqrt and rendered as SVG paths via d3.geoPath, sit atop land and graticule layers from the World Atlas TopoJSON. Hovering reveals the country name and view count. The React app loads CSV data with d3.csv and aggregates counts by country using d3.bin and d3.sum.

EdX Viewer Data by Course, AY2013, AY2013

This visualization displays the total number of video views per viewer, aggregated by course, for HarvardX and MITx courses in the 2013 academic year from the MITx-HarvardX Dataverse. It uses a stacked bar chart with a sinebow color scheme, where each bar segment represents a distinct course. The Vega-Lite API, built on D3, renders the chart in SVG, with axis and label styling customized in a separate config file. Data is loaded asynchronously via D3’s `csv` method from a GitHub-hosted dataset.