Francisldn

@francisldn·3 public vizzes

Fork of UN Bar Chart

This example displays the top 10 most populous countries as horizontal bars, sized by their 2020 population estimates from the United Nations World Population Prospects 2019 dataset. The bars are rendered as SVG rectangles using React components, with d3.scaleLinear mapping population counts to bar widths and d3.scaleBand positioning each country along the vertical axis. Gridlines are drawn using d3’s scale ticks. The chart deliberately omits axes and labels, making it a minimal, self-deprecating visualization.

Sep 11, 2022

Loading thumbnail…

Rendering data with React

This example renders the CSS named color dataset as a circular pie chart, with each color represented by a slice whose fill matches its hex value. The React component uses the `useState` and `useEffect` hooks to asynchronously load the CSV via `d3.csv`, then maps each row to an SVG `<path>` element. The arcs are computed manually using `d3.arc` with start and end angles derived from the data index, and rendered inside a centered `<g>` transform within an SVG canvas.

Sep 11, 2022

Loading thumbnail…

Smiley Face Part I - Francisldn

A yellow smiley face rendered as an SVG in a React application, composed of a background circle, two eyes, and an arc-shaped mouth. The face is centered within a 960 by 500 viewport using a translated group element. The code uses React components for each facial feature, with the mouth built using D3’s arc generator to create a path. D3 v7 and React 16.9 are loaded via CDN in the HTML page.

Sep 11, 2022