JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<div id="wrapper">
  <h1>
A-Stadt und B-weiler am kriminellsten
</h1>
  <div id="info">Bitte klicken Sie in der Karte auf eine Stadt oder Gemeinde</div>

  <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" width="1215.1268" height="1023.9745" viewBox="-4142.112 -3183.343 1215.1268 1023.9745" overflow="visible" enable-background="new -4142.112 -3183.343 7937.649 6690.734" xml:space="preserve"
  inkscape:version="0.91 r13725" sodipodi:docname="saarland_2.svg" id="svg3588" style="overflow:visible">
    <g id="Gemeinden" transform="matrix(0.15599916,0,0,0.15599916,-3511.5703,-2695.8061)">
      <g id="g3598">
        <g id="g3600">
          <path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="black" stroke-opacity="1" stroke-width="0.5" d="m -227.738,-529.901 12.712,122.906 -63.611,80.528 46.62,148.33 -80.527,0 -21.221,114.423 -72.045,21.202 -46.613,-55.072 -156.801,50.83 -4.242,-118.658 -178.002,-135.605 -4.229,-152.56 -76.286,-173.749 105.946,-114.423 -14.141,-114.643 68.319,-186.329 128.06,33.977 182.245,-161.042 182.225,33.908 93.24,-101.717 88.998,-21.214 80.516,-139.854 105.951,122.906 -33.907,76.286 -67.814,-16.947 12.699,88.998 118.664,122.9 -38.148,80.527 -178,-8.477 -97.481,-50.861 -97.48,0 -4.229,72.076 76.286,0 -8.471,173.724 55.078,46.613 -8.471,131.377 z"
          id="schmelz"><title>Schmelz</title></path>
          <path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="black" stroke-opacity="1" stroke-width="0.5" d="m -2278.926,550.789 12.712,-122.918 59.338,-67.804 -29.672,-101.71 -84.756,4.197 4.241,-148.317 -88.992,-88.967 -63.58,33.895 -101.717,-127.123 -72.044,-33.908...

CSS

svg {
  padding: 10px;
  width: 100%;
  max-width: 445px;
  height: auto;
  position: relative;
}

#Gemeinden > g > g > path {
  opacity: 0.8;
  fill: cyan;
  stroke: white;
  stroke-width:20;
  stroke-miterlimit:3.86369991
}

#Gemeinden > g > g > path:hover {
  opacity: 1;
}

#Gemeinden > g > g > path.aktiv {
  opacity: 1;
  stroke-width: 70;
  
}

#info {
  width: 230px;
  padding-left: 12px;
  display: table-cell;
  min-height: 90px;
  float: left;
  color: white;
  font-size: 12pt;
  font-family: sans-serif;
}

#wrapper {
  width: 100%;
  background: linear-gradient(to right, #023168 0%, #034694 100%);
  position: relative;
}

h1,
footer {
  padding: 6px;
  color: white;
  font-family: sans-serif;
  font-weight: normal;
}

h1 {
  padding-top: 10px;
  padding-left: 12px;
}

footer {
  opacity: 0.6;
}

ul { list-style:none;margin:0px;padding:0px;}
li {padding-bottom:4px;}

JavaScript

var data = {
	"labels": ["absolut", "Trend", "Aufklärungsquote", "Rang", "Trend Rang", "Top 3"],
	"gemeinden": {
		"beckingen": {
			"id": "beckingen",
			"Gemeinde": "Beckingen",
			"Farbe": "red",
			"data": [29, 83,"47 %", 68, 12, "Handtaschenraub, Ladendiebstahl, Inverkehrbringen von Falschgeld"]
		},
		"bexbach": {
			"id": "bexbach",
			"Gemeinde": "Bexbach",
			"Farbe": "darkred",
			"data": [29, 83,"47 %", 68, 12, "Menschenhandel, Drogen, Straftaten gegen das Leben"]
		},
		"blieskastel": {
			"id": "blieskastel",
			"Gemeinde": "Blieskastel",
			"Farbe": "red",
			"data": [29, 83,"47 %", 68, 12, "Handtaschenraub, Ladendiebstahl, Inverkehrbringen von Falschgeld"]
		},
		"bous": {
			"id": "bous",
			"Gemeinde": "Bous",
			"Farbe": "red",
			"data": [29, 83,"47 %", 68, 12, "Kapitalanlagebetrug, Ladendiebstahl, Inverkehrbringen von Falschgeld"]
		},
		"dillingen": {
			"id": "dillingen",
			"Gemeinde": "Dillingen",
			"Farbe": "red",
			"data": [29, 83,"47 %", 68, 12, "Handtaschenraub, Ladendiebstahl, Inverkehrbringen von Falschgeld"]
		},
		"ensdorf": {
			"id": "ensdorf",
			"Gemeinde": "Ensdorf",
			"Farbe": "red",
			"data": [29, 83,"47 %", 68, 12, "Handtaschenraub, Ladendiebstahl, Inverkehrbringen von Falschgeld"]
		},
		"eppelborn": {
			"id": "eppelborn",
			"Gemeinde": "Eppelborn",
			"Farbe": "red",
			"data": [29, 83,"47 %", 68, 12, "Handtaschenraub, Kapitalanlagebetrug, Inverkehrbringen von Falschgeld"]
		},
		"freisen": {
			"id": "freisen",
			"Gemeinde": "Freisen",
			"Farbe": "red",
			"data": [29, 83,"47 %", 68, 12, "Handtaschenraub, Ladendiebstahl, Inverkehrbringen von Falschgeld"]
		},
		"friedrichsthal": {
			"id": "friedrichsthal",
			"Gemeinde": "Friedrichsthal",
			"Farbe": "red",
			"data": [29, 83,"47 %", 68, 12, "Handtaschenraub, Ladendiebstahl, Kapitalanlagebetrug"]
		},
		"gersheim": {
			"id": "gersheim",
			"Gemeinde": "Gersheim",
			"Farbe": "red",
			"data": [29, 83,"47 %", 268, 12, "Straftaten gegen das Leben, Ladendiebstahl,...