Old school D3 from simpler times

All examples By author By category About

jermspeaks

Full window Github gist

Random Bouncy Circles

ランダムバブルチャート

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

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>

xxxxxxxxxx
 
<!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>
​
    

https://d3js.org/d3.v4.min.js