Old school D3 from simpler times

All examples By author By category About

filipdeblois

Full window Github gist

fresh block D3 intro

Built with blockbuilder.org

<!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; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor
    var width = 960;
    var height = 500;
    var radius = 200;
    
    var s = d3.scaleSqrt()
    	.range([0, 250])
    
    var r = d3.scaleLinear()
    	.domain([0, 1])
    	.range([10, 400])
    
    var c = d3.scaleLinear()
    	.domain([0, 1])
    	.range(["pink", "purple"])
    //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(10))
    	.enter().append("circle")
    	.attr("class", "ring")
    	.attr("r", function(d) { return d * 30})
    	.style("stroke", "gray")
			.style("stroke-width", 0.2)
    	.style("fill", "none")//d3.hsl(-33, -70, -150)
    
    var data = d3.range(40)
    	.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([4, 8, 15, 16, 23, 42])
      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(900)
      	.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();

//.data([9,2,3,4,5])
   // Cirkel maken
    /*var circle = svg.append ("circle")
     .attr("cx", 300)
    .attr("cy", 300)
    .attr("r", 60)
    .style("fill", "red")
    .style("stroke", "brown")
    .style("stroke-width", 10)
    
    var rect = svg.append ("rect")
    .attr("x", 100)
    .attr("y", 100)
    .attr("rx", 10)
    .attr("width", 40)
    .attr("height", 80)

var line = svg.append("line")
    .attr("x1", 200)
    .attr("y1", 10)
    .attr("x2", 100)
    .attr("y2", 40)
    .style("stroke", "blue")*/
    
    /*svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
      */

</script>
</body>

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