dapperAuteur

@dapperAuteur·5 public vizzes

Fork of Mouse Follower

A circle follows the mouse cursor across an SVG canvas, recentering itself as the pointer moves. The example uses React hooks `useState` and `useCallback` to manage the mouse position and update the circle’s `cx` and `cy` attributes via the SVG `onMouseMove` event. Rendering is handled by React DOM, with the visualization limited to a static circle whose radius remains constant.

Mar 19, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars using React with hooks and D3 scales. It fetches UN World Population Prospects 2019 data via `d3.csv`, maps the 2020 population figures, and renders SVG rectangles whose widths are scaled by `scaleLinear` and vertical positions by `scaleBand`. The visualization intentionally omits axes, making it a minimal “pathetic” bar chart. The code also sets up Apollo Client and GraphQL integration, though the chart itself does not exercise those libraries.

Mar 14, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This radial burst visualization displays all 148 CSS named colors as equal-sized slices arranged in a circle, with each slice filled by its corresponding RGB hex value. The data is loaded from a CSV file using D3’s `csv` utility, while React’s `useState` and `useEffect` hooks manage the asynchronous fetch. D3’s `pie` and `arc` functions compute the slice geometries, rendered as SVG `<path>` elements within a React component. The example demonstrates a hybrid approach where D3 handles data processing and shape generation while React manages the component lifecycle and rendering.

Mar 14, 2021

Loading thumbnail…

Fork of Organization Graph Diagram

This interactive graph visualizes the organizational network of the Kenneth Rainin Foundation’s grants, with colored nodes and links representing main entities and their child projects. The simulation uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position nodes, while drag interaction lets users move nodes in real time. Built with D3 v6, the SVG rendering updates positions, edges, and labels dynamically during each physics tick, using data defined in separate JavaScript modules.

Mar 3, 2021

Loading thumbnail…

Fork of Hello HTML

This example displays a single large yellow circle with a blue outline centered on a plain white SVG canvas. The graphic is produced directly in an HTML page using inline Scalable Vector Graphics (SVG) markup, with the circle element specified via its center coordinates (cx, cy) and radius (r), and styled through the fill and stroke attributes. The page’s CSS resets the body margin and hides overflow, ensuring the drawing spans the full viewport width of 960 pixels and height of 500 pixels.

Mar 1, 2021