ansonzhu1997

@ansonzhu1997·3 public vizzes

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars, `csv` to load United Nations World Population Prospects 2019 data, and `format` to abbreviate tick labels (e.g., “1.4B”). The SVG rendering is styled with a teal fill and Poppins font, while hover tooltips show exact values.

Nov 2, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js. It fetches a CSV file containing COVID cases and employment statistics and displays the file size, row count, and column count in a large text output. The visualization primarily uses `d3.csv` to parse the data, with commented alternatives showing `fetch`, `async`/`await`, and `d3.csvParse`. A commented-out "pyramid of doom" pattern using nested `fetch` and `response.text()` is also present.

Oct 29, 2021

Loading thumbnail…

Fork of Hello HTML

This example shows a yellow smiley face rendered as an SVG, composed of a large circle for the head, two smaller circles for eyes, and an arc for the mouth. The visualization uses React for component structure and drawing logic, while the `d3` library’s `arc` generator calculates the mouth path via chained angle and radius methods. The rendering approach relies on SVG elements within a React DOM, with the graph coordinates and dimensions hard-coded in the JavaScript source.

Oct 21, 2021