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...

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 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,"#F2F2F2","Gemeinde"],"sulzbach":["Sulzbach","66,33","-9,15",1074,179,162,174,196,52,"#E2EFDA","Stadt"],"kleinblittersdorf":["Kleinblittersdorf","66,32","-9,16",742,102,146,144,167,11,"#E2EFDA","Gemeinde"],"friedrichsthal":["Friedrichsthal","61,38","-15,93",629,117,82,115,147,18,"#E2EFDA","Stadt"],"stingbert":["St....