更新する度に表示が変わるバブルチャート
forked from hunzy‘s block: ランダムバブルチャート
forked from anonymous‘s block: ランダムバブルチャート
forked from anonymous‘s block: ランダムバブルチャート
forked from anonymous‘s block: ランダムバブルチャート
forked from anonymous‘s block: ランダムバブルチャート
forked from anonymous‘s block: ランダムバブルチャート
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
forked from anonymous‘s block: Random Bouncy Circles
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>バブルチャート</title>
<style>
body {
background: #000;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
// Generate random numbers
var randomNormal5sigma2 = d3.randomNormal(5, 2);
var random0to100 = d3.randomUniform(0, 100);
var dataset = d3.range(200).map(i => {
return {
x: random0to100(),
y: random0to100(),
r: Math.abs(randomNormal5sigma2())
}
});
var color = d3.scaleOrdinal(d3.schemeCategory20);
// svg attributes
var w = 1050;
var h = 1500;
var p = 20;
// Create SVG elements
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
var xScale = d3.scaleLinear()
.domain([0, d3.max(dataset.map(d => d.x))])
.range([p, w-p])
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset.map(d => d.y))])
.range([p, h-p])
var rScale = d3.scaleLinear()
.domain([0, d3.max(dataset.map(d => d.r))])
.range([10, 40])
// Transition
var t = d3.transition()
.duration(4000)
.ease(d3.easeLinear);
svg.selectAll("circle")
.data(dataset)
.enter().append("circle")
.attr('cx', d => xScale(d.x))
.attr('cy', d => yScale(d.y))
.attr('fill', (d,i) => color(i))
.attr('r', 0);
d3.selectAll("circle").transition(t)
.attr('r', d => rScale(d.r));
</script>
</body>
</html>