mikelotis · August 11, 2018 00:26
diff --git a/.block b/.block
 border: yes
diff --git a/README.md b/README.md
diff --git a/index.css b/index.css
 .chart {
    display: block;
    margin: 0 auto;
 }

 .node circle {
    fill: #999;
 }

 .node text {
    font: 0.65em 'Roboto', sans-serif;
 }

 .node--internal circle {
    fill: #555;
 }

 .node--internal text {
    text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
 }

 .link {
    fill: none;
    stroke: #555;
    stroke-opacity: 0.4;
    stroke-width: 1.5px;
 }

 div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    max-width: 150px;
    color: #fff;
    background-color: #999;
    padding: 5px;
    font: 0.75em 'Roboto', sans-serif;
    margin: 0 auto;
 }

 .tooltip {
    position: relative;
    display: block;
 }

 .tooltip .tooltiptext {
    visibility: hidden;
    background-color: rgb(224, 224, 224);
    opacity: 0.9;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 120%;
    left: 0%;
    margin-left: -60px;
    font: 1.0em 'Roboto', sans-serif;
 }

 .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent rgb(224, 224, 224) transparent;
 }

 .tooltip:hover .tooltiptext {
    visibility: visible;
 }

 #myBtn {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 0px;
    z-index: 99;
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    padding: 15px;
    background-color: #999;
    border-radius: 4px;
    font: 1.0em 'Roboto', sans-serif;
 }

 #myBtn:hover {
    background-color:black;
 }

 div.sticky:hover {
    background-color:black;
 }

 table, tr {
    border-collapse: collapse;
 }

 .none {
    border-bottom: none;
 }

 .bottom {
    border-bottom: 1px solid black;
 }

 .top {
    border-top: 1px solid black;
 }
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>
 </head>
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 <link rel="stylesheet" href="index.css">
 <body>
    <div class="sticky tooltip" style="text-align: center;">Expenditure Types
        <div class="tooltiptext" style="width:294px; height:100px">
            <div style="margin: 0 auto">
                <table style="width:90%; margin-left:10px;" class="none"></table>
                <p style="margin:0;"></p>
            </div>
        </div>
    </div>
    <svg class="chart" width="1300" height="6000"></svg>
    <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
    <script src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
 var log = console.log;

 //Define SVG
 var svg = d3.select("svg.chart");
 var width = +svg.attr("width");
 var height = +svg.attr("height");
 var g = svg.append("g").attr("transform", "translate(60,0)");

 //Tree layout
 var tree = d3.tree()
    .size([height - 1000, width - 695]);

 //Create Expenditure types hierarchy
 var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf("+")); });

 //To size tree and prevent tree or texts screen cut off 
 // svg.append("rect")
 //     .attr("width", width)
 //     .attr("height", height)
 //     .style("fill", "none")
 //     .style("stroke", "black");

 d3.csv("Mayor_Expense_Report_2014-2016.csv", expensesTree);

 function expensesTree(error, expenses) {
    if(error) throw error;

    //Formating my data to be the same as Mike Bostock's example
    //However, note '+' is used not '.' - Don't want to split my data using that character beacause it is present in my data
    //Used '%' to split expense string to Detail $Cost Year
    var exp = {id: "Expenses"};
    var expTypeNests = d3.nest().key(function(d) { return d["Expenditure Type"]; }).entries(expenses);
    var formatedData = expTypes = expTypeNests.map(function(d) {  
            var children = d.values.sort(function(a, b){ return b.Year - a.Year; })
                .map(function(p) {
                    return {
                        id: `${exp.id}+${p["Expenditure Type"]}+
                             ${p["Expenditure Detail"]}%${p["Cost"]}%${p["Year"]}`
                    };
            });
            var parent = {id: `${exp.id}+${d.key}`};

            return [parent].concat(children);

        }).reduce(function(acc, cur) { return acc.concat(cur); }, [exp]);
    
    //Uncomment to view built data format
    // log(formatedData);

    //Hierarchy
    var root = stratify(formatedData);

    //Expenditure types data for tooltip table
    var ancestors = root.ancestors();
    var reduceFunc = function(acc, curVal){ return acc + curVal; };
    var expTypes = ancestors[0].children.map(function(d){
        var expType =  d.id.split("+")[1];
        var typeChildren = d.children.map(function(p) {
            var id = +p.id.split("%")[1];
            return id;
        });
        var exptypeSum = typeChildren.reduce(reduceFunc, 0);

        return {id: expType, expTotal: typeChildren.length, sum: exptypeSum};
    });
    var totalSum = expTypes.map(function(d){ return d.sum; }).reduce(reduceFunc, 0);
    var totalNo = expTypes.map(function(d){ return d.expTotal; }).reduce(reduceFunc, 0);

    //Expenditure types data formated to HTML table rows
    var htmlData = expTypes.map(function(d) {
        return `<tr>
                 <td>${d.id}</td><td>$${d.sum.toLocaleString()}</td><td>${d.expTotal}</td>
                </tr>`;
    }).reduce(function(acc, curVal){ return acc + curVal; }, ``);

    //Parent to child link paths & node distance between the children adjustable by scaler
    var yScaler = 1.2;
    var link = g.selectAll(".link")
        .data(tree(root).links())
        .enter().append("path")
        .attr("class", "link")
        .attr("d", d3.linkHorizontal()
            .x(function(d) { return d.y; })
            .y(function(d) { return d.x * yScaler; }));

    //Group for appending parent/child circle and text
    var node = g.selectAll(".node")
        .data(root.descendants())
        .enter().append("g")
        .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
        .attr("transform", function(d) { return `translate(${d.y},${d.x * yScaler})`; });

    //Add circles
    node.append("circle")
        .attr("r", 2.5);

    //Add texts
    node.append("text")
        .attr("dy", 3)
        .attr("x", function(d) { return d.children ? -8 : 8; })
        .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
        .html(function(d) { 
            var str = d.id.substring(d.id.lastIndexOf("+") + 1);
            var strSplit = str.split("%");

            return d.id.search("%") == -1 ? str : 
                `
                 <tspan>${strSplit[0]}</tspan>
                 <tspan>&nbsp&nbsp$${strSplit[1]}</tspan>
                 <tspan>&nbsp&nbsp${strSplit[2]}</tspan>
                `; 
        });

    //Add tooltip table row data
    d3.select("table")
        .html(`<tr style="width:100%;" class="bottom">
                <th>Type</th>
                <th>Cost</th>
                <th>No.</th>
               </tr>
               ${htmlData}
               <tr style="width:100%;" class="top">
                <td>Totals</td>
                <td>$${totalSum.toLocaleString()}</td><td>${totalNo}</td>
               </tr>`);
 };

 // When the user scrolls down 20px from the top of the document, show the button
 window.onscroll = function() {scrollFunction()};
 function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
 };

 // When the user clicks on the button, scroll to the top of the document
 function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
 };
diff --git a/Mayor_Expense_Report_2014-2016.csv b/Mayor_Expense_Report_2014-2016.csv
diff --git a/thumbnail.png b/thumbnail.png
	.chart {
	display: block;
	margin: 0 auto;
	}

	.node circle {
	fill: #999;
	}

	.node text {
	font: 0.65em 'Roboto', sans-serif;
	}

	.node--internal circle {
	fill: #555;
	}

	.node--internal text {
	text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
	}

	.link {
	fill: none;
	stroke: #555;
	stroke-opacity: 0.4;
	stroke-width: 1.5px;
	}

	div.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	max-width: 150px;
	color: #fff;
	background-color: #999;
	padding: 5px;
	font: 0.75em 'Roboto', sans-serif;
	margin: 0 auto;
	}

	.tooltip {
	position: relative;
	display: block;
	}

	.tooltip .tooltiptext {
	visibility: hidden;
	background-color: rgb(224, 224, 224);
	opacity: 0.9;
	color: black;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	top: 120%;
	left: 0%;
	margin-left: -60px;
	font: 1.0em 'Roboto', sans-serif;
	}

	.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent rgb(224, 224, 224) transparent;
	}

	.tooltip:hover .tooltiptext {
	visibility: visible;
	}

	#myBtn {
	display: none;
	position: fixed;
	bottom: 50px;
	right: 0px;
	z-index: 99;
	border: none;
	outline: none;
	color: white;
	cursor: pointer;
	padding: 15px;
	background-color: #999;
	border-radius: 4px;
	font: 1.0em 'Roboto', sans-serif;
	}

	#myBtn:hover {
	background-color:black;
	}

	div.sticky:hover {
	background-color:black;
	}

	table, tr {
	border-collapse: collapse;
	}

	.none {
	border-bottom: none;
	}

	.bottom {
	border-bottom: 1px solid black;
	}

	.top {
	border-top: 1px solid black;
	}
	<!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>
	</head>
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link rel="stylesheet" href="index.css">
	<body>
	<div class="sticky tooltip" style="text-align: center;">Expenditure Types
	<div class="tooltiptext" style="width:294px; height:100px">
	<div style="margin: 0 auto">
	<table style="width:90%; margin-left:10px;" class="none"></table>
	<p style="margin:0;"></p>
	</div>
	</div>
	</div>
	<svg class="chart" width="1300" height="6000"></svg>
	<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	var log = console.log;

	//Define SVG
	var svg = d3.select("svg.chart");
	var width = +svg.attr("width");
	var height = +svg.attr("height");
	var g = svg.append("g").attr("transform", "translate(60,0)");

	//Tree layout
	var tree = d3.tree()
	.size([height - 1000, width - 695]);

	//Create Expenditure types hierarchy
	var stratify = d3.stratify()
	.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf("+")); });

	//To size tree and prevent tree or texts screen cut off
	// svg.append("rect")
	// .attr("width", width)
	// .attr("height", height)
	// .style("fill", "none")
	// .style("stroke", "black");

	d3.csv("Mayor_Expense_Report_2014-2016.csv", expensesTree);

	function expensesTree(error, expenses) {
	if(error) throw error;

	//Formating my data to be the same as Mike Bostock's example
	//However, note '+' is used not '.' - Don't want to split my data using that character beacause it is present in my data
	//Used '%' to split expense string to Detail $Cost Year
	var exp = {id: "Expenses"};
	var expTypeNests = d3.nest().key(function(d) { return d["Expenditure Type"]; }).entries(expenses);
	var formatedData = expTypes = expTypeNests.map(function(d) {
	var children = d.values.sort(function(a, b){ return b.Year - a.Year; })
	.map(function(p) {
	return {
	id: `${exp.id}+${p["Expenditure Type"]}+
	${p["Expenditure Detail"]}%${p["Cost"]}%${p["Year"]}`
	};
	});
	var parent = {id: `${exp.id}+${d.key}`};

	return [parent].concat(children);

	}).reduce(function(acc, cur) { return acc.concat(cur); }, [exp]);

	//Uncomment to view built data format
	// log(formatedData);

	//Hierarchy
	var root = stratify(formatedData);

	//Expenditure types data for tooltip table
	var ancestors = root.ancestors();
	var reduceFunc = function(acc, curVal){ return acc + curVal; };
	var expTypes = ancestors[0].children.map(function(d){
	var expType = d.id.split("+")[1];
	var typeChildren = d.children.map(function(p) {
	var id = +p.id.split("%")[1];
	return id;
	});
	var exptypeSum = typeChildren.reduce(reduceFunc, 0);

	return {id: expType, expTotal: typeChildren.length, sum: exptypeSum};
	});
	var totalSum = expTypes.map(function(d){ return d.sum; }).reduce(reduceFunc, 0);
	var totalNo = expTypes.map(function(d){ return d.expTotal; }).reduce(reduceFunc, 0);

	//Expenditure types data formated to HTML table rows
	var htmlData = expTypes.map(function(d) {
	return `<tr>
	<td>${d.id}</td><td>$${d.sum.toLocaleString()}</td><td>${d.expTotal}</td>
	</tr>`;
	}).reduce(function(acc, curVal){ return acc + curVal; }, ``);

	//Parent to child link paths & node distance between the children adjustable by scaler
	var yScaler = 1.2;
	var link = g.selectAll(".link")
	.data(tree(root).links())
	.enter().append("path")
	.attr("class", "link")
	.attr("d", d3.linkHorizontal()
	.x(function(d) { return d.y; })
	.y(function(d) { return d.x * yScaler; }));

	//Group for appending parent/child circle and text
	var node = g.selectAll(".node")
	.data(root.descendants())
	.enter().append("g")
	.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
	.attr("transform", function(d) { return `translate(${d.y},${d.x * yScaler})`; });

	//Add circles
	node.append("circle")
	.attr("r", 2.5);

	//Add texts
	node.append("text")
	.attr("dy", 3)
	.attr("x", function(d) { return d.children ? -8 : 8; })
	.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
	.html(function(d) {
	var str = d.id.substring(d.id.lastIndexOf("+") + 1);
	var strSplit = str.split("%");

	return d.id.search("%") == -1 ? str :
	`
	<tspan>${strSplit[0]}</tspan>
	<tspan>&nbsp&nbsp$${strSplit[1]}</tspan>
	<tspan>&nbsp&nbsp${strSplit[2]}</tspan>
	`;
	});

	//Add tooltip table row data
	d3.select("table")
	.html(`<tr style="width:100%;" class="bottom">
	<th>Type</th>
	<th>Cost</th>
	<th>No.</th>
	</tr>
	${htmlData}
	<tr style="width:100%;" class="top">
	<td>Totals</td>
	<td>$${totalSum.toLocaleString()}</td><td>${totalNo}</td>
	</tr>`);
	};

	// When the user scrolls down 20px from the top of the document, show the button
	window.onscroll = function() {scrollFunction()};
	function scrollFunction() {
	if (document.body.scrollTop > 20 \|\| document.documentElement.scrollTop > 20) {
	document.getElementById("myBtn").style.display = "block";
	} else {
	document.getElementById("myBtn").style.display = "none";
	}
	};

	// When the user clicks on the button, scroll to the top of the document
	function topFunction() {
	document.body.scrollTop = 0;
	document.documentElement.scrollTop = 0;
	};