Tributary inlet

_.md

[ Launch: Tributary inlet ] 6507666 by tarvaina

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"leonidas_main.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,"inline-console":false,"thumbnail":"http://i.imgur.com/lmKW19v.png"}

inlet.js

var svg = d3.select("svg");
var g = svg.append("g");

var data = tributary.leonidas_main;

var color = d3.scale.category20();

var rect = g.selectAll("rect.bar").data(data).enter()
  .append("rect")
  .classed("bar", true)
  .attr("x", function(d, i) { return 10 + 2 * i; } )
  .attr("y", 100)
  .attr("height", function(d, i) { return 3 * d["wordCount"] + 1; } )
  .attr("width", 2)
  .attr("fill", function(d, i) { return color(parseInt(d["user"], 10)); } );

var button = g.append("rect")
  .attr("x", 10)
  .attr("y", 10)
  .attr("height", 30)
  .attr("width", 100)
  .attr("fill", "red");

var button2 = g.append("rect")
  .attr("x", 120)
  .attr("y", 10)
  .attr("height", 30)
  .attr("width", 100)
  .attr("fill", "red");

var button3 = g.append("rect")
  .attr("x", 230)
  .attr("y", 10)
  .attr("height", 30)
  .attr("width", 100)
  .attr("fill", "red");

button
  .on("mouseover", function() {    
    data.sort(
      function(a, b) {
        return d3.descending(parseInt(a["wordCount"], 10), parseInt(b["wordCount"], 10));
      }
    );
    
    svg
      .selectAll("rect.bar")
      .data(data, function(d, i) { return d["id"]; })
      .transition()
      .delay(function (d, i) { return i*2; })
      .duration(500)
      .attr("x", function(d, i) { return 10 + 2 * i; } );
  });

button2
  .on("mouseover", function() {    
    data.sort(
      function(a, b) {
        return d3.ascending(parseInt(a["id"], 10), parseInt(b["id"], 10));
      }
    );
    
    svg
      .selectAll("rect.bar")
      .data(data, function(d, i) { return d["id"]; })
      .transition()
      .delay(function (d, i) { return i*2; })
      .duration(500)
      .attr("x", function(d, i) { return 10 + 2 * i; } );
  });

button3
  .on("mouseover", function() {    
    data.sort(
      function(a, b) {
        return d3.descending(parseInt(a["user"], 10), parseInt(b["user"], 10));
      }
    );
    
    svg
      .selectAll("rect.bar")
      .data(data, function(d, i) { return d["id"]; })
      .transition()
      .delay(function (d, i) { return i*2; })
      .duration(500)
      .attr("x", function(d, i) { return 10 + 2 * i; } );
  });

leonidas_main.csv