<body >

	  <section class="main-content .u-colorBgMix-5">
			<div class="Label">Ob-bonus i landstingen</div>

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

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


	  </section>


	  


		


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

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;
		}

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

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

	@-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("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/SverigesLan2018.geojson", draw);
			function draw(geo_data) {
			  "use strict";
			  var width = 440,
			      height = 630,
			      scale = 2365.51882004263,
						translateX = 432.31469742010825,
						translateY = 300.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 legend = d3.select("svg")
						.append("g")
						.selectAll("g")
						.data(color.domain())
						.enter()
						.append("g")
							.attr("class", "legend")
							.attr("transform", function(d,i) {
								var height = legendRectSize;
								var horz = 0;
								var vert = i * height;
								return "translate(" + horz + "," + vert + ")";
							})

				legend.append("rect")
						.attr("width", legendRectSize)
						.attr("height", legendRectSize)
						.style("fill", color)
						.style("stroke", color);

				legend.append("text")
					.attr("x", legendRectSize + legendSpacing)
					.attr("y", legendRectSize - legendSpacing)
					.attr("class", "u-textMeta")
					.text(function(d) {return d; });

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



        //loading my own data file
				d3.json("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/ob_landsting2018.json", function(json){
				  data = json;
				  svg.selectAll("path")
				    .attr("class", quantify)
				});
        
        //color by number
				function quantify(d,i) {
					var f = data[i].sifferniva;
					// return "q" + Math.min(8, ~~((f-250) / 150)) + "-9";
					return "q" + f;
					}

				function mouseover() {
					tooltip.transition()
						.duration(200)
						.style("opacity", .9);
				}

        //adding the text for the tooltip
				function mousemove(d, i) {

						tooltip.html("<b>" + d.properties.landsting + "</b>"+ "<br/>" + data[i].fritext)
							.style("left", (d3.event.pageX) + "px")
							.style("top", (d3.event.pageY - 50) + "px");

				}

				function mouseout() {
						tooltip.transition()
							.duration(200)
							.style("opacity", 0);
				}
        
        //hide the loader when the map is drawn
        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://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.min.js
  3. https://ka.se/app/themes/lo-mediehus/assets/javascripts/extra/codepen-helper.js