Ognami · January 20, 2017 00:32
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!doctype html>
 <meta charset="utf-8">
    <html>
    <head>
        <title>Pie Chart With Data Select Option</title>
        <style>
            body { position: relative; }
            #piechart { width: 100%; }
            #piechart > svg { text-align: right; }
            #picker {
                position: absolute;
                top: 220px;
                left: 0;
            }
            #picker button {
                background: black;
                color: white;
                border: none;
                padding: 10px;
                border-radius: 3px;
                margin: 0 10px;
                cursor: pointer;
            }
            .arc text {
                font: 12px sans-serif;
                text-anchor: middle;
            }

            .arc path {
                stroke: #fff;
            }

        </style>
    </head>
    <body>

        
        <div id="picker">
            <button id="arrowtype" data-col="arrow type">Arrow Type</button>
            <button id="region" data-col="region">Target Region</button>
        </div>
        <div id="piechart"></div>
        

        <script src="https://d3js.org/d3.v4.min.js"></script>

        <script>
            function piechart(){
                var margin = {},
                    width = 980,
                    height = 500,
                    radius = Math.min(width, height) / 2;

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

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

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

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

                    
                function chart(selection){
                    console.log(data);
                    var column = data.col;

                    selection.each(function(data) {

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

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

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

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

                    });
                }

                return chart;
            }

            var chart = piechart();

            /* on clicks */
            var btnType = document.getElementById('arrowtype');
            var btnRegion = document.getElementById('region');

            btnType.addEventListener('click', function(e) {
                drawchart(e);
            });

            btnRegion.addEventListener('click', function(e) {
                drawchart(e);
            });

            function drawchart(e){
                var chartwarpper = document.getElementById("piechart");
                chartwarpper.innerHTML = '';

                var column = e.target.getAttribute("data-col");
                d3.csv("data.csv", function(raw) {
                    result = { };
                    for(var i = 0; i < raw.length; ++i) {
                        if(!result[raw[i][column]]){
                            result[raw[i][column]] = 0;
                        }
                        ++result[raw[i][column]];
                    }

                    data = [];
                    data["col"] = column ;

                    for(var key in result){
                        var addentry = { };
                        addentry[column] = key;
                        addentry["total"] = result[key];
                        data.push(addentry);
                    }

                    d3.select("#piechart")
                        .datum(data)
                        .call(chart);
                });
            }

        </script>
    </body>
 </html> 
diff --git a/thumbnail.png b/thumbnail.png
name	arrow type	region
bob	wood	black
joe	composite	black
jane	carbon	yellow
susan	aluminum	white
john	aluminum	black
mark	fiberglass	red
tammy	carbon	yellow
alice	fiberglass	blue
sam	wood	red
kathy	composite	blue
anna	aluminum	yellow
sarah	carbon	blue
cole	fiberglass	red
will	carbon	white
	<!doctype html>
	<meta charset="utf-8">
	<html>
	<head>
	<title>Pie Chart With Data Select Option</title>
	<style>
	body { position: relative; }
	#piechart { width: 100%; }
	#piechart > svg { text-align: right; }
	#picker {
	position: absolute;
	top: 220px;
	left: 0;
	}
	#picker button {
	background: black;
	color: white;
	border: none;
	padding: 10px;
	border-radius: 3px;
	margin: 0 10px;
	cursor: pointer;
	}
	.arc text {
	font: 12px sans-serif;
	text-anchor: middle;
	}

	.arc path {
	stroke: #fff;
	}

	</style>
	</head>
	<body>


	<div id="picker">
	<button id="arrowtype" data-col="arrow type">Arrow Type</button>
	<button id="region" data-col="region">Target Region</button>
	</div>
	<div id="piechart"></div>


	<script src="https://d3js.org/d3.v4.min.js"></script>

	<script>
	function piechart(){
	var margin = {},
	width = 980,
	height = 500,
	radius = Math.min(width, height) / 2;

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

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

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

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


	function chart(selection){
	console.log(data);
	var column = data.col;

	selection.each(function(data) {

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

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

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

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

	});
	}

	return chart;
	}

	var chart = piechart();

	/* on clicks */
	var btnType = document.getElementById('arrowtype');
	var btnRegion = document.getElementById('region');

	btnType.addEventListener('click', function(e) {
	drawchart(e);
	});

	btnRegion.addEventListener('click', function(e) {
	drawchart(e);
	});

	function drawchart(e){
	var chartwarpper = document.getElementById("piechart");
	chartwarpper.innerHTML = '';

	var column = e.target.getAttribute("data-col");
	d3.csv("data.csv", function(raw) {
	result = { };
	for(var i = 0; i < raw.length; ++i) {
	if(!result[raw[i][column]]){
	result[raw[i][column]] = 0;
	}
	++result[raw[i][column]];
	}

	data = [];
	data["col"] = column ;

	for(var key in result){
	var addentry = { };
	addentry[column] = key;
	addentry["total"] = result[key];
	data.push(addentry);
	}

	d3.select("#piechart")
	.datum(data)
	.call(chart);
	});
	}

	</script>
	</body>
	</html>