Map legend

index.css

@@ -18,10 +18,34 @@
 	fill: purple;
 }
 
+.killLegend {
+	text-align: left;
+}
+
+.rightAlign {
+	text-align: right;
+}
+
 .areaFilter-switch {
 	width: 120px;
 }
 
+.flexContainer {
+	display: flex;
+}
+
+.flexOneContainer {
+	flex: 1;
+}
+
+.flexTwoContainer {
+	flex: 2;
+}
+
+.flexAreaFilterContainer {
+	flex: 10;
+}
+
 .interactive-area {
 	flex: 1;
 	padding: 5px;

index.html

@@ -64,11 +64,19 @@
 				<input type="radio" name="outcomeSelect" id="bothOutcomes" value="bothOutcomes" onclick="bothOutcomesSelected()" checked />Both
 				<br/>
 
-				<label class="pt-control pt-switch areaFilter-switch">
-				  <input type="checkbox" class="areaFilter-checkbox" />
-				  <span class="pt-control-indicator"></span>
-				  Area Filter
-				</label>
+				<div class="flexContainer">
+					<div class="flexAreaFilterContainer">
+						<label class="pt-control pt-switch areaFilter-switch">
+						  <input type="checkbox" class="areaFilter-checkbox" />
+						  <span class="pt-control-indicator"></span>
+						  Area Filter
+						</label>
+					</div>
+
+					<div class="rightAlign flexTwoContainer"> kill = </div> <div class="killLegend flexOneContainer"> </div>
+					<div class="rightAlign flexTwoContainer"> death = </div> <div class="deathLegend flexOneContainer"> </div>
+					<div class="rightAlign flexTwoContainer"> assist = </div> <div class="assistLegend flexOneContainer"> </div>
+				</div>
 			</div>
 			<div class="vis-area">
 				<div class="summmoner-name-display"></div>

index.js

@@ -110,6 +110,7 @@ $(".summoner-name").keyup(function(event) {
 
 setupAreaFilter();
 drawTimeFilter();
+drawLegend();
 
 function setupAreaFilter() {
 	d3.select(".areaFilter-checkbox").on("change", d => {
@@ -363,6 +364,38 @@ function drawTimeFilter() {
 	redrawSliderText([0, 60]);
 }
 
+function drawLegend() {
+	d3.select('.killLegend')
+		.append("svg")
+		.attr("width", 20)
+		.attr("height", 20)
+		.append("svg:circle")
+		.attr('r', 5)
+		.attr('cx', 10)
+		.attr('cy', 10)
+		.classed("kills", true);
+
+	d3.select('.deathLegend')
+		.append("svg")
+		.attr("width", 20)
+		.attr("height", 20)
+		.append("svg:circle")
+		.attr('r', 5)
+		.attr('cx', 10)
+		.attr('cy', 10)
+		.classed("deaths", true);
+
+	d3.select('.assistLegend')
+		.append("svg")
+		.attr("width", 20)
+		.attr("height", 20)
+		.append("svg:circle")
+		.attr('r', 5)
+		.attr('cx', 10)
+		.attr('cy', 10)
+		.classed("assists", true);
+}
+
 function onSliderChange(event, ui) {
 	var values = ui.values;
 	redrawSliderText(values);