A better performing version of this block
Built for Learning D3
A better performing version of this block
Built for Learning D3
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Bubbles</title> | |
<style> | |
canvas { | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="chart"></div> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
(function() { | |
var width = window.innerWidth * 2, | |
height = window.innerHeight * 2; | |
var x = d3.scaleLinear() | |
.domain([0, 100]) | |
.range([0, width]); | |
var y = d3.scaleLinear() | |
.domain([0, 100]) | |
.range([0, height]); | |
var colors = ["rgba(69, 166, 255, 0.5)", "rgba(255, 49, 57, 0.5)", "rgba(236, 240, 241, 0.5)"]; | |
var colorScale = d3.scaleQuantize().domain([0,1]).range(colors); | |
var data = d3.range(40).map(function() { | |
var dataObject = { | |
x: Math.random() * 100, | |
y: Math.random() * 100, | |
yv: Math.random() * 0.4, | |
size: (Math.random() * 25) + 5, | |
color: colorScale(Math.random()) | |
}; | |
return dataObject; | |
}); | |
var canvas = d3.select("#chart").append("canvas") | |
.attr("width", width) | |
.attr("height", height) | |
.attr("id", "canvas"); | |
// node returns first dom element in a selection | |
var context = canvas.node().getContext("2d"); | |
d3.select(window).on('resize', function(){ | |
var htmlCanvas = document.getElementById('canvas'); | |
var context = htmlCanvas.getContext('2d'); | |
width = window.innerWidth * 2; | |
htmlCanvas.width = width; | |
height = window.innerHeight * 2; | |
htmlCanvas.height = height; | |
x = d3.scaleLinear() | |
.domain([0, 100]) | |
.range([0, width]); | |
y = d3.scaleLinear() | |
.domain([0, 100]) | |
.range([0, height]); | |
}); | |
// the timer method calls a function repeatedly | |
d3.timer(function() { | |
context.clearRect(0, 0, width, height); | |
data.forEach(function(d) { | |
d.y -= d.yv; | |
// Recycle old circles | |
if(d.y < (0 - d.size) ) { | |
d.y = 100 + d.size; | |
} | |
context.fillStyle = d.color; | |
context.beginPath(); | |
context.arc(x(d.x), y(d.y), d.size, 0, 2 * Math.PI); | |
context.fill(); | |
}); | |
}); | |
})(); | |
</script> | |
</body> | |
</html> |