All examples By author By category About

drewleonard

Full window Github gist

ewp_graph

<!DOCTYPE html>
<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="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");

}
                    }

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