dianaow · November 5, 2019 09:54
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/cleaned_survey_results_filtered.csv b/cleaned_survey_results_filtered.csv
diff --git a/grouped_melt.csv b/grouped_melt.csv
diff --git a/grouped_modes.csv b/grouped_modes.csv
diff --git a/index.html b/index.html
 <!DOC<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
  <script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0;background-color:white;}
    h1, h2, h3, h4, p, text, span, div, a, a:visited {
      font-family: sans-serif;
      padding: 5px;
      margin: 0px;
      border: 0px;
      color: #11210D;
    }
    a:hover {
      color: #1E6E0F;
    }
    h3 {
      float: left;
      padding-top: 8px;
    }
    .wrapper {
      max-width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }
    .container {
      display: flex;
      flex-direction: column;
      width: 95%;
      height: 80%;
      padding: 10px;
    }
    #mainWrapper {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 95%;      
    }
    #title {
      width: 100%;
      height: 5%;
    }
    #main1 {
      display: flex;
      flex-direction: column;
      width: 50%;
      height: 100%;
    }
    #main2 {
      display: flex;
      flex-direction: column;
      width: 50%;
      height: 100%;
    }
    #footer {
      position: absolute;
      bottom: 10px;
      right: 10px;
      font-size: 0.7em;
      color: whitesmoke !important;
    }
    #searchBar, #section {
      width: 100%;
      height: 20%;
    }
     #chart, #chart-timeline {
      width: 100%;
      height: 80%;
    }
    .btn {
      color: #11210D;
      background: transparent; 
      border: 0px; 
      border-radius: 0px; 
      padding: 4px 8px;
      text-align: center;
      display: inline-block;
      margin: 2px 1px;
      -webkit-transition-duration: 0.4s; /* Safari */
      transition-duration: 0.4s;
      cursor: pointer;
      text-decoration: none;
      font-size: 11px;
      text-transform: uppercase;
      font-weight: bold;
    }
    .btn:hover {
      background-color: #11210D;
      color: white;
    }
    .domain {
      visibility: hidden;
    }
    .ui.dropdown.dropdown-country .text{
      color: #11210D !important;
      font-size: 1.3em;
    }
    @media (max-width: 1440px) { 
      .wrapper {
        width: 1640px;
        height: 100%;
      }
    }
    /* if device (iPad/iPad pro) in landscape orientation */
    @media only screen 
    and (min-width : 768px) 
    and (max-width : 1366px)
    and (orientation: portrait) {
      .wrapper {
        width: 100vw;
        height: 100vh;
      }
      .container {
        padding: 5px;
        width: 100%;
      }
    }
    /* if mobile device max width 577px */
    @media only screen and (max-width: 577px) {
      h1 {
        font-size: 1.6em;
      }
      h4 {
        font-size: 1em;
      }
      .wrapper {
        overflow: hidden;
        width: 100vw;
        height: 200vh;
      }
      .container {
        padding: 5px;
        width: 100%;
      }
      #mainWrapper {
        display: flex;
        flex-direction: column;
        justify-content: center; 
        width: 100%;
        height: 95%;      
      }
      #main1, #main2 {
        width: 100%;
        height: 60%;
      }
      #title {
        height: 5%;
      }
      #searchBar {
        width: 100%;
        height: 30%;
      }
       #chart {
        width: 100%;
        height: 70%;
      }
      #section {
        width: 100%;
        height: 10%;
      }
      #chart-timeline {
        width: 100%;
        height: 70%;
      }
      #chart-legend-MOBILE {
        width: 100%;
        height: 20%;
      }
      .btn {
        color: #11210D;
        background: transparent; 
        border: 0px; 
        border-radius: 0px; 
        padding: 4px 8px;
        text-align: center;
        display: block;
        margin: 2px 1px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
        text-decoration: none;
        font-size: 10px;
        text-transform: uppercase;
        font-weight: bold;
      }
      .search-label {
        display: none;
      }
      #footer {
        display: none;
      }
      .x_axis_line_annotate {
        font-size: 0.7em;
      }
      .x_axis{
        display: none;
      }
    } 
  </style>
 </head>

 <body>
  <div class='wrapper'>
    <div class='container'>

      <div id='title' style="padding: 20px">
        <h2>Data Visualization Community's Geographical Trends</h2>
      </div>

      <div id='mainWrapper'>
        <div id='main1'>
          <div id='searchBar'>
            <h4>1359 people from 77 different countries participated in Data Visualization Society's Annual Data Visualization Community Survey that ran from May to June 2019. This dashboard visualizes the geographical differences in occupation, experience, practices and tools of survey respondents.</h4>  
            <h3>Search: </h3>
            <div class="ui search dropdown dropdown-country" style='display: inline-block;'>
              <div class="default text">All Countries</div>
              <i class="dropdown icon" ></i>
              <div class="menu"></div>
            </div>
          </div>
          <div id='chart-timeline'></div>
        </div>

        <div id='main2'>
          <div id="section">
            <h3>Select: </h3>
            <input name="role" 
                   type="button" 
                   class='btn role'
                   value="What is your role in data visualization?"/>
            <input name='level' 
                   type="button" 
                   class="btn level"
                   value="What focus is data viz in your work?" />
            <input name="mode" 
                   type="button" 
                   class='btn mode'
                   value="What modes of data viz are in use at your organization?"/>
          </div>
          <div id='chart'></div>
        </div>
      </div>
      
      <div id='footer'>
        <span>Designed and built by: <a href='https://twitter.com/dianalikescats' target="_blank">Diana</a></span>
        <span>Data Source: <a href='https://github.com/data-visualization-society/data_visualization_survey' target="_blank">DVS</a></span>
      </div>
      
    </div>
  </div>

  <script>
    $(document).ready(function(){
      $('.ui .item').on('click', function() {
      $('.ui .item').removeClass('active');
        $(this).addClass('active');
      });    
      $('.ui.dropdown').dropdown()   
    })
  </script>
  <script>
    const months = {
      0: 'Jan',
      1: 'Feb',
      2: 'Mar',
      3: 'Apr',
      4: 'May',
      5: 'Jun',
      6: 'Jul',
      7: 'Aug',
      8: 'Sep',
      9: 'Oct',
      10: 'Nov',
      11: 'Dec'
    }
    var colorPalette = {'iron': '#11210D', 'copper': '#773110', 'emerald': '#1E6E0F', 'navy': '#153252', 'plum': '#9f5f9c', 'mustard': '#dcb22a', 'turquoise': '#2db1a4', 'lightgrey': '#F3F3F3'}
    var axisColor = colorPalette.iron
    var axisPad = 6
    var parseDate = d3.timeParse("%b %Y");
    //////////////////// Set up and initiate containers ///////////////////////
    var WIDTH = Math.max(document.documentElement.clientWidth, screen.width)
    // BAR CHART
    var margin = {top: 20, right: 0, bottom: 80, left: 40}
    var rect = document.getElementById('chart').getBoundingClientRect()
    if(WIDTH<=577){
      var rectAdj = {width: screen.width*0.9, height: rect.height}
    } else {
      var rectAdj = rect
    }
    var w = rectAdj.width * 0.7;
    var h = rectAdj.height;
    var svg = d3.select("#chart").append("svg")
      .attr("width", w + margin.left + margin.right)
      .attr("height", h + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    // MAIN TIMELINE
    var margin = {top:20, right: 160, bottom: 80, left: 30}
    var rect = document.getElementById('chart-timeline').getBoundingClientRect();
    if(WIDTH<=577){
      var rectAdj = {width: screen.width, height: rect.height*0.8}
    } else {
      var rectAdj = rect
    }
    var w2 = rectAdj.width * 0.8;
    var h2 = rectAdj.height;
    var h2_chart = h2
    var timeline_svg = d3.select("#chart-timeline").append("svg")
      .attr("width", w2 + margin.left + margin.right)
      .attr("height", h2_chart + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .style("pointer-events", "all")
    timeline_svg.append("g").attr("class", "x_axis_line").attr("transform", "translate(" + 0 + "," + (h2_chart+(axisPad*2)).toString() + ")") 
    timeline_svg.append("g").attr("class", "y_axis_line").attr("transform", "translate(" + 0 + "," + 0 + ")")
    timeline_svg.append("text").attr("class", "x_axis_line_annotate")
      .attr("transform", "translate(" + 0 + "," + (h2_chart+50).toString() + ")") 
      .text('Year since person started doing professional data visualization')
    var lines = timeline_svg.append('g').attr('class', 'lines')
    // Add a tooltip div. Here I define the general feature of the tooltip: stuff that do not depend on the data point.
    // Its opacity is set to 0: we don't see it by default.
    var tooltip = d3.select("#chart")
      .append("div")
      .style("opacity", 0)
      .attr("class", "tooltip")
      .style("background-color", "white")
      .style("border", "solid")
      .style("border-width", "1px")
      .style("border-radius", "5px")
      .style("padding", "10px")
      .style('position', 'absolute')
    function init() {
      d3.queue()   
        .defer(d3.csv, 'grouped_melt.csv') 
        .defer(d3.csv, 'cleaned_survey_results_filtered.csv')
        .defer(d3.csv, 'grouped_modes.csv') 
        .await(processData); 
    }
 
    function processData(error, csv, csv1, csv2) {
      data = csv.map((d,i) => {
        return {
          country: d.country,
          value: +d.value,
          date: parseDate(d.date)
        }
      })
      dataFull = csv1.map((d,i) => {
        return {
          country: d.country,
          level: d.level,
          role: d.role
        }
      })
      dataMode = csv2.map((d,i) => {
        return {
          country: d.country,
          mode: d.mode,
          value: d.values
        }
      })
      dataFull = dataFull.filter(d=>d.level != "")
      data = data.filter(d=>d.date >= new Date(2000, 0, 1))
      // set up dropdown menu
      var countries = data.map(d=>d.country).filter(onlyUnique)
      menu(data, countries)
      multipleLineChart(data)
      // LEVELS
      var data_levels = nestData(dataFull, 'level', 'country')
      // ROLES
      var data_roles = nestData(dataFull, 'role', 'country')
      
      // MODES
      var modes1 = d3.nest()
        .key(d=>d['mode'])
        .rollup(function(leaves) { return d3.sum(leaves, function(d) {return d.value})} )
        .entries(dataMode)
      var modes = modes1.sort(function(a,b) { return b.value - a.value } ).map(d=>d.key)
      var dataMode_nested = d3.nest()
        .key(d=>d['mode'])
        .sortKeys(function(a,b) { return modes.indexOf(a) - modes.indexOf(b) } )
        .key(d=>d['country'])
        .rollup(function(leaves) { return d3.sum(leaves, function(d) {return d.value})} )
        .entries(dataMode)
      var data_modes = { data: dataMode_nested, sort_order: modes, max: d3.max(modes1, d=>d.value)}
      
      stackedBarChart(data_roles) // initial chart to show
      var flag_level = false
      var flag_role = true
      var flag_mode = false
      changeButtonsStyle()
      d3.select('.level').on("click", function () { 
        d3.select('.x_axis').remove()
        d3.select('.y_axis').remove()
        stackedBarChart(data_levels)
        flag_level = true
        flag_role = false
        flag_mode = false
        changeButtonsStyle()
      });
      d3.select('.role').on("click", function () { 
        d3.select('.x_axis').remove()
        d3.select('.y_axis').remove()
        stackedBarChart(data_roles)
        flag_level = false
        flag_role = true
        flag_mode = false
        changeButtonsStyle()
      });
      d3.select('.mode').on("click", function () { 
        d3.select('.x_axis').remove()
        d3.select('.y_axis').remove()
        stackedBarChart(data_modes)
        flag_level = false
        flag_role = false
        flag_mode = true
        changeButtonsStyle()
      });
      function changeButtonsStyle() {
        if(flag_level==true){
          console.log('level')
          d3.select('.level').style('background-color', colorPalette.iron).style('color', 'white')
        } else {
          d3.select('.level').style('background-color', 'white').style('color', colorPalette.iron)
        }
        if(flag_role==true){
          console.log('role')
          d3.select('.role').style('background-color', colorPalette.iron).style('color', 'white')
        } else {
          d3.select('.role').style('background-color', 'white').style('color', colorPalette.iron)
        }
        if(flag_mode==true){
          console.log('mode')
          d3.select('.mode').style('background-color', colorPalette.iron).style('color', 'white')
        } else {
          d3.select('.mode').style('background-color', 'white').style('color', colorPalette.iron)
        }
      }
    }
    function menu(data, countries) {
      countries.unshift("All Countries")
      d3.select(".dropdown-country .menu").selectAll("div")
          .data(countries)
        .enter().append("div")
          .attr('class', 'item')
          .attr("data-value", function (d) { return d })
          .text(function (d) { return d })
        .on("click", function(country) {
          if(country=='All Countries'){
            mouseout()
          } else {
            mouseout()
            mouseover({'key': country})
          }
        })
      }
    function nestData(data, X, Y) {
      var nested = d3.nest()
        .key(d=>d[X])
        .rollup(function(leaves) { return leaves.length })
        .entries(data)
      var sort_order = nested.sort(function(a,b) { return b.value - a.value } ).map(d=>d.key)
      var max = d3.max(nested, d=>d.value)
      var double_nested = d3.nest()
        .key(d=>d[X])
        .sortKeys(function(a,b) { return sort_order.indexOf(a) - sort_order.indexOf(b) } )
        .key(d=>d[Y])
        .rollup(function(leaves) { return leaves.length })
        .entries(data)
      return {data: double_nested, sort_order: sort_order, max: max}
    }
    function createLegend(category){
      d3.selectAll('.gLegend').selectAll('.legend-pill')
        .data(category)
        .enter().append('div')
          .attr("class", "legend-pill")
          .style("background-color", d=>color(d))
          .style("color", "white")
          .text(d=>d)
    }
    ///////////////////////////////////////////////////////////////////////////
    ///////////////////////////// Stacked bar chart ///////////////////////////
    ///////////////////////////////////////////////////////////////////////////
    function stackedBarChart(data) {
      var sectors = data.sort_order
      var max = data.max
      var dataNew = []
      data.data.map((D,I) => {
        var oneCountryBin = Array.from(Array(sort_order.length), () => 0)
        D.values.map((d,i) => {
          oneCountryBin[sort_order.indexOf(d.key)] = d.value
        })
        dataNew.push(oneCountryBin)
      })
      var stackedData = Object.assign(d3.stack().keys(d3.range(sort_order.length))(dataNew), {
        keys: sort_order,
        ids: sort_order.map(R => sectors.map(P => `${R}_${P}`)),
        sectors: sectors
      })
      var yScale = d3.scaleLinear()
          .domain([0, roundToNearest(max)])
          .range([h, 0])  
      function roundToNearest(x) {
        return Math.round(x / 50) * 50
      }
      var xScale = d3.scaleBand()
          .domain(sectors)
          .range([0, sectors.length <= 4 ? 350 : w])
          .padding(0.2)
      var countries_sorted = sort_order.slice(0,5)
      stackedData.forEach((d,i) => {
        stackedData.sectors.forEach((D,I) => {
          stackedData[i][I].key = stackedData.ids[i][I]
          stackedData[i][I].color = countries_sorted.indexOf(stackedData.keys[i])!=-1 ? color(stackedData.keys[i]) : colorPalette.lightgrey 
          stackedData[i][I].x = xScale(D)
          stackedData[i][I].y = ( d[I][1] ? yScale(d[I][1]) : yScale(0) ) 
          stackedData[i][I].width = xScale.bandwidth()
          stackedData[i][I].height = ( d[I][0] ? yScale(d[I][0]) : yScale(0) ) - ( d[I][1] ? yScale(d[I][1]) : yScale(0) )
          stackedData[i][I].value = d[I][1] - d[I][0]
        })
      })
      var groups = svg.selectAll("rect").data(stackedData.flat(), d=>d.key)
      groups.exit().remove()
      var groupsEnter = groups.enter().append("rect")
      groups = groups.merge(groupsEnter)
      groups
        //.transition().duration(1000)
        .attr('class', 'bar')
        .attr('id', d=>d.key.replace(/[^A-Z0-9]+/ig, "_"))
        .attr("fill", d=>d.color)
        .attr("x", d => d.x)
        .attr("width", d => d.width)
        .attr("y", d => d.y)
        .attr("height", d => d.height)
      var groupsT = svg.selectAll("text").data(stackedData.flat(), d=>d.key)
      groupsT.exit().remove()
      var groupsEnterT = groupsT.enter().append("text").attr('class', 'rect-annotate')
      groupsT = groupsT.merge(groupsEnterT)
      groupsT
        //.transition().duration(1000)
        .attr('id', d=>d.key.replace(/[^A-Z0-9]+/ig, "_"))
        .attr("fill", d=>d.color)
        .attr("x", d => d.x + xScale.bandwidth()/2)
        .attr("y", d => d.y-axisPad)
        .attr('opacity', 0)
        .attr('font-weight', 'bold')
        .attr('text-anchor', 'middle')
        .style('font-size', '11px')
        .text(d=>d.value > 0 ? d.value : "")
      // AXES // 
      var xAxis = d3.axisBottom(xScale).tickSizeOuter(0).tickSizeInner(0)
      var yAxis = d3.axisLeft(yScale).tickSizeOuter(0).tickSizeInner(-axisPad)
      var x_axis = svg.append("g").attr("class", "x_axis")
        .attr("transform", "translate(" + 0 + "," + (h+(axisPad*2)).toString() + ")") 
        .call(xAxis)
        .call(g => {
          g.selectAll("text")
            .attr('fill', colorPalette.iron)
            .call(wrap, xScale.bandwidth());
        })
      var y_axis = svg.append("g")
        .attr("class", "y_axis").attr("transform", "translate(" + (-axisPad*2) + "," + 0 + ")")
        .call(yAxis.tickValues(yScale.ticks()))
   
      //d3.selectAll('.bar')
        //.on("mouseover", mouseover)
        //.on("mousemove", mousemove)
        //.on("mouseout", mouseout)   
    }
    ///////////////////////////////////////////////////////////////////////////
    //////////////////////////// Multiple line chart //////////////////////////
    ///////////////////////////////////////////////////////////////////////////
    function multipleLineChart(data) {
      var years = []
      d3.range(2000, 2020).map(year=>{
        Object.values(months).map(month=>{
          var label = month + ' ' + year.toString()
          years.push(parseDate(label))
        })
      })  
      var res_nested = d3.nest()
          .key(d=>d.country)
          .entries(data)
      var res_nested_sum = d3.nest()
        .key(d=>d.country)
        .rollup(function(leaves) { return d3.sum(leaves, d=>+d.value) })
        .entries(data)
        .sort(function(a, b){ return d3.descending(a.value, b.value) })
      
      sort_order = res_nested_sum.map(d=>d.key)
      countries_sorted = sort_order.filter(d=>d != "Not specified").slice(0,5)
      var countries_sorted_incl_ns = countries_sorted.concat("Not specified")
      
      res_nested = res_nested.sort(function(a,b) { return countries_sorted.indexOf(a.key) - countries_sorted.indexOf(b.key); })
      sort_order.push(sort_order.splice(sort_order.indexOf("Not specified"), 1)[0])
      color = d3.scaleOrdinal()
        .domain(countries_sorted)
        .range([colorPalette.turquoise, colorPalette.mustard, colorPalette.plum, colorPalette.navy, colorPalette.copper, colorPalette.emerald])
      var xScale1 = d3.scaleTime()
        .domain(d3.extent(years, function(d) { return d }))
        .range([0, w2])
      var yScale1 = d3.scaleSqrt()
        .domain([0, d3.max(res_nested.map(d=>d.values).flat(), d=>d.value)+50])
        .range([h2_chart, 0]);
      // APPEND MULTIPLE LINES //
      // line generator
      var line = d3.line() 
        .curve(d3.curveMonotoneX)
        .x(function(d) { return xScale1(d.date) })
        .y(function(d) { return yScale1(d.value) })
      // FOCUS
      var glines = lines.selectAll('path').data(res_nested)
      var entered_lines = glines.enter().append('path')
      glines.merge(entered_lines)  
        .attr('class', 'line')
        .attr('id', d=> 'line-' + d.key.replace(/[^A-Z0-9]+/ig, "_"))
        .attr('d', function(d) { return line(d.values) })
        .attr('stroke', (d, i) => countries_sorted.indexOf(d.key)!=-1 ? color(d.key) : colorPalette.lightgrey)
        .attr('fill', 'none')
        .attr('opacity', 1)
        .attr('stroke-width', '3px')
        .style("mix-blend-mode", "multiply")
        .style("pointer-events", "all")
      glines.exit().remove()
      var gtext = lines.selectAll('text').data(res_nested)
      var entered_text = gtext.enter().append('text').attr('class', 'line-annotate') 
      gtext.merge(entered_text) 
        .attr('id', d=>d.key.replace(/[^A-Z0-9]+/ig, "_"))
        .attr('x', w-axisPad)
        .attr('y', function(d) { return yScale1(d.values.map(d=>d.value).slice(-1)[0]) })
        .attr('fill', (d, i) => countries_sorted.indexOf(d.key)!=-1 ? color(d.key) : colorPalette.lightgrey)
        .attr('opacity', (d, i) => countries_sorted_incl_ns.indexOf(d.key)!=-1 ? 1 : 0)
        .style('font-size', '12px')
        .attr('font-weight', 'normal')
        .text(function(d) { 
          var arr = res_nested.find(el=>el.key == d.key).values
          var val = arr[arr.length-1].value
          return d.key + ": " + val
        })
      gtext.exit().remove() 
      d3.select('#Germany.line-annotate').attr('transform', 'translate(0,8)')
      // AXES // 
      var xAxis = d3.axisBottom(xScale1).tickSizeOuter(0).tickSizeInner(-axisPad)
      var yAxis = d3.axisLeft(yScale1).tickSize(-axisPad)
      timeline_svg.append("text").attr("class", "x_axis_line_here")
        .attr("transform", "translate(" + xScale1(years[years.length-7]) + "," + (h2_chart+(axisPad*6)).toString() + ")") 
        .attr('fill', colorPalette.iron)
        .attr('font-size', '9px')
        .text('Survey closed in June 19')
      timeline_svg.append("line").attr("class", "x_axis_line_here")
        .attr('x1', xScale1(years[years.length-7]))
        .attr('y1', (h2_chart+(axisPad*2)))
        .attr('x2', xScale1(years[years.length-7]))
        .attr('y2', (h2_chart+(axisPad*4)))
        .attr('stroke', colorPalette.iron)
        .attr('stroke-width', 2)
      d3.select(".x_axis_line")
        .call(xAxis)
      d3.select(".y_axis_line")
        .call(yAxis)
      d3.selectAll('.line')
        .on("mouseover", mouseover)
        .on("mouseout", mouseout)
    }
    init()
    function mouseover(el) {
      d3.selectAll('.line').attr('stroke', colorPalette.lightgrey)
      d3.selectAll('.line-annotate').attr('opacity', 0)
      d3.selectAll('rect').attr('fill', colorPalette.lightgrey)
      d3.select("path.line[id*='" + el.key.replace(/[^A-Z0-9]+/ig, "_") + "']")
        .attr('cursor', 'pointer')
        .attr('stroke', countries_sorted.indexOf(el.key)!=-1 ? color(el.key) : colorPalette.emerald)
        .attr('stroke-width', '5px')
        .raise()
      d3.selectAll("text.line-annotate[id*='" + el.key.replace(/[^A-Z0-9]+/ig, "_") + "']")
        .attr('fill', countries_sorted.indexOf(el.key)!=-1 ? color(el.key) : colorPalette.emerald)
        .attr('opacity', 1)
        .attr('font-weight', 'bold')
      d3.selectAll("text.rect-annotate[id*='" + el.key.replace(/[^A-Z0-9]+/ig, "_") + "']")
        .attr('fill', countries_sorted.indexOf(el.key)!=-1 ? color(el.key) : colorPalette.emerald)
        .attr('opacity', 1)
       
      d3.selectAll("rect[id*='" + el.key.replace(/[^A-Z0-9]+/ig, "_") + "']")
        .attr('fill', countries_sorted.indexOf(el.key)!=-1 ? color(el.key) : colorPalette.emerald)
      d3.select('.dropdown-country .text').html(el.key)
      tooltip.style("opacity", 1)
    }
    function mousemove(el) {
      tooltip
        .html(el.key)
        .style("left", ((d3.event.pageX)+10) + "px")
        .style("top", ((d3.event.pageY)) + "px")
    }
    function mouseout() {
      d3.selectAll('.line')
        .attr('stroke', (d, i) => countries_sorted.indexOf(d.key)!=-1 ? color(d.key) : colorPalette.lightgrey)
        .attr('stroke-width', '3px') 
      d3.selectAll('.line-annotate')
        .attr('fill', (d, i) => countries_sorted.indexOf(d.key)!=-1 ? color(d.key) : colorPalette.lightgrey)
        .attr('opacity', (d, i) => countries_sorted.indexOf(d.key)!=-1 ? 1 : 0)
        .attr('font-weight', 'normal')
      d3.selectAll('.rect-annotate')
        .attr('opacity', 0)
      d3.selectAll("rect")
        .attr("fill", d=>d.color)
      $('.ui.search.dropdown.dropdown-country').dropdown('restore defaults')
      tooltip.style("opacity", 0)
    }
    ///////////////////////////////////////////////////////////////////////////
    ///////////////////////////// Helper functions ////////////////////////////
    ///////////////////////////////////////////////////////////////////////////
    function onlyUnique(value, index, self) { 
        return self.indexOf(value) === index;
    }
    function sortOn(property) {
      return function(a, b){
        if(a[property] < b[property]){
            return -1;
        }else if(a[property] > b[property]){
            return 1;
        }else{
            return 0;   
        }
      }
    }
    function roundToNearest(x) {
      return Math.round(x / 100) * 100
    }
    function wrap(text, width) {
      text.each(function() {
        var text = d3.select(this),
            words = text.text().split(/\s+/).reverse(),
            word,
            line = [],
            lineNumber = 0,
            lineHeight = 1.1, // ems
            y = text.attr("y"),
            dy = parseFloat(text.attr("dy")),
            tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
        while (word = words.pop()) {
          line.push(word);
          tspan.text(line.join(" "));
          if (tspan.node().getComputedTextLength() > width) {
            line.pop();
            tspan.text(line.join(" "));
            line = [word];
            tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
          }
        }
      });
    }
  </script>
 </body>
 </html>