Volker Mische

@vmx·3 public vizzes

Network graph static

This example shows a static network graph with three nodes and two links. It renders circles and lines as SVG elements inside a 512-pixel square. The layout comes from `d3.forceSimulation`, manually stepping 20 ticks with `simulation.tick()`, and then positioning nodes and edges via a `ticked` function. The code uses `forceLink`, `forceManyBody`, and `forceCenter` to shape the graph, though the commented-out update logic is not active.

Jun 4, 2023

Loading thumbnail…

Network graph

This example demonstrates a dynamic force-directed network graph with three labeled nodes (Alice, Bob, Carol) connected by two links. The simulation rearranges the nodes under the influence of link, many-body repulsion, and centering forces, with updates after two seconds to replace the graph with a new configuration involving four nodes and two different links. Built with D3 v7, the code uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to drive the physics, directly manipulating SVG circles and lines via the declarative `select` and `join` API for rendering.

Apr 15, 2023

Loading thumbnail…

Hash avatar

This example renders a grid of vertical lines as a simple hash-based avatar. Each line’s stroke width and dash pattern are derived from two-bit values in a hard-coded array, using `d3.select` and `d3.selectAll` to append SVG `line` elements. The code uses bitmask operations to map each value to either a thin or bold stroke, and to solid or dashed styles, producing a compact visual identity from numeric data.

Apr 14, 2023