curran/.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>
  <svg width="200" height="200"></svg>
  <script>
    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height"),
        radius = Math.min(width, height) / 2,
        g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var color = d3.scaleOrdinal(d3.schemeCategory10);

    var total = 5000;

    var freelancers = d3.range(3).map(() => ({
      hours: 10,
      rate: 100
    }));

    var managingPartners = [1, 2];

    d3.select("body").append("label")
      .text("Freelancers (hours)");

    d3.select("body").selectAll(".freelancer").data(freelancers)
      .enter().append("input")
        .attr("type", "range")
        .attr("min", "1")
        .attr("max", "10")
        .attr("step", "0.5")
        .attr("value", "5")
        .on("input", function(d){
          d.hours = this.value;
          render();
        });

    d3.select("body").append("div").append("label")
      .text("Total")

    d3.select("body").append("input")
        .attr("type", "range")
        .attr("min", "1")
        .attr("max", "20000")
        .attr("step", "500")
        .attr("value", total)
        .style("width", "500px")
        .on("input", function(d){
          total = this.value;
          render();
        });

    var pie = d3.pie()
        .sort(null)
        .value(function(d) { return d.cash; });

    var path = d3.arc()
        .outerRadius(radius - 10)
        .innerRadius(0);

    function render(){
      var data = freelancers.map((d) => ({
        cash: d.hours * d.rate,
        type: "freelancer"
      }));

      var subtotal = total - d3.sum(data, (d) => d.cash);

      data = data.concat(managingPartners.map((d) => ({
        cash: subtotal / managingPartners.length,
        tyle: "managing partner"
      })));

      var arc = g.selectAll("path").data(pie(data));
      arc
        .enter().append("path")
        .merge(arc)
          .attr("d", path)
          .attr("fill", function(d) { return color(d.data.type); })
          .attr("stroke", "white")
    }

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

	<body>
	<svg width="200" height="200"></svg>
	<script>
	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height"),
	radius = Math.min(width, height) / 2,
	g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	var color = d3.scaleOrdinal(d3.schemeCategory10);

	var total = 5000;

	var freelancers = d3.range(3).map(() => ({
	hours: 10,
	rate: 100
	}));

	var managingPartners = [1, 2];

	d3.select("body").append("label")
	.text("Freelancers (hours)");

	d3.select("body").selectAll(".freelancer").data(freelancers)
	.enter().append("input")
	.attr("type", "range")
	.attr("min", "1")
	.attr("max", "10")
	.attr("step", "0.5")
	.attr("value", "5")
	.on("input", function(d){
	d.hours = this.value;
	render();
	});

	d3.select("body").append("div").append("label")
	.text("Total")

	d3.select("body").append("input")
	.attr("type", "range")
	.attr("min", "1")
	.attr("max", "20000")
	.attr("step", "500")
	.attr("value", total)
	.style("width", "500px")
	.on("input", function(d){
	total = this.value;
	render();
	});

	var pie = d3.pie()
	.sort(null)
	.value(function(d) { return d.cash; });

	var path = d3.arc()
	.outerRadius(radius - 10)
	.innerRadius(0);

	function render(){
	var data = freelancers.map((d) => ({
	cash: d.hours * d.rate,
	type: "freelancer"
	}));

	var subtotal = total - d3.sum(data, (d) => d.cash);

	data = data.concat(managingPartners.map((d) => ({
	cash: subtotal / managingPartners.length,
	tyle: "managing partner"
	})));

	var arc = g.selectAll("path").data(pie(data));
	arc
	.enter().append("path")
	.merge(arc)
	.attr("d", path)
	.attr("fill", function(d) { return color(d.data.type); })
	.attr("stroke", "white")
	}

	render();

	</script>
	</body>