Stoniee-duplicate

@Stoniee-duplicate·4 public vizzes

Fork of Pathetic Bar Chart

This example presents a minimalist bar chart of the top 10 most populous countries for 2020, sourced from the United Nations World Population Prospects 2019. It uses React with hooks (`useState`, `useEffect`) to load data via D3's `csv` function, then renders SVG rectangles inside a `<svg>` element. The chart intentionally omits axes and labels, scaling bar widths with `scaleLinear` and positioning them with `scaleBand`. The code includes a commented-out loop for `xScale.ticks()`, but no tick lines are actually drawn.

Apr 7, 2021

Loading thumbnail…

Fork of Rendering Data with React

A pie chart of CSS named colors displays evenly sized slices, each filled with the color that its data row represents. The visualization loads a CSV of color names and RGB hex values and renders it as a single ring. It uses React components for state management and SVG rendering, with D3's `arc` for the pie geometry and `csv` for data loading.

Apr 7, 2021

Loading thumbnail…

Rendering Data with React

This example renders a colorful SVG pie chart from a CSV of CSS named colors, fetched from a GitHub gist via `d3.csv`. It demonstrates a React component that loads asynchronous data with `useState` and `useEffect`, then maps each color to a `path` element using the `d3.arc()` generator. The arcs are drawn with fixed start and end angles, creating a fan-like burst around the chart’s center. React 16.9 and D3 v5 are loaded from CDNs, with the visualization rendered dynamically on user interaction.

Apr 7, 2021

Loading thumbnail…

Fork of Rendering Data with React

This example renders a dataset of color values as a series of horizontal stripes, each colored according to the RGB hex value in the data. The visualization uses React with hooks, including `useState` and `useEffect`, to load the CSV data from a GitHub gist via d3’s `csv` function. Each stripe is a `<div>` element styled with inline CSS, creating a stacked bar chart-like display that fills the viewport width.

Apr 7, 2021