Sophie's Polished Scatter Plot with Menus

Sophie's Polished Scatter Plot with Menus

This scatter plot explores the relationship between different learning activities and outcomes for HarvardX and MITx students on edX in 2013. Interactive dropdown menus allow users to select which two attributes, such as video plays, forum posts, or grade, to compare on the x- and y-axes. Built with React and rendered as an SVG, the visualization uses D3’s scale functions for axis construction and ordinal color scaling to differentiate data points by gender. The raw data is loaded from a CSV file using D3's `tsv` parser, with marks displayed as circles and tooltips showing precise values.

95% match

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.

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

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

86% match

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.

86% 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.