svg · state

Graph Visualizer

A tiny but complete example of rendering data structures interactively. A graph is stored as an adjacency list (each node maps to its neighbours), drawn with SVG, and made interactive with a single piece of state: which node is selected. Click a node below to light up its neighbours.

Live demo

Click any node to select it.

selectedneighbourother

Click any circle to select it; its direct neighbours turn blue and the connecting edges highlight. Click reset to clear.

How it works

Adjacency list

The whole graph is just an object mapping each node id to an array of the nodes it connects to. Looking up a node’s neighbours is an O(1) object access — no scanning required. A separate positions map says where to draw each node, keeping structure separate from layout.

Derived state, not stored state

We store only one thing: selected. The set of highlighted neighbours and every node’s colour are derived from it during render. There is no second “highlighted” array to keep in sync — a key habit for bug-free UI: store the minimum, compute the rest.

Rendering with SVG

Edges are <line> elements and nodes are <circle> elements, mapped straight from the data. Each undirected edge is drawn once (by only drawing when a < b), and an onClick on each circle updates the selection, which re-renders the colours.

TSX

const graph = {            // adjacency list: node -> neighbours

  1: [2, 4], 2: [1, 3],

  3: [2, 4], 4: [1, 3],

};

const positions = {        // where to draw each node

  1: { x: 90,  y: 80  }, 2: { x: 290, y: 80  },

  3: { x: 290, y: 240 }, 4: { x: 90,  y: 240 },

};

function GraphVisualizer() {

  const [selected, setSelected] = useState(null);

  const neighbors = selected != null ? graph[selected] : [];

  return (

    <svg viewBox="0 0 380 320">

      {/* edges */}

      {Object.entries(graph).map(([node, nbrs]) =>

        nbrs.map((nbr) => Number(node) < nbr && (

          <line key={node + '-' + nbr}

                x1={positions[node].x} y1={positions[node].y}

                x2={positions[nbr].x}  y2={positions[nbr].y} />

))

)}

      {/* nodes — fill depends on selection (derived, not stored) */}

      {Object.keys(graph).map((node) => {

        const id = Number(node);

        const fill = selected === id ? 'signal'

                   : neighbors.includes(id) ? 'trace'

                   : 'paper';

        return (

          <circle key={id} cx={positions[id].x} cy={positions[id].y} r={26}

                  fill={fill} onClick={() => setSelected(id)} />

);

})}

    </svg>

);