Skip to content

Instantly share code, notes, and snippets.

@romsson

romsson/.block

Last active February 16, 2018 13:04
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 romsson/a124bb38a245d709f044d90e2c530e4c to your computer and use it in GitHub Desktop.
Save romsson/a124bb38a245d709f044d90e2c530e4c to your computer and use it in GitHub Desktop.
Download ZIP
scatterplot d3 using canvas
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<canvas width="960" height="500"></canvas>
<body>
<script>
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d");
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = canvas.width - margin.left - margin.right,
height = canvas.height - margin.top - margin.bottom;
var data = d3.range(100).map(function(d, i) {
var p = {};
p.x = Math.random() * width;
p.y = Math.random() * height;
p.__visible = true;
p.__highlighted = true;
return p;
})
function draw(data) {
context.clearRect(0, 0, canvas.width, canvas.height);
data.forEach(function(d) {
context.arc(d.x, d.y, 1, 0, 2 * Math.PI);
context.strokeStyle = "rgba(0, 0, 0, 0.1)";
context.stroke();
});
};
d3.select("canvas").on("mouseenter", function() {
// pos X Y
})
draw(data)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment