Old school D3 from simpler times

All examples By author By category About

jeroen369

Full window Github gist

Intro D3 Workshop

Built with blockbuilder.org

forked from janwillemtulp's block: Intro D3 Workshop

<!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; }
    
    circle {
      fill: red;
    }
  </style>
</head>

<body>
  <script>
    
    var width = 960;
    var height = 500;
    var radius = 200;
    
    var s = d3.scaleSqrt()
    	.range([0, 250])
    
    var r = d3.scaleLinear()
    	.domain([0, 1])
    	.range([50, 300])
    
    var c = d3.scaleLinear()
    	.domain([0, 1])
    	.range(["steelblue", "red"])

var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    
    var center = svg.append("g")
    	.attr("transform", "translate(" + width / 2 + ", " + height / 2 + ")")
    
    center.selectAll(".ring")
    	.data(d3.range(5))
    	.enter().append("circle")
    	.attr("class", "ring")
    	.attr("r", function(d) { return d * 60})
    	.style("stroke", "gray")
    	.style("fill", "none")
    
    var data = d3.range(50)
    	.map(function(d) {
        return {
        	count: Math.round(Math.random() * 10)
      	};
			})
    
    s.domain([0, d3.max(data, function(d) { return d.count })])
    
    function dist(d) {
      return 0.1 * Math.abs(d.count - data[clickedIndex].count);
    }
    
    var clickedIndex = 0;
    
    function update() {
      data = data.map(function(d, i) {
        if (i == clickedIndex) {
          d.count++;
        }
        return d;
      })
    }
    
    function render() {
      var circle = center.selectAll(".item")
        .data(data)

var circleEnter = circle.enter().append("circle")
      	.attr("class", "item")
        .on("click", function(d, i) {
          clickedIndex = i;
          
          update();
          render();
        })
      
      circleEnter.merge(circle).transition()
      	.duration(800)
      	.attr("r", function(d) { return 10 + d.count })
      	.attr("cx", function(d, i) { 
        	if (i == clickedIndex) {
            return 0;
          }
        	return r(dist(d)) * Math.cos((i / data.length) * Math.PI * 2)
      	})
        .attr("cy", function(d, i) {
        	if (i == clickedIndex) {
            return 0;
          }
        	return r(dist(d)) * Math.sin((i / data.length) * Math.PI * 2)
      	})
      .style("fill", function(d) { return c(dist(d))})
    }
    
    update();
    render();

</script>
</body>

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