Built with blockbuilder.org
forked from jakeNiemiec's block: bar
license: mit |
Built with blockbuilder.org
forked from jakeNiemiec's block: bar
browser | size | time | |
---|---|---|---|
Chrome PB | 103 | 388 | |
Chrome JSON | 114 | 386 | |
Firefox PB | 101 | 380 | |
Firefox JSON | 111 | 400 | |
Safari PB | 101 | 386 | |
Safari JSON | 111 | 399 |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
.y.axisRight text { | |
fill: orange; | |
} | |
.y.axisLeft text { | |
fill: steelblue; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.bar1 { | |
fill: steelblue; | |
} | |
.bar2 { | |
fill: orange; | |
} | |
.x.axis path { | |
display: none; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var margin = {top: 80, right: 80, bottom: 80, left: 80}, | |
width = 600 - margin.left - margin.right, | |
height = 400 - margin.top - margin.bottom; | |
var x = d3.scale.ordinal() | |
.rangeRoundBands([0, width], .2); | |
var y0 = d3.scale.linear().domain([90, 120]).range([height, 0]), | |
y1 = d3.scale.linear().domain([350, 410]).range([height, 0]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
// create left yAxis | |
var yAxisLeft = d3.svg.axis().scale(y0).ticks(6).orient("left"); | |
// create right yAxis | |
var yAxisRight = d3.svg.axis().scale(y1).ticks(6).orient("right"); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("class", "graph") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.tsv("data.tsv", type, function(error, data) { | |
x.domain(data.map(function(d) { return d.browser; })); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis axisLeft") | |
.attr("transform", "translate(0,0)") | |
.call(yAxisLeft) | |
.append("text") | |
.attr("y", 6) | |
.attr("dy", "-2em") | |
.style("text-anchor", "end") | |
.style("text-anchor", "end") | |
.text("Size (KB)"); | |
svg.append("g") | |
.attr("class", "y axis axisRight") | |
.attr("transform", "translate(" + (width) + ",0)") | |
.call(yAxisRight) | |
.append("text") | |
.attr("y", 6) | |
.attr("dy", "-2em") | |
.attr("dx", "2em") | |
.style("text-anchor", "end") | |
.text("Time (ms)"); | |
bars = svg.selectAll(".bar").data(data).enter(); | |
bars.append("rect") | |
.attr("class", "bar1") | |
.attr("x", function(d) { return x(d.browser); }) | |
.attr("width", x.rangeBand()/2) | |
.attr("y", function(d) { return y0(d.size); }) | |
.attr("height", function(d,i,j) { return height - y0(d.size); }); | |
bars.append("rect") | |
.attr("class", "bar2") | |
.attr("x", function(d) { return x(d.browser) + x.rangeBand()/2; }) | |
.attr("width", x.rangeBand() / 2) | |
.attr("y", function(d) { return y1(d.time); }) | |
.attr("height", function(d,i,j) { return height - y1(d.time); }); | |
}); | |
function type(d) { | |
d.size = +d.size; | |
return d; | |
} | |
</script> |