Skip to content

Instantly share code, notes, and snippets.

@mundya

mundya/display.js

Last active August 29, 2015 14:23
Show Gist options
  • Save mundya/b55ae48a7e4aca437eb8 to your computer and use it in GitHub Desktop.
Save mundya/b55ae48a7e4aca437eb8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
display.js
// Generated by CoffeeScript 1.9.3
var _chip_xy, draw_machine;
_chip_xy = function(chip_spacing, machine_height, x, y) {
y = machine_height - y - 1;
x *= 1.0 + chip_spacing;
y *= 1.0 + chip_spacing;
x += y * Math.sin(Math.PI / 6.0);
y *= Math.cos(Math.PI / 6.0);
return [x, y];
};
draw_machine = function(data) {
var machine, machine_drag;
machine = d3.select("svg#view g#machine");
machine.translate_x = 0;
machine.translate_y = 0;
machine_drag = d3.behavior.drag();
machine_drag.on("drag", function() {
machine.translate_x += d3.event.dx;
machine.translate_y += d3.event.dy;
return machine.attr("transform", "translate(" + machine.translate_x + ", " + machine.translate_y + ")");
});
d3.select("svg#view").call(machine_drag);
d3.select("svg#view g#machine").selectAll("g").data(data.chips).enter().append("g").attr("class", "chip").attr("transform", function(d) {
var ref, x, y;
ref = _chip_xy(80, data.height, d["x"], d["y"]), x = ref[0], y = ref[1];
return "translate(" + (x + data.width * 50) + ", " + (y + 50) + ")";
}).append("use").attr("xlink:href", "#chip-path");
d3.select("svg#view g#machine").selectAll("g").selectAll("circle").data(function(d) {
var i, ref, results;
return (function() {
results = [];
for (var i = 0, ref = d.cores; 0 <= ref ? i < ref : i > ref; 0 <= ref ? i++ : i--){ results.push(i); }
return results;
}).apply(this);
}).enter().append("circle").attr("class", "core").attr("r", "3").attr("cx", function(d) {
return (d % 5) * 8 - 16;
}).attr("cy", function(d) {
return Math.floor(d / 5) * 8 - 16;
});
return d3.selectAll("svg#view g#machine g.chip").on("mouseover", function(d) {
return d3.select("div#tooltip").style("top", (d3.event.pageY + 10) + "px").style("left", (d3.event.pageX + 10) + "px").style({
"opacity": 0.9
}).html("(" + d.x + ", " + d.y + ")");
}).on("mouseout", function() {
return d3.select("div#tooltip").style({
"opacity": 0.0
}).html("");
});
};
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Visualising a SpiNNaker Machine in SVG</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"
charset="utf-8"></script>
<script src="./display.js"></script>
<link rel="stylesheet" href="./style.css" type="text/css" />
</head>
<body>
<svg id="view" width="100%" height="100%">
<defs>
<path id="chip-path" d="m0,-33.5 26,15 0,30 -26,15 -26,-15 0,-30z" />
</defs>
<g id="machine" transform="translate(0, 0)">
</g>
</svg>
<div id="info" width="25%">
<table class="status" cellspacing="0">
<tr>
<th>#</th>
<th>Application</th>
<th>State</th>
</tr>
<tr>
<td>0</td>
<td>SARK</td>
<td>RUN</td>
</tr>
<tr class="error">
<td>1</td>
<td>nengo_ensemble</td>
<td>RUNTIME EXCEPTION</td>
</tr>
<tr>
<td>2</td>
<td>nengo_ensemble</td>
<td>RUN</td>
</tr>
<tr>
<td>3</td>
<td>nengo_ensemble</td>
<td>RUN</td>
</tr>
<tr>
<td>4</td>
<td>nengo_ensemble</td>
<td>RUN</td>
</tr>
</table>
</div>
<div id="tooltip">
</div>
<script type="text/javascript">
// JSON encoded sample Spin3 machine
var data = {
"width": 3,
"height": 3,
"chips": [
{"x": 0, "y": 0, "cores": 18},
{"x": 0, "y": 1, "cores": 17},
{"x": 1, "y": 0, "cores": 16},
{"x": 1, "y": 1, "cores": 18},
{"x": 2, "y": 1, "cores": 18},
{"x": 1, "y": 2, "cores": 18},
{"x": 2, "y": 2, "cores": 18},
]
};
draw_machine(data);
</script>
</body>
</html>
Raw
style.css
html {
padding: 0;
margin: 0; }
body {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
font-family: Source Sans Pro, sans;
font-size: 9pt;
color: #2e3436; }
svg#view {
padding: 0;
margin: 0;
position: absolute; }
svg#view g.chip use {
stroke: #d3d7cf;
stroke-width: 2;
fill: #eeeeec;
transition: stroke .15s ease-in-out;
transition: stroke-width .15s ease-in-out; }
svg#view g.chip circle.core {
fill: #babdb6;
opacity: 0.0;
transition: opacity .25s ease-in-out; }
svg#view g.chip:hover use {
stroke: #babdb6;
stroke-width: 3; }
svg#view g.chip:hover circle.core {
opacity: 1.0; }
div#info {
position: absolute;
top: 0;
left: 75%;
width: 25%;
padding: 0em 1em;
margin: 0em -2.5em;
height: 100%;
border: none;
border-left: .5em solid #729fcf;
background: white;
background: rgba(255, 255, 255, 0.8);
z-index: 99; }
div#tooltip {
position: absolute;
z-index: 100;
background: linear-gradient(#fce94f, #edd400);
border: 1px solid #c4a000;
padding: .25em;
border-radius: 2px;
opacity: 0; }
table.status {
width: 100%;
border-top: .3em solid #eeeeec;
border-bottom: .3em solid #eeeeec; }
table.status tr th {
border: 0;
border-bottom: .1em solid #eeeeec; }
table.status tr td {
font-family: Source Code Pro, sans; }
table.status tr.error {
color: white;
background: #cc0000; }
/*# sourceMappingURL=style.css.map */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment