Added legend highlighting

rocking42 · Jan 26, 2017 · f4689fe · f4689fe
1 parent dbd3c75
commit f4689fe
Show file tree

Hide file tree

Showing 18 changed files with 66 additions and 45 deletions.
diff --git a/app/donatingD3.js b/app/donatingD3.js
@@ -1,5 +1,6 @@
 const d3 = require("d3");
 const _  = require("lodash");
+const $ = require("jquery");
 //Set up stack method
 export const stack = d3.layout.stack()
         .values(function(d) {
@@ -155,7 +156,12 @@ export function showStack(stackData) {
     var paths = selection.enter()
         .append("path")
         .attr("class", "area")
-
+        .on("mouseover", function(e) {
+          $(`.${e.aidType}`).css("background", "yellow")
+        })
+        .on("mouseout", function(e) {
+          $(`.${e.aidType}`).css("background", "none")
+        })
         .attr("stroke", (d, i) => colorDonate(i))
         .attr("fill", "#fff")
         .attr("d", (d) => areaDonate(d.aid))
@@ -188,7 +194,7 @@ export function showStack(stackData) {
 
     svgDonate.append("text")
               .attr("text-anchor", "end")
-              .attr("x", 80)
-              .attr("y", h - 45)
-              .text("%");
+              .attr("x", w - 180)
+              .attr("y", 15)
+              .text("Donation breakdown by percentage");
 }
diff --git a/app/main.js b/app/main.js
@@ -160,7 +160,7 @@ function ready(error, results) {
         colorScheme.forEach((color, i) => {
             const div = $("<div></div>").attr("class", "legendDiv");
             const tag = $(`<span></span>`).attr("class", "legendTag").css("background", color).appendTo(div);
-            const span = $(`<span>&nbsp;- ${colorDescription[i]}</span>`).attr("class", "legendSpan").appendTo(div);
+            const span = $(`<span>&nbsp;- ${colorDescription[i]}</span>`).attr("class", `${colorDescription[i].toLowerCase().split(" ").join("")}`).appendTo(div);
             legend.append(div);
         });
     }
@@ -197,6 +197,7 @@ function ready(error, results) {
             });
             d3.select("#msg").text(country.code);
             d3.select("#stats").text(`Funds Recieved: $${country["recieved"]}`);
+            d3.select(".qualityText").style("display", "block");
             d3.select(".countryRank").style("display", "block");
             // Grap the rank of the country or ? if no data present
             let rank = (countryRanking.filter((item) => item.country === country.code))
@@ -209,10 +210,11 @@ function ready(error, results) {
             displayNewStack(country.code, crossSector, ecoInfraStruct, eduAid, govAndCivil, health, policies, prodSectorAid, socialServ, waterAndSanitize);
             d3.select("#donaterSvg").style("display", "inline");
             // Hide the rank and info
+            d3.select(".qualityText").style("display", "none");
             d3.select(".countryRank").style("display", "none");
             d3.select("#d3stuff .countryInfo").style("display", "none");
             d3.select("#msg").text(country.code);
-            d3.select("#stats").text(`Funds Donated: ${country["aid"][2006]}`);
+            d3.select("#stats").text(`Funds Donated: $${country["aid"][2006]}`);
             // else Helpful message
         } else if (receivingAidActivated) {
             d3.select("#msg").text(`select a reciever`);
@@ -229,8 +231,8 @@ function ready(error, results) {
         renderer.domElement
     );
     // Texture layer load
-    const donaters =  addMaps(new THREE.Group(), countries.features, "aid-given");
-    const aidLayers = addMaps(new THREE.Group(), countries.features, "aid-received");
+    // const donaters =  addMaps(new THREE.Group(), countries.features, "aid-given");
+    // const aidLayers = addMaps(new THREE.Group(), countries.features, "aid-received");
     // Fire event listener as all textures are loaded
     $.event.trigger({
       type: "CanvasOnLoad"
@@ -242,7 +244,7 @@ function ready(error, results) {
     // AID RECEIVE LAYERS
     let receivingAidActivated = false;
     document.querySelector(".clearMap").addEventListener("click", function() {
-          addSelected(aidLayers);
+          // addSelected(aidLayers);
         if (!receivingAidActivated) {
             $("#legendMenu").html("");
             receivingAidActivated = true;
@@ -258,7 +260,7 @@ function ready(error, results) {
     // AID DONATE LAYERS
     let donatersActivated = false;
     document.querySelector(".showDonate").addEventListener("click", function() {
-          addSelected(donaters);
+          // addSelected(donaters);
         if (!donatersActivated) {
             legend(colorDescription, colorScheme);
             receivingAidActivated = false;

diff --git a/app/receivingD3.js b/app/receivingD3.js
@@ -120,9 +120,15 @@ export function showLine(countryData) {
     .attr("class", "y axis")
     .call(yAxisReceive);
 
+    // svgRecieve.append("text")
+    // .attr("text-anchor", "end")
+    // .attr("x", -25)
+    // .attr("y", height + 5)
+    // .text("MIL");
+
     svgRecieve.append("text")
     .attr("text-anchor", "end")
-    .attr("x", -25)
-    .attr("y", height + 5)
-    .text("MIL");
+    .attr("x", width - 60)
+    // .attr("y", height + 5)
+    .text("Aid given each year (Millions)");
 }
diff --git a/app/template.html b/app/template.html
@@ -26,6 +26,7 @@
                 <div id="stats"></div>
             </div>
             <p class="countryRank"></p>
+            <p class="qualityText" style="margin:0;text-align:center;display:none;">Ranking on quality of life</p>
             <p class="countryInfo"></p>
             <svg id="donaterSvg"></svg>
             <svg id="recieverSvg"></svg>

diff --git a/app/textureAdd.js b/app/textureAdd.js
@@ -22,7 +22,6 @@ export function mapTexture(geojson, color) {
     context.strokeStyle = "#333";
     context.lineWidth = 1;
 
-
     context.beginPath();
 
     path(geojson);
@@ -68,44 +67,49 @@ export const colorInNeed = function(country) {
 
 export function countTexture(country) {
     let color;
+    // Choose color range based on aid type
     if (country["aid-given"]) {
         color = chooseColor(country);
     } else if (country["aid-received"]) {
         color = colorInNeed(country);
     }
+    // Set up vars and canvas
     var texture, context, canvas;
     canvas = d3.select("body").append("canvas")
         .style("display", "none")
         .attr("width", "2048px")
         .attr("height", "1024px");
-
+    // Set up 2D context
     context = canvas.node().getContext("2d");
-
+    // Create a path of the country outline
     var path = d3.geo.path()
         .projection(projection)
         .context(context);
 
     context.strokeStyle = "#333";
     context.lineWidth = 1;
-
+    // Fill the country based on the returned color
     context.fillStyle = color;
 
     context.beginPath();
 
-
     path(country);
     context.fill();
 
     context.stroke();
-
+    // Gather the texture from the canvas
     texture = new THREE.Texture(canvas.node());
     texture.needsUpdate = true;
-
+    // Remove the canvas and return only the texture
     canvas.remove();
 
     return texture;
 }
+
 var segments = 155;
+// Iterate over all countries
+// Make a texture map of either recipient or donating countries
+// Return a group of all textures
 export function addMaps(group, countries, aidType) {
     for (const country of countries) {
         if (country[aidType]) {
@@ -119,5 +123,5 @@ export function addMaps(group, countries, aidType) {
             group.add(baseMap);
         }
     }
-    return group
+    return group;
 }
diff --git a/assets/data/crossSector.csv b/assets/data/crossSector.csv
@@ -1,4 +1,4 @@
-crossSectorAid,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007
+crosssectoraid,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007
 Australia,,1.56059497683492,1.23455117085863,0.6474534963957,4.05622294635475,3.15665701881331,6.65327468569252,21.4807171417516,5.63590584377562,14.2295964618301,3.42801675692245,2.11883534589775,3.25190916906893,0.22669351318624,0.27779492561269,1.1996809532336,5.21083426701524,2.82738524566516,3.71258230724926,1.05103668261563,2.85540704738761,3.25565722284144,1.54131159688774,1.41998123288458,12.174702379127,9.9699672877893,13.3449223349969,6.38693467336684,8.12421615742334,8.69716186333814,18.4753262336883,20.6814580031696,22.0594045181913,19.6823228919082,20.1201275837786,16.6652507575114,21.557526990997
 Austria,,,,1.12082008213172,2.62154432793136,,,,,,,,,,,,,3.61205813744841,6.24824008892182,10.0941929047214,3.40688171231196,0.75260883314009,0.93634597546248,2.13235294117647,5.19339417644502,6.81431634992235,2.85200327064595,3.97568323649666,12.2881023387223,9.18849156383782,8.11328976034858,6.16532196681382,6.60634208840487,9.7767023263712,8.10108560242036,7.98096716498498,5.4455995997109
 Belgium,,,11.499509964064,10.1312785388128,6.47639956092206,8.82845600551779,1.47808358817533,0.39221083052364,5.81124072110286,5.74905112748381,0.042173755874202,0.31822831257814,0.57086935247105,0.44036596873675,,3.51403623538781,2.60596993659614,3.92006247519556,,27.4627337674472,29.4858040827428,28.7574606619642,25.3861501943651,21.8089659833296,8.63160824885755,21.2940692106004,18.5845282510001,8.93677400735913,7.50840069021887,9.44551616728315,10.8542968090495,13.2450920746094,11.3145396047189,6.23625388011044,6.33094693535072,5.8653245567674,8.70135670816816

diff --git a/assets/data/ecoInfraStruct.csv b/assets/data/ecoInfraStruct.csv
@@ -1,4 +1,4 @@
-economicalInfrastructure,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007
+economicalinfastructure,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007
 Australia,36.5666351606805,30.1064780947736,11.0472679965308,21.6742765698178,22.1438645980254,27.1617221418234,27.0477608838707,28.5463691474268,47.5875395245345,20.8389418454523,18.5782160008174,12.7976526351428,16.9296515450362,13.9958603793244,10.9404901537132,4.88825224228021,14.1528392822209,19.5955108046508,25.1521613922573,11.5502392344498,12.2502362629945,15.9918608569429,21.8673582808448,34.2969034259561,24.2107910183203,20.4479228304436,18.3076319183536,14.7457286432161,11.5270640725408,11.3836144666386,6.82184640767962,11.0340729001585,7.32410300614158,6.90517577778566,5.50267180315646,4.94364681562031,6.67690909743062
 Austria,,,4.83154387263976,13.3510359094698,3.02669208770257,0.51220247062368,40.2641759314118,28.217758444217,9.57659458477194,19.3879368698564,49.0085582990205,79.8422493874717,52.1055345479546,61.5497352496218,34.6648443809405,53.8245445059796,54.7552242556221,58.9969495783241,38.2808447573175,13.6975850230347,43.1475434589759,54.1709708021503,27.9941193972382,43.6541889483066,18.6929595827901,4.61436071877542,5.76614881439084,1.61663438777706,1.49113169047245,3.22651725006296,3.44662309368192,22.65184959659,4.92472773862908,3.03532008830022,3.75511656878448,5.71659973677994,10.7522099293935
 Belgium,3.2306504204565,1.40489125027362,8.85331590983339,4.49486301369863,9.70362239297475,10.6414425066509,5.19877675840979,9.34425101493154,12.2481442205726,12.9493190444296,3.94324617423786,5.34980760176,17.1804490838906,16.0678874741866,17.1043639558723,18.2286185613925,17.3940300634039,19.419800028165,8.1473136915078,12.9141690744175,10.6344721294631,9.84264785675529,9.67353538133407,11.9058346474431,11.4430861305064,6.45301089947778,5.91765181822268,6.27690531733244,4.77931159749342,7.30757658885369,11.4570319095053,10.2981110237272,12.6015014554926,14.124381912056,13.1247377894466,10.9390765387018,10.0343364412931

diff --git a/assets/data/eduAid.csv b/assets/data/eduAid.csv
@@ -1,4 +1,4 @@
-educationAid,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007
+educationalaid,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007
 Australia,4.74952741020794,33.2276680484435,19.6647333044232,23.6592133660241,26.2584504644716,30.2279305354559,10.5583070688879,11.5800335354056,11.2688839442558,19.6027799906601,23.710023500562,24.6445096490238,20.7201739746118,48.7883865335605,50.2500154330514,45.2753406149789,41.4163509932597,38.7582585614956,33.5735745084915,46.933014354067,39.2432833805859,23.1784131263122,38.9403482771397,21.3791914820276,29.0953920131499,29.4320579664839,27.9672517243313,28.3165829145729,27.4747228110676,23.1957820866609,14.4274036298185,11.1661384046487,10.2808605394534,9.74227535563518,8.05269044364359,12.4989380681336,12.0870646468753
 Austria,24.6677571048865,42.3363828289937,13.4579785264717,2.52261709945348,15.9437559580553,4.85085869237722,19.0987348830725,16.9683981576254,45.0572415046338,17.6386761195625,7.56474936410011,0.69703759024147,15.3854417325541,31.7936838124054,44.3623035348202,29.7495786178666,32.1202730432598,16.3592320114839,12.2341608002964,31.8641978931307,31.0696287348295,31.5716243280278,24.0229623536412,28.6096256684492,30.5166232073012,44.9937144124824,35.4112837285364,48.9536259952658,36.2874744938,29.391211281793,42.6666666666667,33.2379357588674,39.5059256886611,40.7751740533197,38.861007296672,39.489758040023,40.7294156891088
 Belgium,84.5310622962073,83.6646568364078,11.0421430904933,11.3727168949772,15.9165751920966,18.9082668243177,26.877336051648,21.8193077822886,20.2598091198303,19.7867827640098,6.78093746234486,4.47792696984949,15.5167726852607,36.9729626235965,37.3091030808496,34.1320856679655,27.515850965306,24.4895085199268,29.9272097053726,22.1297454252735,17.6410147927653,18.522595147663,17.7199078055661,17.1299842306826,21.7727156742212,13.6254306702204,14.6851260844159,20.3819051970852,20.8337117428027,19.6839105888183,19.1929765321628,21.6349364158419,20.4106021142945,25.6422655165421,18.9089334289697,20.6265314947389,25.2861370107755

diff --git a/assets/data/govAndCivil.csv b/assets/data/govAndCivil.csv
@@ -1,4 +1,4 @@
-govAndCivil,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007
+govandcivil,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007
 Australia,,0.66650410468991,19.0088356461405,27.0198053235065,14.4205048392588,1.99891461649783,0.88490977730059,3.70437250096737,1.9674434945544,4.71664423261819,5.69888627771534,9.81548357973141,7.28265817023214,8.26516100871573,3.3134761405025,7.15250760991649,9.70317807537036,11.7971206831886,6.71689419529584,10.2822966507177,6.23903064668557,15.3179190751445,4.09534395455107,5.55066163656906,7.08831412572144,6.89747568913352,8.05809454382325,7.57889447236181,18.0908092030055,21.5574115024032,24.1741037948103,21.8436344426836,20.4584635276371,30.1092624782717,30.7874570233213,36.1297539149888,38.8640466767895
 Austria,,,0.31469825990374,0.046314879426931,2.3117254528122,,,,,,0.067454573560618,0.037996409994366,0.055861120660021,0.27893343419062,0.25470584580978,0.25282928003853,0.30989572427656,0.00897182845864,0.24453501296777,0.41961325156255,0.2642456729771,0.69568883735638,1.28988221292682,1.19429590017825,4.47631464580617,7.1212009169563,10.8029435813573,5.91779642780288,8.06192120546225,19.0254343993956,29.1067538126362,17.9388034708479,20.0592568866112,14.4676515537443,17.1738743548674,21.4321870887187,18.5550675487852
 Belgium,1.05328642526171,2.3719976916801,7.93858216269193,11.0730593607306,3.02963776070252,2.04946300128091,0.47570506286103,0.44037707286864,1.25132555673383,1.95914266577361,0.23496806844198,0.20457534380023,0.23378459196433,1.85446041492868,2.75588903920447,4.12838817941352,4.96544845764765,6.60982448054691,8.00173310225303,5.67654203861026,4.55719919614391,4.32214557011084,3.48997213526437,2.52984906510475,5.3817068361595,6.20598496175432,8.39214276082168,8.71070921815252,13.4206702388521,14.6399306231528,17.7849062974844,17.7560801887492,15.6656963382871,13.3678578670701,16.5649402498274,19.4349685292846,15.9329462341578

diff --git a/assets/data/health.csv b/assets/data/health.csv
@@ -1,4 +1,4 @@
-healthAid,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007
+healthaid,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007
 Australia,0.94517958412098,1.20295862797692,5.4165763226366,4.93444716867558,10.9333203637955,9.38856729377713,0.82603124025907,3.50831936024765,5.34313151422883,2.82943713430212,1.00388270154286,2.14987021780837,5.97531988064532,2.35564128919615,1.68220260509908,2.39936190646721,1.53835209589358,4.01748362713136,1.08809016048941,1.66985645933014,0.92480086404752,5.31377174110267,7.10633567988144,7.95783144066336,7.09996749323798,6.37274056872355,6.85807211349745,6.31959798994975,9.77791589438519,10.9769915385881,12.3537573121344,12.2886951928156,10.8806522285673,10.0109971974884,8.71546331966364,11.0901084586413,8.54685015363646
 Austria,,,1.64753794890781,0.13585697965233,9.67588179218303,0.63272069900572,0.038336876590109,0.038382804503582,0.11811739051426,0.085503580462432,0.047780322938771,0.44809559372666,0.20625644551392,0.160741301059,2.6526681990433,0.98723814110282,3.93232547426609,2.53723308810336,0.76028158577251,11.8548079462426,0.77763726618977,1.54738062611995,6.21838738470693,5.650623885918,4.1041938287701,4.05605265103897,22.6034341782502,4.21777490854315,24.5663946005337,14.7758750944346,2.56209150326797,4.29898005784746,6.5903267136451,11.122431652233,11.4433173162484,6.73573381027908,7.69444598876967
 Belgium,2.93246953835593,2.88937973852307,13.4269846455407,19.8915525114155,15.8397365532382,11.2523401320327,15.9531090723751,17.0783733571871,16.304347826087,14.735432016075,3.92667791300157,3.43394327093244,14.1195019844506,13.6910053199491,11.1560508221643,10.6544554737052,11.1804516634609,9.9793883063845,11.9948006932409,10.6573519053574,8.42235686979647,8.57452910627083,10.3701537720596,10.6533002928588,13.1411074253636,15.4087845890485,19.0048096372545,20.7161924917631,20.6475342838979,18.2999132789409,16.0746243457707,12.7494769331216,14.1473877738624,11.5334820384033,13.1991717529875,12.5666650651035,13.9034671430964