Congratulations, you've gathered all the knowledge to build your first bar chart; and this is exactly what we will do in this section. In the following figure, we will create a bar chart that has axis, scales, bars, and labels.
A simple bar chart
Let's start with a simple setup—a blank HTML page that loads the D3 library from the bower components directory. In addition, we define the crispEdges rendering for path elements in the header:
<!doctype HTML>
<html>
<head>
<title>Bar Chart</title>
<script src="bower_components/d3/d3.min.js"></script>
<style>
.axis path, .axis line {
fill: none;
stroke: #999;
shape-rendering: crispEdges;
}
.data rect {
stroke: red;
fill: rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<script>
// Our code goes here
</script>
</body>
</html>