Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.