judgey

_.md

[ Launch: judgey ] dc18fb818d03e0955935 by sherb

config.json

{"description":"judgey","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"judges.csv":{"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/AXWbnHE.png"}

inlet.js

var data = tributary.judges.map(function(d) {
  return {
    name: d.name,
    cites: +d.cites,
    district: d.district
  };
});

var districtData = d3.nest()
.key(function(d) { return d.district; })
.entries(data);

districtData.forEach(function(d) {
  var cumSum = 0;
  d.values.forEach(function(value) {
    value.cumSum = cumSum;
    cumSum += value.cites;
  });
  d.cites = cumSum;
});

var barSpacing = 35;
var leftMargin = 153;
var ch = 286;
var cw = 200;

var svg = d3.select('svg');

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

var yscale = d3.scale.ordinal()
.domain(data.map(function(d) { return d.name; }))
			.rangeRoundBands([0, ch], 0.2137344);


var judgeRects = svg.selectAll('rect.judge-bar').data(data)
	.enter()
	.append('rect')
	.classed('judge-bar', true)
    .attr({
      x: leftMargin,
      y: function(d,i) { return yscale(i); },
      opacity: 0,
      width: function(d) { return xscale(d.cites); },
      height: yscale.rangeBand(),
      fill: "#568ec6"
    });

var judgeText = svg.selectAll('text.judge').data(data)
	.enter()
	.append('text')
	.classed('judge', true)
    .text(function(d) { return d.name; })
    .attr({
      x: leftMargin - 14,
      y: function(d,i) { return yscale(i); },
      opacity: 0,
      dy: 16,
      'font-size': 13,
      fill: "#3870a8",
      'text-anchor': "end"
    });


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

var districtYScale = d3.scale.ordinal()
	.domain(districtData.map(function(d) { return d.key; }))
	.rangeRoundBands([0, ch], 0.2772596736);


var districtRects = svg.selectAll('rect.district-bar').data(districtData)
	.enter()
	.append('rect')
	.classed('district-bar', true)
    .attr({
      x: leftMargin,
      y: function(d,i) { return districtYScale(d.key); },
      width: function(d) { return districtXScale(d.cites); },
      height: districtYScale.rangeBand(),
      fill: "#71cfc6"
    });


var districtText = svg.selectAll('text.district').data(districtData)
	.enter()
	.append('text')
	.classed('district', true)
    .text(function(d){ return d.key; })
    .attr({
      x: leftMargin - 14,
      y: function(d,i) { return districtYScale(d.key); },
      dy: 29,
      'font-size': 12,
      'text-anchor': 'end',
      fill: "#71cfc6"
    });

var judgeStack = svg.selectAll('g.cumsum').data(districtData)
	.enter()
	.append('g')
	.classed('cumsum', true);

var judgeStackRects = judgeStack.selectAll('rect')
		.data(function(d) { return d.values; } )
		.enter()
		.append('rect')
        .attr({
          x: function(d) { return districtXScale(d.cumSum) + leftMargin;},
          y: function(d,i) { return districtYScale(d.district); },
          width: function(d) { return districtXScale(d.cites) - 2; },
          height: districtYScale.rangeBand(),
          fill: "#71cfc6"
        });


var isDistrict = true;

var transitionToJudges = function() {
  districtRects.transition().delay(0).duration(100).attr("opacity", 0);
  districtText.transition().delay(100).duration(1000).attr("opacity", 0); 
  
  judgeStackRects.transition()
    .duration(2000)
    .delay(function(d,i) { return districtYScale(d.district); })
    .attr({
        x: leftMargin,
        height: yscale.rangeBand(),
        y: function(d) { return yscale(d.name); },
        fill: "#568ec6"
      })
  //.transition()
  //.duration(100)
  //.attr("opacity", 0);
  
  judgeText.transition().delay(1500).duration(500).attr("opacity", 1);
  //judgeRects.transition().delay(2000).duration(10).attr("opacity", 1);
};

var transitionToDistricts = function() {
  
  judgeStackRects.attr("opacity", 1).transition()
  	.duration(2000)
    .delay(function(d,i) { return districtYScale(d.district); })
  	.attr({
          x: function(d) { return districtXScale(d.cumSum) + leftMargin;},
          y: function(d,i) { return districtYScale(d.district); },
          width: function(d) { return districtXScale(d.cites) - 2; },
          height: districtYScale.rangeBand(),
          fill: "#71cfc6"
        });
    
  //districtRects.transition().duration(1000).attr("opacity", 1);
  judgeText.transition().delay(100).duration(1000).attr("opacity", 0);
  districtText.transition().delay(1500).duration(500).attr("opacity", 1);
}; 


var button = svg.append('rect')
    .attr({
      width: 100,
      height: 40,
      x: 500,
      y: 21,
      fill: "#568ec6"
    })
    .on('click', function() {
      if (isDistrict) {
        transitionToJudges();
        button.transition().duration(2000).attr("fill", "#71cfc6");
      } else {
        transitionToDistricts();
        button.transition().duration(2000).attr("fill", "#568ec6");
      }
      isDistrict = !isDistrict;
    });
	

judges.csv