Built with blockbuilder.org
xxxxxxxxxx
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Karla|Quantico|Audiowide' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<style>
html {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.barText {
font-family: "Karla";
font-size: 12px;
/*font-weight: bold;*/
fill: white;
/*-webkit-font-smoothing: antialiased;*/
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
.hiddenText {
font-family: "Karla";
font-size: 12px;
/*font-weight: bold;*/
fill: white;
}
.tooltipText {
fill: "#0d2a52";
font-family: "Karla";
}
.alphaBar {
fill: #FA4C00;
opacity: 0.2;
}
.axis{
font-family: "Karla";
}
.svg-container {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
padding-bottom: 100%;
vertical-align: top;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
width: 48%;
left: 0;
}
.svg-content-responsive-second {
display: inline-block;
position: absolute;
width: 50%;
top: 10px;
left: 48.5%;
}
</style>
<title>Risk Bar Chart</title>
<!--<script src="d3.v4.min.js"></script>-->
<script src="jquery.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script type="text/javascript">
//loading data
var dictionary_data = "cjh12sep2016.csv";
var description_data = "description_data.csv";
//global variable for clicked bar
var clicked = null;
d3.queue()
.defer(d3.csv, dictionary_data)
.defer(d3.csv, description_data)
.await(function(error, dictionary_data, description_data) {
if (error) {
console.error(error);
}
else {
//array for forecasting data
var forecast = [];
var countryDict = {};
var dataLength = dictionary_data.length;
var varData = [];
var varName = [];
var varVals = [];
var valName = [];
//number of countries to push
var numCountries = 25;
for (var i = 0; i < numCountries; i++) {
forecast.push(dictionary_data[i]);
}
for (var i = 0; i < dataLength; i++) {
var newCountry = new Object();
for (prop in dictionary_data[i]) {
//Converts the variables that are quantitative to numbers
var newProp = prop.replace(/\./g, "_");
newCountry[newProp] = dictionary_data[i][prop];
if (prop !== "sftgcode" && prop !== "country") {
newCountry[newProp] = Number(newCountry[newProp]);
}
else {
delete newCountry[newProp];
}
}
/*Stores each country's timeseries data in a dictionary with year as the key
and places it in the dictionary with country name as the key*/
if (i === 0 || dictionary_data[i].sftgcode !== dictionary_data[i-1].sftgcode) {
countryDict[dictionary_data[i].country] = newCountry;
}
}
//SVG dimensions
var right_padding = 0,
margin = {top: 20, right: 20, bottom: 30, left: 120},
width = 650 - margin.left - margin.right + right_padding,
height = window.innerHeight;
//create SVG element for first bar chart
var svg = d3.select("body")
.classed("svg-container", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 " + width + " " + height + margin.top + margin.bottom)
//class to make it responsive
.classed("svg-content-responsive", true)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//bar attributes
var bar = {padding: 0.1,
color: {unfilled: "#0d2a52", filled: "#FA4C00"}};
//scales for first bar chart
var yScale = d3.scaleBand()
.range([0, height])
.padding(bar.padding);
var xScale = d3.scaleLinear()
.range([0, width - margin.left]);
//scale range of data in the domain
yScale.domain(forecast.map( function (d){ return d.country; }));
xScale.domain([0, d3.max(forecast, function(d) { return d.mean_p; })]);
//variable for y coordinate of top bar
var top_bar = d3.min(forecast, function(d) {return yScale(d.country); });
//tooltip dimensions and position
var tooltip = {x: xScale(d3.max(forecast, function(d) { return d.mean_p; })) + 10,
width: 200,
height: 200,
corner: 3,
duration: 750,
text: {margin_top: 10, margin_left: 10, size: 14, padding: 20}};
//create bars for SVG element
svg.selectAll("rect")
.data(forecast)
.enter()
.append("rect")
.attr("id", "bar")
// .attr("x", 0)
.attr("width", function(d) {
return xScale(d.mean_p);
})
.attr("y", function(d) {
return yScale(d.country);
})
.attr("height", yScale.bandwidth())
.attr("fill", function(d, i) {
if (i === 0) {
return bar.color.filled;
} else {
return bar.color.unfilled;
}
});
//add text to bars based on length
svg.selectAll("text")
.data(forecast)
.enter()
.append("text")
.attr("id", "bar_text")
.text(function(d) {
return d3.format(".1%")(d.mean_p);
})
.attr("text-anchor", "middle")
.attr("x", function(d) {
return xScale(d.mean_p) - 22;
})
.attr("y", function(d) {
return yScale(d.country) + yScale.bandwidth() / 2 + 4
})
.attr("class", "barText");
//add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale))
.attr("class", "x_axis");
//add the y Axis
svg.append("g")
.call(d3.axisLeft(yScale))
.attr("class", "y_axis");
//VARIABLE GRAPH
var currcountry;
var truncateDecimals = function (number, digits) {
var multiplier = Math.pow(10, digits),
adjustedNum = number * multiplier,
truncatedNum = Math[adjustedNum < 0 ? 'ceil' : 'floor'](adjustedNum);
return truncatedNum / multiplier;
};
currcountry = "Myanmar";
for (mod in countryDict[currcountry]) {
if (mod.slice(0, 6) !== "postcw") {
if (mod.slice(mod.length-3,mod.length) === "PER") {
varData.push(truncateDecimals(countryDict[currcountry][mod]*100, 1));
varName.push(mod);
}
else if (mod !== "forecast_year" && mod !== "year" && mod !== "date") {
varVals.push(countryDict[currcountry][mod]);
valName.push(mod);
}
}
}
//scales for second bar chart
var yScale_2 = d3.scaleBand()
.range([0, height])
.padding(bar.padding);
var xScale_2 = d3.scaleLinear()
.range([0, width - margin.left - margin.right]);
//scale range of data in the domain
yScale_2.domain(varName.map( function (d) { return d; }));
xScale_2.domain([0, 100]);
var scaleLen = varData.length;
//eight step color scale
var step = d3.scaleLinear()
.domain([0, 7])
.range([0, 1]);
var color = d3.scaleLinear()
.domain([0, step(1), step(2), step(3), step(4), step(5), step(6), 7])
.range(["#006600", "#00b33c",
"#53ff1a", "#ffff00",
"#ff9900", "#ff6600",
"#e60000", "#ff0000"]);
var svg_2 = d3.select("body")
.classed("svg-container", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 " + width + " " + height + margin.top + margin.bottom)
//class to make it responsive
.classed("svg-content-responsive-second", true)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg_2.selectAll("rect")
.data(varData)
.enter()
.append("rect")
.attr("id", "bar_2")
.attr("width", function(d, i) {
if ((varVals[i] === 0 || varVals[i] === 1) && (varName[i] !== "mev_civ_tot_lnPER" && varName[i] !== "pol_durable_lnPER" && varName[i] !== "rf_pPER" && varName[i] != "pit_sftpuhvl2_10_lnPER" && varName[i] != "dis_l4pop_lnPER" && varName[i] != "gdppcgrow_srPER")) {
/*var found = false;
var minVal = 0;
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[i]] !== 0) {
fakeVal = 1-countryDict[c][varName[i]])*100;
break;
}
}
break;
}*/
return xScale_2(100);
}
return xScale_2(d);
})
.attr("y", function(d, i) {
return i * height/scaleLen;
})
.attr("height", yScale_2.bandwidth())
.attr("fill", function(d, i) {
if (varVals[i] !== 0 && (varVals[i] !== 1 || varName[i] === "gdppcgrow_srPER")) {
return color(d/100);
}
else {
return "#a9b1bc";
}
})
.attr("opacity", function(d, i) {
if (varVals[i] === 0 || (varVals[i] === 1 && varName[i] != "gdppcgrow_srPER")) {
return 0.2;
}
});
var fakeVal;
for (var x = 0; x < varData.length; x++) {
if ((varVals[x] === 0 || varVals[x] === 1) && (varName[x] !== "mev_civ_tot_lnPER" && varName[x] !== "pol_durable_lnPER" && varName[x] !== "rf_pPER" && varName[x] != "pit_sftpuhvl2_10_lnPER" && varName[x] != "dis_l4pop_lnPER" && varName[x] != "gdppcgrow_srPER")) {
svg_2.append("rect")
.attr("id", "binary" + x)
.attr("x", 0)
.attr("y", function(d) {
return x * height/scaleLen;
})
.attr("width", function(d) {
if (varVals[x] == 0) {
var found = false;
var minVal = 0;
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[x]] !== 0) {
fakeVal = 1-countryDict[c][varName[x]];
return xScale_2((1-countryDict[c][varName[x]])*100);
}
}
break;
}
}
else {
return xScale_2(varData[x]);
}
})
.attr("height", yScale_2.bandwidth())
.attr("fill", function(d) {
if (varVals[x] === 0) {
return color(fakeVal);
}
return color(varData[x]/100);
});
lineCut = 11;
svg_2.append("rect")
.attr("id", "range_left" + x)
.attr("x", 5)
.attr("y", function(d) {
return x * height/scaleLen + yScale_2.bandwidth()/2;
})
.attr("height", 1.5)
.attr("width", function(d) {
var found = false;
if (varVals[x] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[x]] !== 0) {
if ((1-countryDict[c][varName[x]])*100 >= lineCut) {
return xScale_2((1-countryDict[c][varName[x]])*100) / 2 - 18;
}
break;
}
}
break;
}
}
if (varData[x] > lineCut) {
return xScale_2(varData[x]) / 2 - 18;
}
})
.attr("fill", "black");
svg_2.append("rect")
.attr("id", "end_left" + x)
.attr("x", function(d) {
var found = false;
if (varVals[x] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[x]] !== 0) {
if ((1-countryDict[c][varName[x]])*100 >= lineCut) {
return 4;
}
break;
}
}
break;
}
}
if (varData[x] > lineCut) {
return 4;
}
})
.attr("width", 1.5)
.attr("height", yScale_2.bandwidth() - 2)
.attr("y", function(d) {
return x * height/scaleLen + 1;
})
.attr("fill", "black");
svg_2.append("rect")
.attr("id", "range_right" + x)
.attr("x", function(d) {
var found = false;
if (varVals[x] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[x]] !== 0) {
if ((1-countryDict[c][varName[x]])*100 >= lineCut) {
return xScale_2((1-countryDict[c][varName[x]])*100) / 2 + 16;
}
break;
}
}
break;
}
}
if (varData[x] > lineCut) {
return xScale_2(varData[x]) / 2 + 16;
}
})
.attr("y", function(d) {
return x * height/scaleLen + yScale_2.bandwidth()/2;
})
.attr("height", 1.5)
.attr("width", function(d) {
var found = false;
if (varVals[x] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[x]] !== 0) {
if ((1-countryDict[c][varName[x]])*100 >= lineCut) {
return xScale_2((1-countryDict[c][varName[x]])*100) / 2 - 20;
}
break;
}
}
break;
}
}
if (varData[x] > lineCut) {
return xScale_2(varData[x]) / 2 - 20;
}
})
.attr("fill", "black");
svg_2.append("rect")
.attr("id", "end_right" + x)
.attr("x", function(d) {
var found = false;
if (varVals[x] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[x]] !== 0) {
if ((1-countryDict[c][varName[x]])*100 >= lineCut) {
return xScale_2((1-countryDict[c][varName[x]])*100) - 3.5;
}
break;
}
}
break;
}
}
if (varData[x] > lineCut) {
return xScale_2(varData[x]) - 3.5;
}
})
.attr("width", 1.5)
.attr("height", yScale_2.bandwidth() - 2)
.attr("y", function(d) {
return x * height/scaleLen + 1;
})
.attr("fill", "black");
}
}
var format = d3.format(".1f");
var cutoff = 7;
svg_2.selectAll("text.number")
.data(varData)
.enter()
.append("text")
.attr("id", "second_bar_text")
.text(function(d, i) {
if ((varVals[i] === 0 || varVals[i] == 1) && (varName[i] !== "mev_civ_tot_lnPER" && varName[i] !== "pol_durable_lnPER" && varName[i] !== "rf_pPER" && varName[i] != "pit_sftpuhvl2_10_lnPER" && varName[i] != "dis_l4pop_lnPER" && varName[i] != "gdppcgrow_srPER")) {
var found = false;
var minVal = 0;
if (varVals[i] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[i]] !== 0) {
if ((1-countryDict[c][varName[i]])*100 >= cutoff) {
return format((1-countryDict[c][varName[i]])*100);
}
break;
}
}
break;
}
}
}
if (d >= cutoff) {
return format(d);
}
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
if ((varVals[i] === 0 || varVals[i] == 1) && (varName[i] !== "mev_civ_tot_lnPER" && varName[i] !== "pol_durable_lnPER" && varName[i] !== "rf_pPER" && varName[i] != "pit_sftpuhvl2_10_lnPER" && varName[i] != "dis_l4pop_lnPER" && varName[i] != "gdppcgrow_srPER")) {
var found = false;
var minVal = 0;
if (varVals[i] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[i]] !== 0) {
return xScale_2((1-countryDict[c][varName[i]])*100) / 2 - 2;
break;
}
}
break;
}
}
return xScale_2(d) / 2 - 2;
}
return xScale_2(d) - 22;
})
.attr("y", function(d, i) {
return i * height/scaleLen + (height/scaleLen) / 2 + 4;
})
.attr("class", "barText");
svg_2.selectAll("text.sign")
.data(varData)
.enter()
.append("text")
.attr("id", "percent_sign")
.text(function(d, i) {
if (varVals[i] === 0) {
var found = false;
var minVal = 0;
if (varVals[i] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[i]] !== 0) {
if ((1-countryDict[c][varName[i]])*100 >= cutoff) {
return "%";
}
break;
}
}
break;
}
}
}
if (d >= cutoff) {
return "%";
}
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
if ((varVals[i] === 0 || varVals[i] == 1) && (varName[i] !== "mev_civ_tot_lnPER" && varName[i] !== "pol_durable_lnPER" && varName[i] !== "rf_pPER" && varName[i] != "pit_sftpuhvl2_10_lnPER" && varName[i] != "dis_l4pop_lnPER" && varName[i] != "gdppcgrow_srPER")) {
var found = false;
var minVal = 0;
if (varVals[i] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[i]] !== 0) {
return xScale_2((1-countryDict[c][varName[i]])*100) / 2 + 13;
break;
}
}
break;
}
}
return xScale_2(d) / 2 + 14;
}
return xScale_2(d) - 4;
})
.attr("y", function(d, i) {
return i * height/scaleLen + (height/scaleLen) / 2 + 4;
})
.attr("class", "barText");
//add the x Axis
svg_2.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale_2))
.attr("class", "x_axis_2");
//add the y Axis
svg_2.append("g")
.call(d3.axisLeft(yScale_2))
.attr("class", "y_axis_2");
//on click
svg.selectAll("#bar")
.on("click", function(d) {
//change color of bars
//first, change all bars to unfilled
d3.selectAll("#bar")
.attr("fill", bar.color.unfilled);
//then, change selected bar to filled
d3.select(this)
.attr("fill", bar.color.filled);
// record which bar was clicked
clicked = this;
currcountry = d.country;
varVals = [];
varData = [];
varName = [];
valName = [];
for (mod in countryDict[currcountry]) {
if (mod.slice(0, 6) != "postcw") {
if (mod.slice(mod.length-3,mod.length) == "PER") {
varData.push(truncateDecimals(countryDict[currcountry][mod]*100, 1));
varName.push(mod);
}
else if (mod != "forecast_year" && mod != "year" && mod != "date") {
varVals.push(countryDict[currcountry][mod]);
valName.push(mod);
}
}
}
svg_2.selectAll("#bar_2")
.data(varData)
.transition()
.duration(tooltip.duration)
.attr("width", function(d, i) {
if ((varVals[i] === 0 || varVals[i] === 1) && (varName[i] !== "mev_civ_tot_lnPER" && varName[i] !== "pol_durable_lnPER" && varName[i] !== "rf_pPER" && varName[i] != "pit_sftpuhvl2_10_lnPER" && varName[i] != "dis_l4pop_lnPER" && varName[i] != "gdppcgrow_srPER")) {
/*var found = false;
var minVal = 0;
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[i]] !== 0) {
return xScale_2((1-countryDict[c][varName[i]])*100);
}
}
break;
}*/
return xScale_2(100);
}
return xScale_2(d);
})
.attr("y", function(d, i) {
return i * height/scaleLen;
})
.attr("height", yScale_2.bandwidth())
.attr("fill", function(d, i) {
if (varVals[i] !== 0 && (varVals[i] !== 1 || varName[i] === "gdppcgrow_srPER")) {
return color(d/100);
}
else {
return "#a9b1bc";
}
})
.attr("opacity", function(d, i) {
if (varVals[i] === 0 || (varVals[i] === 1 && varName[i] != "gdppcgrow_srPER")) {
return 0.2;
}
});
for (var x = 0; x < varData.length; x++) {
if ((varVals[x] === 0 || varVals[x] === 1) && (varName[x] !== "mev_civ_tot_lnPER" && varName[x] !== "pol_durable_lnPER" && varName[x] !== "rf_pPER" && varName[x] != "pit_sftpuhvl2_10_lnPER" && varName[x] != "dis_l4pop_lnPER" && varName[x] != "gdppcgrow_srPER")) {
svg_2.select("#binary" + x)
.transition()
.duration(tooltip.duration)
.attr("x", 0)
.attr("y", function(d) {
return x * height/scaleLen;
})
.attr("width", function(d) {
if (varVals[x] == 0) {
var found = false;
var minVal = 0;
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[x]] !== 0) {
fakeVal = 1-countryDict[c][varName[x]];
return xScale_2((1-countryDict[c][varName[x]])*100);
}
}
break;
}
}
else {
return xScale_2(varData[x]);
}
})
.attr("height", yScale_2.bandwidth())
.attr("fill", function(d) {
if (varVals[x] === 0) {
return color(fakeVal);
}
return color(varData[x]/100);
});
lineCut = 11;
svg_2.select("#range_left" + x)
.transition()
.duration(tooltip.duration)
.attr("x", 5)
.attr("y", function(d) {
return x * height/scaleLen + yScale_2.bandwidth()/2;
})
.attr("height", 1.5)
.attr("width", function(d) {
var found = false;
if (varVals[x] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[x]] !== 0) {
if ((1-countryDict[c][varName[x]])*100 >= lineCut) {
return xScale_2((1-countryDict[c][varName[x]])*100) / 2 - 18;
}
break;
}
}
break;
}
}
if (varData[x] > lineCut) {
return xScale_2(varData[x]) / 2 - 18;
}
})
.attr("fill", "black");
svg_2.select("#end_left" + x)
.transition()
.duration(tooltip.duration)
.attr("x", function(d) {
var found = false;
if (varVals[x] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[x]] !== 0) {
if ((1-countryDict[c][varName[x]])*100 >= lineCut) {
return 4;
}
break;
}
}
break;
}
}
if (varData[x] > lineCut) {
return 4;
}
})
.attr("width", 1.5)
.attr("height", yScale_2.bandwidth() - 2)
.attr("y", function(d) {
return x * height/scaleLen + 1;
})
.attr("fill", "black");
svg_2.select("#range_right" + x)
.transition()
.duration(tooltip.duration)
.attr("x", function(d) {
var found = false;
if (varVals[x] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[x]] !== 0) {
if ((1-countryDict[c][varName[x]])*100 >= lineCut) {
return xScale_2((1-countryDict[c][varName[x]])*100) / 2 + 16;
}
break;
}
}
break;
}
}
if (varData[x] > lineCut) {
return xScale_2(varData[x]) / 2 + 16;
}
})
.attr("y", function(d) {
return x * height/scaleLen + yScale_2.bandwidth()/2;
})
.attr("height", 1.5)
.attr("width", function(d) {
var found = false;
if (varVals[x] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[x]] !== 0) {
if ((1-countryDict[c][varName[x]])*100 >= lineCut) {
return xScale_2((1-countryDict[c][varName[x]])*100) / 2 - 20;
}
break;
}
}
break;
}
}
if (varData[x] > lineCut) {
return xScale_2(varData[x]) / 2 - 20;
}
})
.attr("fill", "black");
svg_2.select("#end_right" + x)
.transition()
.duration(tooltip.duration)
.attr("x", function(d) {
var found = false;
if (varVals[x] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[x]] !== 0) {
if ((1-countryDict[c][varName[x]])*100 >= lineCut) {
return xScale_2((1-countryDict[c][varName[x]])*100) - 3.5;
}
break;
}
}
break;
}
}
if (varData[x] > lineCut) {
return xScale_2(varData[x]) - 3.5;
}
})
.attr("width", 1.5)
.attr("height", yScale_2.bandwidth() - 2)
.attr("y", function(d) {
return x * height/scaleLen + 1;
})
.attr("fill", "black");
}
}
var cutCheck = false;
svg_2.selectAll("#second_bar_text")
.data(varData)
.transition()
.duration(tooltip.duration)
.attr("x", function(d, i) {
if ((varVals[i] === 0 || varVals[i] == 1) && (varName[i] !== "mev_civ_tot_lnPER" && varName[i] !== "pol_durable_lnPER" && varName[i] !== "rf_pPER" && varName[i] != "pit_sftpuhvl2_10_lnPER" && varName[i] != "dis_l4pop_lnPER" && varName[i] != "gdppcgrow_srPER")) {
var found = false;
var minVal = 0;
if (varVals[i] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[i]] !== 0) {
if ((1-countryDict[c][varName[i]])*100 >= cutoff) {
return xScale_2((1-countryDict[c][varName[i]])*100) / 2 - 2;
break;
}
else {
return -10;
}
}
}
break;
}
}
return xScale_2(d) / 2 - 2;
}
return xScale_2(d) - 22;
})
.tween("text", function(d, i) {
var that = d3.select(this);
if ((varVals[i] === 0 || varVals[i] == 1) && (varName[i] !== "mev_civ_tot_lnPER" && varName[i] !== "pol_durable_lnPER" && varName[i] !== "rf_pPER" && varName[i] != "pit_sftpuhvl2_10_lnPER" && varName[i] != "dis_l4pop_lnPER" && varName[i] != "gdppcgrow_srPER")) {
var found = false;
var minVal = 0;
if (varVals[i] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[i]] !== 0) {
if ((1-countryDict[c][varName[i]])*100 >= cutoff) {
var i = d3.interpolate(that.text(), (1-countryDict[c][varName[i]])*100);
return function (t) {
that.text(format(i(t)));
};
}
break;
}
}
break;
}
}
}
var i = d3.interpolate(that.text(), d);
return function (t) {
that.text(format(i(t)));
};
})
.attr("class", function(d) {
if (d >= cutoff) {
return "barText";
} else {
return "hiddenText";
}
});
svg_2.selectAll("#percent_sign")
.data(varData)
.transition()
.duration(tooltip.duration)
.text(function(d, i) {
if (varVals[i] === 0) {
var found = false;
var minVal = 0;
if (varVals[i] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[i]] !== 0) {
if ((1-countryDict[c][varName[i]])*100 >= cutoff) {
return "%";
}
break;
}
}
break;
}
}
}
if (d >= cutoff) {
return "%";
}
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
if ((varVals[i] === 0 || varVals[i] == 1) && (varName[i] !== "mev_civ_tot_lnPER" && varName[i] !== "pol_durable_lnPER" && varName[i] !== "rf_pPER" && varName[i] != "pit_sftpuhvl2_10_lnPER" && varName[i] != "dis_l4pop_lnPER" && varName[i] != "gdppcgrow_srPER")) {
var found = false;
var minVal = 0;
if (varVals[i] === 0) {
while (!found) {
for (c in countryDict) {
if (countryDict[c][varName[i]] !== 0) {
return xScale_2((1-countryDict[c][varName[i]])*100) / 2 + 13;
break;
}
}
break;
}
}
return xScale_2(d) / 2 + 13;
}
return xScale_2(d) - 4;
});
});
//on mouseover and mouseout
svg.selectAll("#bar")
.on("mouseover", function() {
//fill bar
d3.select(this)
.attr("fill", bar.color.filled);
})
.on("mouseout", function() {
if (clicked === null && d3.format(".2f")(this.y.animVal.value) !==
d3.format(".2f")(top_bar)) {
console.log(d3.format(".2f")(this.y.animVal.value));
console.log(d3.format(".2f")(top_bar));
d3.select(this)
.transition()
.duration(250)
.attr("fill", bar.color.unfilled);
} else if (clicked !== null && this !== clicked) {
d3.select(this)
.transition()
.duration(250)
.attr("fill", bar.color.unfilled);
}
});
}
});
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js