<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>Lon17</title>

  <script src="d3.v3.min.js"></script>


  <div id="content">
      <h1>Löner i olika yrken</h1>
    <!-- <h2> -->
      <select id="valjyrke">
        <option value="Väljyrke">Välj yrke</option>
        <option value="Ambulanssjukvårdare">Ambulanssjukvårdare (landsting)</option>
        <option value="Anläggningsarbetare">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/landsting)</option>
        <option value="Laboratoriebiträde">Laboratoriebiträde(landsting)</option>
        <option value="Måltidspersonal">Måltidspersonal (kommun/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="overlay"></div>
    <div id="kartdiv">

      <div id="lansdiv">
        <p class="psmal">Välj yrke i menyn ovan, klicka sen 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">
      <p class="pstor" id=valtyrkep>Välj yrke för att se lönelista.</p>

      <input type="radio" name="alt" value="listKommuner" class="yrkesbutton" id="listKommuner"><label>kommuner</label>
      <input type="radio" name="alt" value="listLandsting" class="yrkesbutton" id="listLandsting"><label >landsting</label>
      <br>

      <div id="sortknapp" class="knapprad">
          <button class = sortknapp><p class="knapptext">Sortera på: </p></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>

      </div>
      <div id="mintabelldiv" style="width:100%">
        <table id="mintabell" class="tabellstil"></table>
      </div>

      <div id="showmore"></div>

      </div>


      <div></div>

    <div id="jamforyrkediv">

        <h1>Jämför yrken</h1>
        <input type="radio" name="alt" value="kommuner" class="yrkesbutton"><label id="kommuner">kommuner</label>
        <input type="radio" name="alt" value="landsting" class="yrkesbutton"><label id="landsting">landsting</label>
        <p class="pstor" id="yrkep">Visar <span id="yrkesspan">genomsnitt för alla kommuner.</span></p>
        <p class="input pstor" id="sokkommun">Sök kommun</h2>
        <input type="text" name="search" placeholder="Kommun" id="searchfield"></p>

          <select id="valjlandsting">
          <option value="RIKSSNITT">Välj landsting</option>
          <option value="Landstinget Blekinge">Landstinget Blekinge</option>
          <option value="Landstinget Dalarna">Landstinget Dalarna</option>

          <option value="Landstinget i Kalmar län">Landstinget i Kalmar län</option>
          <option value="Landstinget i Värmland">Landstinget i Värmland</option>
          <option value="Landstinget Sörmland">Landstinget Sörmland</option>
          <option value="Landstinget Västernorrland">Landstinget Västernorrland</option>
          <option value="Region Gotland">Region Gotland</option>
          <option value="Region Gävleborg">Region Gävleborg</option>
          <option value="Region Halland">Region Halland</option>
          <option value="Region Jämtland Härjedalen">Region Jämtland Härjedalen</option>
          <option value="Region Jönköpings län">Region Jönköpings län</option>
          <option value="Region Kronoberg">Region Kronoberg</option>
          <option value="Region Norrbotten">Region Norrbotten</option>
          <option value="Region Skåne">Region Skåne</option>
          <option value="Region Uppsala">Region Uppsala</option>
          <option value="Region Västmanland">Region Västmanland</option>
          <option value="Region Örebro län">Region Örebro län</option>
          <option value="Region Östergötland">Region Östergötland</option>
          <option value="Stockholms läns landsting">Stockholms läns landsting</option>
          <option value="Västerbottens läns landsting">Västerbottens läns landsting</option>
          <option value="Västra Götalandsregionen">Västra Götalandsregionen</option>
        </select>

        <div id="yrken">
          <table id="yrkestabell" class="tabellstil"></table>
          <svg class="chart" id="chart"></svg>
        </div>
      </div>
</div>



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


<script src="lon17.js"></script>




* {
  margin-left: 0px;
  margin-right: 0px;
  padding: 0px;

}

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

h1 {
  background-color: #1c3448;
  color: white;
  padding: 4px;
}

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

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

h2 {
}

select {
  width: 100%;
  font-weight: 600;
  font-size: 1.7em;
  letter-spacing: 0px;
}


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

path:hover, path.highlighted {
  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 {
  width: auto;
  text-align: left;
  font-family: sans-serif;
}

label {
  margin-left: 5px;
  margin-right: 5px;
  font-size: 1.4em;
}



#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer;
    /* pointer-events: none; */
}

#jamforyrkediv {
}

#valjlandsting {
  display: none;
  margin-bottom: 10px;
}

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

#mintabelldiv {
  max-height: 225px;
  overflow: auto;
  position: relative;
}


#showmore {
  position: relative;
  bottom: 20px;

  background: linear-gradient(rgba(10,10,10,0),rgba(10,10,10,1));

  height: 20px;
  line-height: 70px;
  width: 100%;
  pointer-events: none;
  }


input {
  display: inline-block;
}

table.tabellstil th {
  vertical-align: text-top;
  padding: 5px 0px 0px 5px;
  font-size: 1.4em;
  text-transform: uppercase;
  line-height: 26px;
  background-color: steelblue;

  color: white;
  overflow: auto;
}


table.tabellstil td {
  vertical-align: text-top;
  font-size: 1.5em;
  padding: 0 0px 0 5px;
  line-height: 28px;
  overflow: auto;
}


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


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


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

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


.bubblatext {
    visibility: hidden;
    font-size: 18px;
    line-height: 22px;
    font-weight: normal;
    width: 130px;
    background-color: yellow;
    color: black;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    text-align: left;
    position: absolute;
    left: 30px;
    padding: 10px;
    z-index: 1;
}

#lansdiv {
  position: relative;
}

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

#kartpopuprubbe {
  width: 90%;
}

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

#kartpopup p {
  padding: 0px 10px 0px 10px;
}

span.closex {
  font-size: 3em;
  }

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: 60%;
  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;
}



.knapprad {
  width: 100%;
  padding-bottom: 10px;
  padding-left: 1px;
  padding-top: 10px;
  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 {
  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;
}

#sortknapp button:first-child:hover {
  background-color: #660000;

}


.mindre {
  font-size: 80%;
}



#content {
  width: 100%;
  max-width: 732px;
  padding: 0px;
  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;mintabell
}

.pstor {
  font-size: 1.5em;
}

table {
    width: 400px; /* 140px * 5 column + 16px scrollbar width */
    border-spacing: 0;
}

#searchfield {
font-size: 20px;
}

/* #valjlandsting {
  font-size: 20px;
} */

/* SVG stuff for the bar chart */
.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  fill: #f5f7f7;
  font: 14px sans-serif;
  text-anchor: end;
}
(function () {
    'use strict';


var kdata = null;
var rdata = null;
var html = '';
var rad, cell1, cell2;
var count = 1;
var landsting;
var yrkesarray = [];
//Variable for table tooltip
var bubbla = document.createElement('span');
bubbla.className = 'bubblatext';
var yrke = "Väljyrke";

//variables for elements from html document
var lonlista = document.getElementById("lonlista");
var tabell = document.getElementById('mintabell');
var yrken = document.getElementById("yrken");
var yrkestabell = document.getElementById('yrkestabell')
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 close = document.getElementById("closex");
var yrkesspan = document.getElementById('yrkesspan');
var mintabelldiv = document.getElementById('mintabelldiv');
var overlay = document.getElementById('overlay');
var yrkesbuttons = document.getElementsByClassName('yrkesbutton');
var valjlandsting = document.getElementById('valjlandsting');
var sokyrke = document.getElementById('sokyrke');
var listLandstingKnapp = document.getElementById('listLandsting');
var listKommunKnapp = document.getElementById('listKommuner');
var valtyrkep = document.getElementById('valtyrkep');
var selectlista = document.getElementsByTagName('OPTION');
var valjyrke = document.getElementById("valjyrke");



//Wait for document ready
$(document).ready(function() {

    //choose yrke in list
    valjyrke.addEventListener("change", function() {

      yrke = this.value;
      kartpopup.style.display = "none";
      //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)) {
          listKommunKnapp.disabled = false;
          listKommunKnapp.checked = true;
          listLandstingKnapp.disabled = true;
          tabell.innerHTML = "<tr><th>kommun</th><th>Lön 2017</th>";
          maketable(kdata, tabell, 1);
          //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)) {
              listLandstingKnapp.disabled = false;
              break;
              }
            }
          break;
        }
        //Executes if yrke is present only in file "rdata"
        else {

          listLandstingKnapp.disabled = false;
          listKommunKnapp.disabled = true;
          listLandstingKnapp.checked = true;
          tabell.innerHTML = "<tr><th>landsting</th><th>Lön 2017</th>";
          maketable(rdata, tabell, 1);

          }
        }
      }

      //Make the text grey in the label for a disabled button
      for (var i = 0; i < yrkesbuttons.length; i++) {
        if (yrkesbuttons[i].disabled) {

          yrkesbuttons[i].nextSibling.style.color = "#E8E8E8";
        }
        else {
          yrkesbuttons[i].nextSibling.style.color = "black";
        }
      }

      //put the right text in the p element above the lönlista
      valtyrkep.textContent = "Visar lönelista för ";
      //create variable with the choosen profession, replacing underscores with spaces
      var yrkestext = document.createTextNode(yrke.toLowerCase().replace(/_/g, ' ') + '.');
      valtyrkep.appendChild(yrkestext);
      if (yrke === "Väljyrke") {
        valtyrkep.innerHTML = 'Välj yrke för att visa lönelista.';
      }

    });


});



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



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


//load the file of kommuner into variable kdata and draw the table
$.ajax({
        url: window.sokvagYrkeslon,
        dataType: "json",
        mimeType: "application/json",
        success: function (data) {
            kdata = data;
            kdata.reverse();
            tabell.innerHTML = "<tr><th>kommun</th><th>Lön 2017</th>"
            maketable(kdata, tabell, 1);
            jamforyrke(kdata, 'RIKSSNITT', 4);
            },
        error: function (/* request, error */) {
            console.log('Network error has occurred please try again!');
        }
})

// load the file of regioner and landsting into variable rdata
$.ajax({

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





//Add click to button, sort by kommun/landsting 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 (getvalue(yrkesbuttons) === "listKommuner") {
  // 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 if (getvalue(yrkesbuttons) === "listLandsting") {
    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 by salary (ascending) and create the table
sortLonStig.addEventListener('click', function() {
  if (yrke != "Väljyrke") {

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

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

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

  }
});


// Function for comparing proffessions
// @params 'data' = array of objects loaded from json file with ajax
//         'valdkommun' = kommun or landsting, will be given or chosen from search field or select list
//          index = number indicating at which index to start displaying the proffessions. Needed because the kommun- and landsting files are differently structured
function jamforyrke(data, valdkommun, index) {
  //start with emptying the chart element
  $("#chart").empty();

  //empty array that will collect the chosen proffessions
  yrkesarray = [];
  //empty object for yrke
  var yrke;

  //Building the array 'yrkessarray'
  data.forEach(function(row) {

    if (row.Kommun === valdkommun) {
      for (var x = index; x < Object.keys(row).length; x++) {
        //start with emptying the object
        yrke = {};
        //Build an object with properties 'lön' and yrke
        yrke['yrke'] = Object.keys(row)[x];
        yrke['lön'] = Object.values(row)[x];
        //put the object in an array
        yrkesarray.push(yrke);
        }
      }
    });
    //make a bar chart with d3
    makeGraph(yrkesarray);
};

// make a bar chart with d3
function makeGraph(data1) {
  //sort the data
  data1.sort(function(x, y){
     return d3.descending(x.lön, y.lön);
  })


  var width = 300,
      barHeight = 25;

  var x = d3.scale.linear()
      .range([0, width])

  var chart = d3.select(".chart")
      .attr("width", width);


  //Using inline json works if you leave file name blank, and then refer directly to the variable name instead of "data", in this case "data1"
  d3.json('', function(error, data) {
      data1.forEach(function(d) {
             d.lön = +d.lön;
     });

    x.domain([0, d3.max(data1, function(d) { return d.lön; })]);

    chart.attr("height", barHeight * data1.length);

    var bar = chart.selectAll("g")
        .data(data1)
      .enter().append("g")
        .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

    bar.append("rect")
        .attr("width", function(d) { return x(d.lön); })
        .attr("height", barHeight - 1);

    bar.append("text")
        .attr("x", function(d) { return x(d.lön) - 3; })
        .attr("y", barHeight / 2)
        .attr("dy", ".35em")
        .text(function(d) {
          //using jqery number to put a space as thousands delimiter
          d.lön = $.number(d.lön, 0, ',', ' ');

          return d.lön; });

    bar.append("text")
        .attr("x", 5)
        .style("text-anchor", "start")
        .attr("y", barHeight / 2)
        .attr("dy", ".35em")
        .text(function(d) {
          //using regex to replace underscore with space
          d.yrke = d.yrke.replace(/_/g, ' ');
          return d.yrke; });
  });
}




//handling input in search field
$("input").on("keydown",function search(e) {
  console.log('hanterar input');
    var data = kdata;
    //index for kommun is 4, because that is the position of the first proffession in the array
    var index = 4;
    //key 13 is "enter"
    if(e.keyCode == 13) {
      var sokt = $(this).val();
      //traverse the data file
      data.forEach(function(row) {
        //find i match, in lowercase
        if (row.Kommun.toLowerCase() === sokt.toLowerCase()){
          //build the array and make the graph
          jamforyrke(data, row.Kommun, index);
          //Show the name of the chosen kommun
          yrkesspan.innerHTML = 'löner för ' + row.Kommun + '.';
          $('#yrkep').hide().fadeIn();
        }
      })
    }
});

//Check the third radiobutton on loading page, to make the Kommun choice default
function checkfromstart(radiobuttons) {
  radiobuttons[2].checked = true;
}

checkfromstart(yrkesbuttons);


//Getting the value of the checked radiobutton
function getvalue(radiobuttons) {
  for (var i = 0; i < radiobuttons.length; i++) {
    if (radiobuttons[i].checked === true) {
      return radiobuttons[i].value;
      }
  }
}

//Action for the radiobuttons yrkesbuttons, choose Kommun or Landsting
$('.yrkesbutton').on('click', function(e) {
  //testa i flera browsers om det räcker med 'click', testa annars
  // $('.yrkesbutton').on('click change', function(e) {

    //first two conditionals are for the Jämför yrken graph
    if (getvalue(yrkesbuttons) === "kommuner") {
      //index for kdata is 4 because that is the position of the first proffesion in that array
      jamforyrke(kdata, 'RIKSSNITT', 4);
      //Show which data is chosen
      yrkesspan.innerHTML = 'genomsnitt för alla kommuner.';
      $('#yrkep').hide().fadeIn();
      //Show the search field for kommun
      sokkommun.style.display = "block";
      //hide the select list for landsting
      valjlandsting.style.display = 'none';

    }
    else if (getvalue(yrkesbuttons) === "landsting") {
        //index for rdata is 1 because that is the position of the first proffesion in that array
        jamforyrke(rdata, 'RIKSSNITT', 1);
        //show which data is chosen
        yrkesspan.innerHTML = 'genomsnitt för alla landsting.<p></p>Välj ett landsting i listan:';
        //hide the search filed for kommun
        sokkommun.style.display = "none";
        //show the select list for landsting
        valjlandsting.style.display = 'block';
        $('#yrkep').hide().fadeIn();
    }
    //Third and fourth conditionals are for the Lönlista table
    else if (getvalue(yrkesbuttons) === 'listKommuner') {
      tabell.innerHTML = "<tr><th>kommuner</th><th>Lön 2017</th>";
            maketable(kdata, tabell, 1);
    }
    else if (getvalue(yrkesbuttons) === 'listLandsting') {
      tabell.getElementsByTagName("tbody")[0].innerHTML = tabell.rows[0].innerHTML;
        tabell.innerHTML = "<tr><th>landsting</th><th>Lön 2017</th>";
      maketable(rdata, tabell, 1);
    }

});

//Event vor the select list of landsting
valjlandsting.addEventListener("change", function() {

  landsting = this.value;
  //Build the array (and make the graph) from the chosen data
  //argument 'this.value' = the chosen lansdting,
  jamforyrke(rdata, this.value, 1);
  if (this.value === "RIKSSNITT") {
    //show which value is chosen
    yrkesspan.innerHTML = 'genomsnitt för alla landsting.<br>Välj ett landsting i listan:';
    $('#yrkep').hide().fadeIn();

  }
  else {
    //show which value is chosen
    yrkesspan.innerHTML = 'löner för ' + this.value + '.';
    // yrkesspan.style.opacity = "0";
    $('#yrkep').hide().fadeIn();
  }

});



//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 = '';
        }
    else {
      var yrkeform = $.number(row[yrke], 0, ',', '&nbsp;')
      if (yrkeform === '0') {
        yrkeform = '';
      }
      cell2.innerHTML = yrkeform;

      }

    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 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 = '';
  if (yrke === 'Väljyrke') {

    karttabell.innerHTML = "<p>Du måste välja ett yrke i listan först</p>";
  }







  var lan = d.properties.lan_namn;
  var landsting = d.properties.landsting;
  //Show kartpopup on click
  kartpopup.style.display = "block";
  //show semitransparent overlay under kartpopup, to make everything under kartpopup look faded
  overlay.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 {

            var yrkeform = $.number(row[yrke], 0, ',', '&nbsp;');
            if (yrkeform === '0') {
              yrkeform = '';
            }
            cell2.innerHTML = yrkeform;
            // 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';
          //formatted variable for lön with space as thousand separator, will be a string
          var yrkeform = $.number(row[yrke], 0, ',', '&nbsp;');
          //changing zero to blanks
          if (yrkeform === '0') {
            yrkeform = '';
          }
          cell2.innerHTML = yrkeform;
          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);
  if (karttabell.innerHTML === '') {
    karttabell.innerHTML = '<p>Uppgift saknas då det finns för få eller inga anställda i yrkeskategorin.</p>';
  }
}


//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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/df-number-format/2.1.6/jquery.number.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/d3.v3.min.js