tkcj0912

@tkcj0912·9 public vizzes

FMV Pt 1

This example shows a small force-directed network of three nodes and two directed links, with each node labeled by its name and rendered as a circle. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to compute positions, and d3 selection methods to create SVG circles, text, and lines. Data comes from a static JavaScript module defining nodes and links, and updates occur on each simulation tick, adjusting coordinates of all elements.

Jun 23, 2023

Loading thumbnail…

Diagram

This example shows a small directed graph with three labeled nodes and two links, laid out using a force-directed simulation. The nodes are rendered as circles with text labels, and the links are drawn as straight lines. The code uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to compute positions, and updates the SVG elements on each tick event. The data comes from a local JavaScript module with node and link arrays, and the visualization is rendered as SVG using React and D3 v6.

Jun 23, 2023

Loading thumbnail…

Experimentation 2

This example shows a minimal force-directed graph with three nodes and two links, rendered as circles and lines in an SVG container. The d3.forceSimulation API applies forces including forceManyBody, forceLink, and forceCenter to position the nodes, while a tick event updates the circle and line coordinates. The visualization uses D3 v6 within a React framework and draws directly to SVG elements with hardcoded data for users Alice, Bob, and Carol.

Jun 23, 2023

Loading thumbnail…

Experimentation 1

This example shows a simple interactive network graph built with D3.js, where nodes (circles) and links (lines) are generated from sample data and arranged using the d3.forceSimulation API. Users can drag nodes to reposition them, with the simulation updating link positions on each tick. The graph is rendered as SVG in a full-screen container, and the code includes a minimal data structure for adding nodes and connections, as well as a color palette from colors.js for potential styling. The visualization is a basic template for experimenting with force-directed layouts.

Jun 23, 2023

Loading thumbnail…

Force-Directed Graph

This example shows a force-directed graph of a small network with three nodes representing locations in Missouri and Illinois, connected by undirected links. The visualization uses D3’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute a layout, rendering nodes as steelblue circles and links as black lines in SVG. Data comes from a local `data.json` file fetched via `fetch()`, and the simulation updates node and link positions through a `"tick"` event. The page is built as a single HTML document with embedded CSS and JavaScript, run within the React starter environment on VizHub.

Jun 23, 2023

Loading thumbnail…

Force-Directed Graph

This is a force-directed graph visualization rendered as an SVG, showing three nodes and three links in a small network. The node and link positions are determined by a physical simulation where nodes repel each other and links pull connected nodes together. The code uses `d3.forceSimulation` to combine `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces, updating SVG circle and line elements on each simulation tick. The data comes from a local JSON file with node IDs and link source/target references.

Jun 23, 2023

Loading thumbnail…

Project Fork

This example shows a simple force-directed network graph with three nodes connected by directed links, rendered in an SVG container using React. The code uses D3 v6’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position circular nodes, while lines represent links. On simulation end, node sizes increase by 3 pixels per incoming link count. The included `miserables.json` suggests a potential dataset, though the sample uses hardcoded nodes.

Jun 23, 2023

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed network diagram maps connections among Kenneth Rainin Foundation partners, with colored nodes and links grouping related organizations. The visualization uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, and renders SVG circles and lines with drag interaction enabled. Data is generated procedurally in `data.js`, with node sizes and link distances varying by hierarchy level, and colors defined in a separate `colors.js` module from paletton.com. The network highlights clusters like Arts Web, Social Impact Commons, and other foundation grantee communities.

Jun 23, 2023

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed network graph maps connections between arts organizations funded by the Kenneth Rainin Foundation, using nodes sized by hierarchy level and colored by cluster. The visualization renders as SVG circles and lines via d3.forceSimulation, forceManyBody, forceLink, and drag interactions, with data generated programmatically in data.js.

Jun 23, 2023