Ch. 2, Fig. 22 - D3.js in Action

This is the code for Chapter 2, Figure 22 from D3.js in Action that nests data using d3.nest() and then represents the nested data as a bar chart by first computing the length of the nested data arrays and using that length to size the bars by.

<html>
<head>
  <title>D3 in Action Chapter 2 - Example 10</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
</style>
<body>

<div>
  <svg>
  </svg>
</div>
</body>
  <footer>
    
<script>
d3.json("tweets.json",function(error,data) {dataViz(data.tweets)});
function dataViz(incomingData) {

var nestedTweets = d3.nest()
.key(function (el) {return el.user})
.entries(incomingData);

nestedTweets.forEach(function (el) {
el.numTweets = el.values.length
})

var maxTweets = d3.max(nestedTweets, function(el) {return el.numTweets});

var yScale = d3.scale.linear().domain([0,maxTweets]).range([0,100]);

d3.select("svg")
.selectAll("rect")
.data(nestedTweets)
.enter()
.append("rect")
.attr("width", 50)
.attr("height", function(d) {return yScale(d.numTweets)})
.attr("x", function(d,i) {return i * 60})
.attr("y", function(d) {return 100 - yScale(d.numTweets)})
.style("fill", "blue")
.style("stroke", "red")
.style("stroke-width", "1px").style("opacity", .25)
}

</script>
  </footer>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js