Skip to content

Instantly share code, notes, and snippets.

@mikelotis

mikelotis/.block

Last active August 9, 2018 00:14
Show Gist options
  • Save mikelotis/199fb053ced246ff4246cf81e6afbe76 to your computer and use it in GitHub Desktop.
Save mikelotis/199fb053ced246ff4246cf81e6afbe76 to your computer and use it in GitHub Desktop.
Download ZIP
Edmonton Public Schools - Beeswarm
Raw
.block
border: yes
width: 1366
height: 560
Raw
EPS(2015-2016)-July-02-2018.csv
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
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment