348957348957

var scale_y = d3.scale.linear()
.domain([0, d3.max(column_data, function (d) {
return d.quantity;
})])
.range([0, total_height]);
var scale_x = d3.scale.ordinal()
.domain(d3.range(column_data.length))
.rangeRoundBands([0, total_width], 0.05);
One of the main features of D3.js is its ability to do difficult and tedious calculations under the
hood. A key part of this work is done in scaling plots. If you want to automatically map the range
of your data to actual pixel dimensions in your graph, you can use the scale function to change
either or both parameters without having to do any manual recalculations.
From this snippet, you can see that the total height of the graph has been specified as a .range.
This means you no longer need to calculate margins or positions or how the values map to fixed
positions.
The following section from Listing 10-1 shows that the greatest quantity value in the total height
range is 25:
var column_data = [{
position: 0,
quantity: 5
}, {
position: 1,
quantity: 20
}, {
position: 2,
quantity: 15
}, {
position: 3,
quantity: 25
}, {
position: 4,
quantity: 10
}];
var total_width = 400;
var total_height = 200;
By automatically mapping the range of your data (0[nd]25) to the actual pixel height of your graph,
you can change either or both parameters without having to do any manual recalculations.
Although you can use D3.js to automatically handle the placement of axis labels and tick
marks, the library can also handle all calculations involved in date ranges. This functionality
leaves you free to concentrate on the overall look and feel of the visualization, instead of
having to tinker with its mechanics.
Getting to know transitions and interactions
The true beauty of D3.js lies in how you can use it to easily incorporate dynamic elements into
your web-based data visualization. If you want to encourage users to explore and analyze the data
in your dynamic visualization, create features that offer a lot of user interactivity. Also,
incorporating transitions into your dynamic visualization can help you capture the interest of your
audience. Transitions in D3.js build the aesthetic appeal of a data visualization by incorporating