sierra073/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <style>
  .text-large {
    font: 27px Lato;
    position: relative;
    font-weight: 600;
    text-align: center;
  }
  .text-small {
    font: 17px Lato;
    position: relative;
    font-weight: 400;
    text-align: center;
  }
  #donut-chart {
    float:left;
    margin: auto;
  }
  </style>
    <script src="//d3js.org/d3.v4.min.js"></script>
</head>

<script type="text/javascript">

var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto

var arc = d3.arc()
    .innerRadius(100)
    .outerRadius(80)
    .startAngle(0);

// Returns a tween for a transition’s "d" attribute, transitioning any selected
// arcs from their current angle to the specified new angle.
function arcTween(newAngle) {
    return function(d) {

    var interpolate = d3.interpolate(d.endAngle, newAngle);

    return function(t) {
      d.endAngle = interpolate(t);
      return arc(d);
    }
  }
}

var data = {
    num_schools_with_fiber: 407,
    num_schools_need_fiber: 109
}


// Get the SVG container, and apply a transform such that the origin is the
// center of the canvas. This way, we don’t need to position arcs individually.
function draw(selector, num, fcolor) {
    var svg = d3.select("#" + selector)
              .append('svg')
              .attr("width", 200)
              .attr("height", 200)
            console.log(svg);
        g = svg.append("g").attr("transform", "translate(" + 200 / 2 + "," + 200 / 2 + ")");

    // Add the background arc, from 0 to 100% (tau).
    var background = g.append("path")
        .datum({endAngle: tau})
        .style("fill", "#686868")
        .attr("d", arc);

    // Add the foreground arc
    var foreground = g.append("path")
        .datum({endAngle: 0* tau})
        .style("fill", fcolor)
        .attr("d", arc);

    foreground.transition()
          .duration(750)
          .attrTween("d", arcTween((1 - (num)) * tau)); // pct_rural
}
</script>

<body>


<div id="donut-chart">
    <script type="text/javascript">
  draw('donut-chart', (data.num_schools_need_fiber/data.num_schools_with_fiber), "#e16b29");
  </script>
</div>

<script type="text/javascript">
  var bleft = d3.select("#donut-chart");
  var svgleft = bleft.select("svg");
  var wleft = svgleft.style("width").replace("px", "");

  svgleft.append("text")
     .attr("class","text-large")
     .style("text-anchor", "middle")
     .attr("x",wleft/2)
     .attr("y",wleft/3)
     .attr("fill", "#686868")
     .text(function(d) { return data.num_schools_need_fiber; });
   svgleft.append("text")
     .attr("class","text-small")
     .style("text-anchor", "middle")
     .attr("x",wleft/2)
     .attr("y",wleft/3 + (wleft/3)*.45)
     .attr("fill", "#686868")
     .text("schools still");
   svgleft.append("text")
     .attr("class","text-small")
     .style("text-anchor", "middle")
     .attr("x",wleft/2)
     .attr("y",wleft/3 + (wleft/3)*.8)
     .attr("fill", "#686868")
     .text("need scalable");
   svgleft.append("text")
     .attr("class","text-small")
     .style("text-anchor", "middle")
     .attr("x",wleft/2)
     .attr("y",wleft/3 + (wleft/2)*.76)
     .attr("fill", "#686868")
     .text("broadband");
 </script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<style>
	.text-large {
	font: 27px Lato;
	position: relative;
	font-weight: 600;
	text-align: center;
	}
	.text-small {
	font: 17px Lato;
	position: relative;
	font-weight: 400;
	text-align: center;
	}
	#donut-chart {
	float:left;
	margin: auto;
	}
	</style>
	<script src="//d3js.org/d3.v4.min.js"></script>
	</head>

	<script type="text/javascript">

	var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto

	var arc = d3.arc()
	.innerRadius(100)
	.outerRadius(80)
	.startAngle(0);

	// Returns a tween for a transition’s "d" attribute, transitioning any selected
	// arcs from their current angle to the specified new angle.
	function arcTween(newAngle) {
	return function(d) {

	var interpolate = d3.interpolate(d.endAngle, newAngle);

	return function(t) {
	d.endAngle = interpolate(t);
	return arc(d);
	}
	}
	}

	var data = {
	num_schools_with_fiber: 407,
	num_schools_need_fiber: 109
	}


	// Get the SVG container, and apply a transform such that the origin is the
	// center of the canvas. This way, we don’t need to position arcs individually.
	function draw(selector, num, fcolor) {
	var svg = d3.select("#" + selector)
	.append('svg')
	.attr("width", 200)
	.attr("height", 200)
	console.log(svg);
	g = svg.append("g").attr("transform", "translate(" + 200 / 2 + "," + 200 / 2 + ")");

	// Add the background arc, from 0 to 100% (tau).
	var background = g.append("path")
	.datum({endAngle: tau})
	.style("fill", "#686868")
	.attr("d", arc);

	// Add the foreground arc
	var foreground = g.append("path")
	.datum({endAngle: 0* tau})
	.style("fill", fcolor)
	.attr("d", arc);

	foreground.transition()
	.duration(750)
	.attrTween("d", arcTween((1 - (num)) * tau)); // pct_rural
	}
	</script>

	<body>


	<div id="donut-chart">
	<script type="text/javascript">
	draw('donut-chart', (data.num_schools_need_fiber/data.num_schools_with_fiber), "#e16b29");
	</script>
	</div>

	<script type="text/javascript">
	var bleft = d3.select("#donut-chart");
	var svgleft = bleft.select("svg");
	var wleft = svgleft.style("width").replace("px", "");

	svgleft.append("text")
	.attr("class","text-large")
	.style("text-anchor", "middle")
	.attr("x",wleft/2)
	.attr("y",wleft/3)
	.attr("fill", "#686868")
	.text(function(d) { return data.num_schools_need_fiber; });
	svgleft.append("text")
	.attr("class","text-small")
	.style("text-anchor", "middle")
	.attr("x",wleft/2)
	.attr("y",wleft/3 + (wleft/3)*.45)
	.attr("fill", "#686868")
	.text("schools still");
	svgleft.append("text")
	.attr("class","text-small")
	.style("text-anchor", "middle")
	.attr("x",wleft/2)
	.attr("y",wleft/3 + (wleft/3)*.8)
	.attr("fill", "#686868")
	.text("need scalable");
	svgleft.append("text")
	.attr("class","text-small")
	.style("text-anchor", "middle")
	.attr("x",wleft/2)
	.attr("y",wleft/3 + (wleft/2)*.76)
	.attr("fill", "#686868")
	.text("broadband");
	</script>
	</body>