Database Reference
In-Depth Information
president age array, applying a function to each value that increases (in this case,
returning the width of the bar pertaining to the age of the president).
Listing 7.5
D3.js: Creating a simple bar chart with D3.js
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
// Let's add some data to our example!
// This array is a list of the ages, at
// inaguration, from Ford to Obama.
var usaPresidentAges = [57, 61, 57, 57, 58, 57, 61,
54, 68, 51, 49, 64, 50, 48,
65, 52, 56, 46, 54, 49, 50,
47, 55, 55, 54, 42, 51, 56,
55, 51, 54, 51, 60, 62, 43,
55, 56, 61, 52, 69, 64, 46,
54, 47];
// Set the total height of the bar chart
//
var height = 15 * usaPresidentAges.length;
var width = 600;
// Create a new SVG object, and append it
// to the <body> element of the page.
var svgObject = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// Create
var x = d3.scale.linear()
.domain([0, d3.max(usaPresidentAges)])
.range([0, 420]);
//
svgObject.selectAll("rect")
.data(usaPresidentAges)
.enter().append("rect")
.attr("y", function(d, i) { return i * 20; })
.attr("width", x)
.attr("height", 20)
Search WWH ::
Custom Search