Hilje/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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>
	<!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>