Leonardo Baron

@Leobar75·3 public vizzes

Fork of Fork of Fork of HTML Starter 2

This example displays a horizontal bar chart of population by country for the top 10 countries, using data from the UN Population 2019 CSV. Built with React and D3 v7, it renders SVG elements including rectangles for bars, with axes created using `scaleBand` and `scaleLinear`. The chart includes a custom `AxisTop` with `d3.format` for tick labels and an `AxisLeft` for country names. Data is loaded via `d3.csv` and parsed in a `useData` hook.

Jan 19, 2023

Loading thumbnail…

Fork of Fork of HTML Starter 2

This visualization displays the CSS named colors as a pie chart, with each slice colored by its corresponding hex value and sized equally. The chart uses React to manage the async loading of CSV data from a GitHub gist, while d3’s `arc` and `pie` generators compute the SVG paths. The rendering leverages React DOM to mount the SVG elements, and the dataset contains 148 rows of color names and hex codes.

Jan 13, 2023

Loading thumbnail…

Fork of HTML Starter

A minimal React application renders a gray SVG canvas with a small black circle that follows the mouse cursor. The code uses React's `useState` and `useCallback` hooks to track cursor position and update the circle's `cx` and `cy` attributes. It imports `Eyes` and `Mouth` components, which draw placeholder facial features using SVG circles and a D3 `arc` path, though these are not currently instantiated in the main `App` component. The example demonstrates basic React event handling and SVG rendering within an HTML page.

Jan 13, 2023