Filter by champion played. Bug where selecting a new summoner does no…

…t apply filter

index.js

@@ -8,6 +8,26 @@ var matchDetailsPerGame;
 var matchesData;
 var championData;
 
+// Domain for the current Summoner's Rift on the in-game mini-map
+var domain = {
+        min: {x: -120, y: -120},
+        max: {x: 14870, y: 14980}
+},
+xScale, yScale, color;
+
+color = d3.scale.linear()
+    .domain([0, 3])
+    .range(["white", "steelblue"])
+    .interpolate(d3.interpolateLab);
+
+xScale = d3.scale.linear()
+  .domain([domain.min.x, domain.max.x])
+  .range([0, mapWidth]);
+
+yScale = d3.scale.linear()
+  .domain([domain.min.y, domain.max.y])
+  .range([mapHeight, 0]);
+
 // Node server url
 var baseURL = "http://localhost:8081/";
 
@@ -35,8 +55,8 @@ function getAllMatchData(summoner) {
 	var url = `${baseURL}all-match-data/?name=${summoner}`;
 	xhttp.open("GET", url);
 	xhttp.onload = () => {
-		dataset = JSON.parse(xhttp.responseText);
-		matchDetailsPerGame = data.matchDetailsPerGame;
+		matchesData = JSON.parse(xhttp.responseText);
+		matchDetailsPerGame = matchesData.matchDetailsPerGame;
 		renderMapKda();
 		drawChampionSelectFilter();
 		//displayAnalysis(data);
@@ -89,64 +109,59 @@ function drawChampionSelectFilter() {
 	sortedData.unshift({name: "All champions", id: 0});
 	var options = select
 		.selectAll('option')
-		.data(d3.map(sortedData, d => d.name).keys())
+		.data(sortedData)
 		.enter()
 		.append('option')
-		.text(d => d)
-		.attr('value', d => d);
+		.text(d => d.name)
+		.attr('value', d => d.key)
 }
 
 function updateMap() {
+	let filteredKills = matchesData.kills.filter(d => filterByChampionPlayed(d));
+	let filteredDeaths = matchesData.deaths.filter(d => filterByChampionPlayed(d));
+	let filteredAssists = matchesData.assists.filter(d => filterByChampionPlayed(d));
+
+	let updatedKills = svg.selectAll('.kills').data(filteredKills, d => d.id);	
+
 
+	let updatedDeaths = svg.selectAll('.deaths').data(filteredDeaths, d => d.id);	
+
+	let updatedAssists = svg.selectAll('.assists').data(filteredAssists, d => d.id);	
+
+	renderDataPoints(updatedKills, 'kills');
+	renderDataPoints(updatedDeaths, 'deaths');
+	renderDataPoints(updatedAssists, 'assists');
 }
 
-function renderMapKda() {
-	// Domain for the current Summoner's Rift on the in-game mini-map
-    let domain = {
-            min: {x: -120, y: -120},
-            max: {x: 14870, y: 14980}
-    },
-    xScale, yScale, color;
-
-	color = d3.scale.linear()
-	    .domain([0, 3])
-	    .range(["white", "steelblue"])
-	    .interpolate(d3.interpolateLab);
-
-	xScale = d3.scale.linear()
-	  .domain([domain.min.x, domain.max.x])
-	  .range([0, mapWidth]);
-
-	yScale = d3.scale.linear()
-	  .domain([domain.min.y, domain.max.y])
-	  .range([mapHeight, 0]);
-
-	var kills = svg.selectAll('.kills')
-		.data(data.kills, d => d.id)
-		.enter()
+function renderDataPoints(data, className) {
+	data.exit().remove();
+	data.enter()
 		.append('svg:circle')
 		.attr('cx', function(d) { return xScale(d.position.x) })
         .attr('cy', function(d) { return yScale(d.position.y) })
         .attr('r', 5)
-		.attr('class', 'kills');
+		.attr('class', className);
+}
 
-	var circles = svg.selectAll('.deaths')
-		.data(data.deaths, d => d.id)
-		.enter()
-		.append('svg:circle')
-		.attr('cx', function(d) { return xScale(d.position.x) })
-        .attr('cy', function(d) { return yScale(d.position.y) })
-        .attr('r', 5)
-		.attr('class', 'deaths');
+function filterByChampionPlayed(datum) {
+	let championSelected = d3.select('.championSelect').node().value;
+	let details = matchDetailsPerGame[datum.matchId];
+	return (championSelected === "All champions" || 
+		championData[championSelected].id === details.participantDetails[details.myParticipantId].championId);
+}
 
-	var circles = svg.selectAll('.assists')
-		.data(data.assists, d => d.id)
-		.enter()
-		.append('svg:circle')
-		.attr('cx', function(d) { return xScale(d.position.x) })
-        .attr('cy', function(d) { return yScale(d.position.y) })
-        .attr('r', 5)
-		.attr('class', 'assists');
+function renderMapKda() {
+	let kills = svg.selectAll('.kills')
+		.data(matchesData.kills, d => d.id);
+	renderDataPoints(kills, 'kills');
+
+	let deaths = svg.selectAll('.deaths')
+		.data(matchesData.deaths, d => d.id);
+	renderDataPoints(deaths, 'deaths');
+
+	let assists = svg.selectAll('.assists')
+		.data(matchesData.assists, d => d.id);
+	renderDataPoints(assists, 'assists');
 
 	console.log("Rendered map");
 }

server.js

@@ -8,7 +8,7 @@ let express = require('express');
 let app = express();
 let fs = require('fs');
 
-const port = 8081; 
+const port = 8080; 
 let baseURL = 'https://na1.api.riotgames.com/lol/';
 let apiKey = 'RGAPI-37751fb9-eee8-490c-808a-a352d51a02b4';
 
@@ -51,7 +51,7 @@ app.listen(port, function () {
 	//TODO: remove prefetchData
 	//prefetchFavoritesMatchData();
 	//prefetchMasterLeagueMatchListData();
-	//prefetchTimelinesAndDetailsData();
+	prefetchTimelinesAndDetailsData();
 	console.log(`Server running at http://localhost:${port}/`)
 });
 
@@ -417,7 +417,7 @@ function getParticipantDetails(matchDetails, isRedTeam) {
 
 		details.role = participant.timeline.role;
 		details.lane = participant.timeline.lane;
-		details.teamId = 
+		details.isAlly = 
 			(isRedTeam === isRedSide(participant.participantId));
 		details.championId = participant.championId;
 		allDetails[participant.participantId] = details;