Sophie's Polished Scatter Plot with Menus

Sophie's Polished Scatter Plot with Menus

A scatter plot shows the relationship between various academic activity metrics—such as active days, video plays, and forum posts—from HarvardX and MITx course participants in 2013. Two dropdown menus allow users to select which attributes appear on the x- and y-axes. The visualization is built with React and uses D3’s `scaleLinear`, `extent`, and `scaleOrdinal` for axis and color scales, rendering as SVG with custom `Marks` components and tick-axis helpers. Gender is encoded via a two-color ordinal scale. Data comes from the MITx-HarvardX Dataverse.

95% match

Sophie's Stylized Scatter Plot v.3

This scatter plot visualizes video views versus grades for HarvardX and MITx courses on EdX during the 2013 academic year. Each circle represents a course participant, with position encoding the number of video plays and final grade. The visualization uses React to render SVG elements, with D3 scales (scaleLinear) handling the x and y axes. Data loads asynchronously from a CSV file via d3.tsv, while axis components and marks are built using React components in the code.

88% match

Sophie's Stylized Scatter Plot v.3

This scatter plot visualizes video views against grades for HarvardX and MITx courses on EdX, sourced from the MITx-HarvardX Dataverse. A log scale on the x-axis handles the wide range of view counts, while D3 scales and React components render axes and marks as SVG circles. The color encoding by institution is noted in the code but not yet applied, with all points currently sharing a red fill.

CCurran Kelleher

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

Polished Scatter Plot with Menus and Color

Interactive scatter plot of the MITx/HarvardX course dataset (a CSV loaded via `d3.tsv`) lets users select X and Y axes from dropdown menus built with `react-dropdown`. Each circle is colored by gender using a `d3.scaleOrdinal` with a three-color range. Axes are drawn with custom React components, and the chart state updates through React hooks like `useState` and `useEffect`, with SVG rendering.

Sophie's Stylized Scatter Plot v.1

This scatter plot visualizes the relationship between video views and grades for HarvardX and MITx students in the 2013 academic year, using data from the MITx-HarvardX Dataverse. Built with React and D3 v5, it renders an SVG with d3.scaleLinear axes and circle marks, where hovering reveals the x-value via a native SVG `<title>` tooltip. The x-axis uses d3.format to abbreviate large view counts, and the Poppins font styles the chart.

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.

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.