<body>

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

     <h2>Medellöner för <br>undersköterskor</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>
/* Använder CSS-filen från "Medelloner2017" som extern resurs */
(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

      // yrke = this.value;
      yrke = "Undersköterska";
      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

  1. https://codepen.io/LOM/pen/RJBgLK

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