Skip to content

Instantly share code, notes, and snippets.

@enjalot
Created September 15, 2011 04:47
  • Star 5 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save enjalot/1218567 to your computer and use it in GitHub Desktop.
[d3cast] Simple Bar Chart example with d3.js
<!-- Annotated javascript available at http://enja.org/code/tuts/d3/bar -->
<!-- Code walkthrough screencast available at -->
<html>
<head>
<title>Enjalot's Bar</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.geom.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">
.bar rect
{
/*
fill: black;
stroke: black;
*/
}
.label
{
font-family: Verdana;
font-size: 15pt;
color: gray;
fill-opacity: .6;
}
.value
{
font-family: Verdana;
font-size: 11pt;
color: gray;
fill-opacity: .6;
}
.tick_label
{
font-size: 15pt;
font-family: Verdana;
color: gray;
fill-opacity: .6;
}
</style>
</head>
<body>
<script type="text/javascript">
var data = [{"label":"1990", "value":16},
{"label":"1991", "value":56},
{"label":"1992", "value":7},
{"label":"1993", "value":77},
{"label":"1994", "value":22},
{"label":"1995", "value":16},
];
//maximum of data you want to use
var data_max = 80,
//number of tickmarks to use
num_ticks = 5,
//margins
left_margin = 60,
right_margin = 60,
top_margin = 30,
bottom_margin = 0;
var w = 500, //width
h = 500, //height
color = function(id) { return '#00b3dc' };
var x = d3.scale.linear()
.domain([0, data_max])
.range([0, w - ( left_margin + right_margin ) ]),
y = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeBands([bottom_margin, h - top_margin], .5);
var chart_top = h - y.rangeBand()/2 - top_margin;
var chart_bottom = bottom_margin + y.rangeBand()/2;
var chart_left = left_margin;
var chart_right = w - right_margin;
/*
* Setup the SVG element and position it
*/
var vis = d3.select("body")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("id", "barchart")
.attr("class", "barchart")
//Ticks
var rules = vis.selectAll("g.rule")
.data(x.ticks(num_ticks))
.enter()
.append("svg:g")
.attr("transform", function(d)
{
return "translate(" + (chart_left + x(d)) + ")";});
rules.append("svg:line")
.attr("class", "tick")
.attr("y1", chart_top)
.attr("y2", chart_top + 4)
.attr("stroke", "black");
rules.append("svg:text")
.attr("class", "tick_label")
.attr("text-anchor", "middle")
.attr("y", chart_top)
.text(function(d)
{
return d;
});
var bbox = vis.selectAll(".tick_label").node().getBBox();
vis.selectAll(".tick_label")
.attr("transform", function(d)
{
return "translate(0," + (bbox.height) + ")";
});
var bars = vis.selectAll("g.bar")
.data(data)
.enter()
.append("svg:g")
.attr("class", "bar")
.attr("transform", function(d, i) {
return "translate(0, " + y(i) + ")"; });
bars.append("svg:rect")
.attr("x", right_margin)
.attr("width", function(d) {
return (x(d.value));
})
.attr("height", y.rangeBand())
.attr("fill", color(0))
.attr("stroke", color(0));
//Labels
var labels = vis.selectAll("g.bar")
.append("svg:text")
.attr("class", "label")
.attr("x", 0)
.attr("text-anchor", "right")
.text(function(d) {
return d.label;
});
var bbox = labels.node().getBBox();
vis.selectAll(".label")
.attr("transform", function(d) {
return "translate(0, " + (y.rangeBand()/2 + bbox.height/4) + ")";
});
labels = vis.selectAll("g.bar")
.append("svg:text")
.attr("class", "value")
.attr("x", function(d)
{
return x(d.value) + right_margin + 10;
})
.attr("text-anchor", "left")
.text(function(d)
{
return "" + d.value + "%";
});
bbox = labels.node().getBBox();
vis.selectAll(".value")
.attr("transform", function(d)
{
return "translate(0, " + (y.rangeBand()/2 + bbox.height/4) + ")";
});
//Axes
vis.append("svg:line")
.attr("class", "axes")
.attr("x1", chart_left)
.attr("x2", chart_left)
.attr("y1", chart_bottom)
.attr("y2", chart_top)
.attr("stroke", "black");
vis.append("svg:line")
.attr("class", "axes")
.attr("x1", chart_left)
.attr("x2", chart_right)
.attr("y1", chart_top)
.attr("y2", chart_top)
.attr("stroke", "black");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment