Skip to content

Instantly share code, notes, and snippets.

@indiv0

indiv0/index.html

Forked from spiermar/index.html
Last active October 3, 2019 18:50
Show Gist options
  • Save indiv0/0bbfc4fb146527e0aa18950b4debfbe0 to your computer and use it in GitHub Desktop.
Save indiv0/0bbfc4fb146527e0aa18950b4debfbe0 to your computer and use it in GitHub Desktop.
Download ZIP
d3-flame-graph
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/gh/spiermar/d3-flame-graph@1.0.4/dist/d3.flameGraph.min.css"
integrity="sha256-w762vSe6WGrkVZ7gEOpnn2Y+FSmAGlX77jYj7nhuCyY="
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<div id="chart">
</div>
</div>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"
integrity="sha256-r7j1FXNTvPzHR41+V71Jvej6fIq4v4Kzu5ee7J/RitM="
crossorigin="anonymous">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"
integrity="sha256-z0A2CQF8xxCKuOJsn4sJ5HBjxiHHRAfTX8hDF4RSN5s="
crossorigin="anonymous">
</script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/gh/spiermar/d3-flame-graph@1.0.4/dist/d3.flameGraph.min.js"
integrity="sha256-I1CkrWbmjv+GWjgbulJ4i0vbzdrDGfxqdye2qNlhG3Q="
crossorigin="anonymous">
</script>
<script type="text/javascript">
var flameGraph = d3.flameGraph()
.width(960)
.cellHeight(18)
.transitionDuration(750)
.transitionEase(d3.easeCubic)
.sort(false)
//Example to sort in reverse order
//.sort(function(a,b){ return d3.descending(a.data.name, b.data.name);})
.title("");
// Example on how to use custom tooltips using d3-tip.
var tip = d3.tip()
.direction("s")
.offset([8, 0])
.attr('class', 'd3-flame-graph-tip')
.html(function(d) { return "name: " + d.data.name + ", value: " + d.data.value; });
flameGraph.tooltip(tip);
// Example on how to use custom labels
// var label = function(d) {
// return "name: " + d.data.name + ", value: " + d.data.value;
// }
// flameGraph.label(label);
d3.json("stacks.json", function(error, data) {
if (error) return console.warn(error);
d3.select("#chart")
.datum(data)
.call(flameGraph);
});
</script>
</body>
</html>
Raw
stacks.json
{
"children": [
{
"name": "COM.UserController.createUser (KeyCloak + COM)",
"value": 694
},
{
"name": "Workflow start delay",
"value": 2529
},
{
"children": [
{
"children": [
{
"name": "Poll delay",
"value": 846
},
{
"children": [
{
"name": "COM.Worker.create_som_user_entity",
"value": 1467
},
{
"children": [
{
"children": [
{
"name": "SOM.A2SubscriberTasklet.doTask",
"value": 1684
},
{
"name": "SOM.SpidrSubscriberTasklet.doTask",
"value": 900
},
{
"name": "SOM.CIMSubscriberTasklet.doTask",
"value": 2423
}
],
"name": "SOM.SubscriberServiceImpl.createSubscriber",
"value": 6176
}
],
"name": "SOM.SubscriberController.createSubscriberOnSite",
"value": 6440
}
],
"name": "Execute",
"value": 8386
}
],
"name": "Conductor.Task.create_som_user_entity",
"value": 9232
},
{
"children": [
{
"name": "Poll delay",
"value": 444
},
{
"name": "Execute",
"value": 5114
}
],
"name": "Conductor.Task.create_billing_account_user",
"value": 5558
},
{
"children": [
{
"name": "Poll delay",
"value": 2074
},
{
"name": "Execute",
"value": 46
}
],
"name": "Conductor.Task.update_com_user_status",
"value": 2120
},
{
"children": [
{
"name": "Poll delay",
"value": 125
},
{
"name": "Execute",
"value": 80
}
],
"name": "Conductor.Task.publish_provisioning_complete_message",
"value": 205
},
{
"name": "Other tasks & overhead",
"value": 985
}
],
"name": "Conductor.Workflow.create_user_entity",
"value": 18100
}
],
"name": "createUser",
"value": 21323
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment