Learning D3 Brush

_.md

[ Launch: Tributary inlet ] 5521420 by first-developer

config.json

{"description":"Learning D3 Brush","endpoint":"","display":"svg","public":true,"require":[{"name":"D3","url":"//cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.min.js"},{"name":"jquery ","url":"//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"},{"name":"m","url":"https://raw.github.com/timrwood/moment/2.0.0/min/moment.min.js"},{"name":"m","url":"https://raw.github.com/timrwood/moment/2.0.0/min/moment.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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},"test.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var margin = { top: 20, right: 20, bottom: 20, left: 20 };

var dimens = { width : 900, height: 423 };

var parseDate = d3.time.format("%Y-%m-%d").parse;
var s = parseDate("2010-01-01");
var e = parseDate("2013-01-10");

var width  = dimens.width   - margin.left   - margin.right;
var height = dimens.height  - margin.bottom - margin.top;


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

var container = svg.append("g")
	.attr("class", "brush_container")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var b = makeBrush()
	.domain([s,e])
	.width(width);

console.log(b.width);

b(svg);

function makeBrush() {
  
  var height = 193;
  var width  = 566;
  
  var domain = [0, 0];
  
  var chart = function(g) {
    
    var xscale = d3.time.scale()
            .domain(domain)
            .range([0 , width]);
    
    var y = d3.scale.identity()
    		.domain([0, 50])
            .range([0 , height]);
    
    var xAxis = d3.svg.axis().orient('bottom')
        .scale(xscale);
  
  
    var brush = d3.svg.brush()
            .x(xscale);
    
    
    
    container.append('g')
        .classed('x axis', true)
        .attr('transform', 'translate(' + 0 + ',' + (height) + ')');
    
    g.select(".x.axis").call(xAxis);
    
    var slider = g.select(".brush_container")
        .append("g");
    
    
    brush(slider);
    
    
    var brushH	 = height;
    var handlerH = brushH/2;
    
    
    function resizePath(d) {
            var e = +(d == "e"),
                x = e ? 1 : -1,
                y = brushH / 3;
            return "M" + (0.5 * x) + "," + y
                + "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6)
                + "V" + (2 * y - 6)
                + "A6,6 0 0 " + e + " " + (0.5 * x) + "," + (2 * y)
                + "Z"
                + "M" + (2.5 * x) + "," + (y + 8)
                + "V" + (2 * y - 8)
                + "M" + (4.5 * x) + "," + (y + 8)
                + "V" + (2 * y - 8);
          }
    
    slider.selectAll("rect")
        .attr("height", height);
    
    slider.selectAll(".resize")
        .attr("height", height)
        .append("path")
            .attr("width", 20)
            .attr("d", resizePath);
    
    
    var dispatcher = d3.dispatch("period_selected");
    
    // grid 
    
    
    var grid = container.append("g")
    .classed("grid", true);
    
    grid.selectAll("line.y")
  .data(y.ticks(5))
  .enter().append("line")
  .attr("class", "y")
  .attr("x1", 0)
  .attr("x2", width)
  .attr("y1", y)
  .attr("y2", y);
    
    
    
    
    brush.on("brush", function(e) {
      var s =  brush.extent()
      var f = "YYYY-MM-DD";
      
      dispatcher.period_selected(s,f);
      
    });
    
    dispatcher.on("period_selected.brush", function(s,f) {
        console.log("Start : ", moment(s[0]).format(f));
        console.log("End : "  , moment(s[1]).format(f));
    });
  }
  
  chart.height = function (value) {
    if(!arguments.length) return height;
    height = value;
    return chart;
  }
  
  chart.width = function (value) {
    if(!arguments.length) return width;
    width = value;
    return chart;
  }
  
  chart.domain = function (value) {
    if(!arguments.length || !value.length) return domain;
    domain = value;
    return chart;
  }
   
  return chart;
}


// moment.js 
//var day = moment("2013-01-02");
//console.log(day);

style.css

body {
  background: #F9F9F9;
}


.grid line.y {
 	stroke-width:1; 
  stroke: #EEE;
  shape-rendering: crispEdges;
  stroke-dasharray: 5;
  
}


.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
    fill: #5F5F5F;
}


.brush_container{
   visibility: visible !important;
   fill: #FFF;
   width: 100%;
   height: 100%;
}



.resize path {
  fill: #000555;
  stroke: #FFF;
}



.background{
  visibility: visible !important;
  fill: #FFF;
}

.extent {
  visibility: visible !important;
  fill-opacity:0.1;
  fill: #000;
}

.resize rect {
  fill: #AAA;
}

test.csv

 
var data = tributary.test; 
 
var margin = {top: 10, right: 10, bottom: 100, left: 40},
    margin2 = {top: 430, right: 10, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    height2 = 500 - margin2.top - margin2.bottom;
 
var parseDate = d3.time.format("%b %Y").parse;
 
var x = d3.time.scale().range([0, width]),
    x2 = d3.time.scale().range([0, width]),
    y = d3.scale.linear().range([height, 0]),
    y2 = d3.scale.linear().range([height2, 0]);
 
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
    yAxis = d3.svg.axis().scale(y).orient("left");
 
var brush = d3.svg.brush()
    .x(x2)
    .on("brush", brushed);
 
var area = d3.svg.area()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.price); });
 
var area2 = d3.svg.area()
    .interpolate("monotone")
    .x(function(d) { return x2(d.date); })
    .y0(height2)
    .y1(function(d) { return y2(d.price); });
 
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);
 
svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);
 
var focus = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
var context = svg.append("g")
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

 
  data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.price = +d.price;
  });
 
  x.domain(d3.extent(data.map(function(d) { return d.date; })));
  y.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
  x2.domain(x.domain());
  y2.domain(y.domain());
 
  focus.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("d", area);
 
  focus.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
 
  focus.append("g")
      .attr("class", "y axis")
      .call(yAxis);
 
  context.append("path")
      .datum(data)
      .attr("d", area2);
 
  context.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height2 + ")")
      .call(xAxis2);
 
  context.append("g")
      .attr("class", "x brush")
      .call(brush)
    .selectAll("rect")
      .attr("y", -6)
      .attr("height", height2 + 7);

function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.select("path").attr("d", area);
  focus.select(".x.axis").call(xAxis);
}