data2

Aggregation by Country using Map

This example visualizes the geographic distribution of video views for Harvardx and MITx online courses in 2013. Circles positioned using a Mercator projection show total views per location, with a tooltip revealing the country name and view count. The visualization combines React for component rendering with D3’s `geoMercator`, `geoPath`, and `scaleSqrt` for sizing. It overlays aggregated view data from a CSV dataset onto land and graticule shapes generated from TopoJSON world atlas data.

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.

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(范紀予)

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.

Aggregation by Country + Dropdown

This visualization displays the number of video views for HarvardX/MITx online courses in 2013, with circles sized by view count on a world map. A dropdown menu filters the displayed data by course. The map uses a Mercator projection via `geoMercator` and `geoPath`, with geographic features from the World Atlas TopoJSON. View data comes from a CSV file loaded with `d3.csv`. The visualization is built with React components and D3 scales (`scaleSqrt`) for circle sizing.

Sophie's Stylized Scatter Plot v.3

This scatter plot displays the relationship between video views and grades for HarvardX and MITx courses on EdX, with each point representing a student’s performance against their video engagement. The visualization uses a log scale for the x-axis to handle wide-ranging view counts, while the y-axis uses a linear scale for grades. Built with React and D3 v5, the code implements custom `AxisBottom` and `AxisLeft` components, alongside a `Marks` component that renders circles in SVG. Data comes from the MITx-HarvardX Dataverse dataset focusing on the 2013 academic year.

MMengmeng Yu

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.

Sophie's Stylized Scatter Plot v.2

This example shows the relationship between video views and final grades for HarvardX and MITx online courses during the 2013 academic year, sourced from the MITx-HarvardX Dataverse. Each circle represents a student, with position determined by d3.scaleLinear scales mapping video-play counts to the x-axis and grades to the y-axis. The React components render SVG axes and marks, using d3-format’s `.2s` tick formatting to abbreviate large view counts. Loading states display a large "Loading..." text while the data is fetched via d3.tsv from a remote CSV URL.