Skip to content

Instantly share code, notes, and snippets.

@danielcompton

danielcompton/.block

Last active November 14, 2016 10:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save danielcompton/2189f9571e306f3084e5c2a913002eaf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save danielcompton/2189f9571e306f3084e5c2a913002eaf to your computer and use it in GitHub Desktop.
Download ZIP
re-frame trace
Raw
.block
license: mit
border: yes
scrolling: no
Raw
abra.json
{
"nodes": [
{
"id": "ra1",
"title": "app-db",
"group": 1,
"r": 20,
"fx": 15,
"fy": 200
},
{
"id": "rx40",
"title": ":sorted-todos",
"group": 2,
"r": 10,
"data": {
"id": 131,
"operation": "sorted-todos",
"type": "create",
"tags": {
"query-v": [
"sorted-todos"
],
"cached?": false,
"reaction": "rx40"
},
"child-of": 130,
"start": 83603.75,
"duration": 0.08500000000640284,
"end": 83603.845
}
},
{
"id": "rx41",
"title": ":todos",
"group": 2,
"r": 10,
"data": {
"id": 130,
"operation": "todos",
"type": "create",
"tags": {
"query-v": [
"todos"
],
"cached?": false,
"reaction": "rx41"
},
"child-of": 129,
"start": 83603.7,
"duration": 0.9750000000058208,
"end": 83604.70000000001
}
},
{
"id": "rx44",
"title": ":showing",
"group": 2,
"r": 10,
"data": {
"id": 140,
"operation": "showing",
"type": "create",
"tags": {
"query-v": [
"showing"
],
"cached?": false,
"reaction": "rx44"
},
"child-of": 138,
"start": 83609.67000000001,
"duration": 0.13999999999941792,
"end": 83609.825
}
},
{
"id": "rx45",
"title": ":visible-todos",
"group": 2,
"r": 10,
"data": {
"id": 138,
"operation": "visible-todos",
"type": "create",
"tags": {
"query-v": [
"visible-todos"
],
"cached?": false,
"reaction": "rx45"
},
"child-of": 137,
"start": 83609.41000000002,
"duration": 0.5199999999895226,
"end": 83609.94
}
},
{
"id": "rx46",
"title": ":all-complete?",
"group": 2,
"r": 10,
"data": {
"id": 141,
"operation": "all-complete?",
"type": "create",
"tags": {
"query-v": [
"all-complete?"
],
"cached?": false,
"reaction": "rx46"
},
"child-of": 137,
"start": 83609.98500000002,
"duration": 0.27499999999417923,
"end": 83610.29500000001
}
},
{
"id": "rx49",
"title": ":footer-counts",
"group": 2,
"r": 10,
"data": {
"id": 150,
"operation": "footer-counts",
"type": "create",
"tags": {
"query-v": [
"footer-counts"
],
"cached?": false,
"reaction": "rx49"
},
"child-of": 149,
"start": 83616.12500000001,
"duration": 0.14999999999417923,
"end": 83616.29000000001
}
},
{
"id": "rx50",
"title": ":completed-count",
"group": 2,
"r": 10,
"data": {
"id": 154,
"operation": "completed-count",
"type": "create",
"tags": {
"query-v": [
"completed-count"
],
"cached?": false,
"reaction": "rx50"
},
"child-of": 152,
"start": 83616.565,
"duration": 0.1900000000023283,
"end": 83616.765
}
},
{
"id": "rx39",
"title": "rx39 todomvc.core.wrapper",
"group": 3,
"r": 5,
"data": {
"id": 128,
"operation": "todomvc.core.wrapper",
"type": "render",
"tags": {
"component-path": "todomvc.core.wrapper",
"reaction": "rx39",
"input-signals": [
"ra54"
]
},
"child-of": null,
"start": 83602.46500000001,
"duration": 0.7299999999959255,
"end": 83603.205
},
"fx": 250
},
{
"id": "rx42",
"title": "rx42 todomvc.views.todo_app",
"group": 3,
"r": 5,
"data": {
"id": 129,
"operation": "todomvc.views.todo_app",
"type": "render",
"tags": {
"component-path": "todomvc.core.wrapper > todomvc.views.todo_app",
"reaction": "rx42",
"input-signals": [
"rx41"
]
},
"child-of": null,
"start": 83603.66500000001,
"duration": 1.8300000000017462,
"end": 83605.51000000001
},
"fx": 250
},
{
"id": "rx43",
"title": "rx43 todomvc.views.todo_input",
"group": 3,
"r": 5,
"data": {
"id": 135,
"operation": "todomvc.views.todo_input",
"type": "render",
"tags": {
"component-path": "todomvc.core.wrapper > todomvc.views.todo_app > todomvc.views.task_entry > todomvc.views.todo_input",
"reaction": "rx43",
"input-signals": [
"ra55"
]
},
"child-of": null,
"start": 83606.57,
"duration": 0.8849999999947613,
"end": 83607.47
},
"fx": 250
},
{
"id": "rx47",
"title": "rx47 todomvc.views.task_list",
"group": 3,
"r": 5,
"data": {
"id": 137,
"operation": "todomvc.views.task_list",
"type": "render",
"tags": {
"component-path": "todomvc.core.wrapper > todomvc.views.todo_app > todomvc.views.task_list",
"reaction": "rx47",
"input-signals": [
"rx46",
"rx45"
]
},
"child-of": null,
"start": 83609.32500000001,
"duration": 2.6199999999953434,
"end": 83611.96500000001
},
"fx": 250
},
{
"id": "rx48",
"title": "rx48 todomvc.views.todo_item",
"group": 3,
"r": 5,
"data": {
"id": 147,
"operation": "todomvc.views.todo_item",
"type": "render",
"tags": {
"component-path": "todomvc.core.wrapper > todomvc.views.todo_app > todomvc.views.task_list > todomvc.views.todo_item",
"reaction": "rx48",
"input-signals": [
"ra56",
"ra56"
]
},
"child-of": null,
"start": 83613.98000000001,
"duration": 0.4999999999854481,
"end": 83614.49500000001
},
"fx": 250
},
{
"id": "rx51",
"title": "rx51 todomvc.views.footer_controls",
"group": 3,
"r": 5,
"data": {
"id": 149,
"operation": "todomvc.views.footer_controls",
"type": "render",
"tags": {
"component-path": "todomvc.core.wrapper > todomvc.views.todo_app > todomvc.views.footer_controls",
"reaction": "rx51",
"input-signals": [
"rx49",
"rx44",
"rx44",
"rx44"
]
},
"child-of": null,
"start": 83616.07500000001,
"duration": 1.319999999992433,
"end": 83617.405
},
"fx": 250
}
],
"links": [
{
"source": "rx41",
"target": "rx46",
"value": 1,
"id": "rx41|rx46"
},
{
"source": "ra1",
"target": "rx40",
"value": 1,
"id": "ra1|rx40"
},
{
"source": "rx50",
"target": "rx49",
"value": 1,
"id": "rx50|rx49"
},
{
"source": "rx44",
"target": "rx45",
"value": 1,
"id": "rx44|rx45"
},
{
"source": "rx41",
"target": "rx50",
"value": 1,
"id": "rx41|rx50"
},
{
"source": "rx40",
"target": "rx41",
"value": 1,
"id": "rx40|rx41"
},
{
"source": "rx41",
"target": "rx49",
"value": 1,
"id": "rx41|rx49"
},
{
"source": "rx41",
"target": "rx45",
"value": 1,
"id": "rx41|rx45"
},
{
"source": "ra1",
"target": "rx44",
"value": 1,
"id": "ra1|rx44"
},
{
"source": "rx41",
"target": "rx42",
"value": 0.5,
"id": "rx41|rx42"
},
{
"source": "rx46",
"target": "rx47",
"value": 0.5,
"id": "rx46|rx47"
},
{
"source": "rx45",
"target": "rx47",
"value": 0.5,
"id": "rx45|rx47"
},
{
"source": "rx49",
"target": "rx51",
"value": 0.5,
"id": "rx49|rx51"
},
{
"source": "rx44",
"target": "rx51",
"value": 0.5,
"id": "rx44|rx51"
}
]
}
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin: 5;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var width = 500
var height = 500
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px solid black")
var node, link
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id((d) => d.id).distance(() => 200))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
function once() {
svg.append("g").attr("class", "links")
svg.append("g").attr("class", "nodes")
}
once()
function handleGraph(error, graph) {
if (error) throw error;
console.log("Handling graph")
link = svg.select("g.links")
.selectAll("line")
.data(graph.links, (d) => d.id)
var enterLink = link.enter().append("line")
.attr("stroke-width", function(d) {
return Math.sqrt(d.value);
});
link = enterLink.merge(link)
node = svg.select("g.nodes")
.selectAll(".node")
var enterNode = node.data(graph.nodes, (d) => d.id)
.enter().append("g")
.attr("class", "node")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
node = enterNode.merge(node)
var circle = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) {
return color(d.group);
})
var text = node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text((d) => d.title);
var oldNodes = simulation.nodes()
console.log(oldNodes)
// if (oldNodes.length !== 0) {
// graph.nodes = oldNodes
// }
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
link
.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;
});
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
}
d3.json("abra.json", handleGraph);
window.setTimeout(() => d3.json("abra.json", handleGraph), 3000)
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment