Venkat

@venk12·7 public vizzes

Fork of Rendering Data with React & D3

This example visualizes United Nations population data from 2019 as a bar chart, with each country represented by a rectangle whose height is set by a D3 `scaleBand` and width by a `scaleLinear`. It uses React hooks (`useState`, `useEffect`) to load the CSV via D3’s `csv` utility and render SVG elements. The code also includes commented-out logic for manually computing arcs with D3’s `arc` without `d3.pie`, though the active chart does not use that path.

Sep 15, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst of CSS named colors, each represented as a wedge-sized slice of a pie chart, fills an SVG canvas. The visualization loads color data from a CSV file using D3’s `csv` utility, then passes it to React, which renders each slice with a `<path>` element shaded with the color’s `RGB hex value`. D3’s `pie` and `arc` generators compute the angles and paths, while React manages the data-fetching lifecycle and conditional loading state. The example demonstrates a hybrid approach where D3 handles data parsing and geometry, and React handles declarative DOM updates.

Sep 14, 2021

Loading thumbnail…

Fork of Mouse Follower

This example displays a moving circle that follows the mouse cursor, while also loading and summarizing a CSV dataset of CSS named colors. The circle’s position updates reactively based on pointer movement, and the data summary reports the file size in kilobytes, row count, and column count. The project uses D3 v5’s `csv` loader to fetch the remote data, and React with hooks (`useState`, `useCallback`) to manage state and rendering updates.

Sep 13, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how React and D3 can work together to load and summarize a dataset of CSS named colors. The application fetches CSV data from a GitHub gist using the `d3.csv` function, then stores the result in React state via the `useState` and `useEffect` hooks. While the data is loading, the interface shows a “Loading...” message; once available, it displays a text summary built with `d3.csvFormat` that reports the file size in kilobytes, the number of rows, and the number of columns. The visualization uses React 16.9, D3 v5, and the `ReactDOM.render` method to mount the component into the DOM.

Sep 13, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote source. It uses D3 v5’s `d3.csv` method to fetch the file and then displays summary statistics—the file size in kilobytes, number of rows, and number of columns—as large text on the page. The code also includes commented alternatives using the Fetch API with `async`/`await` and `d3.csvParse`. The data source is a GitHub gist containing CSS named colors.

Sep 12, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A smiling face rendered as a yellow SVG circle with black outline, black eyes, and a gap for a mouth, centered in the browser window. The face uses React’s `useState` hook to track the mouse position, updating on every `mousemove` event, though no visual change tied to that position is implemented. The SVG dimensions and face element positions derive dynamically from `window.innerWidth` and `window.innerHeight`, with React rendering the final markup via `ReactDOM.render`. The example demonstrates a static geometric illustration with event-handling logic in place.

Sep 12, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

A smiling face rendered in SVG uses React components for the background circle, eyes, and mouth, with D3’s `arc` function drawing the curved mouth shape. The face is centered via a translated group element, and all visual properties like eye offset and radius are passed as props. The composition demonstrates a declarative React-based approach to creating simple D3-driven graphics.

Sep 12, 2021