Interaction and animation
D3 provides a good support for interactions, transitions, and animations. In this example, we will focus on the basic way to add transitions and interactions to our visualization. This time we will use a very similar code to that of the bar chart example, in order to demonstrate how easy it is to add interactivity in visualization.
We need to define the font family and 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 axis with a width of 1200 pixels and height 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(x)
.orient("bottom...
