Skip to main content
SimilarExport ZIP
100%

Links from CCVI talk at re:publica 2025

✓ Published0🌍 Public
MMoritzStefaner
Last edited May 26, 2025
Created on May 12, 2025

This network visualization maps the interconnections between resources cited in a talk on the Climate Change and Violent Conflict Index (CCVI), using a force-directed layout. The graph clusters nodes by domain, showing how references from a gist, an Observable Notebook, and a GitHub repository relate to each other. The rendering relies on the D3.js library, specifically `d3.forceSimulation` for physics-based node placement and `d3.geoPath` for any geographic projections. Node and link styling are handled via SVG paths, with color encoding to distinguish the three primary data sources.

AI-generated description

Similar vizzes

Loading thumbnail…

Links from my talk at SwiftSummit

This visualization maps a network of hyperlinks from a talk, revealing the connections between various web resources. The graph layout is computed using a force-directed algorithm, likely `d3.forceSimulation`, which positions nodes and edges to show clusters of related content. Each node represents a distinct URL, such as a blog post, a GitHub repository, a Stack Overflow question, or a gist, with edges indicating direct references between them. The data is sourced from the `gistfile1.txt` file, which lists these links, and the rendering demonstrates how disparate technical topics, including Silverlight, ReactiveExtensions, and Objective-C syntax, are interconnected through the author's curated set of references.

CColinEberhardt
69% match
Loading thumbnail…

Gist 484101

This visualization shows an interactive network of interconnected nodes, with each node representing a person and links showing connections between them. It reveals the structure of social ties, likely from a GitHub collaboration graph, by grouping related clusters. The rendering uses a canvas-based `d3.forceSimulation` with custom collision and link forces to position nodes, while a custom `d3.geoPath`-style projection maps node positions onto a projected sphere. The code also employs Canvas `getImageData` to detect node boundaries for hover interactions, and uses `transition.attrTween` for smooth link animations. The underlying data is loaded from a Gist, and the visualization runs entirely client-side without external data files.

DDylanFM
67% match
Loading thumbnail…

Force-Directed Graph V2

This force-directed graph maps a network of arts organizations and their related projects, with nodes grouped into four color-coded clusters and connected by weighted links. The visualization uses D3’s `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while a drag interaction lets users move nodes and restart the simulation. Node sizes vary by hierarchy level, and labels appear directly on nodes as SVG text. Data is generated programmatically in `data.js`, with link distances and node styling defined per connection.

Sschneich
66% match
Loading thumbnail…

Gist 05ff2219cb2cc463ad1612e8a501c400

This visualization uses a force-directed simulation to show a network of interconnected nodes, with each node represented as a colored circle and links drawn between related points. The code relies on `d3.forceSimulation` and `d3.forceLink` to compute the layout, while `d3.drag` enables user interaction to move nodes. A canvas element renders the graph, with the simulation updating positions each tick. The data appears to be a small custom-generated dataset of nodes and edges, with node colors mapping to distinct groups, and the visualization does not include any external data source or geographic rendering.

MMistyBlunch
66% match
Loading thumbnail…

Gist f867f21cc0dbe672f0d10ab163876c38

This example shows a force-directed network visualization built with D3.js, rendering connections between GitHub repository nodes. It uses d3.forceSimulation with charge, link, and center forces to position the nodes, while links are drawn as SVG paths. The visualization reads repository and relationship data from a gist, with each node colored and labeled based on its source repository. Hovering highlights connected links and neighbor nodes, with a zoom and pan interface via d3.zoom for exploring the graph.

MMistyBlunch
65% match
Loading thumbnail…

Gist a7d5ced57721ac3f7075bbbbaee32a49

This interactive visualization uses a force-directed simulation to animate a network of nodes and links, showing how connected elements cluster and repel. The code relies on D3’s `d3.forceSimulation` with custom forces for charge, centering, and collision, while link positions update via the simulation’s tick handler. Node rendering uses SVG circles, and the visualization reads its data from an embedded array of node and link objects, with no external data source. The interaction includes drag-and-drop support via D3’s drag behavior, letting viewers move nodes while the simulation continuously recalculates positions.

11wheel
65% match
Loading thumbnail…

Gist f52706b726949be61205fcf8133a66e7

This example visualizes a dynamic network of interconnected nodes, showing how forces shape a cluster’s layout over time. It uses a force-directed simulation via `d3.forceSimulation` with charge, link, and collision forces to position nodes, while links are drawn as straight lines. The rendering relies on SVG paths updated each tick, and the code includes a custom drag interaction using `d3.drag` to let viewers manually reposition nodes. The underlying data structure is a small JavaScript array of objects representing nodes and links, likely sourced from a static inline dataset. The visualization emphasizes real-time interaction rather than geographic or spatial data, focusing on emergent clustering behavior.

11wheel
65% match
Loading thumbnail…

Untitled

An interactive network graph displays funding relationships between development organizations as nodes and edges, with edge color indicating upstream or downstream flow. The visualization uses D3.js v4’s force-directed simulation (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCenter`) to position nodes, while SVG paths render edges with curved markers. Node dragging via `d3.drag` and zooming via `d3.zoom` allow exploration of the 200+ linkage data loaded from `links.csv`.

Bbglasgo
65% match