JSFiddle - React, Tailwind, and code Playground

by Shestac92

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdn.anychart.com/js/latest/anymap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css">
<div id="container"></div>

CSS

html, body, #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

JavaScript

var map = anychart.map();
map.geoData(getData());

dataSet = anychart.data.set([
    {'id': 'id11', 'value': 600, 'description': 'Central park'},
    {'id': 'id22', 'value': 350, 'description': 'Pond'},
    {'id': 'id33', 'value': 100, 'description': 'Skate-park'}
]);

map.title({text: "Quarter's detailed publicity", fontSize: 25});
map.title().background({fill: "#f6f3e4", stroke: "black", corners: 10, opacity: 0.2});

var series = map.choropleth(dataSet);
series
    .labels(false)
    .colorScale(anychart.scales.linearColor('#ccecb3', '#f65f00'));

map.colorRange()
    .enabled(true)
    .orientation('right');

series.tooltip()
    .title(false)
    .separator(false)
    .background({fill: "#4f9bff", stroke: "black"})
    .fontSize(16)
    .format(function (e) {
        return "Zone: " + e.getData("description") + "\n" +
            "Publicity: " + e.getData("value") + " p/h"
    });

map.container("container").draw();

function getData() {
    return "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n" +
        "<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->\n" +
        "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\" [\n" +
        "\t<!ENTITY ns_flows \"http://ns.adobe.com/Flows/1.0/\">\n" +
        "\t<!ENTITY ns_extend \"http://ns.adobe.com/Extensibility/1.0/\">\n" +
        "\t<!ENTITY ns_ai \"http://ns.adobe.com/AdobeIllustrator/10.0/\">\n" +
        "\t<!ENTITY ns_graphs \"http://ns.adobe.com/Graphs/1.0/\">\n" +
        "]>\n" +
        "<svg version=\"1.1\" id=\"Layer_2\" xmlns:x=\"&ns_extend;\" xmlns:i=\"&ns_ai;\" xmlns:graph=\"&ns_graphs;\"\n" +
        "\t xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:a=\"http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/\"\n" +
        "\t x=\"0px\" y=\"0px\" width=\"599.33398px\" height=\"490.66748px\" viewBox=\"0 0 599.33398 490.66748\"\n" +
        "\t...