block by emeeks a6c8fcd0c799860c0365

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

Full Screen

This is the code for Chapter 5, Figure 2 from D3.js in Action showing how to use d3.layout.histogram().

index.html

<html>
<head>
  <title>D3 in Action Chapter 5 - Example 1</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;
  }
  
  rect {
    fill: lightgray;
    stroke: black;
    stroke-width: 1px;
  }
  
  line {
  shape-rendering: crispEdges;
  stroke: #000000;
  }

  line.minor  {
    stroke: #777777;
    stroke-dasharray: 2,2;
  }

  path.domain {
    fill: none;
    stroke: black;
  }


</style>
<body>

<div id="viz">
  <svg>
  </svg>
</div>
</body>
  <footer>
    
<script>

    d3.json("tweets.json",function(error,data) {histogram(data.tweets)});
    
    function histogram(tweetsData) {

    xScale = d3.scale.linear().domain([0,5]).range([0,500])
    var yScale = d3.scale.linear()
    .domain([0, 10])
    .range([400, 0]);
    
    var xAxis = d3.svg.axis()
    .scale(xScale)
    .ticks(5)
    .orient("bottom");

      var histoChart = d3.layout.histogram();
      
      histoChart.bins([0, 1, 2, 3, 4, 5])
      .value(function(d) {return d.favorites.length});
      
      histoData = histoChart(tweetsData);

    d3.select("svg").selectAll("rect")
    .data(histoData)
    .enter()
    .append("rect")
    .attr("x", function(d) {return xScale(d.x)})
    .attr("y", function(d) {return yScale(d.y)})
    .attr("width", xScale(histoData[0].dx) - 2)
    .attr("height", function(d) { return 400 - yScale(d.y); })
    .on("click", retweets)

    d3.select("svg").append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0,400)")
    .call(xAxis);
    
    d3.select("g.axis").selectAll("text").attr("dx", 50)
    function retweets() {
            histoChart.value(function(d) {return d.retweets.length});
            
            histoData = histoChart(tweetsData);
            
            d3.selectAll("rect").data(histoData)
            .transition().duration(500)
            .attr("x", function(d) {return xScale(d.x)})
            .attr("y", function(d) {return yScale(d.y)})
            .attr("height", function(d) { return 400 - yScale(d.y); });
    }

    }
</script>
  </footer>

</html>

tweets.json

{
"tweets": [
{"user": "Al", "content": "I really love seafood.", "timestamp": " Mon Dec 23 2013 21:30 GMT-0800 (PST)", "retweets": ["Raj","Pris","Roy"], "favorites": ["Sam"]},
{"user": "Al", "content": "I take that back, this doesn't taste so good.", "timestamp": "Mon Dec 23 2013 21:55 GMT-0800 (PST)", "retweets": ["Roy"], "favorites": []},
{"user": "Al", "content": "From now on, I'm only eating cheese sandwiches.", "timestamp": "Mon Dec 23 2013 22:22 GMT-0800 (PST)", "retweets": [], "favorites": ["Roy","Sam"]},
{"user": "Roy", "content": "Great workout!", "timestamp": " Mon Dec 23 2013 7:20 GMT-0800 (PST)", "retweets": [], "favorites": []},
{"user": "Roy", "content": "Spectacular oatmeal!", "timestamp": " Mon Dec 23 2013 7:23 GMT-0800 (PST)", "retweets": [], "favorites": []},
{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47  GMT-0800 (PST)", "retweets": [], "favorites": []},
{"user": "Roy", "content": "Just got a ticket for texting and driving!", "timestamp": " Mon Dec 23 2013 8:05 GMT-0800 (PST)", "retweets": [], "favorites": ["Sam", "Sally", "Pris"]},
{"user": "Pris", "content": "Going to have some boiled eggs.", "timestamp": " Mon Dec 23 2013 18:23 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},
{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47  GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},
{"user": "Sam", "content": "@Roy Let's get lunch", "timestamp": " Mon Dec 23 2013 11:05 GMT-0800 (PST)", "retweets": ["Pris"], "favorites": ["Sally", "Pris"]}
]
}