Mengmeng Yu

@Cecilia0622·5 public vizzes

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.

Oct 10, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face drawn with D3.js, where the eyebrows animate by moving up and down repeatedly. The face is constructed using basic D3 shapes, including circles for the eyes and face, rectangles for the eyebrows, and a path with arcs for the mouth. The animation is achieved through chained transitions that shift the eyebrow group's vertical position over two-second intervals. The code uses D3 v5 selection, attributes, and transitions, with all shapes rendered as SVG elements.

Oct 4, 2019

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes daily death counts in San Francisco from August to September, with the data sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.scaleTime` and `d3.scaleLinear` for axes and the `d3.area` generator with a `curveBasis` interpolation to create a smooth filled path. The chart includes labeled axes, gridlines, and a title, with the y-axis labeled "Number of Death."

Oct 4, 2019

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes one week of temperature data in San Francisco, with timestamps on the x-axis and degrees Celsius on the y-axis. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map data to coordinates, while d3.area with curveBasis generates the filled path that highlights temperature fluctuations. Axis labels and a title are added via d3.axisBottom and d3.axisLeft, with data sourced from the Data Canvas - Sense Your City project.

Oct 4, 2019

Loading thumbnail…

Chicago Crime Data First Pass

This visualization maps Chicago crime data as red points on a U.S. state map using the Albers USA projection via `d3.geoAlbersUsa` and `d3.geoPath`. It loads TopoJSON state boundaries and CSV crime coordinates, rendering circles with tooltips that display the crime type on hover. Zooming and panning are enabled with `d3.zoom`. Points animate with a `transition` and scale transform, while SVG styling uses a custom tooltip div.

Oct 4, 2019