CAROL(XINYI) ZHENG

@CAROLZXYZXY·2 public vizzes

Scatterplot

This scatterplot displays the top 10 most populous countries using a bar chart, with population values on the x-axis and country names on the y-axis. The visualization is built with React and D3 v5, using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. Data comes from the United Nations World Population Prospects 2019 CSV, loaded via d3.csv. The chart includes styled axes with formatted tick labels that convert values to billions, and hover tooltips via SVG <title> elements.

Mar 2, 2021

Loading thumbnail…

Make a face

This example shows a simple cartoon face made from SVG shapes: a yellow circle for the head, two black circles for eyes, and an arc for the mouth. The face is centered within a 960×500 SVG canvas, with eye positions calculated relative to the center. The code uses D3 v6 selections to append and style each SVG element, and the `arc` generator from D3’s shape module to create the mouth path with specified inner and outer radii and angle ranges. All styling is applied directly via attributes.

Feb 25, 2021