bcolloran/pie chart todo

## pie chart todo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pie Chart Notebook - iodide</title>
<link rel="stylesheet" type="text/css" href="https://iodide-project.github.io/master/iodide.master.css">
</head>
<body>
<script id="jsmd" type="text/jsmd">
%% meta
{
  "title": "Pie Chart Notebook",
  "lastExport": "2018-05-14T22:18:23.850Z"
}

%% resource
https://d3js.org/d3.v5.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js

%% md
<body>
  <div id=canvas></div>
</body>

%% css
.arc text {
  font: 10px sans-serif;
  text-anchor: middle;
}

.arc path {
  stroke: #fff;
}

%% js
function randomNum() {
    return Math.random()*90
}

var clog = console.log.bind(console)

function weightedSum(dat) {
    var allTime = parseFloat(dat.totaltime)*(60*60)
    var set = []
    var total =0
    for (var ele in dat.items) {
        set.push(allTime*parseFloat(dat.items[ele].priority))
        total += parseFloat(dat.items[ele].priority)
    }
    return set.map(function(ele) {return ele/total})
}

%% js
// example extends the piechart tutorial on https://bl.ocks.org/mbostock/3887235
function graph (data) {
    var data = data
    var width = 960,
        height = 500,
        radius = Math.min(width, height) / 2;

    var color = d3.scaleOrdinal()
        .range(["#98abc5", "#8a89a6", "#7b6888"]);

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

    var labelArc = d3.arc()
        .outerRadius(radius - 40)
        .innerRadius(radius - 40);

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

    var svg = d3.select("div#canvas").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var g = svg.selectAll(".arc")
        .data(pie(plotData))
        .enter().append("g")
        .attr("class", "arc");
    function dataReduce(i) {
        var starting = data[i]
        var ind = i
        var intrvl
        var triggerCount = 0
        return {
            current:function(){
                return data[ind]
            },
            adjust:function() {
                if (data[ind] < 0) {
                    clearInterval(intrvl)
                    alert("change task")
                }
                data[ind] -= 1
                //clog(data)
                var pieD = pie(data)
                svg.selectAll(".arc")
                    .data(pieD)
                svg.selectAll("path")
                    .data(pieD)
                    .attr("d", arc)
                    .style("fill", function(d,i) {
                        if (i == ind) {
                            return d3.interpolateViridis(d.data/starting)
                        }
                        return color(d.data); });

                svg.selectAll("text")
                    .data(pieD)
                    .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
                    .attr("dy", ".35em")
                    .text(function(d,i) { return actionItems[i]; });
            },
            tick:function() {
                intrvl = setInterval(this.adjust,1000)
            },
            clearTick:function() {
                clearInterval(intrvl)
                data[ind] = 0
                var pieD = pie(data)
                svg.selectAll("path")
                    .data(pieD)
                    .attr("d", arc)
                    .style("fill", function(d,i) {
                        return color(d.data); });

            },
        }

    }
    g.on("click",function() {
        if (this.clicked){
            this.clicked = false
            this.reducer.clearTick()
        } else {
            this.clicked = true
            this.reducer = dataReduce(this.__data__.index)
            this.reducer.tick()
        }
    })

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

    g.append("text")
        .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
        .attr("dy", ".35em")
        .text(function(d,i) { return actionItems[i]; });
}

%% js
var data = {"items": [{"priority": "1", "name": "react js webassembly visualization ind"}, {"priority": "2", "name": "468 probs"}, {"priority": "3", "name": "finish more nnets"}, {"priority": 0.01, "name": "finish line"}], "totaltime": "1.25"}
var actionItems
var plotData

actionItems = data.items.map(function(ele) {return ele.name})
plotData = weightedSum(data)
graph(plotData)
</script>
<div id='page'></div>
<script src='https://iodide-project.github.io/master/iodide.master.js'></script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Pie Chart Notebook - iodide</title>
	<link rel="stylesheet" type="text/css" href="https://iodide-project.github.io/master/iodide.master.css">
	</head>
	<body>
	<script id="jsmd" type="text/jsmd">
	%% meta
	{
	"title": "Pie Chart Notebook",
	"lastExport": "2018-05-14T22:18:23.850Z"
	}

	%% resource
	https://d3js.org/d3.v5.min.js
	https://d3js.org/d3-scale-chromatic.v1.min.js

	%% md
	<body>
	<div id=canvas></div>
	</body>

	%% css
	.arc text {
	font: 10px sans-serif;
	text-anchor: middle;
	}

	.arc path {
	stroke: #fff;
	}

	%% js
	function randomNum() {
	return Math.random()*90
	}

	var clog = console.log.bind(console)

	function weightedSum(dat) {
	var allTime = parseFloat(dat.totaltime)(6060)
	var set = []
	var total =0
	for (var ele in dat.items) {
	set.push(allTime*parseFloat(dat.items[ele].priority))
	total += parseFloat(dat.items[ele].priority)
	}
	return set.map(function(ele) {return ele/total})
	}

	%% js
	// example extends the piechart tutorial on https://bl.ocks.org/mbostock/3887235
	function graph (data) {
	var data = data
	var width = 960,
	height = 500,
	radius = Math.min(width, height) / 2;

	var color = d3.scaleOrdinal()
	.range(["#98abc5", "#8a89a6", "#7b6888"]);

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

	var labelArc = d3.arc()
	.outerRadius(radius - 40)
	.innerRadius(radius - 40);

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

	var svg = d3.select("div#canvas").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	var g = svg.selectAll(".arc")
	.data(pie(plotData))
	.enter().append("g")
	.attr("class", "arc");
	function dataReduce(i) {
	var starting = data[i]
	var ind = i
	var intrvl
	var triggerCount = 0
	return {
	current:function(){
	return data[ind]
	},
	adjust:function() {
	if (data[ind] < 0) {
	clearInterval(intrvl)
	alert("change task")
	}
	data[ind] -= 1
	//clog(data)
	var pieD = pie(data)
	svg.selectAll(".arc")
	.data(pieD)
	svg.selectAll("path")
	.data(pieD)
	.attr("d", arc)
	.style("fill", function(d,i) {
	if (i == ind) {
	return d3.interpolateViridis(d.data/starting)
	}
	return color(d.data); });

	svg.selectAll("text")
	.data(pieD)
	.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
	.attr("dy", ".35em")
	.text(function(d,i) { return actionItems[i]; });
	},
	tick:function() {
	intrvl = setInterval(this.adjust,1000)
	},
	clearTick:function() {
	clearInterval(intrvl)
	data[ind] = 0
	var pieD = pie(data)
	svg.selectAll("path")
	.data(pieD)
	.attr("d", arc)
	.style("fill", function(d,i) {
	return color(d.data); });

	},
	}

	}
	g.on("click",function() {
	if (this.clicked){
	this.clicked = false
	this.reducer.clearTick()
	} else {
	this.clicked = true
	this.reducer = dataReduce(this.__data__.index)
	this.reducer.tick()
	}
	})

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

	g.append("text")
	.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
	.attr("dy", ".35em")
	.text(function(d,i) { return actionItems[i]; });
	}

	%% js
	var data = {"items": [{"priority": "1", "name": "react js webassembly visualization ind"}, {"priority": "2", "name": "468 probs"}, {"priority": "3", "name": "finish more nnets"}, {"priority": 0.01, "name": "finish line"}], "totaltime": "1.25"}
	var actionItems
	var plotData

	actionItems = data.items.map(function(ele) {return ele.name})
	plotData = weightedSum(data)
	graph(plotData)
	</script>
	<div id='page'></div>
	<script src='https://iodide-project.github.io/master/iodide.master.js'></script>
	</body>
	</html>