JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<div class="infokarte_wrapper" id="infokarte__1" style="width:100%;position:relative;">

  <div class="infokarte_fakten">
    <h2>
                             Kriminalität im Saarland im Vergleich zum Bundesschnitt
                            </h2><span>
                              Bitte klicken Sie auf eine Stadt oder Gemeinde in der Karte.
                            </span></div>
  <svg class="eigen_infokarte" enable-background="new -4142.112 -3183.343 7937.649 6690.734" class="infokarte_svg3588" data-gebiet="svg3588" overflow="visible" style="overflow:visible" viewBox="-4142.112 -3183.343 1215.1268 1023.9745" xml:space="preserve"
  xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg">
    <g class="infokarte_Gebiete" data-gebiet="Gebiete" transform="matrix(0.15599916,0,0,0.15599916,-3511.5703,-2695.8061)">


      <path d="m -853.356,1281.051 32.259,-60.49 28.237,-141.17 68.539,-12.082 20.157,-80.666 -68.539,-12.096 -8.068,-88.746 32.259,-116.965 116.978,4.039 12.089,-72.66 193.598,0 80.666,193.629 60.062,-4.973 113.366,-95.869 20.163,104.869 -40.327,88.77 48.407,76.59 -76.65,141.145 -72.599,-8.031 -24.19,125.033 -463.821,4.027 -72.586,-44.354 z"
      class="infokarte_schwalbach" data-gebiet="schwalbach" stroke-linecap="round" stroke-linejoin="round">
        <title>Schwalbach</title>
      </path>

      <path d="m -216.083,530.865 76.601,120.992 -32.271,141.168 -32.259,32.271 -81.107,63.637 -60.062,4.984 -80.666,-193.629 -193.598,0 -161.338,-16.111 -125.058,-84.705 -12.089,-84.682 -93.857,-146.178 88.999,-101.729 190.708,-84.75 127.135,67.815 135.612,4.241 101.711,-114.423 63.586,-67.834 87.815,137.727 259.72,2.152 80.501,-33.905 33.921,76.285 -99.733,143.623 z"
      class="infokarte_saarwellingen" data-gebiet="saarwellingen" stroke-linecap="round" stroke-linejoin="round">
       ...

CSS

/*.infokarte_wrapper { background-image:linear-gradient(to right, #034694 0%, #023168 100%); }*/
 
 .infokarte_wrapper {
   background: #f1f1f1;
   padding: 10px;
 }
 
 .eigen_infokarte {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
 .eigen_infokarte .infokarte_Gebiete > path {
   cursor: pointer;
   fill: lightblue;
   stroke: #202020;
   stroke-width: 20;
   opacity: 0.8;
 }
 
 .eigen_infokarte .infokarte_Gebiete > path:hover {
   opacity: 1;
 }
 
 .eigen_infokarte .infokarte_Gebiete > path.aktiv {
   stroke-width: 70;
   opacity: 1;
 }
 
 .infokarte_fakten {}
 
 .eigen__legende .eigen__legende__farbskala {
   margin-top: 20px;
 }
 
 .eigen__legende__farbskala .eigen__abschnitt {
   position: relative;
   width: 20px;
   height: 14px;
   display: inline-block;
 }
 
 .eigen__legende__farbskala .eigen__abschnitt .eigen__grenze {
   opacity: 0;
 }
 
 .eigen__legende__farbskala .eigen__abschnitt:nth-child(2n) .eigen__grenze {
   display: inline-block;
   font-size: 9pt;
   opacity: 1;
   position: relative;
   top: -16px;
   width: 20px;
   text-align: center;
 }

JavaScript

var wrapperDomId = "infokarte__1";
var wrapper = document.getElementById(wrapperDomId);
var quelle = {
  "legende": {
    "title": "Kriminalität im Saarland im Vergleich zum Bundesschnitt (prozentuale Abweichung)",
    "farbskala": [
      [-60, "#375623"],
      [-47, "#548235"],
      [-32, "#A9D08E"],
      [-17, "#C6E0B4"],
      [-7, "#E2EFDA"],
      [0, "#F2F2F2"],
      [9, "#FFC3C3"],
      [24, "#FFA5A5"],
      [39, "#FF6969"],
      [56, "#FF0000"],
      [72, "#C00000"]
    ]
  },
  "quelle": "Polizei",
  "labels": ["_Kommune", "Häufigkeit", "Abweichung vom Bundesschnitt", "Straftaten 2015", "Roheitsdelikte und Straftaten gegen die persönliche Freiheit", "Diebstahl ohne erschwerende Umstände", "Diebstahl unter erschwerenden Umständen", "Vermögens- und Fälschungsdelikte", "Rauschgiftdelikte", "_Farbe", "_Art"],
  "suffix": ["", " pro 1000 Einwohner", " %", "", "", "", "", "", "", "", ""],
  "daten": {
    "saarbruecken": ["Saarbrücken", "125,62", "72,06", 24591, 3433, 6096, 3498, 3759, 698, "#C00000", "Stadt"],
    "saarlouis": ["Saarlouis", "113,44", "55,38", 3903, 637, 940, 436, 852, 172, "#FF0000", "Stadt"],
    "neunkirchen": ["Neunkirchen", "96,48", "32,15", 4420, 677, 1198, 589, 797, 149, "#FF6969", "Stadt"],
    "dillingen": ["Dillingen", "96,11", "31,64", 1949, 296, 393, 223, 348, 97, "#FF6969", "Stadt"],
    "voelklingen": ["Völklingen", "88,17", "20,76", 3418, 533, 804, 390, 669, 136, "#FFA5A5", "Stadt"],
    "lebach": ["Lebach", "77,31", "5,89", 7096, 210, 399, 216, 246, 63, "#FFC3C3", "Stadt"],
    "homburg": ["Homburg", "74,81", "2,47", 3147, 425, 793, 450, 548, 73, "#FFC3C3", "Stadt"],
    "bous": ["Bous", "73,43", "0,58", 515, 92, 133, 73, 94, 12, "#F2F2F2", "Gemeinde"],
    "merzig": ["Merzig", "71,62", "-1,90", 2136, 357, 453, 265, 419, 72, "#F2F2F2", "Stadt"],
    "weiskirchen": ["Weiskirchen", "70,62", "-3,27", 450, 76, 72, 71, 99, 22, "#F2F2F2", "Gemeinde"],
    "ensdorf": ["Ensdorf", "68,10", "-6,73", 440, 55, 108, 55, 107, 9,...