<section class="main-content .u-colorBgMix-5">
			<div class="Label">Sjukvårdspartier i landsting/regioner</div>

			<div id="loadercontainer">
				<div class="loader" id="loader"></div>
			</div>

	    <div id="chart"></div>


	  </section>
body {
  background-color: #f5f7f7;
}

p {
  margin-bottom: 0;
}

div#chart {
  padding-top: 20px;
}

.main-content {
  width: 442px;
  margin: 0 auto;
}
.map {
  display: inline-block;
  margin: 0 auto;
  /* overflow: auto; */
}

.q1 {
  fill: #730700;
}
.q2 {
  fill: #74b2b2;
}
.q3 {
  fill: #f5cc00;
}

#searchresult {
}

h3 {
  margin: 2px 0px 2px 0px;
}

/*.Paired .q0-3{fill:rgb(166,206,227)} .Paired .q1-3{fill:rgb(31,120,180)} .Paired .q2-3{fill:rgb(178,223,138)}*/

.overlay {
  fill: none;
  pointer-events: all;
}

.label {
  font-weight: bold;
  text-anchor: middle;
  cursor: default;
  font-size: 0.3em;
  font-family: sans-serif;
}

div.tooltip {
  position: absolute;
  text-align: left;
  /* font-family: sans-serif; */
  padding: 4px;
  background: #fff;
  border: 0px;
  pointer-events: none;
  /* font-size: 1em; */
}

.fet {
  font-weight: bold;
}

.tooltip p {
  font-size: 1em;
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

#loadercontainer {
  position: relative;
  top: 100px;
  width: 60px;
  left: 80px;
}



/* * Safari * */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
			// d3.json(window.sokvagGeo, draw);
			d3.json("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/SverigesLan2018.geojson", draw);
			function draw(geo_data) {
			  "use strict";
			  var width = 440,
			      height = 600,
			      scale = 2365.51882004263,
						translateX = 432.31469742010825,
						// translateY = 300.8639471506867,
						translateY = 250.8639471506867,
						legendRectSize = 18,
          	legendSpacing = 4,
						data;

				var zoom = d3.behavior.zoom()
					.scaleExtent([1, 12])
					.on("zoom", zoomhandler);

				function zoomhandler() {
					svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")
				}

			  var projection = d3.geo.conicEqualArea()
						.center([16.382656313727672,62.34103687152436]) //projection center
						.parallels([55.327583999999995,69.059967]) //parallels for conic projection
						.rotate([343.6173436862723]) //rotation for conic projection
			      .scale(scale)
			      .translate( [translateX, translateY]);

			  var path = d3.geo.path().projection(projection);

			  var svg = d3.select("#chart")
			      .append("svg")
			        .attr("width", width)
			        .attr("height", height)
			        .attr("class", "map")


			  var map = svg.selectAll("path")
			      .data(geo_data.features)
			      .enter()
			      .append("path")
			        .attr("d", path)
			        // .style("fill", "lightBlue")
			        .style("stroke", "black")
			        .style("stroke-width", 0.5)
								.on("mouseover", mouseover)
								.on("mousemove", mousemove)
								.on("mouseout", mouseout);



				var color = d3.scale.ordinal()
						.domain(["Sjuksköterskor får mer", "Sjuksköterskor och undersköterskor får lika", "Ingen får utöver avtal"])
						.range(["#730700", "#74b2b2", "#f5cc00",]);


			
				var tooltip = d3.select("section")
						.append("div")
							.attr("class", "tooltip u-textMeta")
							.style("opacity", 0)




				d3.json("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/sjpart.json", function(json){
				  data = json;
				  svg.selectAll("path")
				    .attr("class", quantify)
				});

				function quantify(d,i) {
					var f;
					var f = data[i].sifferniva;
					// return "q" + Math.min(8, ~~((f-250) / 150)) + "-9";
					return "q" + f;
					}

				function mouseover(d, i) {

					if (data[i].sifferniva === 1) {
						tooltip.transition()
							.duration(200)
							.style("opacity", .9);
						}
					}




				function mousemove(d, i) {

					if (data[i].sifferniva === 1) {

						tooltip.html("<p class =\"fet\">" + data[i].partinamn  + "</p><p>" +  d.properties.landsting
						+ "</p>" + "<p><span class=\"fet\">Mandat: </span>" + data[i].mandat + "</p>"
						+ "</p>" + "<p><span class=\"fet\">Trend: </span>" + data[i].trend + "</p>"
						+ "</p>" + "<p><span class=\"fet\">Roll efter valet: </span>" + data[i].rolleftervalet + "</p>"
						+ "</p>" + "<p><span class=\"fet\">Om partiet: </span>" + data[i].ompartiet + "</p>"

					)
							.style("left", (d3.event.pageX) + "px")
							.style("top", (d3.event.pageY - 50) + "px");

						}



				}

				function mouseout() {
						// tooltip.transition()
						// 	.duration(200)
						// 	.style("opacity", 0);
						tooltip.style("opacity", 0);
				}

				console.log('slutet av draw-funktionen');
				document.getElementById('loader').style.display = "none";


			};

External CSS

  1. https://ka.se/app/themes/lo-mediehus/assets/stylesheets/codepen/kommunalarbetaren.css

External JavaScript

  1. https://ka.se/app/themes/lo-mediehus/assets/javascripts/extra/codepen-helper.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/d3.v3.min.js