Skip to content

Instantly share code, notes, and snippets.

Created October 1, 2016 16:29
Show Gist options
  • Save anonymous/0e9f67146d6010348bfcf521abda3b2f to your computer and use it in GitHub Desktop.
Save anonymous/0e9f67146d6010348bfcf521abda3b2f to your computer and use it in GitHub Desktop.
Random Bouncy Circles
license: mit

ランダムバブルチャート

更新する度に表示が変わるバブルチャート

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

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>バブルチャート</title>
<style>
body {
background: white;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
// バブルチャート用のデータをランダムに生成
var dataset = [];
var random100 = d3.randomUniform(0, 100);
for(i=0; i<20; i++){
var _x = random100();
var _y = random100();
var _r = random100();
dataset.push({x:_x, y:_y, r:_r});
}
// 色の配列(20個)
var color = d3.scaleOrdinal(d3.schemeCategory20);
// svg領域の幅と高さとパディング
var w = 960;
var h = 500;
var p = 50;
// svg領域を生成
// var svg = d3.select("body")
// .append("svg")
// .attr({
// width: w,
// height: h
// });
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
// .append('g')
// .attr('transform', 'translate(100,76)');
// x軸のスケール設定
var xScale = d3.scaleLinear()
.domain([0, d3.max(dataset.map(function(d){ return d.x; }))])
.range([p, w-p])
// y軸のスケール設定
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset.map(function(d){ return d.y; }))])
.range([p, h-p])
// 円のスケール設定
var rScale = d3.scaleLinear()
.domain([0, d3.max(dataset.map(function(d){ return d.r; }))])
.range([0, 100]) // 適当に
// 円の描画
svg.selectAll("circle")
.data(dataset)
.enter().append("circle")
.attr('cx', function(d) { return xScale(d.x)})
.attr('cy', function(d) { return yScale(d.y)})
.attr('fill', function(d,i){return color(i)})
.attr('r', 10);
// d3.select("svg")
// .data(dataset)
// .enter()
// .append("circle")
// .attr({
// cx: function(d){ console.log(d);return xScale(d.x); },
// cy: function(d){ return yScale(d.y); },
// fill: function(d,i){return color(i);},
// r: 0
// })
// .transition()
// .duration(1000)
// .ease("bounce")
// .attr({
// r: function(d){ return rScale(d.r); },
// })
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment