2010-09-28 22:34:52 +04:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Bar Chart</title>
|
|
|
|
|
<script type="text/javascript" src="../../d3.js"></script>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
font: 10px sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
svg {
|
|
|
|
|
shape-rendering: crispEdges;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
var data = range(10).map(function(i) {
|
|
|
|
|
return {index: i, value: Math.random()};
|
|
|
|
|
});
|
|
|
|
|
|
2010-10-20 22:07:42 +04:00
|
|
|
var x = d3.linear()
|
|
|
|
|
.domain([0, 1])
|
|
|
|
|
.range([0, 430]);
|
|
|
|
|
|
2010-09-28 22:34:52 +04:00
|
|
|
var vis = d3.select("body")
|
2010-10-02 22:00:31 +04:00
|
|
|
.append("svg:svg")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("width", 450)
|
|
|
|
|
.attr("height", 275)
|
2010-10-02 22:00:31 +04:00
|
|
|
.append("svg:g")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("transform", "translate(20,0)");
|
|
|
|
|
|
|
|
|
|
var bars = vis.selectAll("g.bar")
|
|
|
|
|
.data(data)
|
2010-10-02 22:00:31 +04:00
|
|
|
.enter.append("svg:g")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("class", "bar")
|
|
|
|
|
.attr("transform", function(d) { return "translate(0," + d.index * 23 + ")"; });
|
|
|
|
|
|
2010-10-02 22:00:31 +04:00
|
|
|
bars.append("svg:rect")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("fill", "steelblue")
|
2010-10-20 22:07:42 +04:00
|
|
|
.attr("width", function(d) { return x(d.value); })
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("height", 20);
|
|
|
|
|
|
2010-10-02 22:00:31 +04:00
|
|
|
bars.append("svg:text")
|
2010-10-20 22:07:42 +04:00
|
|
|
.attr("x", function(d) { return x(d.value); })
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("y", 10)
|
|
|
|
|
.attr("dx", -6)
|
|
|
|
|
.attr("dy", ".35em")
|
|
|
|
|
.attr("fill", "white")
|
|
|
|
|
.attr("text-anchor", "end")
|
|
|
|
|
.text(function(d) { return d.value.toFixed(2); });
|
|
|
|
|
|
2010-10-02 22:00:31 +04:00
|
|
|
bars.append("svg:text")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("x", 0)
|
|
|
|
|
.attr("y", 10)
|
|
|
|
|
.attr("dx", -6)
|
|
|
|
|
.attr("dy", ".35em")
|
|
|
|
|
.attr("text-anchor", "end")
|
|
|
|
|
.text(function(d) { return String.fromCharCode(65 + d.index); });
|
|
|
|
|
|
|
|
|
|
var rules = vis.selectAll("g.rule")
|
|
|
|
|
.data(range(10))
|
2010-10-02 22:00:31 +04:00
|
|
|
.enter.append("svg:g")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("class", "rule")
|
2010-10-20 22:07:42 +04:00
|
|
|
.attr("transform", function(d) { return "translate(" + x(d / 10) + ",0)"; });
|
2010-09-28 22:34:52 +04:00
|
|
|
|
2010-10-02 22:00:31 +04:00
|
|
|
rules.append("svg:line")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("y1", 230)
|
|
|
|
|
.attr("y2", 236)
|
|
|
|
|
.attr("stroke", "black");
|
|
|
|
|
|
2010-10-02 22:00:31 +04:00
|
|
|
rules.append("svg:line")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("y1", 0)
|
|
|
|
|
.attr("y2", 230)
|
|
|
|
|
.attr("stroke", "white")
|
|
|
|
|
.attr("stroke-opacity", .3);
|
|
|
|
|
|
2010-10-02 22:00:31 +04:00
|
|
|
rules.append("svg:text")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("y", 239)
|
|
|
|
|
.attr("dy", ".71em")
|
|
|
|
|
.attr("text-anchor", "middle")
|
|
|
|
|
.text(function(d) { return (d / 10).toFixed(1); });
|
|
|
|
|
|
2010-10-02 22:00:31 +04:00
|
|
|
vis.append("svg:line")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("y1", 0)
|
|
|
|
|
.attr("y2", 230)
|
|
|
|
|
.attr("stroke", "black");
|
|
|
|
|
|
|
|
|
|
vis.apply();
|
|
|
|
|
|
|
|
|
|
function range(n) {
|
|
|
|
|
var array = [];
|
|
|
|
|
for (var i = 0; i < n; i++) array.push(i);
|
|
|
|
|
return array;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
