Skip to content

Instantly share code, notes, and snippets.

@mbostock
Created November 11, 2010 17:55
Show Gist options
  • Save mbostock/672899 to your computer and use it in GitHub Desktop.
Save mbostock/672899 to your computer and use it in GitHub Desktop.
Fast Pointing
<html>
<head>
<title>Pointing</title>
<script type="text/javascript" src="http://github.com/mbostock/protovis/raw/v3.3.1/protovis.js"></script>
<style type="text/css">
#fig {
width: 450px;
height: 425px;
}
body {
margin: 0;
display: table;
height: 100%;
width: 100%;
font: 14px/134% Helvetica Neue, sans-serif;
}
#center {
display: table-cell;
vertical-align: middle;
}
#fig {
position: relative;
margin: auto;
}
</style>
</head>
<body>
<script type="text/javascript+protovis">
var data = pv.range(100).map(function(x) {
return {x: x, y: Math.random(), z: Math.pow(10, 2 * Math.random())};
});
/* Sizing and scales. */
var w = 400,
h = 400,
x = pv.Scale.linear(0, 99).range(0, w),
y = pv.Scale.linear(0, 1).range(0, h),
c = pv.Scale.linear(0, 1).range("orange", "brown");
/* The root panel. */
var vis = new pv.Panel()
.width(w)
.height(h)
.bottom(20)
.left(20)
.right(30)
.top(5)
.events("all")
.event("mousemove", pv.Behavior.point());
/* Y-axis and ticks. */
vis.add(pv.Rule)
.data(y.ticks())
.bottom(y)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("left").add(pv.Label)
.visible(function(d) d > 0 && d < 1)
.text(y.tickFormat);
/* X-axis and ticks. */
vis.add(pv.Rule)
.data(x.ticks())
.left(x)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("bottom").add(pv.Label)
.visible(function(d) d > 0 && d < 100)
.text(x.tickFormat);
/* The dot plot! */
vis.add(pv.Panel)
.data(data)
.add(pv.Panel) // singleton panel!
.add(pv.Dot)
.def("active", -1)
.left(function(d) x(d.x + Math.random()))
.bottom(function(d) y(d.y))
.strokeStyle(function(d) c(d.y))
.fillStyle(function() this.strokeStyle().alpha(.2))
.event("point", function() this.active(0).parent)
.event("unpoint", function() this.active(-1).parent)
.anchor("right").add(pv.Label)
.visible(function() this.anchorTarget().active() == 0)
.text(function(d) d.y.toFixed(2));
vis.render();
</script>
</body>
</html>
@Kreozot
Copy link

Kreozot commented Aug 18, 2015

Maybe the file should have html extension? Because now the example is not working

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment