Zoomable Treemap

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Zoomable Tree Map</title>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<link href="d3-tip.css" rel="stylesheet" type="text/css">

<link href="style.css" rel="stylesheet" type="text/css">

inputData.push({key: "Education" , region: "SMS Type", subregion: "Promotional", value: 65});
    inputData.push({key: "Travel and Leisure" , region: "SMS Type", subregion: "Promotional", value: 43});
    inputData.push({key: "Finance" , region: "SMS Type", subregion: "Promotional", value: 23});

inputData.push({key: "Other" , region: "SMS Type", subregion: "Others", value: 25});
    inputData.push({key: "Personal" , region: "SMS Type", subregion: "Others", value: 100});

var dataTreeMap = d3.nest()
    .key(function(d) { return d.subregion; })
    .entries(inputData);

var defaultColorScheme = ["#E57373","#BA68C8","#7986CB","#A1887F","#90A4AE","#AED581","#9575CD","#FF8A65","#4DB6AC","#FFF176","#64B5F6","#00E676"];

renderTreemap (dataTreeMap,".chart", "SMS Count", "Total SMS",false,true, "",
	 defaultColorScheme, null,null)</script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://code.jquery.com/jquery-3.1.1.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js