Using a force layout to encode sepial width and height as, uh, width and height.
Rectangle force from: /emeeks/b3851789fcc3bf0c65ea9a34c3dca7bb
See also: /mbostock/4055889
xxxxxxxxxx
<meta charset='utf-8'>
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot {
stroke: #000;
}
div.tooltip {
top: -1000px;
position: absolute;
padding: 10px;
background: rgba(255, 255, 255, .90);
border: 1px solid lightgray;
pointer-events: none;
}
.tooltip-hidden{
opacity: 0;
}
</style>
<body>
<div class='tooltip'></div>
<script src='d3v4+jetpack.js'></script>
<script src='d3-force.js'></script>
<script src='script.js'></script>