Newton.js Graph

Newton.js Graph was a prototype library to create high-level real-time dashboards for architects and stakeholders to reveal insights about how Conway's Law applies to the organization. The goal was to visualize architectures in large organizations as organisms that live and breathe with deployments, problems, etc.

Preview

Example Code

Source Data

• Nodes: components in your application
• Links: describe relationships (sources and targets) between components

const data = {
    nodes: [
        { id: 'w', label: 'Web Frontend' },
        { id: 'm', label: 'Mobile Device' },
        { id: 'b', label: 'Monolith Backend' },
        { id: 'd', label: 'Database' },
    ],
    links: [
        { source: 'w', target: 'b' },
        { source: 'm', target: 'b' },
        { source: 'b', target: 'd' }
    ]
}

Graph Visualization

const network = new Network(data.nodes, data.links)
const graph = new Graph({
    width: window.innerWidth,
    height: window.innerHeight,
    flow: 'horizontal',
    draggable: true,
    network: network // required
})

graph.init()
graph.on('node:click', (n) => {
    graph.highlightDependencies(n, { arrows: true })
})

Styling

Customize the graph via CSS variables

:root {
    --graph-bg-color: --var(--navy-darker);
    --label-font-family: 'Roboto', sans-serif;
    --label-font-size: 14px;
    --label-text-shadow: 1px 1px 5px rgba(0,0,0,0.2);
    --link-stroke-width: 1px;
    --node-stroke-width: 3px;
}