Skip to content

Instantly share code, notes, and snippets.

@metormote

metormote/index.html

Last active December 22, 2015 02:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save metormote/6404701 to your computer and use it in GitHub Desktop.
Save metormote/6404701 to your computer and use it in GitHub Desktop.
Download ZIP
Linear Gauge
Raw
index.html
<!DOCTYPE html>
<head>
<title>Equalizer</title>
<script type="text/javascript" src="http://iop.io/js/vendor/d3.v3.min.js"></script>
<script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerEvents/pointerevents.js"></script>
<script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerGestures/pointergestures.js"></script>
<script type="text/javascript" src="http://iop.io/js/iopctrl.js"></script>
<style>
body {
font: 16px arial;
background-color: #515151;
}
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.lineargauge {
font-size: 12px;
}
.lineargauge .axis path,
.lineargauge .axis line {
fill: none;
stroke: #ddd;
}
.lineargauge .lane, .lineargauge .cursor {
opacity: 0;
}
.lineargauge .tick {
fill: #ddd;
}
.lineargauge .major {
stroke-width: 2;
}
.lineargauge .ok {
fill: green;
opacity: 0.8;
}
.lineargauge .warning {
fill: yellow;
opacity: 0.8;
}
.lineargauge .fault {
fill: red;
opacity: 0.8;
}
</style>
</head>
<body>
<div>
<span id="lineargauge" touch-action="none"></span>
</div>
<script>
var svg = d3.select("#lineargauge")
.append("svg:svg")
.attr("width", 500)
.attr("height", 200);
var slider = iopctrl.slider()
.width(50)
.events(false)
.bands([
{"domain": [90, 100], "span":[0.05, 0.12] , "class": "fault"},
{"domain": [75, 90], "span": [0.05, 0.12] , "class": "warning"},
{"domain": [0, 75], "span": [0.05, 0.12] , "class": "ok"}
])
.indicator(iopctrl.defaultSliderIndicator)
.ease("elastic");
slider.axis().orient("top")
.tickSubdivide(4)
.tickSize(10, 8, 10)
.scale(d3.scale.linear()
.domain([0,100])
.range([0, 400]));
svg.append("g")
.attr("transform", "translate(0, 20)")
.attr("class", "lineargauge")
.call(slider);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment