nicosommi/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var w = 960, h = 500, r = Math.min(w, h) / 2, ir = r - 100;
    var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d; });

    var ruleta = ["ciencia", "historia", "deportes", "arte", "pop", "corona", "geografia"];

    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body")
    	.append("svg")
      .attr("width", w)
      .attr("height", h)

    var slice = (((360/ruleta.length)/360) * (2 * Math.PI));
    var initial = -Math.PI+slice;
    var pointerInit = -(Math.PI)-((45/360) * (2*Math.PI));
    var pointerEnd = -(Math.PI)+((45/360) * (2*Math.PI));

    var arc = d3.svg.arc()
    	.innerRadius(ir)
      .outerRadius(r)
    	.cornerRadius(10)
      .startAngle((d, i) => initial + (slice * (i+1)))
      .endAngle((d, i) => (initial + (slice * (i+1)) + slice));

    var pointerArc = d3.svg.arc()
    	.innerRadius(0)
      .outerRadius(r/2)
      .startAngle(pointerInit)
      .endAngle(pointerEnd);

    var color = d3.scale.ordinal()
    .range(["#24C36B", "#F8DF53", "#F99123", "#DB232F", "#F14CAA", "#8D40B2", "#1E71CB", "black"]);

    svg.selectAll(".arc")
      .data(ruleta)
    	.enter()
    	.append("g")
        .attr({
          "transform": "translate(" + w/2 + "," + h/2 + ")",
          "class": "arc"
        })
      .append("path")
      	.attr("d", arc)
      	.style("fill", color);

    svg.append("g")
      .attr({
        "transform": "translate(" + w/2 + "," + (h/2 - (140 + 30)) + ")",
        "class": "pointerArc"
      })
    .append("path")
      .attr({
        d: pointerArc,
        fill: "#DADADA",
      	stroke: "white",
      	"stroke-width": 5
      });

    svg.append("circle")
        .attr({
          cx: w/2,
          cy: h/2,
          r: ir,
          fill: "#DADADA",
      		stroke: "white",
      		"stroke-width": 5
        });

    svg.append("text")
      .text("GIRAR")
      .attr({
      	"font-family": "sans-serif",
      	"font-size": 46,
      	"font-weight": 900,
        x: w/2 - 80,
        y: (h/2),
        fill: "#616161"
      });
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="//d3js.org/d3.v3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	var w = 960, h = 500, r = Math.min(w, h) / 2, ir = r - 100;
	var pie = d3.layout.pie()
	.sort(null)
	.value(function(d) { return d; });

	var ruleta = ["ciencia", "historia", "deportes", "arte", "pop", "corona", "geografia"];

	// Feel free to change or delete any of the code you see in this editor!
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h)

	var slice = (((360/ruleta.length)/360) * (2 * Math.PI));
	var initial = -Math.PI+slice;
	var pointerInit = -(Math.PI)-((45/360) * (2*Math.PI));
	var pointerEnd = -(Math.PI)+((45/360) * (2*Math.PI));

	var arc = d3.svg.arc()
	.innerRadius(ir)
	.outerRadius(r)
	.cornerRadius(10)
	.startAngle((d, i) => initial + (slice * (i+1)))
	.endAngle((d, i) => (initial + (slice * (i+1)) + slice));

	var pointerArc = d3.svg.arc()
	.innerRadius(0)
	.outerRadius(r/2)
	.startAngle(pointerInit)
	.endAngle(pointerEnd);

	var color = d3.scale.ordinal()
	.range(["#24C36B", "#F8DF53", "#F99123", "#DB232F", "#F14CAA", "#8D40B2", "#1E71CB", "black"]);

	svg.selectAll(".arc")
	.data(ruleta)
	.enter()
	.append("g")
	.attr({
	"transform": "translate(" + w/2 + "," + h/2 + ")",
	"class": "arc"
	})
	.append("path")
	.attr("d", arc)
	.style("fill", color);

	svg.append("g")
	.attr({
	"transform": "translate(" + w/2 + "," + (h/2 - (140 + 30)) + ")",
	"class": "pointerArc"
	})
	.append("path")
	.attr({
	d: pointerArc,
	fill: "#DADADA",
	stroke: "white",
	"stroke-width": 5
	});

	svg.append("circle")
	.attr({
	cx: w/2,
	cy: h/2,
	r: ir,
	fill: "#DADADA",
	stroke: "white",
	"stroke-width": 5
	});

	svg.append("text")
	.text("GIRAR")
	.attr({
	"font-family": "sans-serif",
	"font-size": 46,
	"font-weight": 900,
	x: w/2 - 80,
	y: (h/2),
	fill: "#616161"
	});
	</script>
	</body>