Shyan2

@Shyan2·3 public vizzes

Loading Data with React and D3

This example shows a horizontal bar chart of population data for the ten most populous countries, sourced from a CSV file of UN Population estimates for 2020. Built with React components and the D3.js library, it uses `scaleBand` and `scaleLinear` for axes, with the SVG chart rendered declaratively via React's `useData` hook. Mouse hover reveals tooltips with formatted population values, while axes and marks are styled through CSS classes.

Feb 23, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3.js v7. It fetches a remote CSV dataset containing named CSS colors, then displays the file size in kilobytes, row count, and column count as large text on the page. The code uses d3.csv to retrieve and parse the data, then d3.csvFormat to calculate the file size, and writes the results to the DOM through textContent. The data source is a GitHub Gist URL.

Feb 21, 2022

Loading thumbnail…

This is the title

A grid of eighteen smiley faces is rendered in SVG using React components, each face composed of a yellow background circle, two eyes, and an arc-based mouth. The code uses React for component composition and d3.arc to generate the mouth path, with random eye radii creating slight variations across the repeated faces. Each face is centered within a 160-pixel square, and the SVG is drawn declaratively through nested components like BackgroundCircle, Eyes, and Mouth.

Feb 21, 2022