From 6aec5da752864d10003111e6b68e30747e1f3af5 Mon Sep 17 00:00:00 2001 From: Angela Ambroz Date: Sun, 14 Feb 2016 10:32:52 -0500 Subject: [PATCH] Fixing tooltips (percentages etc). --- README.md | 5 +++-- saudization.html | 50 +++++++++++++++++++++++++++++++++++------------- 2 files changed, 40 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 9ab0378..95cbff6 100644 --- a/README.md +++ b/README.md @@ -61,10 +61,11 @@ topojson -o saudi_comp.json --id-property NAME_1 saudi.json 24. ~~Industry viz: Dropdown menu for all industries.~~ 25. ~~Industry viz: Update via dropdown.~~ 26. Industry viz: First chart. Default to Construction? -27. By region: Fix mouseout title. +27. ~~By region: Fix mouseout title.~~ 28. By region: `click` fixes the region. 29. By region: Mouseover captions. 30. ~~Merge lat/lon data into `industries.csv`.~~ _Check that the pandas merge worked!_ -31. By industry: Mouseover captions. +31. ~~By industry: Mouseover captions.~~ +32. Tooltips: Fix percentage calcs. diff --git a/saudization.html b/saudization.html index 8fb66c9..9c56381 100644 --- a/saudization.html +++ b/saudization.html @@ -128,8 +128,10 @@
@@ -178,16 +180,39 @@ function mouseover(d) { - // console.log(this.__data__); - console.log(this); - console.log(this.parentNode); - // console.log(this.parentNode.__data__); - - var comma = d3.format(","); - var mousecoord = [0,0], + var className = this.parentNode.getAttribute("class"), + provinceName, + comma = d3.format(","), + mousecoord = [0,0], mousecoord = d3.mouse(this), style = window.getComputedStyle(this, null), - thisColor = style['fill']; + thisColor = style['fill'], + thisIndustry = this.parentNode.__data__.industry; + + var totalWorkers = parseFloat(this.parentNode.__data__.Saudi) + parseFloat(this.parentNode.__data__['Non-Saudi']), + percentSaudi = parseFloat(this.parentNode.__data__.Saudi) / totalWorkers, + percentSaudi = parseInt(percentSaudi * 100); + + if (className == "donut") { + console.log("This is a donut."); + provinceName = this.parentNode.getAttribute("id"); + d3.select("#caption") + .text("There are " + percentSaudi + "% Saudi workers in the " + + thisIndustry + " industry in " + provinceName + " province."); + + } else if (className == "pie") { + console.log("This is a pie."); + provinceName = this.parentNode.__data__['capital']; + + d3.select("#caption").text(null); + d3.selectAll(".total-workforce").text("Total"); + + } + + console.log(this.parentNode.__data__.Saudi); + console.log(this.parentNode.__data__['Non-Saudi']); + console.log(totalWorkers); + console.log(percentSaudi); d3.select("#tooltip") .style("left", mousecoord[0] + w/2 + "px") @@ -197,7 +222,7 @@ .style("stroke-width", "2px") .style("fill", d3.rgb(thisColor).darker()); - d3.select("#provinceName").text(this.parentNode.__data__.capital + " province"); + d3.select("#provinceName").text(provinceName + " province"); d3.select("#saudi").text(comma(this.parentNode.__data__.Saudi)); d3.select("#expats").text(comma(this.parentNode.__data__['Non-Saudi'])); @@ -230,9 +255,8 @@ function demoused(d) { d3.select(this).attr("class", "nomouse"); - // TODO: Make this a function of userProvince. d3.select("#chartTitle") - .text("Riyadh") + .text(d.id) .classed("hoverTitle", false) .classed("title", true); }