Sophie's Stylized Scatter Plot v.2

100%

Sophie's Stylized Scatter Plot v.2

✓ Published1🌍 Public

Last edited Dec 24, 2019

Created on Sep 25, 2019

Forked from Sophie's Stylized Scatter Plot v.1

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.

AI-generated description

Trying desperately to build something using D3/React. A visualization of video views according to HarvardX or MITX course on EdX for the 2013 academic year. The data can be found on the MITx-HarvardX Dataverse

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Ssophburke

96% match

Loading thumbnail…

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.

Ssophburke

96% match

Loading thumbnail…

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

94% match

Loading thumbnail…

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

94% match

Loading thumbnail…

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.

Ssophburke

86% match

Loading thumbnail…

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.

Ssophburke

86% match

Loading thumbnail…

D3 Test Fork

This visualization plots student grades against video views in a 2013 HarvardX/MITx course dataset. The scatterplot uses a log scale for the x-axis to accommodate data spread, with D3 v5’s `scaleLog` and `scaleLinear`. Built with React and rendered as SVG, the code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components. Dots are initially colored a fixed red, though the author notes an intention to color by institution, as seen in the `colorValue` variable and `schemeCategory10` import.

RRoquelaur77

83% match

Loading thumbnail…

Sophie's version: Aggregation by Country using Excel

This example visualizes the total video views for HarvardX and MITx online courses in 2013, aggregated by country and shown as circles on a world map. Circle size encodes view count, and hovering reveals the country and number of views. The map uses a Mercator projection built with D3’s `geoMercator`, `geoPath`, and `geoGraticule`, layered with land and interior boundaries from the World Atlas TopoJSON. Data is loaded from a remote CSV via D3’s `csv` function, and the circles are positioned using the projection, with their radius scaled by `scaleSqrt` in SVG.

Ssophburke

83% match