Ray Yang

@99starman·7 public vizzes

Fork of Missing Migrants Scatter Plot Log Scale

This visualization displays the Missing Migrants Dataset, plotting each reported incident by date along the x-axis and the total dead and missing on a logarithmic y-axis. The scatter plot uses small circles to represent individual events, revealing patterns in migration-related fatalities over time. Built with React and rendered as SVG, the code employs D3 v5 APIs including `scaleLog`, `scaleTime`, `extent`, and `max` to handle data scaling, while custom components (`AxisBottom`, `AxisLeft`, `Marks`) generate the interactive chart with tooltips.

Aug 17, 2022

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements for three flower species. Two dropdown menus let users independently select which attributes to plot on the X and Y axes. Built with React and D3, the visualization uses `scaleLinear` for axes and SVG circles for data points. Hovering reveals tooltips with formatted values. The React app manages state for axis selections and loads CSV data via D3's `csv` function, rendering axes and marks as React components with D3 scales.

Aug 2, 2022

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a bubble map and a date histogram to explore global missing migrant incidents, with brushing on the histogram filtering the map’s displayed circles. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries and graticules, while circle sizes encode the total dead and missing via `d3.scaleSqrt`. The histogram bins data by month using `d3.bin` and `d3.timeMonths`, with `d3.brushX` enabling interactive time-range selection. The React app (v16.9) manages brush state, filtering the map data accordingly. Data comes from a CSV of missing migrants, with country shapes from World Atlas TopoJSON.

May 30, 2022

Loading thumbnail…

World Map

This example presents a stylized world map rendered as an SVG. It displays country boundaries, graticules, and the Earth’s sphere, with city locations plotted as translucent points. The visualization uses the D3.js `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` APIs, along with React for component management. Geographic data is sourced from the World Atlas TopoJSON, and city coordinates are loaded from a CSV file. The map is styled with a clean, minimal aesthetic, highlighting land masses and interiors.

May 30, 2022

Loading thumbnail…

Bar Chart

This bar chart displays the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. The visualization employs React components for rendering and d3.js functions like `scaleBand`, `scaleLinear`, and `max` to map countries and their populations. The chart is drawn as an SVG, with horizontal bars and labeled axes, and includes interactive tooltips showing population values in a formatted, shortened notation.

May 30, 2022

Loading thumbnail…

Mouse Follower

A yellow circle tracks the mouse cursor across an SVG canvas. The circle's position updates to follow the pointer as it moves. Built with React 16.9 and ReactDOM, the example uses the `useState` hook to store the mouse position and `useCallback` to handle the `onMouseMove` event on the SVG element. The circle is rendered with a variable `cx` and `cy` attribute, while the `clientX` and `clientY` coordinates from the event are used to update the state.

May 29, 2022

Loading thumbnail…

Progress

A wall of smiling cartoon faces fills the screen, each with a yellow circular head, black outline, two eyes, and an arched mouth. The faces are randomly varied in stroke width, eye position and size, and mouth dimensions, creating a playful, chaotic grid of 12 distinct characters. The code uses React components to structure each face, while d3’s `arc` API generates the mouth path, and d3’s `range` creates the array of faces. Each face is rendered as inline SVG within a React app.

May 29, 2022