Skip to content

Commit

Permalink
Tooltips for bar chart. Hoverable map for bar chart. Odds/ends.
Browse files Browse the repository at this point in the history
  • Loading branch information
@angelaambroz
angelaambroz committed Feb 17, 2016
1 parent be5b0a9 commit 7581ace
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 76 deletions.
4 changes: 4 additions & 0 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,10 @@ div {
font: 200 20px/24px 'Roboto', sans-serif;
}

.hoverable:hover {
cursor: pointer;
}

.menu {
position: absolute;
width: 200px;
Expand Down
156 changes: 88 additions & 68 deletions js/visualization.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*
VISUALIZING THE SAUDI WORKFORCE
Code: https://github.com/hks-epod/hrdf
Code, coders: https://github.com/hks-epod/hrdf
Feb 2016
*/

Expand Down Expand Up @@ -46,48 +46,62 @@ function mouseover(d) {
mousecoord = [0,0],
mousecoord = d3.mouse(this),
style = window.getComputedStyle(this, null),
thisColor = style['fill'],
thisIndustry = this.parentNode.__data__.industry;
thisColor = style['fill'];

if (className == "chart") {
var thisIndustry = d.industry;
totalWorkers = parseFloat(d.Saudi) + parseFloat(d['Non-Saudi']),
percentSaudi = parseFloat(d.Saudi) / totalWorkers,
percentSaudi = parseInt(percentSaudi * 100),
workerSaudi = comma(d.Saudi),
workerExpat = comma(d['Non-Saudi']),
provinceName = d.province;

} else {
var thisIndustry = this.parentNode.__data__.industry,
totalWorkers = parseFloat(this.parentNode.__data__.Saudi) + parseFloat(this.parentNode.__data__['Non-Saudi']),
percentSaudi = parseFloat(this.parentNode.__data__.Saudi) / totalWorkers,
percentSaudi = parseInt(percentSaudi * 100),
workerSaudi = comma(this.parentNode.__data__.Saudi),
workerExpat = comma(this.parentNode.__data__['Non-Saudi']),
provinceName = this.parentNode.getAttribute("id");

if (d.data == this.parentNode.__data__.Saudi) {
d3.select("#saudi").style("background-color", "#ffffad");
d3.select("#expats").style("background-color", null);
} else if (d.data == this.parentNode.__data__['Non-Saudi']) {
d3.select("#saudi").style("background-color", null);
d3.select("#expats").style("background-color", "#ffb061");
}

var totalWorkers = parseFloat(this.parentNode.__data__.Saudi) + parseFloat(this.parentNode.__data__['Non-Saudi']),
percentSaudi = parseFloat(this.parentNode.__data__.Saudi) / totalWorkers,
percentSaudi = parseInt(percentSaudi * 100);
d3.select(this)
.style("stroke-width", "2px")
.style("fill", d3.rgb(thisColor).darker());
}

if (className == "donut") {
provinceName = this.parentNode.getAttribute("id");
if (className == "donut" || className == "chart") {
d3.select("#caption")
.html("<br> There are " + percentSaudi + "% Saudi workers in the "
+ thisIndustry + " industry in " + provinceName + " province.");

d3.selectAll(".total-workforce").text(null);

} else if (className == "pie") {
} else if (className == "pie") {
provinceName = this.parentNode.__data__['capital'];

d3.select("#caption").text(null);
d3.selectAll(".total-workforce").text("Total");

}

d3.select("#tooltip")
.style("left", mousecoord[0] + w/2 + "px")
.style("top", mousecoord[1] + h/2 + "px");

d3.select(this)
.style("stroke-width", "2px")
.style("fill", d3.rgb(thisColor).darker());

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']));

if (d.data == this.parentNode.__data__.Saudi) {
d3.select("#saudi").style("background-color", "yellow");
d3.select("#expats").style("background-color", null);
} else if (d.data == this.parentNode.__data__['Non-Saudi']) {
d3.select("#saudi").style("background-color", null);
d3.select("#expats").style("background-color", "yellow");
}
d3.select("#saudi").text(workerSaudi);
d3.select("#expats").text(workerExpat);


d3.select("#tooltip")
.style("left", mousecoord[0] + w/2 + "px")
.style("top", (mousecoord[1] + h/2 - 150) + "px");

d3.select("#tooltip").classed("hidden", false);
};
Expand Down Expand Up @@ -311,7 +325,7 @@ function drawPies(csv) {
if (i==1) { return "expat"; }
})
.on("mouseover", mouseover)
.on("mouseout", mouseout);
.on("mouseout", mouseout);

} //drawPies

Expand Down Expand Up @@ -350,7 +364,9 @@ function drawBars(new_csv) {
.enter()
.append("g")
.attr("class", function(d) { return "bar " + d.province; })
.attr("transform", function(d, i) { return "translate(" + (i * barWidth * 2 + 3*(w/4)) + ",0)"; });
.attr("transform", function(d, i) { return "translate(" + (i * barWidth * 2 + 3*(w/4)) + ",0)"; })
.on("mouseover", mouseover)
.on("mouseout", mouseout);

// SAUDI
saudiRects = bar.append("rect")
Expand Down Expand Up @@ -401,60 +417,65 @@ function drawBars(new_csv) {
function update(d) {

d3.select("path#Riyadh").attr("class", "nomouse");
d3.selectAll("path").attr("class", "nomouse hoverable");
d3.select(this).attr("class", "moused");
userProvince = d.id;

d3.select("#chartTitle").text(userProvince);
d3.select("#chartTitle").text(userProvince);

filtered = data.filter(function(row) {
return row['province'] == userProvince;
});
filtered = data.filter(function(row) {
return row['province'] == userProvince;
});

bar = d3.selectAll('.bar').data(filtered);
bar = d3.selectAll('.bar').data(filtered);

var new_bars = bar.enter()
.append("g")
.attr("transform", function(d, i) { return "translate(" + (i * barWidth + 3*(w/4)) + ",0)"; })

new_bars.append("rect")
.attr("width", barWidth)
.attr("class", "bars saudi");
var new_bars = bar.enter()
.append("g")
.attr("transform", function(d, i) { return "translate(" + (i * barWidth + 3*(w/4)) + ",0)"; })
new_bars.append("rect")
.attr("width", barWidth)
.attr("class", "bars saudi");

new_bars.append("rect")
.attr("width", barWidth)
.attr("class","bars expat");
new_bars.append("rect")
.attr("width", barWidth)
.attr("class","bars expat");

bar.exit().remove();
bar.exit().remove();

bar.attr("class", function(d) {
return "bar " + d.province;
});

// UPDATING THE BAR CHART
saudiRects = chart.selectAll(".bars.saudi");
saudiRects.transition()
.attr("height", function(d) {
return y(this.parentNode.__data__.Saudi);
})
.attr("y", function(d) {
return h/3 - y(this.parentNode.__data__.Saudi);
bar.attr("class", function(d) {
return "bar " + d.province;
});

expatRects = chart.selectAll(".bars.expat");
expatRects.transition()
.attr("height", function(d) {
return y(this.parentNode.__data__['Non-Saudi']);
// UPDATING THE BAR CHART
saudiRects = chart.selectAll(".bars.saudi");
saudiRects.transition()
.attr("height", function(d) {
return y(this.parentNode.__data__.Saudi);
})
.attr("y", function(d) {
return h/3 - y(this.parentNode.__data__.Saudi) - y(this.parentNode.__data__['Non-Saudi']);
});
.attr("y", function(d) {
return h/3 - y(this.parentNode.__data__.Saudi);
});

expatRects = chart.selectAll(".bars.expat");
expatRects.transition()
.attr("height", function(d) {
return y(this.parentNode.__data__['Non-Saudi']);
})
.attr("y", function(d) {
return h/3 - y(this.parentNode.__data__.Saudi) - y(this.parentNode.__data__['Non-Saudi']);
});

} //update func

// Add tooltips to the barchart?

} //update func

// HIGHLIGHT THE SELECTED USER PROVINCE
d3.select(".map").selectAll("path")
.on("mouseover", update)
.on("mouseout", demoused);
.classed("hoverable", true)
.on("click", update);
// .on("mouseout", demoused);

d3.select("path#Riyadh").attr("class", "moused");

Expand Down Expand Up @@ -547,7 +568,6 @@ function drawDonuts(selectedIndustry) {
})
.on("mouseover", mouseover)
.on("mouseout", mouseout);

}


Expand Down
8 changes: 0 additions & 8 deletions saudization.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,6 @@
</div>

<div id="industryMenu"></div>

<!-- <div id="legend"></div> -->

<script type="text/javascript">


</script>


<!-- Importing some libraries: d3js, topojson, queueJS -->
<script src="js/d3.min.js" charset="utf-8"></script>
Expand Down

0 comments on commit 7581ace

Please sign in to comment.