<body>

  <div id="content">
    <button id="kartknapp" class="kartknappklass">Vad tjänar grannen? Klicka för att se karta!</button>

    <h2>
      <select id="valjyrke">
        <option value="Väljyrke">Välj yrke</option>
        <option value="Ambulanssjukvårdare">Ambulanssjukvårdare (landsting)</option>
        <option value="Anläggningsarbetare-fordonsförare">Anläggningsarbetare (kommun)</option>

        <option value="Barnskötare">Barnskötare (kommun)</option>
        <option value="Barnsköterska">Barnsköterska (landsting)</option>
        <option value="Biträde">Biträde (landsting)</option>
        <option value="Elevassistent">Elevassistent (kommun)</option>
        <option value="Fastighetsskötare">Fastighetsskötare (kommun)</option>
        <option value="Fordonsförare">Fordonsförare (kommun/landsting)</option>
        <option value="Fotvårdsspecialist">Fotvårdsspecialist (landsting)</option>

        <option value="Fritidsledare">Fritidsledare (kommun)</option>
        <option value="Förrådsarbetare">Förrådsarbetare (landsting)</option>
        <option value="Kock_kokerska">Kock-kokerska (kommun)</option>
        <option value="Laboratoriebiträde">Laboratoriebiträde(landsting)</option>
        <option value="Måltidspersonal">Måltidspersonal (landsting)</option>
        <option value="Park_och_trädgårdsarbetare">Park och trädgårdsarbetare (kommun)</option>
        <option value="Personlig_assistent">Personlig assistent (kommun)</option>
        <option value="Skötare">Skötare (kommun/landsting)</option>
        <option value="Städare">Städare (kommun/landsting)</option>
        <option value="Undersköterska">Undersköterska (kommun/landsting)</option>
        <option value="Vaktmästare">Vaktmästare (kommun/landsting)</option>
        <option value="Vårdare">Vårdare (kommun)</option>
        <option value="Vårdbiträde">Vårdbiträde (kommun)</option>
      </select></h2>




    <div id="kartdiv">
      <div id="lansdiv">
        <p class="psmal">Klicka på ett län för att se lönerna i kommunerna och/eller landstinget-regionen.</p>
        <div id="kartpopup">

          <div id="kartpopuprubbe"></div>
          <div class="close"><span id="closex" class="closex">&#10006;<span></div>
          <table id="karttabell" class="karttabell"></table>
        </div>
      </div>


    </div>



    <div id="lonlista">
      <h4 class="knapprad">Sortera på:</h4>
      <div id="sortknapp" class="knapprad">
        <!-- <button class="sortknapp">Sortera på:</button><button id="sortKommun" class="sortknapp">namn</button><button id="sortLonFall" class="sortknapp">lön<span class="mindre"> &#9660;</span></button><button id="sortLonStig" class="sortknapp">lön<span class="mindre"> &#9650;</span></button><button id="visaLandsting" class="sortknapp">Visa landsting</button> -->

          <button id="sortKommun" class="sortknapp"><p class="knapptext">namn</p></button><button id="sortLonFall" class="sortknapp"><p class="knapptext">lön<span class="mindre"> &#9660;</p></span></button><button id="sortLonStig" class="sortknapp"><p class="knapptext">lön<span class="mindre"> &#9650;</p></span></button>


          <!-- <button id="visaLandsting" style="display:inline">Visa landsting</button> -->
      </div>
      <div class="knapprad">
      <button id="visaLandsting" class="sortknapp"><p class="knapptext">Visa landsting</p></button>
      </div>
      <div id="mintabelldiv" style="width:100%">
        <table id="mintabell" class="tabellstil">
      </div>



      </div>



</div>


<script src="jquery-3.1.1.min.js"></script>


<script type="text/javascript">
  var sokvagYrkeslon = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/kommunloner17.json";
  var sokvagYrkesLandsting = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/landstingsloner17.json"
  // var yrke = 'Elevassistent';
  var sokvagGeografi = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/SverigesLan.geojson"
</script>




</body>

* {
  padding: 0px;
}

body {
  font: 12px sans-serif;
  padding: 0px;
  background-color: #f5f7f7;
}

h1 {
  font-size: 3em;
}

h3 {
  text-transform: uppercase;
  font-size: 1.5em;
  padding: 0 5px 0 5px;
  /*padding: 0px;
  margin: 0px;*/
}

h4 {
  padding: 0px 0px 0px 0px;
  margin: 0px;
  font-size: 1.4em;
}

h2 {
  /*text-transform: uppercase;*/
}

select {
  width: 65%;
  /*max-width: 65%;*/
  font-weight: 600;
  font-size: 1em;
  letter-spacing: 0px;
  /*height: 100px;*/
}

/*option {
  font-size: 20px;
  font-weight: 600;
}*/

path {
  stroke-width: 1px;
  stroke: white;
  fill: steelblue;
  cursor: pointer;
}

path:hover, path.highlighted {
  fill: tomato;
}

/*path:hover {
  fill: tomato;
}*/

div.tooltip {
  position: absolute;
  background-color: white;
  border: 1px solid black;
  color: black;
  font-weight: bold;
  padding: 4px 8px;
  display: none;
}

button:active {
  background-color: black;
}




table.tabellstil {
  /*table-lay out: fixed;*/
  width: auto;
  text-align: left;
  font-family: sans-serif;
  /*table-layout:fixed;*/
  /*width: 400px;*/
}

#mintabell {
  width: 100%;
  max-width: 460px;
  overflow-x: auto;
}

table.tabellstil th {
  vertical-align: text-top;
  padding: 5px 0px 0px 5px;
  font-size: 1.5em;
  text-transform: uppercase;
  line-height: 30px;
  background-color: #005578;

  color: white;
  overflow: auto;
}


table.tabellstil td {
  vertical-align: text-top;
  /*white-space: nowrap;*/
  font-size: 1.5em;
  padding: 0 0px 0 5px;
  line-height: 40px;
  overflow: auto;
  /*max-width: 0;*/
}



table.karttabell {
  /*table-lay out: fixed;*/
  width: 100%;
  text-align: left;
  font-family: sans-serif;
  font-size: 1.5em;
  line-height: 25px;
  /*width: 400px;*/
}



.karttabell td {
  white-space: normal;
  font-size:1em;
  padding: 0 5px 0 5px;
  line-height: 25px;
  color: black;
  /*line-height: 100px;*/
}




tr:nth-child(odd) {
  background-color: #B5d3e7;
}

tr:nth-child(even) {
  background-color: white;
}



.bubbla:hover {
  background-color: grey;
}


.bubblatext {
    visibility: hidden;
    font-size: 18px;
    line-height: 22px;
    font-weight: normal;
    width: 130px;
    /*font-size: 1.2em;*/
    /*height: 500px;*/
    /*background-color: #dcdcdc;*/
    background-color: yellow;

    color: black;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    text-align: left;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    left: 30px;

    padding: 10px;
    z-index: 1;
}



#kartpopup {
  display: none;
  /*float: left;*/
  width: 50%;
  min-width: 250px;
  /*height: 500px;*/
  float: right;
  background-color: white;
  opacity: 0.9;
  border: 2px solid black;
  position: absolute;
  /*right: 0px;*/
  left: 20%;
  top: 80px;
  z-index: 10;
}

#kartpopuprubbe {
  width: 90%;

}

#kartpopup2 {
  display: none;
  /*float: left;*/
  width: 50%;
  min-width: 215px;
  /*height: 500px;*/
  float: right;
  background-color: white;
  opacity: 0.9;
  border: 2px solid black;
  /*position: absolute;*/
  position: absolute;
  /*right: 0px;*/
  left: 20%;
  top: 680px;
  z-index: 10;
}

span.closex {
  font-size: 3em;
  /*color: steelblue;*/

}

span.closex:hover {
  color: steelblue;

}



div.close {
  float: right;
  position: absolute;
  top: 5px;
  right: 5px;
}




.bold {
  font-weight: bold;
}


.kartknappklass {
  position: absolute;
  top: 0px;
  left: 80%;
  border: 0;
  box-shadow: 3px 3px 5px;
  right: 10px;
  width: 127px;
  height: 127px;
  border-radius: 65px;
  background-color: yellow;
  font-weight: bold;
  font-size: 1.1em;
  z-index: 5;
}

.kartknappklass:hover {
  background-color: #cccc00;
}

#visaLandsting {
  /*font-size: 1.5em;
  height: 25px;
  padding: 0px;
  margin: 0px;
  background-color: #660000;
  color: white;
  padding: 0 5px 0 5px;
  border: 0;*/
  border-radius: 5px 5px 5px 5px;
}

#visaLandsting:hover {
    background-color: #cc0000;
}





.knapprad {
  width: 100%;
  padding-bottom: 10px;
  padding-left: 1px;
  left: 3px;
  display: inline-block;
  vertical-align: bottom;
}

p.knapptext {
  padding: 0px 3px 0px 3px;
  margin: 0px;
}

#sortknapp button:first-child {
  border-radius: 5px 0 0 5px;
}


#sortknapp button:last-child {
  /*width: 33%;*/
  border-radius: 0 5px 5px 0;
}

.sortknapp {
  font-size: 1.5em;
  height: 25px;
  padding: 10px;
  margin: 10px;
  background-color: #660000;
  color: white;
  /*font-weight: bold;*/
  padding: 0 5px 0 5px;
  border: 0;
  margin: 0px;
  text-align: left;
  /*vertical-align: bottom;*/
}

.sortknapp:hover {
  background-color: #cc0000;
}

.disableknapp {
  pointer-events: none;
  background-color: #a8a8a8;
  color: #d3d3d3;
}

.mindre {
  font-size: 80%;
}



#content {
  /*width: 450px;*/
  width: 100%;
  max-width: 732px;
  /*position: relative;*/
  padding: 0px;
  position: relative;
  background-color: #f5f7f7;
}

#lonlista {
  width: 100%;
}

.psmal {
  width: 40%;
  position: absolute;
  float: left;
  font-size: 1.5em;
  font-weight: 550;
  background-color: white;
  opacity: 0.8;
  padding: 2px;
}
(function () {
    'use strict';


var kdata = null;
var rdata = null;
var html = '';
var lonlista = document.getElementById("lonlista");
var tabell = document.getElementById('mintabell');
var rad, cell1, cell2;
var count = 1;
var sortKommun = document.getElementById('sortKommun');
var sortLonFall = document.getElementById('sortLonFall');
var sortLonStig = document.getElementById('sortLonStig');
var lonlista = document.getElementById('lonlista');
var visaLista = document. getElementById('visaLista');
var kartdiv = document.getElementById('kartdiv');
var kartpopup = document.getElementById('kartpopup');
var kartpopuprubbe = document.getElementById('kartpopuprubbe');
var kartknapp = document.getElementById('kartknapp');
var close = document.getElementById("closex");
//Variable for table tooltip
var bubbla = document.createElement('span');
bubbla.className = 'bubblatext';



//nya för yrkeslöner
var yrke = "Väljyrke";
// var yrke = "undersköterska";
var valjyrke = document.getElementById("valjyrke");




//Wait for document ready
$(document).ready(function() {
    // put your page initialization code here
    valjyrke.addEventListener("change", function() {

      yrke = this.value;
      console.log(yrke);

      kartpopup.style.display = "none";
      visaLandsting.classList.add("disableknapp");
      //If "Välj yrke" is chosen, make table with kommuner (and no numbers, which is stated in "maketable" function)
      if (yrke === 'Väljyrke') {
        tabell.getElementsByTagName("tbody")[0].innerHTML = tabell.rows[0].innerHTML;
        maketable(kdata, tabell, 1);
      }

      else {
      //Check if yrke is present in file "kdata", if it is, make table from "kdata"
      for (var i = 0; i < kdata.length; i++) {
        if (kdata[i].hasOwnProperty(yrke)) {

          tabell.innerHTML = "<tr><th>kommun</th><th>Lön 2016</th>"
          maketable(kdata, tabell, 1);
          visaLandsting.innerHTML = "Visa landsting";
          //Check if yrke is also present in "rdata", if it is, enable the visaLandsting button
          for (var i = 0; i < rdata.length; i++) {
            if (rdata[i].hasOwnProperty(yrke)) {
              visaLandsting.classList.remove("disableknapp");
              break;
              }
            }
          break;
        }
        //Executes if yrke is present only in file "rdata"
        else {
          tabell.innerHTML = "<tr><th>landsting</th><th>Lön 2016</th>"
          maketable(rdata, tabell, 1);
          visaLandsting.innerHTML = "Visa kommuner";
          }
        }
      }
    })
});


var selectlista = document.getElementsByTagName('OPTION');

//Always start with first item in list selected
Object.keys(selectlista).forEach(function(key) {
    selectlista[0].setAttribute("selected", "selected");
});


//Hide map from start
kartdiv.style.display = "none";

//To give "x" in kartpopup closing function
close.addEventListener("click", function() {
  kartpopup.style.display = "none";
})


//load the file of kommuner into variable kdata and draw the table
$.ajax({
        //testing consid url
        url: window.sokvagYrkeslon,
        // url: "kommunlan.json",
        dataType: "json",
        mimeType: "application/json",
        success: function (data) {
            kdata = data;
            kdata.reverse();

            tabell.innerHTML = "<tr><th>kommun</th><th>Lön 2016</th>"
            maketable(kdata, tabell, 1);
            },
        error: function (/* request, error */) {
            console.log('Network error has occurred please try again!');
        }
})

// load the file of regioner and landsting into variable kdata and draw the table
$.ajax({

        url: window.sokvagYrkesLandsting,
        dataType: "json",
        mimeType: "application/json",
        success: function (data) {
            rdata = data;
            },
        error: function (/* request, error */) {
            console.log('Network error has occurred please try again!');
        }
})

//Add click to kartknapp and toggle visibility
kartknapp.addEventListener('click', function() {
  if (lonlista.style.display !== 'none') {
    lonlista.style.display = "none";
    kartdiv.style.display = "block";
    kartpopup.style.display = "none";
    kartknapp.innerHTML = 'Visa alla löner på en lista'
  }
  else {
    kartdiv.style.display = "none";
    lonlista.style.display = "block";
    kartknapp.innerHTML = 'Vad tjänar grannen? Klicka för att se karta!'
  }
})


// add click to visaLandsting-knapp and change innerHTML
visaLandsting.addEventListener('click', function() {

  tabell.getElementsByTagName("tbody")[0].innerHTML = tabell.rows[0].innerHTML;
  if (visaLandsting.innerHTML === "Visa landsting") {
    tabell.innerHTML = "<tr><th>landsting</th><th>Lön 2016</th>"
    maketable(rdata, tabell, 1);
    visaLandsting.innerHTML = "Visa kommuner"
  }
  else {
    tabell.innerHTML = "<tr><th>kommun</th><th>Lön 2016</th>"
    maketable(kdata, tabell, 1);
    visaLandsting.innerHTML = "Visa landsting"
  }
})



//Add click to button, sort and create the table
sortKommun.addEventListener('click', function() {
  if (yrke != "Väljyrke") {
  tabell.getElementsByTagName("tbody")[0].innerHTML = tabell.rows[0].innerHTML;

  //check if landsting or kommun is chosen
  if (visaLandsting.innerHTML === "Visa landsting") {
    kdata.sort(function(a, b){
      var kommunA=a.Kommun.toLowerCase(), kommunB=b.Kommun.toLowerCase();
      if (kommunA < kommunB) //sort string ascending
          return -1;
      if (kommunA > kommunB)
          return 1;
      return 0; //default return value (no sorting)
      })
    //reverse sorting order to ascending
    kdata.reverse();
    maketable(kdata, tabell, 1);
    }
  else {
    rdata.sort(function(a, b){
      var kommunA=a.Kommun.toLowerCase(), kommunB=b.Kommun.toLowerCase();
      if (kommunA < kommunB) //sort string ascending
          return -1;
      if (kommunA > kommunB)
          return 1;
      return 0 ;//default return value (no sorting)
      })
    //reverse sorting order to ascending
    rdata.reverse();
    maketable(rdata, tabell, 1);
    }
  }
});




//Add click to button, sort and create the table
sortLonStig.addEventListener('click', function() {
  if (yrke != "Väljyrke") {

  tabell.getElementsByTagName("tbody")[0].innerHTML = tabell.rows[0].innerHTML;
  if (visaLandsting.innerHTML === "Visa landsting") {
    kdata.sort(function(a, b){
      return a[yrke]-b[yrke];
      })
    kdata.reverse();
    maketable(kdata, tabell, 1);
  }
  else {
    rdata.sort(function(a, b){
      return a[yrke]-b[yrke];
      })
    rdata.reverse();
    maketable(rdata, tabell, 1);
    }
  }
});

//Add click to button, sort and create the table
sortLonFall.addEventListener('click', function() {
  if (yrke != "Väljyrke") {

  tabell.getElementsByTagName("tbody")[0].innerHTML = tabell.rows[0].innerHTML;
  if (visaLandsting.innerHTML === "Visa landsting") {
    kdata.sort(function(a, b){
      return a[yrke]-b[yrke];
      })
    maketable(kdata, tabell, 1);
  }
  else {
    rdata.sort(function(a, b){
      return a[yrke]-b[yrke];
      })
      maketable(rdata, tabell, 1);
    }

  }
});






//Add table rows of sorted data
function maketable(data, tabell, index) {

  data.forEach(function(row) {

    count = index;
    rad = tabell.insertRow(count);
    cell1 = rad.insertCell(0);
    cell2 = rad.insertCell(1);
    cell1.innerHTML = row.Kommun;
    //To show blanks instead of "undefined" iv "Välj yrke" is selected
    if (yrke === 'Väljyrke') {
      cell2.innerHTML = '';
        visaLandsting.classList.add("disableknapp");
      }
    else {
      cell2.innerHTML = row[yrke];
      }

    if (row.Kommun === 'RIKSSNITT') {

      cell1.style.fontWeight = "bold";
      cell2.style.fontWeight = "bold";
    }
    //When to show the yellow bubbles
    bubbelvillkor(row);

    count++;
    })
};




//function to show and hide bubbla
function showhide(row, bubble) {
  var bubblor = document.getElementsByClassName('bubblatext');
  rad.addEventListener("click", function() {
      //hide the active bubble if it's visible
      if (bubble.style.visibility === "visible") {
        bubble.style.visibility = "hidden";
      }
      //First hide other bubbles that may be visible, then show the active bubble
      else {
          for (var i = 0; i < bubblor.length; i++) {
            bubblor[i].style.visibility = "hidden";
            bubble.style.visibility = "visible";
      }
    }
})
}





function bubbelvillkor(row) {

  if (row[yrke] === '') {
    rad.classList.add('bubbla');
    var cl2 = bubbla.cloneNode(true);
    rad.appendChild(cl2);
    cl2.style.left = '50px';
    cl2.innerHTML = "Uppgift saknas då det finns få eller inga anställda i yrkeskategorin.";
    // hide(rad);
    showhide(rad, cl2);
    if (row.Kommun === 'Norrtälje Tiohundra AB*') {
      cl2.innerHTML += " Bolaget Tiohundra AB ägs av Norrtälje Kommun och Stockholms Läns Landsting.";
      }
    if (row.Kommun === 'Sollentuna AB SOLOM*') {
      cl2.innerHTML += " Sollentuna driver omsorg i egen regi genom kommunägda bolaget AB SOLOM.";
      }
    }

  else if (row.Kommun === 'Norrtälje Tiohundra AB') {
    rad.classList.add('bubbla');
    rad.appendChild(bubbla);
    bubbla.innerHTML = "Bolaget Tiohundra AB ägs av Norrtälje Kommun och Stockholms Läns Landsting.";
    showhide(rad, bubbla);
    }
  else if (row.Kommun === 'Sollentuna AB SOLOM') {
    rad.classList.add('bubbla');
    var cl1 = bubbla.cloneNode(true);
    rad.appendChild(cl1);
    cl1.innerHTML = "Sollentuna driver omsorg i egen regi genom kommunägda bolaget AB SOLOM.";
    showhide(rad, cl1);
    }
}

//Nedan kommer allt som har med kartan att göra

//Map dimensions (in pixels)
var width = 264,
    height = 600;

//Map projection
var projection = d3.geo.conicEqualArea()
    .scale(2365.51882004263)
    .center([16.382656313727672,62.34103687152436]) //projection center
    .parallels([55.327583999999995,69.059967]) //parallels for conic projection
    .rotate([343.6173436862723]) //rotation for conic projection
    .translate([432.31469742010825,256.8639471506867]) //translate to center the map in view

//Generate paths based on projection
var path = d3.geo.path()
    .projection(projection);

//Create an SVG
var svg = d3.select("#lansdiv").append("svg")
// var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

//Group for the map features
var features = svg.append("g")
    .attr("class","features");

//Create zoom/pan listener //disabled becuase it messes up in mobile devices
//Change [1,Infinity] to adjust the min/max zoom scale
// var zoom = d3.behavior.zoom()
//     .scaleExtent([1, Infinity])
//     .on("zoom",zoomed);

// svg.call(zoom);

//Create a tooltip, hidden at the start
var tooltip = d3.select("body").append("div").attr("class","tooltip");

d3.json(window.sokvagGeografi,function(error,geodata) {
  if (error) return console.log(error); //unknown error, check the console

  //Create a path for each map feature in the data
  features.selectAll("path")
    .data(geodata.features)
    .enter()
    .append("path")
    .attr("d",path)
    .on("mouseover",showTooltip)
    .on("mousemove",moveTooltip)
    .on("mouseout",hideTooltip)
    .on("click",clicked);

});

// Click-function for kartpopup
// d.properties contains the attributes (e.g. d.properties.name, d.properties.population)
function clicked(d,i) {
  hideTooltip;
  karttabell.innerHTML = '';
  kartpopuprubbe.innerHTML = '';
  var lan = d.properties.lan_namn;
  var landsting = d.properties.landsting;
  //Show kartpopup on click
  kartpopup.style.display = "block";
  //Sort by lön, ascending
  kdata.sort(function(a, b){
    return a[yrke]-b[yrke]
    })

  //Check if yrke is present in file "kdata" and "rdata", one round is enough to know
  for (var i = 0; i < 1; i++) {
    if (kdata[i].hasOwnProperty(yrke)) {
      //Add rows from file "kdata"
      kdata.forEach(function(row) {
        if (d.properties.landsting === row.Landsting) {

          rad = karttabell.insertRow(0);
          cell1 = rad.insertCell(0);
          cell2 = rad.insertCell(1);
          cell1.innerHTML = row.Kommun;
          if (typeof row[yrke] === 'undefined'){
            cell2.innerHTML = '';
            }
          else {
            cell2.innerHTML = row[yrke];
            }
          bubbelvillkor(row);
        }
      })
    }

    if (rdata[i].hasOwnProperty(yrke)) {

      rdata.forEach(function(row) {
        if (landsting === row.Kommun) {
          rad = karttabell.insertRow(karttabell.rows.length);
          cell1 = rad.insertCell(0);
          cell2 = rad.insertCell(1);
          cell1.innerHTML = 'Landstinget';
          cell2.innerHTML = row[yrke];
          var cl4 = bubbla.cloneNode(true);
          rad.appendChild(cl4);
          cl4.innerHTML = "En del landsting kallar sig Regioner.";
          if (row[yrke] === '') {
            cl4.innerHTML = ' Uppgift om lön saknas då det finns få eller inga anställda i yrket. (En del landsting kallar sig Regioner.)'
          }
          showhide(rad, cl4);
          rad.classList.add('bold', 'bubbla');
          }
        })
    }


}

  //Create the headline
  var rub = document.createElement('H3');
  var rubtext = document.createTextNode(lan);
  rub.appendChild(rubtext);
  kartpopuprubbe.appendChild(rub);
}


//Update map on zoom/pan // zoom is disabled because it messes up in mobile devices
// function zoomed() {
//   features.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")
//       .selectAll("path").style("stroke-width", 1 / zoom.scale() + "px" );
// }


//Position of the tooltip relative to the cursor
var tooltipOffset = {x: 5, y: -25};

//Create a tooltip, hidden at the start
function showTooltip(d) {
  moveTooltip();

  tooltip.style("display","block")
      .text(d.properties.lan_namn);
}

//Move the tooltip to track the mouse
function moveTooltip() {
  tooltip.style("top",(d3.event.pageY+tooltipOffset.y)+"px")
      .style("left",(d3.event.pageX+tooltipOffset.x)+"px");
}

//Create a tooltip, hidden at the start
function hideTooltip() {
  tooltip.style("display","none");
}



})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/d3.v3.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js