Last active
December 23, 2015 16:29
-
-
Save mkedwards/6662783 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Bar Chart</title> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.1.3"></script> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.1.3"></script> | |
<style type="text/css"> | |
.legend { font: 16px Arial;} | |
</style> | |
</head> | |
<body> | |
<div id="chart"></div> | |
<script type="text/javascript"> | |
//setup svg canvas | |
var svg = d3.select("#chart") | |
.append("svg:svg") | |
//.attr("width", "1000") | |
//.attr("height", "700") | |
.attr("width", "1000") | |
.attr("height", "700") | |
.attr("viewBox", "0 0 1100 800") | |
.attr("preserveAspectRatio", "xMinYMin meet") | |
.attr("id", "charts"); | |
//.on("click", clickypie) | |
var bgrect = svg.append("svg:rect") | |
.attr("width", "100%") | |
.attr("height", "100%") | |
.attr("stroke", "#000") | |
.attr("stroke-width", 1) | |
.attr("fill", "none"); | |
function bakebar(classname, data, stats, xp, yp, w, h) | |
{ | |
//color could be made a parameter | |
var color = d3.scale.category10() | |
var x_max = d3.max(data, function(d) | |
{ | |
return d.x | |
}) | |
console.log(x_max) | |
x = d3.scale.linear() | |
.domain([ 0, 300 ]) | |
.range([ 0, w ]) | |
var data_max = d3.max(data, function(d) | |
{ | |
return d.pop | |
}) | |
console.log(data_max) | |
y = d3.scale.linear() | |
.domain([ 0, 240 ]) | |
.range([ h, 0 ]) | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom") | |
.ticks(10); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left") | |
.ticks(10); | |
var bar = d3.select("#charts") | |
.append("svg:g") | |
.attr("class", classname); | |
var bars = bar.selectAll("g.bar") | |
.data(data) | |
.enter().append("svg:g") | |
.attr("class", "bar") | |
.attr("transform", "translate(" + xp + "," + yp + ")"); | |
console.log("BARS"); | |
var paths = bars.append("svg:rect") | |
.attr("fill", function(d, i) { return color(d.key); }) | |
.attr("fill-opacity", .6) | |
.attr("x", function(d,i) { return x(d.x * 0.001) }) | |
.attr("y", function(d,i) { return y(d.pop) }) | |
.attr("width", function(d,i) { return x(d.x * 0.001 + 0.3) - x(d.x * 0.001) }) | |
.attr("height", function(d,i) { return h - y(d.pop) }) | |
.on("mouseover", function(d, i) | |
{ | |
d3.select(this) | |
.attr("fill-opacity", 1); | |
}) | |
.on("mouseout", function(d, i) | |
{ | |
d3.select(this) | |
.attr("fill-opacity", .6); | |
}); | |
svg.append("svg:g") | |
.attr("class", "axis") | |
.attr("transform", "translate(" + xp + "," + (h + yp) + ")") | |
.call(xAxis); | |
svg.append("svg:g") | |
.attr("class", "axis") | |
.attr("transform", "translate(" + xp + "," + yp + ")") | |
.call(yAxis); | |
svg.append("text") | |
.attr("class", "x label") | |
.attr("text-anchor", "end") | |
.attr("x", w) | |
.attr("y", h + yp + yp) | |
.text("Time (s)"); | |
svg.append("text") | |
.attr("class", "y label") | |
.attr("text-anchor", "end") | |
.attr("x", -yp) | |
.attr("y", 30) | |
.attr("dy", ".75em") | |
.attr("transform", "rotate(-90)") | |
.text("Block/sleep duration (ms)"); | |
// add legend | |
var legend = svg.append("svg:g") | |
.attr("class", "legend") | |
.attr("x", w - 65) | |
.attr("y", 25) | |
.attr("height", 100) | |
.attr("width", 100); | |
legend.selectAll('g').data(color.domain()) | |
.enter() | |
.append('g') | |
.each(function(d, i) { | |
var g = d3.select(this); | |
g.append("rect") | |
.attr("x", w - 200) | |
.attr("y", i*25 + 25) | |
.attr("width", 10) | |
.attr("height", 10) | |
.style("fill", color(d)); | |
g.append("text") | |
.attr("x", w - 185) | |
.attr("y", i * 25 + 33) | |
.attr("height",30) | |
.attr("width",100) | |
.style("fill", color(d)) | |
.text("(" + stats[d][0] + ":" + stats[d][1] + ") " + d); | |
}); | |
} | |
var data = [ | |
{'key': '?? 0xbf005dcc (0x34)', 'x': 135135.934082, 'pop': 23 }, | |
{'key': '?? 0xbf005dcc (0x34)', 'x': 10884.804932, 'pop': 6 }, | |
{'key': '?? 0xbf005dcc (0x34)', 'x': 7634.225098, 'pop': 4 }, | |
{'key': 'binder_ioctl+0xd8 (0x9)', 'x': 8790.597168, 'pop': 9 }, | |
{'key': 'binder_ioctl+0xd8 (0x9)', 'x': 14540.688721, 'pop': 9 }, | |
{'key': 'binder_ioctl+0xd8 (0x9)', 'x': 169738.686768, 'pop': 2 }, | |
{'key': 'binder_ioctl+0xd8 (0x9)', 'x': 256399.117676, 'pop': 2 }, | |
{'key': 'binder_ioctl+0xd8 (0x9)', 'x': 224260.903565, 'pop': 3 }, | |
{'key': 'binder_ioctl+0xd8 (0x9)', 'x': 45462.441651, 'pop': 2 }, | |
{'key': 'binder_ioctl+0xd8 (0x9)', 'x': 152114.785401, 'pop': 2 }, | |
{'key': 'binder_thread_read+0x208 (0x9)', 'x': 192024.636475, 'pop': 5 }, | |
{'key': 'binder_thread_read+0x208 (0x9)', 'x': 10348.03125, 'pop': 4 }, | |
{'key': 'binder_thread_read+0x208 (0x9)', 'x': 35548.043457, 'pop': 3 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 169707.497804, 'pop': 39 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 123387.276856, 'pop': 18 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 201908.242432, 'pop': 6 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 169730.416506, 'pop': 5 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 12331.429689, 'pop': 3 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 14265.847412, 'pop': 3 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 221895.852295, 'pop': 3 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 2232.36963, 'pop': 2 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 14231.60669, 'pop': 2 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 34966.744629, 'pop': 2 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 179784.096924, 'pop': 2 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 189799.813477, 'pop': 7 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 244957.589357, 'pop': 7 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 90124.825684, 'pop': 6 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 221860.177246, 'pop': 6 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 102619.515625, 'pop': 2 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x409184c8)', 'x': 196939.980713, 'pop': 2 }, | |
{'key': 'futex_wait_queue_me+0xe8 (0x69c1eed0)', 'x': 38511.025635, 'pop': 19 }, | |
{'key': 'rt_mutex_timed_lock+0x1c (0x40918530)', 'x': 7251.015869, 'pop': 5 }, | |
{'key': 'rt_mutex_timed_lock+0x1c (0x40918530)', 'x': 123420.11377, 'pop': 5 }, | |
{'key': 'rt_mutex_timed_lock+0x1c (0x40918530)', 'x': 239421.548096, 'pop': 5 }, | |
{'key': 'rt_mutex_timed_lock+0x1c (0x40918530)', 'x': 206954.201904, 'pop': 3 }, | |
{'key': 'rt_mutex_timed_lock+0x1c (0x40918530)', 'x': 52875.649658, 'pop': 2 }, | |
{'key': 'rt_mutex_timed_lock+0x1c (0x40918530)', 'x': 189831.063477, 'pop': 2 }, | |
{'key': 'rt_mutex_timed_lock+0x1c (0x40918530)', 'x': 161115.090576, 'pop': 7 }, | |
{'key': 'sleep_on_page+0x10 (0x0)', 'x': 177829.903809, 'pop': 4 }, | |
{'key': 'sleep_on_page+0x10 (0x40db6290)', 'x': 71473.244873, 'pop': 2 }, | |
{'key': 'sleep_on_page+0x10 (0x6)', 'x': 189626.504151, 'pop': 3 }, | |
{'key': 'sleep_on_page+0x10 (0x61c30f80)', 'x': 111956.307617, 'pop': 5 }, | |
{'key': 'sleep_on_page+0x10 (0x61d0f6c0)', 'x': 177190.743653, 'pop': 2 }, | |
{'key': 'sleep_on_page+0x10 (0x61d15ab8)', 'x': 23791.726319, 'pop': 12 }, | |
] | |
var stats = {}; | |
data.every(function(element, index, array) { | |
if (!(element.key in stats)) { | |
stats[element.key] = [0, 0]; | |
} | |
var entry = stats[element.key]; | |
entry[0] += 1; | |
entry[1] += element.pop; | |
return true; | |
}); | |
bakebar("bar1", data, stats, 100, 50, 900, 450); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment