Fangfei Zhang

@Iris-Zhang826·5 public vizzes

Fork of Smiley Face Part IV

A React component renders a yellow smiley face as an SVG graphic, with a black-outlined circle, two eyes, and an arc-shaped mouth. The visualization demonstrates how D3’s `arc` generator creates the mouth path from defined inner and outer radii and angular start and end points. The code uses React 16.9 for component structure, D3 v5 for the arc calculation, and renders entirely as SVG elements with fixed dimensions and stroke settings, without any interactivity or data binding.

Oct 8, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a simple smiley face rendered as an SVG graphic, with its position and size dynamically scaled to fill the browser window. The face is composed of basic shapes—a yellow circle for the head, two black circles for the eyes, and a mouth created using the `d3.arc` generator with specified inner and outer radii. The layout uses React components to structure the SVG elements, while `window.innerWidth` and `window.innerHeight` determine the canvas dimensions. The code relies on React 16.9 and d3 v7, with the mouth path generated by `arc().innerRadius().outerRadius().startAngle().endAngle()`.

Oct 8, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face built from SVG circles: a yellow head, two eyes, and a mouth. It uses React to render the SVG elements, with hardcoded coordinates for the head and eyes. The code defines width, height, and center points to position the main face shape, while the eyes are placed at fixed offsets from the center. React 18 and ReactDOM render the component to the page, though the displayed face only includes the head and eyes, not the mouth.

Oct 8, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example draws a simple smiley face using SVG shapes. It shows two small circles for eyes and a large yellow circle for the head, all positioned within a 960 by 480 viewport. The visualization is built entirely with static SVG elements in an HTML file, using no JavaScript libraries or data sources. Each circle is defined with explicit radius and coordinate attributes, and the head features a black stroke outline. The result is a minimalist, hard-coded illustration rather than a data-driven plot.

Oct 7, 2022

Loading thumbnail…

Fork of Missing Migrants Multiple Views

This visualization combines a bubble map and a date histogram to show the total number of dead and missing migrants over time. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries and graticules, with circle sizes scaled by `d3.scaleSqrt` based on migrant counts. The histogram bins reported dates by month using `d3.bin` and `d3.timeMonths`, summing deaths per bin. Both views are built with React components and render to SVG, using data from a CSV subset of the Missing Migrants Global dataset.

Sep 27, 2022