ekmankaur

@ekmankaur·6 public vizzes

Bar chart with D3

This bar chart displays the population of the top 10 countries for 2020, using horizontal bars sorted by country name. The chart is built with React and D3 v5, rendering SVG elements. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components, using D3's `scaleBand` and `scaleLinear` for scales and `format` for tick labels. Data is loaded from a CSV URL using `d3.csv`, and population values are computed by multiplying the '2020' column by 1000.

Oct 12, 2022

Loading thumbnail…

Rendering Data with React & D3

This example renders a pie chart of CSS named colors using React and D3 v5. It loads color data from a CSV file via `d3.csv`, then uses a `pie` generator and an `arc` generator to compute the pie slices. Each slice is rendered as an SVG `<path>` element filled with its corresponding RGB hex value from the dataset. The React component manages the asynchronous data loading with `useEffect` and displays a loading state until data arrives. The visualization showcases the full spectrum of CSS color names in a circular layout.

Oct 6, 2022

Loading thumbnail…

Hello HTML

This example shows a smiley face made of SVG circles, arcs, and lines, with eyes, a red mouth, and a tongue. The face is composed through React components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which centers the drawing via a `<g>` transform. D3’s `arc` helper generates the mouth and tongue paths. Hard-coded dimensions are passed to the `Face` component from `index.js`, rendering at 960 by 500 pixels with beige background, grey stroke, and black pupils.

Oct 6, 2022

Loading thumbnail…

Load data using d3

This example demonstrates how to load a remote CSV file containing CSS color names and render each color as a full-screen block using React state. The code imports the `csv` utility from D3 v7 to fetch and parse the data from a GitHub gist, then stores the resulting array in React state via the `useState` and `useEffect` hooks. Each row is displayed as a colored `div` element with its background color set directly from the data, showing how D3’s data-loading functions integrate with React’s component lifecycle.

Oct 6, 2022

Loading thumbnail…

loading and parsing csv

This example demonstrates how to load and parse a CSV file using D3 v7. It fetches a remote CSS named colors dataset via the `d3.csv` method and displays the total row and column counts as plain text on the page. The code also includes an alternative approach using the Fetch API with `async/await` and `d3.csvParse` to handle the same parsing task. The visualization focuses on data structure rather than graphical representation, with all results rendered directly into the document body.

Oct 4, 2022

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a 960-by-500 SVG canvas, updating its center position in real time. Built with React using the `useState` and `useCallback` hooks, the app listens for `onMouseMove` events on the SVG element and passes the cursor's `clientX`/`clientY` coordinates to the circle's `cx` and `cy` attributes. The visualization uses D3.js version 5 primarily for the SVG rendering within a React framework, with no external data source.

Oct 4, 2022