Skip to content

Instantly share code, notes, and snippets.

@lsbardel

lsbardel/.block

Created March 2, 2017 18:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lsbardel/82774fd40b28cb8ccb1e7117d2437606 to your computer and use it in GitHub Desktop.
Save lsbardel/82774fd40b28cb8ccb1e7117d2437606 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Graph
Raw
.block
license: bsd-3-clause
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Graph</title>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://giottojs.org/d3-canvas-transition/0.3.5/d3-canvas-transition.js"></script>
<style>
#panel {
background-color: rgba(245,245,245,0.8);
padding: 5px;
position: absolute;
display: block;
}
</style>
</head>
<body>
<div id="example" style="max-width: 960px"></div>
<script src="./script.js"></script>
</body>
Raw
script.js
(function () {
var radius = 20,
strength = 700,
example = d3.select("#example"),
width = d3.getSize(example.style('width')),
height = Math.min(500, width);
d3.json('./status-graph.json', function (e, data) {
draw(data);
});
function draw (data) {
var alinks = {},
dataLinks = [];
data.links.forEach(function (link) {
var n1 = link[0],
n2 = link[1];
if (n1 > n2) {
n2 = n1;
n1 = link[1];
}
var key = n1 + n2;
if (alinks[key])
alinks[key].directed += 1;
else {
alinks[key] = {
source: link[0],
target: link[1],
directed: 1
};
dataLinks.push(alinks[key]);
}
});
var links = d3
.forceLink(dataLinks)
.strength(function (link) {
return 0.1*link.directed;
})
.id(function (d) {
return d.name;
});
simulation = d3.forceSimulation(data.nodes.map(function (value) {
return {name: value};
}))
.force("charge", d3.forceManyBody().strength(-strength))
.force("link", links)
.force("x", d3.forceX())
.force("y", d3.forceY())
.on("tick", ticked);
var paper = example
.append('canvas')
.attr('width', width)
.attr('height', height)
.canvas(true);
paper
.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', width)
.attr('height', height)
.style("stroke-width", 0)
.style('fill', '#023858')
.style('fill-opacity', 0.5);
paper = paper.append('g')
.attr('transform', 'translate(' + width/2 +', ' + height/2 +')');
paper
.selectAll('.links')
.data(links.links())
.enter()
.append('line')
.classed('links', true)
.style('stroke-width',function (link) {
return link.directed;
})
.style('stroke', function (link) {
return link.directed == 2 ? '#045a8d' : '#a6bddb';
});
paper
.selectAll('.nodes')
.data(simulation.nodes())
.enter()
.append('circle')
.classed('nodes', true)
.style('fill', '#023858')
.style('stroke', 'none')
.attr('r', radius)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
paper
.selectAll('.text')
.data(simulation.nodes())
.enter()
.append('text')
.classed('text', true)
.style('fill', '#ffffe5')
.style('font-size', '10px')
.style('text-anchor', 'middle')
.text(function (d) {
return d.name;
});
function dragstarted() {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d3.event.subject.fx = d3.event.subject.x;
d3.event.subject.fy = d3.event.subject.y;
}
function dragged() {
d3.event.subject.fx = d3.event.x;
d3.event.subject.fy = d3.event.y;
}
function dragended() {
if (!d3.event.active) simulation.alphaTarget(0);
d3.event.subject.fx = null;
d3.event.subject.fy = null;
}
function ticked() {
paper.selectAll('.nodes')
.attr('cx', function (d) {
return d.x;
})
.attr('cy', function (d) {
return d.y;
});
paper.selectAll('.text')
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
paper.selectAll('.links')
.attr('x1', function (d) {
return d.source.x;
})
.attr('y1', function (d) {
return d.source.y;
})
.attr('x2', function (d) {
return d.target.x;
})
.attr('y2', function (d) {
return d.target.y;
});
}
}
}());
Raw
status-graph.json
{
"nodes": [
"On-board Talent",
"Unserviceable US Location",
"Closed Loan",
"WL801 (Man. Review)",
"Terms Expired",
"Started",
"Pending Funds",
"Terms Proposed",
"On-boarding Call",
"Ready for Funds",
"Terms Accepted (Deprecated)",
"Calculating Terms",
"Running Credit",
"Canceled",
"Sign Note",
"WL802 (Auto Review)",
"Declined",
"Active Loan",
"Identity Verification(Deprecated)",
"Fraud Loan",
"Document Upload",
"Non-US Application",
"Forced to Prosper"
],
"links": [
[
"On-board Talent",
"Fraud Loan"
],
[
"On-board Talent",
"Terms Accepted (Deprecated)"
],
[
"On-board Talent",
"Declined"
],
[
"On-board Talent",
"Terms Expired"
],
[
"On-board Talent",
"Document Upload"
],
[
"On-board Talent",
"On-boarding Call"
],
[
"On-board Talent",
"Canceled"
],
[
"Unserviceable US Location",
"Declined"
],
[
"Unserviceable US Location",
"Running Credit"
],
[
"Unserviceable US Location",
"Started"
],
[
"Unserviceable US Location",
"Canceled"
],
[
"Closed Loan",
"Declined"
],
[
"Closed Loan",
"Active Loan"
],
[
"Closed Loan",
"Canceled"
],
[
"WL801 (Man. Review)",
"Declined"
],
[
"WL801 (Man. Review)",
"Calculating Terms"
],
[
"WL801 (Man. Review)",
"Fraud Loan"
],
[
"WL801 (Man. Review)",
"Closed Loan"
],
[
"WL801 (Man. Review)",
"Canceled"
],
[
"Terms Expired",
"Declined"
],
[
"Terms Expired",
"Fraud Loan"
],
[
"Terms Expired",
"Terms Proposed"
],
[
"Terms Expired",
"Canceled"
],
[
"Started",
"Unserviceable US Location"
],
[
"Started",
"Fraud Loan"
],
[
"Started",
"Declined"
],
[
"Started",
"Running Credit"
],
[
"Started",
"Non-US Application"
],
[
"Started",
"Forced to Prosper"
],
[
"Started",
"Canceled"
],
[
"Pending Funds",
"Declined"
],
[
"Pending Funds",
"Active Loan"
],
[
"Pending Funds",
"Fraud Loan"
],
[
"Pending Funds",
"Ready for Funds"
],
[
"Pending Funds",
"Canceled"
],
[
"Terms Proposed",
"Calculating Terms"
],
[
"Terms Proposed",
"Fraud Loan"
],
[
"Terms Proposed",
"Declined"
],
[
"Terms Proposed",
"WL801 (Man. Review)"
],
[
"Terms Proposed",
"Terms Expired"
],
[
"Terms Proposed",
"Document Upload"
],
[
"Terms Proposed",
"Canceled"
],
[
"On-boarding Call",
"On-board Talent"
],
[
"On-boarding Call",
"Sign Note"
],
[
"On-boarding Call",
"Fraud Loan"
],
[
"On-boarding Call",
"Declined"
],
[
"On-boarding Call",
"Terms Expired"
],
[
"On-boarding Call",
"Canceled"
],
[
"Ready for Funds",
"Sign Note"
],
[
"Ready for Funds",
"Fraud Loan"
],
[
"Ready for Funds",
"Declined"
],
[
"Ready for Funds",
"Pending Funds"
],
[
"Ready for Funds",
"On-boarding Call"
],
[
"Ready for Funds",
"Canceled"
],
[
"Calculating Terms",
"Running Credit"
],
[
"Calculating Terms",
"Declined"
],
[
"Calculating Terms",
"Fraud Loan"
],
[
"Calculating Terms",
"Terms Proposed"
],
[
"Calculating Terms",
"Canceled"
],
[
"Running Credit",
"Fraud Loan"
],
[
"Running Credit",
"WL802 (Auto Review)"
],
[
"Running Credit",
"Declined"
],
[
"Running Credit",
"Calculating Terms"
],
[
"Running Credit",
"Started"
],
[
"Running Credit",
"Canceled"
],
[
"Canceled",
"WL801 (Man. Review)"
],
[
"Canceled",
"Started"
],
[
"Sign Note",
"Fraud Loan"
],
[
"Sign Note",
"Declined"
],
[
"Sign Note",
"Terms Expired"
],
[
"Sign Note",
"Canceled"
],
[
"Sign Note",
"On-boarding Call"
],
[
"Sign Note",
"Ready for Funds"
],
[
"WL802 (Auto Review)",
"Fraud Loan"
],
[
"WL802 (Auto Review)",
"Closed Loan"
],
[
"WL802 (Auto Review)",
"Declined"
],
[
"WL802 (Auto Review)",
"Calculating Terms"
],
[
"WL802 (Auto Review)",
"Running Credit"
],
[
"WL802 (Auto Review)",
"Canceled"
],
[
"Declined",
"WL801 (Man. Review)"
],
[
"Declined",
"Fraud Loan"
],
[
"Declined",
"Started"
],
[
"Active Loan",
"Pending Funds"
],
[
"Active Loan",
"Declined"
],
[
"Active Loan",
"Fraud Loan"
],
[
"Active Loan",
"Closed Loan"
],
[
"Active Loan",
"Canceled"
],
[
"Fraud Loan",
"Started"
],
[
"Document Upload",
"On-board Talent"
],
[
"Document Upload",
"Fraud Loan"
],
[
"Document Upload",
"Terms Accepted (Deprecated)"
],
[
"Document Upload",
"Declined"
],
[
"Document Upload",
"Terms Expired"
],
[
"Document Upload",
"Identity Verification(Deprecated)"
],
[
"Document Upload",
"Terms Proposed"
],
[
"Document Upload",
"Canceled"
],
[
"Non-US Application",
"Declined"
],
[
"Non-US Application",
"Running Credit"
],
[
"Non-US Application",
"Started"
],
[
"Non-US Application",
"Canceled"
],
[
"Forced to Prosper",
"Declined"
],
[
"Forced to Prosper",
"Fraud Loan"
],
[
"Forced to Prosper",
"Started"
],
[
"Forced to Prosper",
"Canceled"
]
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment