Skip to content

Instantly share code, notes, and snippets.

@NPashaP
Last active June 22, 2016 04:26
Show Gist options
  • Save NPashaP/59c2c7483fb61070486835d15c807941 to your computer and use it in GitHub Desktop.
Save NPashaP/59c2c7483fb61070486835d15c807941 to your computer and use it in GitHub Desktop.
Gauge I
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.label{
font-size:22.5px;
fill:#ffffff;
text-anchor:middle;
alignment-baseline:middle;
}
.face{
stroke:#c8c8c8;
stroke-width:2;
}
.minorTicks{
stroke-width:2;
stroke:white;
}
.majorTicks{
stroke:white;
stroke-width:3;
}
</style>
<body>
<svg width="900" height="700"></svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="http://vizjs.org/viz.v1.0.0.min.js"></script>
<script>
var svg=d3.select("svg");
var g=svg.append("g").attr("transform","translate(450,350)");
var domain = [0,100];
var gg = viz.gg()
.domain(domain)
.outerRadius(300)
.innerRadius(30)
.value(0.5*(domain[1]+domain[0]))
.duration(1000);
gg.defs(svg);
g.call(gg);
d3.select(self.frameElement).style("height", "700px");
setInterval( function(){gg.setNeedle(domain[0]+Math.random()*(domain[1]-domain[0]));},2000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment