amitrumania-vcs

@amitrumania-vcs·6 public vizzes

Drawing SVG shapes with D3

This example illustrates two methods for creating a blue SVG rectangle: a static, hand-coded SVG element and a dynamically generated rectangle via D3. The static bar is defined directly in the HTML markup, while the D3 bar is built by chaining `d3.select` and `.append` calls. The code uses d3.v7 to append an SVG and style the rectangle with a `fill` style, showing the same visual output achievable through both declarative and programmatic approaches.

Jul 10, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates loading a CSV dataset from a GitHub gist and displaying summary statistics about the loaded data as plain text. It uses React state to hold the parsed data, with the `useState` hook triggering a re-render once `d3.csv` resolves the data promise. The code imports the `csv` method directly from D3 v7 and formats the result with `d3.csvFormat` to calculate file size, row count, and column count. The SVG rendering approach is noted in the HTML setup, where React mounts to a root `div` element.

Jul 8, 2021

Loading thumbnail…

Loading and Parsing cvs

This example demonstrates how to load and parse a CSV file from a remote URL. Using D3 v7, it fetches a dataset of CSS named colors and displays the file size, row count, and column count in large text. The code uses `d3.csv` to load and parse the data, `d3.csvFormat` to measure the formatted size, and `d3.csvParse` as an alternative approach with `fetch` and `async`/`await`. The output is rendered into a `<pre>` element showing the summarized metadata.

Jul 4, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, showing real-time pointer tracking in React. The visualization uses React hooks—`useState` to store the mouse position and `useCallback` for an `onMouseMove` event handler that updates the circle’s `cx` and `cy` attributes. It renders via ReactDOM into the DOM and depends on React 16.9's production UMD builds, with the SVG circle initially centered on a 960×500 viewport. The code directly maps `clientX` and `clientY` from the event to the circle’s coordinates.

Jul 4, 2021

Loading thumbnail…

HTML HTML

This example renders a yellow circle with a black outline as a background, overlaid with a D3 arc path that forms a mouth-like shape. Built with React components and SVG, it uses the D3 `arc` API to generate the path geometry from specified inner and outer radii and start/end angles. The `BackgroundCirlce` component draws the circle via SVG elements, while the main `App` component positions the shapes at the SVG center using a transform. The visualization demonstrates a minimal integration of React, D3, and SVG for simple geometric composition.

Jul 3, 2021

Loading thumbnail…

Hello World

This example shows a single yellow circle centered in a 960-by-500 SVG canvas. The circle has a black stroke and a fill color of yellow, rendered directly in the HTML body without any JavaScript or CSS interactions. The visualization relies on raw SVG elements, specifically the `<circle>` tag with explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes, demonstrating a minimal static graphic. No external libraries or frameworks are used beyond the native HTML and SVG specifications.

Jun 19, 2021