|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
.links line { |
|
stroke: #d8d8d8; |
|
stroke-opacity: 0.6; |
|
stroke-width: 2; |
|
stroke-dasharray: 10, 6; |
|
} |
|
|
|
.nodes circle { |
|
fill: #00ceb9; |
|
stroke: white ; |
|
stroke-width: 5px; |
|
} |
|
|
|
.labels { |
|
font-family: sans-serif; |
|
font-size: 18px; |
|
stroke: #dadada; |
|
opacity: .4; |
|
background: white; |
|
font-weight: bold; |
|
} |
|
|
|
svg { |
|
border: 1px solid #d8d8d8; |
|
} |
|
</style> |
|
|
|
<svg width="1000" height="400"></svg> |
|
|
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
|
|
<script> |
|
const svg = d3.select("svg"); |
|
const width = +svg.attr("width"); |
|
const height = +svg.attr("height"); |
|
const animate = false; |
|
const nodeRadius = 20; |
|
|
|
const data = { |
|
nodes: [ |
|
{ name: 'Remote Services', status: 'up' }, |
|
{ name: 'Recalls & Campaigns', status: 'up' }, |
|
{ name: 'Vehicle Data', status: 'down' }, |
|
{ name: 'Registration', status: 'down' }, |
|
{ name: 'UBI', status: 'down' }, |
|
{ name: 'Provisioning', status: 'up' }, |
|
{ name: 'Dealer Services', status: 'down' }, |
|
{ name: 'Accident Advisor', status: 'up' }, |
|
{ name: 'Notification Services', status: 'up' }, |
|
{ name: 'Can300', status: 'down' } |
|
], |
|
links: [ |
|
{ source: 'Recalls & Campaigns', target: 'Vehicle Data', failures: '10' }, |
|
{ source: 'Remote Services', target: 'Vehicle Data', failures: '1290' }, |
|
{ source: 'Vehicle Data', target: 'Registration', failures: '0' }, |
|
{ source: 'Registration', target: 'UBI', failures: '0' }, |
|
{ source: 'UBI', target: 'Dealer Services', failures: '1.8k' }, |
|
//{ source: 'Registration', target: 'Dealer Services', failures: '0' }, |
|
{ source: 'UBI', target: 'Provisioning', failures: '0' }, |
|
{ source: 'Provisioning', target: 'Dealer Services', failures: '2.1k' }, |
|
{ source: 'Provisioning', target: 'Accident Advisor', failures: '0' }, |
|
//{ source: 'Accident Advisor', target: 'Dealer Services', failures: '0' }, |
|
{ source: 'Accident Advisor', target: 'Notification Services', failures: '0' }, |
|
{ source: 'Accident Advisor', target: 'Can300', failures: '0' } |
|
] |
|
}; |
|
|
|
|
|
// Set up the simulation |
|
const strengthX = -0.007; |
|
const strengthY = 0.016; |
|
const charge = -304; |
|
const dist = 142; |
|
const lineStrength = 1.5; |
|
|
|
const simulation = d3.forceSimulation().nodes(data.nodes); |
|
const forceX = d3.forceX(width/2).strength(strengthX); |
|
const forceY = d3.forceY(height/2).strength(strengthY); |
|
const chargeForce = d3.forceManyBody().strength(charge); |
|
const centerForce = d3.forceCenter(width / 2, height / 2); |
|
const linkForce = d3.forceLink(data.links).id(d => d.name).distance(dist).strength(lineStrength); |
|
|
|
// Add positioning forces to the simulation |
|
simulation |
|
.force('xAxis', forceX) |
|
.force('yAxis', forceY) |
|
.force("charge_force", chargeForce) |
|
.force("center_force", centerForce) |
|
.force("links", linkForce); |
|
|
|
//draw lines for the links |
|
const link = svg.append("g") |
|
.attr("class", "links") |
|
.selectAll("line") |
|
.data(data.links) |
|
.enter().append("line"); |
|
|
|
//draw circles for the nodes |
|
|
|
const node = svg.append("g") |
|
.attr("class", "nodes") |
|
.selectAll("g") |
|
.data(data.nodes) |
|
.enter().append("g"); |
|
|
|
const circles = node |
|
.append("circle") |
|
.attr("r", nodeRadius); |
|
|
|
const labels = node.append("text") |
|
.text(d => d.name) |
|
.attr("class", "labels") |
|
.attr('x', d => 0 - nodeRadius - d.name.length/2) |
|
.attr('y', 0 - nodeRadius - 5); |
|
|
|
if (!animate) { |
|
simulation.stop(); |
|
const min = Math.log(simulation.alphaMin()); |
|
const decay = Math.log(1 - simulation.alphaDecay()); |
|
const numTicks = Math.ceil(min / decay); |
|
|
|
// Run the simulation enough times to position nodes |
|
for (let i = 0; i < numTicks; ++i) { |
|
simulation.tick(); |
|
}; |
|
// Position the nodes |
|
tickActions() |
|
} else { |
|
simulation.on("tick", tickActions ); |
|
} |
|
|
|
function tickActions() { |
|
// constrains the nodes to be within a box |
|
node.attr("transform", d => { |
|
const x = Math.max(nodeRadius, Math.min(width, d.x)); |
|
const y = Math.max(nodeRadius, Math.min(height, d.y)); |
|
return "translate(" + x + "," + y + ")"; |
|
}); |
|
|
|
link |
|
.attr("x1", d => d.source.x) |
|
.attr("y1", d => d.source.y) |
|
.attr("x2", d => d.target.x) |
|
.attr("y2", d => d.target.y); |
|
} |
|
|
|
|
|
</script> |
