abhashdiu

@abhashdiu·11 public vizzes

Bar Graph 2

This example displays a horizontal bar chart of the top ten countries by 2020 population. It uses React's `useState` and `useEffect` hooks to asynchronously load CSV data from a GitHub gist before rendering SVG rectangles. The visualization maps population values to bar widths using D3's `scaleLinear`, while country names are positioned along the y-axis with `scaleBand`. Rendering is handled entirely through React's declarative SVG output, with the chart updating once the data has been fetched.

Oct 5, 2022

Loading thumbnail…

Render Bar Graph with React & D3 to Render

This bar graph shows the top 10 countries by population in 2020, with horizontal bars sized according to population values. The visualization combines React's declarative component model with D3's SVG rendering utilities. D3's `csv` function loads and parses the UN Population dataset from a URL, while `scaleBand` and `scaleLinear` map country names and population values to screen coordinates. The rendered `rect` elements are generated directly within React's JSX syntax, demonstrating how D3's scales handle data transformation while React manages the SVG output.

Oct 5, 2022

Loading thumbnail…

Making a Bar Chart with React & D3

This visualization displays every CSS named color as a wedge in a radial burst, using D3’s `csv` loader to fetch data from a GitHub gist and `pie` and `arc` to compute the angles and paths. React renders each wedge as an SVG `<path>` with its fill set to the color’s hex value. The example demonstrates a simple integration where D3 handles data parsing and geometry while React manages the component state and DOM updates.

Oct 5, 2022

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates a minimal React application that fetches and summarizes a dataset of CSS named colors. The visualization displays three key statistics about the loaded data: the approximate file size in kilobytes, the total number of rows, and the number of columns. The code uses React’s `useState` and `useEffect` hooks to manage the asynchronous loading process, while D3’s `csv` function retrieves and parses the data from a remote URL. Once loaded, the `message` helper formats the summary using D3’s `csvFormat` method, and the result is rendered inside an HTML `<pre>` element with large typography.

Oct 5, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

A React application visualizes CSS named colors as a radial burst diagram, where each color occupies an equal slice of a pie chart. The code loads the dataset via `d3.csv` from a gist URL, then uses `d3.pie` and `d3.arc` to compute the slice geometry. React renders each slice as an SVG `<path>` element, with the fill set to the color’s hexadecimal RGB value from the data. The visualization uses a 960×500 viewport, centers the pie at its midpoint, and shows a loading state until the data arrives.

Oct 5, 2022

Loading thumbnail…

Mouse Follower

The Mouse Follower is a simple interactive visualization demonstrating real-time mouse tracking. A single dark circle moves across the screen, mirroring the cursor’s position while maintaining a fixed radius. The application uses React’s `useState` hook to store the mouse coordinates as state, updating them on every `onMouseMove` event. The interactive SVG circle re-renders at its new coordinates based on the browser’s `clientX` and `clientY` measurements.

Oct 3, 2022

Loading thumbnail…

Fork of Smiley Face Part V

Fifty randomized smiley faces render in a grid, each with varying eye and mouth sizes, demonstrating how React components can be reused with dynamic props. The visualization is built with React and D3 v5, where the `arc()` API generates the mouth path, and React Fragments group the eye elements. SVG output is produced through a `FaceContainer` that translates the coordinate system to center each face within its 100×100 viewport.

Oct 3, 2022

Loading thumbnail…

Fork of Smiley Face Part IV

This example displays a yellow smiley face with black circular eyes and a thick, arc-shaped mouth, centered on a white SVG canvas. Built with React components and D3’s `arc` generator for the mouth path, it uses fixed numeric constants for dimensions and positions referenced from the `index.js` file. The rendering combines React’s declarative JSX structure with D3’s geometry utilities to compose the static, vector-based face.

Oct 3, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example uses React and D3 to construct a smiley face out of scalable vector graphics. The code defines a face with a yellow circular background, two black eyes, and a curved mouth generated using D3’s `arc` function. A React component renders the SVG elements, while D3 computes the mouth path’s geometry. The design is parametric, with offsets and radii set as constants, making the face easy to modify.

Oct 3, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiley face rendered as a large yellow circle with two eyes and a mouth, all positioned relative to the browser window’s center and sized based on its dimensions. Built with React and D3 v5, it uses D3’s `arc` generator to create the mouth’s curved path, while SVG circles handle the face and eyes. The drawing scales dynamically with the viewport, using `window.innerWidth` and `window.innerHeight` to set the canvas size.

Oct 3, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face built from three SVG circles, with two black eyes positioned on either side of the face’s center. It uses React and ReactDOM to render the SVG elements, calculating circle positions from width, height, and offset constants. The face itself is drawn with a yellow fill and black stroke, while the eyes use fixed radii and offsets from the center, demonstrating basic declarative SVG composition within a React component.

Oct 3, 2022