Skip to content

Instantly share code, notes, and snippets.

@tgerard

tgerard/index.html

Last active May 25, 2017 05:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tgerard/d8711d6582e082e0f3818a03879f896e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tgerard/d8711d6582e082e0f3818a03879f896e to your computer and use it in GitHub Desktop.
Download ZIP
Lock vis for StackOverflow
Raw
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Q-Lock</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href='lock.css' rel='stylesheet'>
<meta name='viewport' content='initial-scale=1'>
</head>
<body>
<div class='wrapper'>
<main id='content'>
<section id='vis'>
<figure id='lock'><svg id='lockVis'></svg></figure>
</section>
</main><!-- content -->
</div><!-- wrapper -->
</body>
<script src='locks.js'></script>
</html>
Raw
lock.css
html {
margin: 0;
padding: 0;
}
.wrapper {
max-width:978px;
margin: 0 auto;
height:100%;
position: relative;
}
main {
margin: 1em 1.84%;
}
p {
font-size: 1rem;
}
#vis {
margin: 2em 0;
}
#lock {
width: 76.43%;
border-top: solid 2px #1e4163;
margin-right: 4.45%;
float: left;
}
.bayNo {
text-anchor: middle;
fill: #1e4163;
}
.EMPTY {
fill: #d6e2d2;
}
.ONE {
fill: #c5c164;
}
.TWO {
fill: #8b9224;
}
.THREE {
fill: #5f6212;
}
.FOUR {
fill: #4d4800;
}
Raw
lockData.json
{
"weir": 5,
"targetFlowRate": 102.1,
"flowRate": 100.32,
"upperPool": 48.43,
"lowerPool": 45.62,
"turbulanceProfile": [
0,
0
],
"committed": "2017-05-15T12:29:29",
"logPositions": 17,
"lock": [
["EMPTY", "EMPTY", "EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "EMPTY", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"],
["EMPTY", "EMPTY", "ONE", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR", "FOUR"]
],
"sluiceWidths": [5.458, 4.900, 4.896, 4.898, 4.849, 4.645, 4.958, 4.959, 5.365, 5.810, 5.810, 5.795, 5.796, 5.793, 5.802, 5.775, 5.804],
"sillFactor": [0, 0, 0, 0, 0, 0, 0, 0, 0, 1.15, 1.15, 1.15, 1.15, 1.15, 1.15, 1.15, 1.15]
}
Raw
locks.js
var margin = {top: 40, right: 0, bottom: 0, left: 0},
w = parseInt(d3.select('#lock').style('width')) - margin.left - margin.right,
h = parseInt(d3.select('#lock').style('height')) - margin.top - margin.bottom;
var x = d3.scaleLinear().range([0, w]);
var logHeight = 26;
var parseDate = d3.timeParse('%Y-%m-%dT%H:%M:%S');
var displayDate = d3.timeFormat('%a %d %b');
var displayTime = d3.timeFormat('%-I%p');
var svg = d3.select('#lockVis')
.attr('width', w + margin.left + margin.right)
.attr('height', h + margin.top + margin.bottom).append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
d3.json('lockData.json', function(error, lockData) {
h = lockData.logPositions * (logHeight + 4);
d3.select('#lockVis').attr('height', h + margin.top + margin.bottom);
var totalWidth = d3.sum(lockData.sluiceWidths) * 1.1;
x.domain([0, totalWidth]);
/* Make an array of the cumulative widths of the bays */
var lefts = [0];
var rectStart = 0;
for ( var n = 0; n < lockData.sluiceWidths.length - 1 ; n = n + 1 ) {
rectStart = rectStart + lockData.sluiceWidths[n];
lefts.push(rectStart);
};
/* Make an array of the cumulative centres of the bays */
var centres = [lockData.sluiceWidths[0]/2];
var numPos = lockData.sluiceWidths[0]/2;
for ( var k = 1; k < lockData.sluiceWidths.length; k = k + 1 ) {
numPos = numPos + lockData.sluiceWidths[k];
centres.push(numPos);
};
var rectLeft = d3.scaleOrdinal().range(lefts);
var rectCentre = d3.scaleOrdinal().range(centres);
var rectWidth = d3.scaleOrdinal().range(lockData.sluiceWidths);
var labels = d3.select('#lockVis')
.selectAll('text')
.data(lockData.sluiceWidths)
.enter()
.append('text')
.attr('class', 'bayNo')
.attr('x', (function (d, i) { return x(rectCentre(i)) * 1.1; }))
.attr('y', 20)
.text (function (d, i) { return i + 1; });
svg.selectAll('.bay')
.data(lockData.lock)
.enter()
.append('g')
.attr('class', 'bay')
.attr('width', (function (d, i) { return x(rectWidth(i)); }))
.attr('transform', (function (d, i) { return 'translate(' + x(rectLeft(i)) * 1.1 + ',0)'; }))
.each(logjam);
function logjam(d) {
d3.select(this)
.selectAll('rect')
.data(d)
.enter()
.append('rect')
.attr('class', (function (d) { return 'log ' + d; }))
.attr('width', (function (d, i, j) { return x(rectWidth(j)); }))
.attr('height', 20)
.attr('x', 0)
.attr('y', (function (d, i) { return i * 24; }))
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment