mikelotis · August 9, 2018 00:14
diff --git a/.block b/.block
 border: yes
 width: 1366
 height: 560
diff --git a/README.md b/README.md
diff --git a/EPS(2015-2016)-July-02-2018.csv b/EPS(2015-2016)-July-02-2018.csv
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>BeeSwarm</title>
    <link href="https://fonts.googleapis.com/css?family=Gaegu" rel="stylesheet">
    <style>
        body {
            margin-top: 30px;
        }

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

        div.tooltip {	
            position: absolute;			
            text-align: center;			
            max-width:  300px;					
            max-height: 300px;					
            padding: 0.5em;				
            font: 0.8em;		
            background: rgb(77, 73, 73);	
            border: 0px;		
            border-radius: 0.5em;			
            pointer-events: none;	
            color: white;		
        }

        text#title {
            font-size: 2em; 
        }

        text.label, text#title, div.tooltip, text.legendTitle {
            font-family: 'Gaegu', cursive;
            pointer-events: none;
        }
    </style>
 </head>
 <body>
    <div id="viz"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
    <script>
        /*Define width and height for the SVG, Radius for Beeswarm circles
          Offset for legend and title to match
        */
        var log = console.log;
        var width = 960, height = 500;
        var radius = 10;
        var borderXOffset = 5;

        //Define SVG to contain the Beeswarm
        var svg = d3.select("#viz").append("svg")
            .attr("width", width)
            .attr("height", height);

        //Circles' tooltip
        var div = d3.select("body").append("div")	
            .attr("class", "tooltip")				
            .style("opacity", 0);

        //Indicate what the circles represent and attract user
        var title = "MOUSEOVER EDMONTON PUBLIC SCHOOLS";
        var enticeText = svg.append("text")
            .attr("y", height * 0.994)
            .attr("x", borderXOffset)
            .attr("id", "title")
            .attr("text-anchor", "left")
            .text(title);

        //Uncomment this to see the border - used to place the beeswarm as desired
        // svg.append("rect")
        //     .attr("width", width)
        //     .attr("height", height)
        //     .style("stroke", "black")
        //     .style("fill", "none");

        //Loading the file
        d3.csv("EPS(2015-2016)-July-02-2018.csv", groupForcing);

        function groupForcing(error, data) {
            if(error) {
                alert("Error");
            }
            else {
                //Formating the data to GRADE_LEVEL nests
                var nest = d3.nest()
                    .key(function(d){ return d["GRADE_LEVEL"]; })
                    .entries(data);
                
                //Give each GRADE_LEVEL nest a unique color
                var colorScale = d3.scaleOrdinal().domain(nest.map(function(d){ return d.key; }))
                    .range(['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00']);

                //To adjust the view of the Beeswarm to get the desired layout
                var xAdjuster = 0.015;
                var yAdjuster = 1.55;
                var circleSpreader = 4;

                //ForceSimulation responsible for the optimization of positioning the circles
                var force = d3.forceSimulation()
                    .nodes(data)
                    .force("collison", d3.forceCollide(radius))
                    .force("x", d3.forceX(function(d, i) { return (i + (width * xAdjuster)) * circleSpreader; }).strength(1.5))
                    .force("y", d3.forceY(height / yAdjuster))
                    .on("tick", updateNetwork);

                //Beeswarm's cicles each representing an individual data object(School)
                var circles = svg.selectAll("circle")
                    .data(data)
                    .enter().append("circle")
                    .attr("class", "node")
                    .style("fill", function(d){ return colorScale(d["GRADE_LEVEL"]); })
                    .attr("r", radius)
                    .on("mouseover", tooltipMouseOver)
                    .on("mouseout", tooltipMouseOut);

                //Legend to show grade level and their totals 
                var epsLegend = d3.legendColor()
                    .title("Edmonton Public Schools (Grade Levels)")
                    .labels(nest.map(function(d){ return `${d.key} - ${d.values.length}`; }))
                    .scale(colorScale);

                //Append legend to the svg
                svg.append("g")
                    .attr("id", "epsLegend")
                    .attr("transform", `translate(${borderXOffset},20)`)
                    .call(epsLegend); 

                //Place the circles on each tick of the forceSimulation
                function updateNetwork(){
                    circles
                        .attr("cx", function(d){ return d.x; })
                        .attr("cy", function(d){ return d.y; });
                };

                //Transitions the tooltip to view, hide the title text, and highlight the hovered circle
                function tooltipMouseOver(d){
                    d3.select(this)
                        .style("stroke", "black")
                        .style("stroke-width", "2px");

                    div.transition()		
                        .duration(200)		
                        .style("opacity", .9);		
                    div	.html(`School name: ${d["SCHOOL_NAME"]}<br>
                               Grade Level: ${d["GRADE_LEVEL"]}<br>
                               Grade Level: ${d["GRADES_OFFERED"]}`)	
                        .style("left", (d3.event.pageX + 25) + "px")		
                        .style("top", (d3.event.pageY - 28) + "px");	

                    enticeText.transition()
                        .duration(200)
                        .style("fill-opacity", 0);
                };

                //Resets the tooltip, title, and circle
                function tooltipMouseOut(d){
                    d3.select(this)
                        .style("stroke-width", "0px");

                    div.transition()		
                        .duration(500)		
                        .style("opacity", 0);

                    enticeText.transition()
                       .duration(2000)
                       .style("fill-opacity", 1);	
                };                
            }

        };
    </script>
 </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
SCHOOL_NAME	GRADE_LEVEL	GRADES_OFFERED
Centre for Education	Administration
Abbott	Elementary	Kindergarten to Grade 6
Afton	Elementary	Kindergarten to Grade 6
Aldergrove	Elementary	Kindergarten to Grade 6
Athlone	Elementary	Kindergarten to Grade 6
Baturyn	Elementary	Kindergarten to Grade 6
Beacon Heights	Elementary	Kindergarten to Grade 6
Belgravia	Elementary	Kindergarten to Grade 6
Belmead	Elementary	Kindergarten to Grade 6
Belmont	Elementary	Kindergarten to Grade 6
Belvedere	Elementary	Kindergarten to Grade 6
Bisset	Elementary	Kindergarten to Grade 6
Brander Gardens	Elementary	Kindergarten to Grade 6
Brightview	Elementary	Kindergarten to Grade 6
Brookside	Elementary	Kindergarten to Grade 6
Caernarvon	Elementary	Kindergarten to Grade 6
Calder	Elementary	Kindergarten to Grade 6
Callingwood	Elementary	Kindergarten to Grade 6
Centennial	Elementary	Kindergarten to Grade 6
Clara Tyner	Elementary	Kindergarten to Grade 6
Coronation	Elementary	Kindergarten to Grade 6
Crawford Plains	Elementary	Kindergarten to Grade 6
Daly Grove	Elementary	Kindergarten to Grade 6
Delton	Elementary	Kindergarten to Grade 6
Delwood	Elementary	Kindergarten to Grade 6
Dovercourt	Elementary	Kindergarten to Grade 6
Duggan	Elementary	Kindergarten to Grade 6
Dunluce	Elementary	Kindergarten to Grade 6
Earl Buxton	Elementary	Kindergarten to Grade 6
Ekota	Elementary	Kindergarten to Grade 6
Elmwood	Elementary	Kindergarten to Grade 6
Evansdale	Elementary	Kindergarten to Grade 6
Forest Heights	Elementary	Kindergarten to Grade 6
Fraser	Elementary	Kindergarten to Grade 6
Garneau	Elementary	Kindergarten to Grade 6
George H. Luck	Elementary	Kindergarten to Grade 6
George P. Nicholson	Elementary	Kindergarten to Grade 6
Glendale	Elementary	Kindergarten to Grade 6
Glengarry	Elementary	Kindergarten to Grade 6
Glenora	Elementary	Kindergarten to Grade 6
Gold Bar	Elementary	Kindergarten to Grade 6
Grace Martin	Elementary	Kindergarten to Grade 6
Greenfield	Elementary	Kindergarten to Grade 6
Greenview	Elementary	Kindergarten to Grade 6
Grovenor	Elementary	Kindergarten to Grade 6
Hazeldean	Elementary	Kindergarten to Grade 6
Hillview	Elementary	Kindergarten to Grade 6
Holyrood	Elementary	Kindergarten to Grade 6
Homesteader	Elementary	Kindergarten to Grade 6
Horse Hill	Elementary	Kindergarten to Grade 6
Inglewood	Elementary	Kindergarten to Grade 6
Jackson Heights	Elementary	Kindergarten to Grade 6
J. A. Fife	Elementary	Kindergarten to Grade 6
James Gibbons - Stratford	Elementary	Kindergarten to Grade 6
John A. McDougall	Elementary	Kindergarten to Grade 6
John Barnett	Elementary	Kindergarten to Grade 6
Julia Kiniski	Elementary	Kindergarten to Grade 6
Kameyosek	Elementary	Kindergarten to Grade 6
Keheewin	Elementary	Kindergarten to Grade 6
Kensington	Elementary	Kindergarten to Grade 6
Kildare	Elementary	Kindergarten to Grade 6
King Edward	Elementary	Kindergarten to Grade 6
Kirkness	Elementary	Kindergarten to Grade 6
Lago Lindo	Elementary	Kindergarten to Grade 6
Lansdowne	Elementary	Kindergarten to Grade 6
LaPerle	Elementary	Kindergarten to Grade 6
Lauderdale	Elementary	Kindergarten to Grade 6
McLeod	Elementary	Kindergarten to Grade 6
Lee Ridge	Elementary	Kindergarten to Grade 6
Lendrum	Elementary	Kindergarten to Grade 6
Lorelei	Elementary	Kindergarten to Grade 6
Lymburn	Elementary	Kindergarten to Grade 6
Lynnwood	Elementary	Kindergarten to Grade 6
Malcolm Tweddle	Elementary	Kindergarten to Grade 6
Malmo	Elementary	Kindergarten to Grade 6
Mayfield	Elementary	Kindergarten to Grade 6
McArthur	Elementary	Kindergarten to Grade 6
McKee	Elementary	Kindergarten to Grade 6
Meadowlark	Elementary	Kindergarten to Grade 6
Mee-Yah-Noh	Elementary	Kindergarten to Grade 6
Menisa	Elementary	Kindergarten to Grade 6
Meyokumin	Elementary	Kindergarten to Grade 6
Meyonohk	Elementary	Kindergarten to Grade 6
Michael A. Kostek	Elementary	Kindergarten to Grade 6
Mill Creek	Elementary	Kindergarten to Grade 6
Minchau	Elementary	Kindergarten to Grade 6
Montrose	Elementary	Kindergarten to Grade 6
Mount Pleasant	Elementary	Kindergarten to Grade 6
Mount Royal	Elementary	Kindergarten to Grade 6
Northmount	Elementary	Kindergarten to Grade 6
Norwood	Elementary	Kindergarten to Grade 6
Ormsby	Elementary	Kindergarten to Grade 6
Overlanders	Elementary	Kindergarten to Grade 6
Parkallen	Elementary	Kindergarten to Grade 6
Patricia Heights	Elementary	Kindergarten to Grade 6
Pollard Meadows	Elementary	Kindergarten to Grade 6
Prince Charles	Elementary	Kindergarten to Grade 6
Princeton	Elementary	Kindergarten to Grade 6
Queen Alexandra	Elementary	Kindergarten to Grade 6
Richard Secord	Elementary	Kindergarten to Grade 6
Rideau Park	Elementary	Kindergarten to Grade 6
Rio Terrace	Elementary	Kindergarten to Grade 6
Riverdale	Elementary	Kindergarten to Grade 6
R. J. Scott	Elementary	Kindergarten to Grade 6
Rundle	Elementary	Kindergarten to Grade 6
Rutherford	Elementary	Kindergarten to Grade 6
Sakaw	Elementary	Kindergarten to Grade 6
Satoo	Elementary	Kindergarten to Grade 6
Scott Robertson	Elementary	Kindergarten to Grade 6
Sherwood	Elementary	Kindergarten to Grade 6
Sifton	Elementary	Kindergarten to Grade 6
Steinhauer	Elementary	Kindergarten to Grade 6
Sweet Grass	Elementary	Kindergarten to Grade 6
Thorncliffe	Elementary	Kindergarten to Grade 6
Tipaskan	Elementary	Kindergarten to Grade 6
Velma E. Baker	Elementary	Kindergarten to Grade 6
Virginia Park	Elementary	Kindergarten to Grade 6
Waverley	Elementary	Kindergarten to Grade 6
Weinlos	Elementary	Kindergarten to Grade 6
Westbrook	Elementary	Kindergarten to Grade 6
Westglen	Elementary	Kindergarten to Grade 6
Windsor Park	Elementary	Kindergarten to Grade 6
York	Elementary	Kindergarten to Grade 6
Youngstown	Elementary	Kindergarten to Grade 6
A. Blair McPherson	Elementary, Junior	Kindergarten to Grade 9
Avonmore	Elementary, Junior	Kindergarten to Grade 6
Balwin	Elementary, Junior	Kindergarten to Grade 9
Bannerman	Elementary, Junior	Kindergarten to Grade 6
Bessie Nichols	Elementary, Junior	Kindergarten to Grade 9
Crestwood	Elementary, Junior	Kindergarten to Grade 9
Donnan	Elementary, Junior	Kindergarten to Grade 3
Dr. Donald Massey	Elementary, Junior	Kindergarten to Grade 9
Edmonton Christian Northeast	Elementary, Junior	Kindergarten to Grade 9
Edmonton Christian West	Elementary, Junior	Kindergarten to Grade 9
Elizabeth Finch	Elementary, Junior	Kindergarten to Grade 9
Ellerslie Campus	Elementary, Junior	Kindergarten to Grade 9
Esther Starkman	Elementary, Junior	Kindergarten to Grade 9
Florence Hallock	Elementary, Junior	Kindergarten to Grade 9
Grandview Heights	Elementary, Junior	Grade 1 to Grade 9
Hardisty	Elementary, Junior	Kindergarten to Grade 9
Johnny Bright	Elementary, Junior	Kindergarten to Grade 9
Laurier Heights	Elementary, Junior	Kindergarten to Grade 9
Major General Griesbach	Elementary, Junior	Kindergarten to Grade 9
McKernan	Elementary, Junior	Kindergarten to Grade 9
Meadowlark Christian	Elementary, Junior	Kindergarten to Grade 9
Michael Strembitsky	Elementary, Junior	Kindergarten to Grade 9
Oliver	Elementary, Junior	Kindergarten to Grade 6
Parkview	Elementary, Junior	Kindergarten to Grade 9
Spruce Avenue	Elementary, Junior	Grade 7 to Grade 9
Stratford	Elementary, Junior	Kindergarten to Grade 9
Talmud Torah	Elementary, Junior	Kindergarten to Grade 9
Winterburn	Elementary, Junior	Kindergarten to Grade 9
Academy at King Edward	Elementary, Junior, Senior	Grade 2 to Grade 12
Alberta School for the Deaf	Elementary, Junior, Senior	Grade 1 to Grade 12
Argyll Centre	Elementary, Junior, Senior	Kindergarten to Grade 12
Millwoods Christian	Elementary, Junior, Senior	Grade 10 to Grade 12
Victoria	Elementary, Junior, Senior	Kindergarten to Grade 12
Allendale	Junior	Grade 7 to Grade 9
Avalon	Junior	Grade 7 to Grade 9
Britannia	Junior	Grade 7 to Grade 9
Dan Knott	Junior	Grade 7 to Grade 9
Dickinsfield	Junior	Grade 7 to Grade 9
D. S. MacKenzie	Junior	Grade 7 to Grade 9
Edith Rogers	Junior	Grade 7 to Grade 9
Highlands	Junior	Grade 7 to Grade 9
Hillcrest	Junior	Grade 7 to Grade 9
John D. Bracco	Junior	Grade 7 to Grade 9
Kate Chegwin	Junior	Grade 7 to Grade 9
Kenilworth	Junior	Grade 7 to Grade 9
Killarney	Junior	Grade 7 to Grade 9
Lawton	Junior	Grade 7 to Grade 9
Londonderry	Junior	Grade 7 to Grade 9
Mary Butterworth	Junior	Grade 7 to Grade 9
Ottewell	Junior	Grade 7 to Grade 9
Riverbend	Junior	Grade 7 to Grade 9
Rosslyn	Junior	Grade 7 to Grade 9
S. Bruce Smith	Junior	Grade 7 to Grade 9
Steele Heights	Junior	Grade 7 to Grade 9
T. D. Baker	Junior	Grade 7 to Grade 9
Vernon Barford	Junior	Grade 7 to Grade 9
Westlawn	Junior	Grade 7 to Grade 9
Westminster	Junior	Grade 7 to Grade 9
Westmount	Junior	Grade 7 to Grade 9
amiskwaciy Academy	Junior, Senior	Grade 7 to Grade 12
Braemar	Junior, Senior	Special
Jasper Place	Junior, Senior	Grade 10 to Grade 12
L. Y. Cairns	Junior, Senior	Grade 7 to Grade 12
Vimy Ridge Academy	Junior, Senior	Grade 7 to Grade 12
Centre High	Senior	Special
Eastglen	Senior	Grade 10 to Grade 12
Edmonton Christian High	Senior	Grade 10 to Grade 12
Harry Ainlay	Senior	Grade 10 to Grade 12
J. Percy Page	Senior	Grade 10 to Grade 12
Lillian Osborne	Senior	Grade 10 to Grade 12
McNally	Senior	Grade 10 to Grade 12
M. E. LaZerte	Senior	Grade 10 to Grade 12
Metro Continuing Education	Senior	Grade 10 to Grade 12
Old Scona	Senior	Grade 10 to Grade 12
Queen Elizabeth	Senior	Grade 10 to Grade 12
Ross Sheppard	Senior	Grade 10 to Grade 12
Strathcona	Senior	Grade 10 to Grade 12
W. P. Wagner	Senior	Grade 10 to Grade 12
Learning Store at Blue Quill	Special	Special
Learning Store at Circle Square	Special	Special
Learning Store Northgate	Special	Special
Learning Store on Whyte	Special	Special
Learning Store West Edmonton	Special	Special
Tevie Miller Heritage	Special	Grade 1 to Grade 6
Transitions at the Y	Special	Special
	<!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>BeeSwarm</title>
	<link href="https://fonts.googleapis.com/css?family=Gaegu" rel="stylesheet">
	<style>
	body {
	margin-top: 30px;
	}

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

	div.tooltip {
	position: absolute;
	text-align: center;
	max-width: 300px;
	max-height: 300px;
	padding: 0.5em;
	font: 0.8em;
	background: rgb(77, 73, 73);
	border: 0px;
	border-radius: 0.5em;
	pointer-events: none;
	color: white;
	}

	text#title {
	font-size: 2em;
	}

	text.label, text#title, div.tooltip, text.legendTitle {
	font-family: 'Gaegu', cursive;
	pointer-events: none;
	}
	</style>
	</head>
	<body>
	<div id="viz"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
	<script>
	/*Define width and height for the SVG, Radius for Beeswarm circles
	Offset for legend and title to match
	*/
	var log = console.log;
	var width = 960, height = 500;
	var radius = 10;
	var borderXOffset = 5;

	//Define SVG to contain the Beeswarm
	var svg = d3.select("#viz").append("svg")
	.attr("width", width)
	.attr("height", height);

	//Circles' tooltip
	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	//Indicate what the circles represent and attract user
	var title = "MOUSEOVER EDMONTON PUBLIC SCHOOLS";
	var enticeText = svg.append("text")
	.attr("y", height * 0.994)
	.attr("x", borderXOffset)
	.attr("id", "title")
	.attr("text-anchor", "left")
	.text(title);

	//Uncomment this to see the border - used to place the beeswarm as desired
	// svg.append("rect")
	// .attr("width", width)
	// .attr("height", height)
	// .style("stroke", "black")
	// .style("fill", "none");

	//Loading the file
	d3.csv("EPS(2015-2016)-July-02-2018.csv", groupForcing);

	function groupForcing(error, data) {
	if(error) {
	alert("Error");
	}
	else {
	//Formating the data to GRADE_LEVEL nests
	var nest = d3.nest()
	.key(function(d){ return d["GRADE_LEVEL"]; })
	.entries(data);

	//Give each GRADE_LEVEL nest a unique color
	var colorScale = d3.scaleOrdinal().domain(nest.map(function(d){ return d.key; }))
	.range(['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00']);

	//To adjust the view of the Beeswarm to get the desired layout
	var xAdjuster = 0.015;
	var yAdjuster = 1.55;
	var circleSpreader = 4;

	//ForceSimulation responsible for the optimization of positioning the circles
	var force = d3.forceSimulation()
	.nodes(data)
	.force("collison", d3.forceCollide(radius))
	.force("x", d3.forceX(function(d, i) { return (i + (width * xAdjuster)) * circleSpreader; }).strength(1.5))
	.force("y", d3.forceY(height / yAdjuster))
	.on("tick", updateNetwork);

	//Beeswarm's cicles each representing an individual data object(School)
	var circles = svg.selectAll("circle")
	.data(data)
	.enter().append("circle")
	.attr("class", "node")
	.style("fill", function(d){ return colorScale(d["GRADE_LEVEL"]); })
	.attr("r", radius)
	.on("mouseover", tooltipMouseOver)
	.on("mouseout", tooltipMouseOut);

	//Legend to show grade level and their totals
	var epsLegend = d3.legendColor()
	.title("Edmonton Public Schools (Grade Levels)")
	.labels(nest.map(function(d){ return `${d.key} - ${d.values.length}`; }))
	.scale(colorScale);

	//Append legend to the svg
	svg.append("g")
	.attr("id", "epsLegend")
	.attr("transform", `translate(${borderXOffset},20)`)
	.call(epsLegend);

	//Place the circles on each tick of the forceSimulation
	function updateNetwork(){
	circles
	.attr("cx", function(d){ return d.x; })
	.attr("cy", function(d){ return d.y; });
	};

	//Transitions the tooltip to view, hide the title text, and highlight the hovered circle
	function tooltipMouseOver(d){
	d3.select(this)
	.style("stroke", "black")
	.style("stroke-width", "2px");

	div.transition()
	.duration(200)
	.style("opacity", .9);
	div .html(`School name: ${d["SCHOOL_NAME"]}<br>
	Grade Level: ${d["GRADE_LEVEL"]}<br>
	Grade Level: ${d["GRADES_OFFERED"]}`)
	.style("left", (d3.event.pageX + 25) + "px")
	.style("top", (d3.event.pageY - 28) + "px");

	enticeText.transition()
	.duration(200)
	.style("fill-opacity", 0);
	};

	//Resets the tooltip, title, and circle
	function tooltipMouseOut(d){
	d3.select(this)
	.style("stroke-width", "0px");

	div.transition()
	.duration(500)
	.style("opacity", 0);

	enticeText.transition()
	.duration(2000)
	.style("fill-opacity", 1);
	};
	}

	};
	</script>
	</body>
	</html>