Sayyam Aneja

@Aneja-Sayyam·4 public vizzes

Rendering data with react

A bar chart displays the top 10 countries by projected 2020 population from a UN dataset. Built with React and D3 v5, it uses `useState` and `useEffect` to load CSV data via `d3.csv`, then renders SVG rectangles. Scales `d3.scaleBand` and `d3.scaleLinear` map country names and population values to pixel positions, with margins applied inside a transformed `<g>` element.

Nov 24, 2022

Loading thumbnail…

Loading data with react and d3

This example demonstrates how to load and summarize CSV data using React and D3. The app fetches a named colors dataset from a GitHub gist using D3’s `csv` function, then displays the file size in kilobytes, row count, and column count in a large `<pre>` tag. While data is loading, the text shows “Loading...”. The code uses React hooks like `useState` and `useEffect` to manage asynchronous data fetching and rendering.

Nov 23, 2022

Loading thumbnail…

loading and parsing csv

This example demonstrates a minimal HTML page that fetches and parses a CSV file, displaying the static text “loading and parsing csv!” in large, centered type. The page uses the Fetch API to retrieve the remote dataset from a GitHub gist containing CSS named colors, then passes the raw text to d3.csvParse from d3 v7. The parsed data object is created but not visualized, highlighting the foundational step of data loading and preparation as a precursor to more complex charts.

Nov 23, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a stylized cartoon face constructed from SVG shapes, rendered in a React component. The face consists of a yellow circular background with a black stroke, two eyes, and a mouth created using the d3 `arc` function to draw a semicircular path. The React component system is used to assemble the face from smaller reusable parts like `BackgroundCircle`, `Eyes`, and `Mouth`, with coordinates and dimensions passed as props to position each element.

Nov 22, 2022