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

<body>
  <script>
    let data = [{
    value: 30,
    key: "Alta"
  }, {
    value: 37,
    key: "Media"
  }, {
    value: 15,
    key: "Moderada"
  }, {
    value: 8,
    key: "Baja"
  },
  {
    value: 13,
    key: "Muy baja"
  },
]

    var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = 500 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom,
    radius = width/2;

var color = d3.scaleOrdinal()
    .range(["#B4DC70", "#FEFE2B", "#FE8E2B", "#FE2B2B", "#2B5EFE"]);

// arc generator
var arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 70);

// generate pie chart and donut chart
var pie = d3.pie()
    .sort(null)
    .value(function(d) { return d.value; });

// define the svg for pie chart
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


    var amenazasCount = d3.nest()
        .key(function(d) { return d.TEXTO_AMENAZA; })
        .rollup(function(v) { return v.length; })
        .entries(data);

    amenazasCount.forEach(function(d) {
        d.value = +d.value;
    });

    var g = svg.selectAll(".arc")
        .data(pie(amenazasCount))
        .enter().append("g")
        .attr("class", "arc");

    // append path
    g.append("path")
        .attr("d", arc)
        .style("fill", function(d) { return color(d.data.key); });

    var legendG = svg.selectAll(".legend")
        .data(pie(amenazasCount))
        .enter().append("g")
        .attr("transform", function(d,i){
            return "translate(" + (width - 110) + "," + (i * 15 + 20) + ")";
      })
      .attr("class", "legend");

    legendG.append("rect")
      .attr("width", 10)
      .attr("height", 10)
      .attr("fill",  function(d) { return color(d.data.key); });

        legendG.append("text")
      .text(function(d){
        return d.value + "  " + d.data.key;
      })
      .style("font-size", 12)
      .attr("y", 10)
      .attr("x", 11);


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

	<body>
	<script>
	let data = [{
	value: 30,
	key: "Alta"
	}, {
	value: 37,
	key: "Media"
	}, {
	value: 15,
	key: "Moderada"
	}, {
	value: 8,
	key: "Baja"
	},
	{
	value: 13,
	key: "Muy baja"
	},
	]

	var margin = {top: 20, right: 20, bottom: 20, left: 20},
	width = 500 - margin.right - margin.left,
	height = 500 - margin.top - margin.bottom,
	radius = width/2;

	var color = d3.scaleOrdinal()
	.range(["#B4DC70", "#FEFE2B", "#FE8E2B", "#FE2B2B", "#2B5EFE"]);

	// arc generator
	var arc = d3.arc()
	.outerRadius(radius - 10)
	.innerRadius(radius - 70);

	// generate pie chart and donut chart
	var pie = d3.pie()
	.sort(null)
	.value(function(d) { return d.value; });

	// define the svg for pie chart
	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");



	var amenazasCount = d3.nest()
	.key(function(d) { return d.TEXTO_AMENAZA; })
	.rollup(function(v) { return v.length; })
	.entries(data);

	amenazasCount.forEach(function(d) {
	d.value = +d.value;
	});

	var g = svg.selectAll(".arc")
	.data(pie(amenazasCount))
	.enter().append("g")
	.attr("class", "arc");

	// append path
	g.append("path")
	.attr("d", arc)
	.style("fill", function(d) { return color(d.data.key); });

	var legendG = svg.selectAll(".legend")
	.data(pie(amenazasCount))
	.enter().append("g")
	.attr("transform", function(d,i){
	return "translate(" + (width - 110) + "," + (i * 15 + 20) + ")";
	})
	.attr("class", "legend");

	legendG.append("rect")
	.attr("width", 10)
	.attr("height", 10)
	.attr("fill", function(d) { return color(d.data.key); });

	legendG.append("text")
	.text(function(d){
	return d.value + " " + d.data.key;
	})
	.style("font-size", 12)
	.attr("y", 10)
	.attr("x", 11);



	</script>
	</body>