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>Treemap</title>
<style>
html {
	margin: 0px;
}
body {
	margin: 20px 30px;
}
#realchart {
	width: 850px;
	height: 550px;
    border: 1px solid lightgray;
    margin-bottom: 20px;
}
</style>
<link href="https://unpkg.com/realchart/realchart-style.css" rel="stylesheet" crossorigin="anonymous">
<script type="text/javascript" src="https://unpkg.com/realchart/index"></script>

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

  <script>
    var realChartLic = 'upVcPE+wPOkOR/egW8JuxkM/nBOseBrflwxYpzGZyYkhw7qfHRQ+GiF0lY62mJi5KBwoSJHOA48O5+/xJSE3LhLB4LkQ8rWX0QeIbtyyIEGTFVqWmNPdyQ==';
  </script>
</head>
<body>
	<div id="realchart"></div>
	<script type="text/javascript" src="https://unpkg.com/realchart/treemap.js"></script>

		 </body></html>

JavaScript

const data = [{
  id: 'a01',
  name: '공공행정',
  color: '#33A382',
  value: 0
}, {
  id: 'a02',
  name: '문화관광',
  color: '#D96BB5',
  value: 0
}, {
  id: 'a03',
  name: '산업고용',
  color: '#F16C48',
  value: 0
}, {
  id: 'a04',
  name: '교통물류',
  color: '#7573EC',
  value: 0
}, {
  id: 'a05',
  name: '환경기상',
  color: '#306ec0',
  value: 0
}, {
  id: 'a06',
  name: '국토관리',
  color: '#CF4926',
  value: 0
}, {
  id: 'a07',
  name: '농축수산',
  color: '#399EBF',
  value: 0
}, {
  id: 'a08',
  name: '재정금융',
  color: '#714ad3',
  value: 0
}, {
  id: 'a09',
  name: '사회복지',
  color: '#c05459',
  value: 0
}, {
  id: 'a10',
  name: '보건의료',
  color: '#4ca952',
  value: 0
}, {
  id: 'a11',
  name: '재난안전',
  color: '#919191',
  value: 0
}, {
  id: 'a12',
  name: '교육',
  color: '#919191',
  value: 0
}, {
  id: 'a13',
  name: '식품건강',
  color: '#919191',
  value: 0
}, {
  id: 'a14',
  name: '과학기술',
  color: '#919191',
  value: 0
}, {
  name: '일반행정',
  value: 7781,
  group: 'a01'
}, {
  name: '국가통계',
  value: 985,
  group: 'a01'
}, {
  name: '재정지원',
  value: 754,
  group: 'a01'
}, {
  name: '정부자원관리',
  value: 369,
  group: 'a01'
}, {
  name: '국정홍보',
  value: 140,
  group: 'a01'
}, {
  name: '인권',
  value: 53,
  group: 'a01'
}, {
  name: '공정거래',
  value: 68,
  group: 'a01'
}, {
  name: '정부조달',
  value: 28,
  group: 'a01'
}, {
  name: '법제',
  value: 106,
  group: 'a01'
}, {
  name: '국정운영',
  value: 78,
  group: 'a01'
}, {
  name: '관광',
  value: 2955,
  group: 'a02'
}, {
  name: '문화예술',
  value: 2307,
  group: 'a02'
}, {
  name: '문화재',
  value: 1927,
  group: 'a02'
}, {
  name: '문화체육관광일반',
  value: 1770,
  group: 'a02'
}, {
  name: '체육',
  value: 788,
  group: 'a02'
}, {
  name: '산업-중소기업 일반',
  value: 3074,
  group: 'a03'
}, {
  name: '에너지및자원개발',
  value: 2589,
  group: 'a03'
}, {
  name: '고용노동',
  value: 867,
  group: 'a03'
}, {
  name: '산업진흥-고도화',
  value: 263,
  group: 'a03'
}, {
  name: '통상',
  value: 94,
  group: 'a03'
}, {
  name: '산업기술지원',
  value: 258,
  group: 'a03'
}, {
  name:...