Graph

Vi­su­al­iza­tion

Use the force-di­rected graph to vi­su­alize ar­ti­cles and topics across the Loosed knowl­edge base and blog. Click on ar­ticle ti­tles to nav­i­gate to those spe­cific pages. Hover tags to high­light all ar­ti­cles with that spe­cific tag, or click the tag label to nav­i­gate to a listing of all ar­ti­cles with that tag.

The graph is built with D3.js and uses a force sim­u­la­tion to po­si­tion nodes. Ar­ti­cles are rep­re­sented as cir­cles, with fill (vs. stroke) in­di­cating their type— ei­ther blog post or knowl­edge base. Tags are rep­re­sented as dif­ferent col­ored nodes con­nected to their re­spec­tive ar­ti­cles.

I cre­ated this vi­su­al­iza­tion as a way to ex­plore the re­la­tion­ships be­tween ar­ti­cles and tags, and to pro­vide a more en­gaging way to dis­cover con­tent on the site.

Con­trols

Legend

• Use the legend to toggle vis­i­bility of ar­ti­cles by type, or to toggle tags
• Click the "Reset View" button to dis­able fil­ters and reset the zoom and pan

Pan­ning and Zooming

• Click and drag on the canvas to pan
• Scroll to zoom in and out

In­ter­acting with Nodes

• Click and drag a node to re­arrange the graph
• Hover over a tag node to high­light all ar­ti­cles with that tag
• Click a node label to nav­i­gate to that ar­ticle or tag page

Ideas for Im­prove­ment

• Scale node radii based on likes?