RainismZ · September 27, 2017 22:36
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/borough.csv b/borough.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
    <title>D3 v4 - piechart</title>
    <style>
        #graph {
            width: 900px;
            height: 500px;
        }
    </style>
 </head>

 <body>
 <div id="graph"></div>

 <script>
    !(function () {
        "use strict"

        var width, height
        var chartWidth, chartHeight
        var margin
        var svg = d3.select("#graph").append("svg")
        var chartLayer = svg.append("g").classed("chartLayer", true)

        d3.csv("borough.csv", cast, main)

        function cast(d) {
            d.number = +d.number
            return d
        }

        function main(data) {
            setSize(data)
            drawChart(data)
        }

        function setSize(data) {
            width = document.querySelector("#graph").clientWidth
            height = document.querySelector("#graph").clientHeight

            margin = {top: 40, left: 0, bottom: 40, right: 0}

            chartWidth = width - (margin.left + margin.right)
            chartHeight = height - (margin.top + margin.bottom)

            svg.attr("width", width).attr("height", height)

            chartLayer
                .attr("width", chartWidth)
                .attr("height", chartHeight)
                .attr("transform", "translate(" + [margin.left, margin.top] + ")")


        }

        var colorScale = d3.scaleOrdinal(d3.schemeSet3)


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

            var arc = d3.arc()
                .outerRadius(chartHeight / 2)
                .innerRadius(chartHeight / 4)
                .padAngle(0.03)

            var pieG = chartLayer.selectAll("g")
                .data([data])
                .enter()
                .append("g")
                .attr("transform", "translate(" + [chartWidth / 2, chartHeight / 2] + ")")

            var block = pieG.selectAll(".arc")
                .data(arcs)

            var newBlock = block.enter().append("g").classed("arc", true)

            newBlock.append("path")
                .attr("d", arc)
                .attr("id", function (d, i) {
                    return "arc-" + i
                })
                .attr("stroke", "gray")
                .attr("fill", function (d, i) {
                    return colorScale(i);
                })

            newBlock.append("text")
                .attr("dx", 55)
                .attr("dy", -5)
                .append("textPath")
                .attr("xlink:href", function (d, i) {
                    return "#arc-" + i;
                })
                .text(function (d) {
                    console.log(d);
                    return d.data.borough
                })
        }
    }());
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
	<title>D3 v4 - piechart</title>
	<style>
	#graph {
	width: 900px;
	height: 500px;
	}
	</style>
	</head>

	<body>
	<div id="graph"></div>

	<script>
	!(function () {
	"use strict"

	var width, height
	var chartWidth, chartHeight
	var margin
	var svg = d3.select("#graph").append("svg")
	var chartLayer = svg.append("g").classed("chartLayer", true)

	d3.csv("borough.csv", cast, main)

	function cast(d) {
	d.number = +d.number
	return d
	}

	function main(data) {
	setSize(data)
	drawChart(data)
	}

	function setSize(data) {
	width = document.querySelector("#graph").clientWidth
	height = document.querySelector("#graph").clientHeight

	margin = {top: 40, left: 0, bottom: 40, right: 0}

	chartWidth = width - (margin.left + margin.right)
	chartHeight = height - (margin.top + margin.bottom)

	svg.attr("width", width).attr("height", height)

	chartLayer
	.attr("width", chartWidth)
	.attr("height", chartHeight)
	.attr("transform", "translate(" + [margin.left, margin.top] + ")")


	}

	var colorScale = d3.scaleOrdinal(d3.schemeSet3)


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

	var arc = d3.arc()
	.outerRadius(chartHeight / 2)
	.innerRadius(chartHeight / 4)
	.padAngle(0.03)

	var pieG = chartLayer.selectAll("g")
	.data([data])
	.enter()
	.append("g")
	.attr("transform", "translate(" + [chartWidth / 2, chartHeight / 2] + ")")

	var block = pieG.selectAll(".arc")
	.data(arcs)

	var newBlock = block.enter().append("g").classed("arc", true)

	newBlock.append("path")
	.attr("d", arc)
	.attr("id", function (d, i) {
	return "arc-" + i
	})
	.attr("stroke", "gray")
	.attr("fill", function (d, i) {
	return colorScale(i);
	})

	newBlock.append("text")
	.attr("dx", 55)
	.attr("dy", -5)
	.append("textPath")
	.attr("xlink:href", function (d, i) {
	return "#arc-" + i;
	})
	.text(function (d) {
	console.log(d);
	return d.data.borough
	})
	}
	}());
	</script>
	</body>
	</html>