JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RealMap - Line Series</title>
<style>
html {
	margin: 0px;
}
body {
	margin: 20px 30px;
}
#realmap {
	width: 950px;
	height: 650px;
    border: 1px solid lightgray;
    margin-bottom: 20px;
}
</style>
<link href="https://unpkg.com/realmap/realmap-style.css" rel="stylesheet" crossorigin="anonymous">
<link href="https://unpkg.com/realmap/realmap-export-style.css" rel="stylesheet" crossorigin="anonymous">
<style>
.green-layout {
    background-color: #00880020;
}
.red-button {
    color: red;
}
</style>



<script type="text/javascript" src="https://unpkg.com/realmap/export.js"></script>
<script type="text/javascript" src="https://unpkg.com/realmap/index.js"></script>



<script type="text/javascript">
	window.addEventListener('DOMContentLoaded', function () {
		try {
			init();
		} catch (err) {
			alert(err);
			console.error(err);
		}
	});	
</script>

  <script>
    var realMapLic = "upVcPE+wPOl3H1t2EmYDS2ZHHsIGhYOFvAiOqCN7jMScsYfjJ8xYHvcnjNP/alBGvwgv6MHcLk1itlg31ZMil9o5hU+SYjm4Y36LXWAlUU4zFfHLyfJrYkJ/CQ8eAe9knEDoO6g6qItm79yHT0KSfOj61RRag6zMyWEhOl7O9n/Hwl6Ih/mjqr3cLQlHWabvEhVyY82R38U=";
  </script>
</head>
<body>
	<div id="realmap"></div>
	<div id="actions"></div>
	

		</body></html>

JavaScript

const data = [{
  name: '서울특별시',
  value: [10103, 10022, 9930, 9857, 9766, 9729, 9668, 9509, 9428, 9386],
  coord: [127.1877, 37.67]
}, {
  name: '세종특별자치시',
  value: [156, 210, 243, 280, 314, 341, 356, 371, 383, 387],
  coord: [127.33, 36.65]
}, {
  name: '제주특별자치도',
  value: [607, 624, 641, 657, 667, 671, 675, 676, 678, 675],
  coord: [126.55186, 33.67692]
}, {
  name: '경기도',
  value: [12358, 12522, 12716, 12873, 13077, 13240, 13427, 13565, 13589, 13631],
  coord: [126.9877, 37.1]
}, {
  name: '부산광역시',
  value: [3519, 3513, 3498, 3470, 3441, 3414, 3392, 3350, 3317, 3293],
  coord: [129.4085, 35]
}, {
  name: '대구광역시',
  value: [2493, 2487, 2484, 2475, 2462, 2438, 2418, 2385, 2363, 2375],
  coord: [128.61432, 36]
}, {
  name: '인천광역시',
  value: [2903, 2925, 2943, 2948, 2955, 2957, 2943, 2948, 2967, 2997],
  coord: [125.92073, 37.57]
}, {
  name: '광주광역시',
  value: [1476, 1472, 1469, 1463, 1459, 1456, 1450, 1441, 1431, 1419],
  coord: [127.3567, 35.1]
}, {
  name: '대전광역시',
  value: [1532, 1518, 1514, 1502, 1490, 1475, 1464, 1452, 1446, 1442],
  coord: [127.33, 36.2]
}, {
  name: '울산광역시',
  value: [1166, 1173, 1172, 1165, 1156, 1148, 1136, 1121, 1110, 1104],
  coord: [129.4085, 35.55727]
}, {
  name: '강원특별자치도',
  value: [1544, 1549, 1550, 1550, 1543, 1542, 1543, 1538, 1536, 1528],
  coord: [128.54, 37.77]
}, {
  name: '충청북도',
  value: [1579, 1583, 1591, 1594, 1599, 1600, 1601, 1597, 1595, 1593],
  coord: [128.16, 37.0]
}, {
  name: '충청남도',
  value: [2062, 2077, 2096, 2116, 2126, 2124, 2121, 2119, 2123, 2130],
  coord: [126.2, 36.55]
}, {
  name: '전북특별자치도',
  value: [1872, 1869, 1864, 1854, 1837, 1819, 1804, 1786, 1769, 1755],
  coord: [127.33, 35.67053]
}, {
  name: '전라남도',
  value: [1906, 1908, 1903, 1896, 1883, 1869, 1852, 1832, 1817, 1804],
  coord: [127.3567, 34.6]
}, {
  name: '경상북도',
  value: [2701, 2702, 2700, 2691, 2677, 2666, 2639, 2626, 2600, 2554],
  coord: [128.61432, 36.5]
}, {
  name: '경상남도',
  value: [3350, 3364, 3373, 3380, 3374, 3363, 3340, 3314, 3280,...