mikelotis · August 10, 2018 03:16
diff --git a/.block b/.block
 border: yes
 width: 630
 height: 590
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <style>
        body {
            margin-top: 30px;
        }

        svg {
            display: block;
            margin: 0 auto;
            background-color: whitesmoke;
        }

        .label {
            fill: whitesmoke;
            font: 0.9em 'Roboto', sans-serif;
        }

        .title {
            fill: #999;
            font: 1.25em 'Roboto', sans-serif;
        }
    </style>
 </head>
 <body>
    <svg style="width:600px;height:530px"></svg>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script lang="babel" type="text/babel">
        const log = console.log;
        const svgDimension = d => +d3.select("svg").style(d).split("px")[0];

        const width = svgDimension("width");
        const height = svgDimension("height");

        // svg
        const svg = d3.select("svg");

        // load data
        d3.csv("Residential_Building_Permits_2009-2014.csv")
            .then(pie);

        function pie(csv) {
            // years aggregated array
            const nest = d3.nest().key(d => d.Year)
                .entries(csv)
                .map(d => {
                    return {
                        "key": +d.key,
                        "value": d.values.length
                    };
                });

            const fillScale = d3.scaleOrdinal()
                .domain(nest.map(d => d.key))
                .range(["#834655","#6F5D7D","#3E768A","#2D8874","#67914D","#AB8F3C"]);

            const pieLayout = d3.pie()
                .value(d => d.value);

            const pieArc = d3.arc()
                .innerRadius(0)
                .outerRadius(width * 0.35);

            const pieData = pieLayout(nest);

            const gChart = svg.append("g")
                .attr("transform", `translate(${width / 2}, ${(height / 2) + 30})`);

            // Add title texts
            svg.append("text")
                .attr("class", "title")
                .attr("x", width / 2)
                .attr("text-anchor", "middle")
                .attr("y", 35)
                .text("Residential");

            svg.append("text")
                .attr("class", "title")
                .attr("x", width / 2)
                .attr("text-anchor", "middle")
                .attr("y", 58)
                .text("Building Permmits (2009 - 2014)");

            // Add arcs
            gChart    
                .selectAll("path")
                    .data(pieData)
                .enter().append("path")
                    .attr("d", pieArc)
                    .style("fill", d => fillScale(d.data.key))
                    .style("stroke", "whitesmoke")
                    .style("stroke-width", "2px");

            // Add labels
            gChart
                .selectAll("text.label")
                    .data(pieData)
                .enter().append("text")
                    .attr("class", "label")
                    .each(function(d){
                        const centroid = pieArc.centroid(d);
                        const key = d.data.key;
                        
                        d3.select(this)
                            .attr("x", centroid[0])
                            .attr("y", centroid[1])
                            .attr("text-anchor", "middle")
                            .text(`${key}: ${d.data.value}`);
                    });
        };
    </script>
 </body>
 </html>
diff --git a/Residential_Building_Permits_2009-2014.csv b/Residential_Building_Permits_2009-2014.csv
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<style>
	body {
	margin-top: 30px;
	}

	svg {
	display: block;
	margin: 0 auto;
	background-color: whitesmoke;
	}

	.label {
	fill: whitesmoke;
	font: 0.9em 'Roboto', sans-serif;
	}

	.title {
	fill: #999;
	font: 1.25em 'Roboto', sans-serif;
	}
	</style>
	</head>
	<body>
	<svg style="width:600px;height:530px"></svg>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
	<script lang="babel" type="text/babel">
	const log = console.log;
	const svgDimension = d => +d3.select("svg").style(d).split("px")[0];

	const width = svgDimension("width");
	const height = svgDimension("height");

	// svg
	const svg = d3.select("svg");

	// load data
	d3.csv("Residential_Building_Permits_2009-2014.csv")
	.then(pie);

	function pie(csv) {
	// years aggregated array
	const nest = d3.nest().key(d => d.Year)
	.entries(csv)
	.map(d => {
	return {
	"key": +d.key,
	"value": d.values.length
	};
	});

	const fillScale = d3.scaleOrdinal()
	.domain(nest.map(d => d.key))
	.range(["#834655","#6F5D7D","#3E768A","#2D8874","#67914D","#AB8F3C"]);

	const pieLayout = d3.pie()
	.value(d => d.value);

	const pieArc = d3.arc()
	.innerRadius(0)
	.outerRadius(width * 0.35);

	const pieData = pieLayout(nest);

	const gChart = svg.append("g")
	.attr("transform", `translate(${width / 2}, ${(height / 2) + 30})`);

	// Add title texts
	svg.append("text")
	.attr("class", "title")
	.attr("x", width / 2)
	.attr("text-anchor", "middle")
	.attr("y", 35)
	.text("Residential");

	svg.append("text")
	.attr("class", "title")
	.attr("x", width / 2)
	.attr("text-anchor", "middle")
	.attr("y", 58)
	.text("Building Permmits (2009 - 2014)");

	// Add arcs
	gChart
	.selectAll("path")
	.data(pieData)
	.enter().append("path")
	.attr("d", pieArc)
	.style("fill", d => fillScale(d.data.key))
	.style("stroke", "whitesmoke")
	.style("stroke-width", "2px");

	// Add labels
	gChart
	.selectAll("text.label")
	.data(pieData)
	.enter().append("text")
	.attr("class", "label")
	.each(function(d){
	const centroid = pieArc.centroid(d);
	const key = d.data.key;

	d3.select(this)
	.attr("x", centroid[0])
	.attr("y", centroid[1])
	.attr("text-anchor", "middle")
	.text(`${key}: ${d.data.value}`);
	});
	};
	</script>
	</body>
	</html>