1 <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/spiermar/d3-flame-graph@1.0.4/dist/d3.flameGraph.min.css">
7 </head>
8
9 <body onresize="resizeFlameGraph()">
10 <div id="chart"></div>
11 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
12 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
13 <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/spiermar/d3-flame-graph@1.0.4/dist/d3.flameGraph.min.js"></script>
14 <script type="text/javascript">
15
16 var flameGraph;
17 var currentJson;
18
19 function processGraph(jsonObj) {
20 flameGraph = d3.flameGraph()
21 .width(windowSize() * 0.9)
22 .transitionDuration(750)
23 .transitionEase(d3.easeCubic)
24 .sort(true)
25 .title("");
26 currentJson = jsonObj;
27 d3.select("#chart")
28 .datum(jsonObj)
29 .call(flameGraph);
30 }
31
32 function windowSize() {
33 return Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
34 }
35
36 function resizeFlameGraph() {
37 if (flameGraph) {
38 flameGraph.width(windowSize() * 0.9);
39 d3.select("#chart")
40 .datum(currentJson)
41 .call(flameGraph);
42 }
43 }
44
45 </script>
46 </body>
47
48 </html>