mundya/display.js

## 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("");
  });
};

## 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>

## 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 */
	// 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("");
	});
	};
	<!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>
	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 /