weisbroda@rfa.org

@weisbroda·16 public vizzes

Let's make a face!

A red background fills the SVG canvas as a blank slate for a face. The example uses D3 v7 to select the SVG element and apply the background color directly through its style property. No facial features or additional data are rendered, leaving the visualization as a minimal starting point for further development. The code relies on D3's `select` function to manipulate the DOM, with the SVG dimensions fixed at 960 by 500 pixels.

Feb 21, 2024

Loading thumbnail…

Let's make a face!

This example demonstrates the minimal setup for a VizHub V3 Runtime Environment visualization, serving as a “Hello World” starting point. The code exports a `main` function that accepts a container element and injects an HTML string with a large, centered text div. It uses no external libraries, only plain JavaScript and the container’s `clientWidth` and `clientHeight` for sizing. The state is managed via an empty object and `setState`, supporting future interactivity through immutable updates, as hinted by the linked Mouse Follower example.

Feb 21, 2024

Loading thumbnail…

Cambodia DPMs Nepotism

A network diagram visualizes nepotism among Cambodian government officials, displaying family names and their connections to government and corporate entities. The visualization uses a fixed SVG scene with circles, rectangles, and connecting lines to represent individuals, companies, and relationships. It employs d3.v5 for rendering and React for the application structure, with scrolling text providing context between sections. The graphic distinguishes different relationship types using red threads and grey connections, while clans are highlighted with translucent circles.

Sep 26, 2023

Loading thumbnail…

Fork of Let's Make a Face Part II

A smiling face is drawn using React components and SVG primitives, with a yellow circle for the head, black eyes, white pupils, pink blush ellipses, and a curved mouth path. The mouth is generated with the d3.arc function using inner and outer radii plus start and end angles. All coordinates are computed relative to the center point, while eye offset, radius, and mouth dimensions are defined as constants. The visualization is rendered in an SVG element sized at 960 by 500 pixels.

Sep 25, 2023

Loading thumbnail…

Hun Manet Nepotism: I

This visualization maps a network of family connections centered on Hun Manet, with yellow nodes highlighting Manet and his brother while gray nodes represent relatives and in-laws. A force-directed layout uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position the nodes and links. The SVG rendering displays circles with labels, and the data is defined in a separate `data.js` module.

Aug 23, 2023

Loading thumbnail…

Network Graph Diagram with Data

A network graph diagram with data maps interconnected organizations across an arts and community landscape. The visualization shows a hierarchical structure of main nodes, child nodes, and leaf nodes, with larger central hubs like 'Arts Web' and 'Social Impact Commons' branching to smaller affiliated groups. Using d3.forceSimulation with forceManyBody for charge and forceLink for link constraints, the graph dynamically positions nodes in SVG, with circles and text representing each entity. Data comes from a static dataset defining nodes, links, and size distances, rendered in a 960×960 viewport.

Aug 22, 2023

Loading thumbnail…

Force Directed Graph Starter

This example demonstrates a minimal force-directed graph with three nodes and two links, where circles and lines are rendered in an SVG container. The nodes (Alice, Bob, Carol) are connected sequentially, and the layout is computed using d3.forceSimulation, with forceManyBody for repulsion, forceLink for link constraints, and forceCenter to keep the graph centered. As the simulation updates, each tick repositions the SVG circles and lines via the simulation’s tick event, updating their cx/cy and x1/y1/x2/y2 attributes. The code imports these specific D3 modules from the d3 package.

Aug 22, 2023

Loading thumbnail…

Loading Data with React & D3

This visualization demonstrates the simplicity of loading external CSV data with React and D3, displaying summary statistics like file size, row count, and column count. Built with D3 v7 and React 16.9, it uses D3’s `csv` function to fetch and parse a GitHub-hosted CSS color table, then renders the result via a React `useEffect` hook. The message is computed with `d3.csvFormat` and shown in a large `<pre>` element, with a placeholder “Loading…” state before the data arrives.

Aug 22, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 version 7. The visualization fetches a CSV file containing CSS named colors from a GitHub gist, then displays the file size, row count, and column count as large text in the browser. It uses `d3.csv` as the primary method for parsing the data asynchronously and shows the formatted results via `d3.csvFormat`. The code also includes commented-out alternatives using the Fetch API with `async/await` and `d3.csvParse`.

Aug 22, 2023

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across a full-screen SVG canvas. The visualization demonstrates a simple interactive state update in React, where the circle’s position mirrors the cursor’s coordinates in real time. The component uses React’s `useState` hook to track the mouse position and `useCallback` to handle the `onMouseMove` event, updating the circle’s `cx` and `cy` attributes. The SVG rendering is driven entirely by React’s declarative updates, with no additional data source or animation library involved.

Aug 22, 2023

Loading thumbnail…

Let's Make a Face Part VI

A grid of 18 cartoon faces shows random variations in eye size, all rendered with yellow circular heads, black outlines, pink blush, white pupils, and a D3 arc-based mouth. Each face is a React component composed of reusable SVG parts—BackgroundCircle, Eyes, Pupils, Mouth, and Blush—positioned within a FaceContainer using D3's `range` to generate the array. The `d3.arc` API creates the mouth shape, while SVG attributes control dimensions and offsets.

Aug 21, 2023

Loading thumbnail…

Let's Make a Face Part V

A cheerful yellow circle with a black border forms the backdrop for a simple, stylized face. The face includes two eyes, white pupils, pink blush ellipses, and a smiling mouth rendered as an arc. The SVG is created using React components that compose geometric primitives, with the mouth path generated by the D3 arc API. The entire face is centered within a 960 by 500 viewport using an SVG group transform.

Aug 21, 2023

Loading thumbnail…

Let's Make a Face Part IV

This example uses React to render a smiling face as an SVG composed of D3-generated arcs and primitive shapes. It defines a yellow background circle, black eyes, white pupils, pink blush ellipses, and a mouth path created with `d3.arc` using specified inner and outer radii and angles. The code positions elements relative to the center using offsets, with the `arc()` API generating the curved mouth geometry. All shapes are hardcoded with fixed dimensions and coordinates, not driven by external data.

Aug 21, 2023

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a large yellow smiley face rendered in SVG, with two black eyes and a curved mouth, sized to fill the browser window. The face is built using React components, with the mouth path generated by the d3 `arc` function to create the curve. Circles for the head and eyes are drawn using SVG elements, and the entire face is centered using a translation transform. The visualization uses React 16.9, D3 v7, and is fully responsive to the viewport dimensions.

Aug 17, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

A half-finished smiley face renders as three SVG circles: a large yellow head with a black stroke, plus two smaller circles for eyes. The code uses raw SVG elements inside an HTML document, with the head positioned at the center and the eyes offset horizontally. This is a static, unanimated example that demonstrates basic geometric composition and styling with SVG’s `circle` tag, setting `fill`, `stroke`, and `stroke-width` attributes directly. It is part of a tutorial series, with the README noting it is halfway toward a complete face.

Aug 14, 2023

Loading thumbnail…

Smiley Face Part I

A single yellow circle with a black outline forms the head of a smiley face, accompanied by two smaller black circles for eyes, all rendered as static SVG elements. The example demonstrates the initial stage of building a smiley face while learning to integrate React and D3, though the current code uses only plain SVG circles without D3 APIs. The frame is fixed at 960 by 500 pixels, with the head centered and eyes offset horizontally, showing basic coordinate placement in a React-rendered SVG.

Aug 14, 2023