I just pushed some sample code up to Github that describes how to draw a Wardley Map using D3. I want to emphasize that this is sample code and not a library. You’ll need to copy, paste, and hack.
Let me get you started.
First off, the relevant code is in src/ts/app.ts and src/html/index.html. Everything else is plumbing.
This code uses D3’s force directed layout with a couple customizations.
Nodes that appear first in the node list are closer to the top. The layout is tree-like
The ‘maturity’ property on each node corresponds to the maturity area on the map. This draws the node in the appropriate direction (aka focus).
I’ve set the
id property on
forceLink to a function that returns the
id property of the node.
This allows me to use names rather than ordinals.
R is the Ramda library.
Next, I use SVG to draw the nodes and links.
This is pretty vanilla D3 for nodes, lines, and text.
ticked function is where the magic happens.
It drives the layout.
The chain of commands on the
link object moves source nodes up and target nodes down.
This gives us the tree-like behavior.
It then draws a line between them.
I use a translate directive on the node position it.
focus functions move the node horizontally into the appropriate column.
Gravity moves a node incrementally in the direction of a focus. In this case, focus is a position in a column.
I chose not to put the focus on the middle of each column because it let to too much clumping of the visualization. Instead, the outer columns have their focus on their outer edges.
For completeness, these are the helper functions rerenced above.
Did this article help?
blog comments powered by Disqus