Reddit Bar Chart

_.md

[ Launch: Reddit Bar Chart ] 12c16941e5db0ddb6fce by kkirsche

config.json

{"description":"Reddit Bar Chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/SU2iPr0.png"}

inlet.js

var url = "http://www.reddit.com/r/destinythegame.json"

d3.xhr(url, 'application/javascript', function(error, json) {
  if (error) return console.warn(error);
  redditData = JSON.parse(json.response);
  data = redditData.data.children
    .sort(function(smallest, biggest) {
      return smallest.data.score - biggest.data.score;
    });
  // Convert time in seconds to milliseconds
  data.forEach(function(d) {
    d.data.created *= 1000;
  });
  
  var margin = {top: 20, right: 30, bottom: 30, left: 60};
  var height = 470 - margin.top - margin.bottom,
      width = 686 - margin.left - margin.right;

  var maxScore = d3.max(data, function(d) { return d.data.score; });
  var timeExtent = d3.extent(data, function(d) {
     return new Date(d.data.created);
  });

  // Scales
  var xScale = d3.scale.ordinal()
    .domain(d3.range(data.length))
    .rangeBands([0, width], 0.25);
  
  var xScaleBrush = d3.time.scale()
    .domain(timeExtent)
     .range([0, width]);
  
  var yScale = d3.scale.linear()
    .domain([0, maxScore])
    .range([0, height]); // .range(starting value, ending value)

  var yScaleLine = d3.scale.linear()
    .domain([0, maxScore])
    .range([height, 0]);

  var yAxis = d3.svg.axis()
    .scale(yScaleLine)
    .orient('left')
    .ticks(5);
  
  var colorScale = d3.scale.linear()
  .domain(d3.extent(data, function(d) { return d.data.score }))
  .range(["#DA4453", "#A0D468"]);

  //Components
  var line = d3.svg.area()
    .x(function(d, i) { return xScale(i); })
    .y(function(d, i) { return yScaleLine(d.data.score); });
  
  var brush = d3.svg.brush()
    .x(xScaleBrush)
     .extent([0, maxScore / 10])

  chart = d3.select('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
  
  g = chart.append('g').attr('transform', 'translate(67, 21)');

  axis = chart.append('g')
  .call(yAxis)
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  bars = g.selectAll('rect')
    .data(data)
    .enter().append('rect')
    .attr({
      x: function(d, i) { return xScale(i); },
      y: function(d, i ) { return height; },
      height: 0,
      width: xScale.rangeBand(),
      fill: function(d) { return colorScale(d.data.score) }
    })
    .on("mouseenter", function() {
      d3.select(this).attr('fill', '#FFF').attr('stroke', '#000');
    })
    .on("mouseleave", function() {
      d3.select(this).attr('fill', function(d) { return colorScale(d.data.score) })
		.attr('stroke', '');
    })
    .transition().delay(50).duration(1000)
    .attr({
      x: function(d, i) { return xScale(i); },
      y: function(d, i ) { return height - yScale(d.data.score); },
      height: function(d) { return yScale(d.data.score); },
      width: xScale.rangeBand()
    });

  g.append("path")
    .attr("d", line(data))
    .style({
      fill: "none",
      stroke: "#000"
    });
  
  var brushGraphic = chart.append("g")
    .call(brush);
  
  brushGraphic.attr("transform", "translate("+margin.left+","+(height + margin.top + 10)+")")
      .selectAll("rect").attr('height', 30);
    brushGraphic.selectAll('.background').style({fill: '#4B9E9E', visibility: 'visible'});
    brushGraphic.selectAll('.extent').style({fill: '#78C5C5', visibility: 'visible'});
    brushGraphic.selectAll('.resize rect').style({fill: '#276C86', visibility: 'visible'});
    

    var rect = brushGraphic.selectAll('rect.event')
    .data(data);

    // Let's display rectangles that show when in time each event
    // or post occurred.
    rect.enter().append('rect').classed('event', true);
    rect.attr({
      x: function(d) { return xScaleBrush(d.data.created); },
      y:0,
      width: 1,
      height: 40
    }).style({"pointer-events": "none"});

  brush.on("brush", function() {
    brushGraphic.selectAll('rect.event')
    .style({
      stroke: ""
    });
  }).on("brushend", function() {
    var currentExtent = brush.extent();
    var filtered = data.filter(function(d) {
      return (d.data.created > currentExtent[0] && d.data.created < currentExtent[1]);
    });

    brushGraphic.selectAll('rect.event')
    .data(filtered, function(d) {
      return d.data.id;
    })
    .style({
      stroke: function(d) { return colorScale(d.data.score); }
    });
  });

});