D3 Examples - fresh block D3 intro

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