Skip to content

Instantly share code, notes, and snippets.

@mkedwards

mkedwards/index.html

Last active December 23, 2015 16:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mkedwards/6662783 to your computer and use it in GitHub Desktop.
Save mkedwards/6662783 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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