D3 provides good support for interactions, transitions, and animations. In this example, we will focus on the basic way of adding transitions and interactions to our visualization. This time, we will use a very similar code to the bar chart example in order to demonstrate how easy it is to add interactivity to a visualization.
We need to define the font family, the size for the labels, and the style for the axis line:
<style>
body {
font: 14px arial;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
}
.bar {
fill: gray;
}
</style>
Inside the body tag, we need to refer to the library:
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
var formato = d3.format("0.0");
Now we define the X and Y axes with a width of 1200 pixels and a height of 550 pixels:
var x = d3.scale.ordinal()
.rangeRoundBands([0, 1200], .1);
var y = d3.scale.linear()
.range([550, 0]);
var xAxis = d3.svg.axis()
.scale...