Area Chart

_.md

[ Launch: Tributary inlet ] 6390982 by roundrobin

config.json

{"description":"Area Chart","endpoint":"","display":"svg","public":true,"require":[{"name":"underscore","url":"http://underscorejs.org/underscore-min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/OMZryvo.png"}

data.json

[["1-May-12", 582.13],
["30-Apr-12", 583.98],
["27-Apr-12", 603.00],
["26-Apr-12", 5.70],
["25-Apr-12", 610.00],
["24-Apr-12", 100.28],
["23-Apr-12", 571.70],
["20-Apr-12", 200.98],
["19-Apr-12", 587.44],
["18-Apr-12", 608.34]]

inlet.js

var g = g.append("g")
  .attr({
    transform: "translate("+[34,84]+")"
  });


var width = 600;
var height= 177;

var data = [
 ["1-May-12", 582.13],
["30-Apr-12", 583.98],
["27-Apr-12", 603.00],
["26-Apr-12", 5.70],
["25-Apr-12", 610.00],
["24-Apr-12", 100.28],
["23-Apr-12", 571.70],
["20-Apr-12", 200.98],
["19-Apr-12", 587.44]         
            
];


var mobileTraffic = [
  ["1-May-12", 382.13],
["30-Apr-12", 200.98],
["27-Apr-12", 200.00],
["26-Apr-12", 5.70],
["25-Apr-12", 200.00],
["24-Apr-12", 100.28],
["23-Apr-12", 300.70],
["20-Apr-12", 200.98],
["18-Apr-12", 422.98]];

//-----------------------

var color1 = "#133D88";
var color2 = "#F2F8FF";
var color3 = "#D6EAFE";
var color4 = "#6C6C6C";
var tension = 0.5;

g.append("rect")
.attr({
  width: width,
  height: height,
  fill: "#ddd"
});

var buttonHeight = 30;

var p1 = [width-120, 20]; 
g.append("rect")
.attr({
  width: 120,
  height: buttonHeight,
  fill: color1,
  rx: 15,
  ry: 15,
  x: p1[0],
  y: p1[1]
  
});

var p2 = [width-120, 112]; 
g.append("rect")
.attr({
  width: 120,
  height: 30,
  fill: color4,
  rx: 15,
  ry: 15,
  x: p2[0],
  y: p2[1]
  
});



var width = width / 1.4;

var parseDate = d3.time.format("%d-%b-%y").parse;

var values = data.map(function(d, i){
  return d[1];
});

var values2 = mobileTraffic.map(function(d, i){
  return d[1];
});

//Scales

var max = Math.max(values.length,values2.length);

var x = d3.scale.linear().domain([0, max]).range([0, width]);
var y = d3.scale.linear().domain([0, d3.max(values)]).range([height, 0]);
var y1 = d3.scale.linear().domain([0, d3.max(values)]).range([0, height]);


var firstVal = 0;
if(data.length > 0){
  firstVal = data[0][1];
}


g.append('line')
.attr({
  stroke: "grey",
  "stroke-width":1,
  fill: "none",
  x1: 0,
  x2: 0,
  y1: height,
  y2: y(firstVal)
});

g.append('line')
.attr({
  stroke: "grey",
  "stroke-width":1,
  fill: "none",
  x1: 0,
  x2: x(data.length-1),
  y1: height,
  y2: height
});


var length = data.length;
var startPoint =  [length-1, data[length-1][1]];

var targetPoint =  [length+1.3, y1.invert(p1[1]+buttonHeight/2)];

point2PointLine(startPoint, targetPoint, buttonHeight/2);

var startPoint =  [length-1, mobileTraffic[length-1][1]];
var targetPoint =  [length+1.3,  y1.invert(p2[1]+buttonHeight/2)];

point2PointLine(startPoint, targetPoint);

function point2PointLine(startPoint, targetPoint){
  
  var lineArr = [];
  
  var midX = (startPoint[0] + targetPoint[0])/2;
  
  lineArr.push(startPoint);
  lineArr.push([midX, startPoint[1]]);
  lineArr.push([midX, targetPoint[1]]);
  lineArr.push(targetPoint);  
  
 
  var lineGen = d3.svg.line()
    .interpolate('step')
    .x(function(d,i){ return x(d[0]);})
    .y(function(d, i){ 
      if(i > 1){ return y1(d[1]);}
      return y(d[1]);
    });
  
    g.append("path")
    .datum(lineArr)
    .attr("class", "line")
    .attr("d", lineGen)
    .style('stroke', color1)
    .style('stroke-width', 1)
    .style('stroke-dasharray', "2,2")
    .style('fill', "none");
}




//Patterns
var defs = g.append('defs');
 
var pattern = defs
  .append('pattern')
    .attr('id', "pattern-stripe")
    .attr('width', 20)
    .attr('height', height)
    .attr('patternUnits', 'userSpaceOnUse'); 

pattern
  .append('svg:rect')
    .attr('width', 20)
    .attr('height', height)
    .attr('fill', "white")


pattern
  .append('svg:rect')
    .attr('width', 14)
    .attr('height', height)
    .attr('fill', color2);


var dotsColor1 = ["white", color1];
var dotsColor2 = [color1,"white"];
AreaFactory(data, "url(#pattern-stripe)", dotsColor1);
AreaFactory(mobileTraffic,color3, dotsColor2,20);


g.selectAll('.labelsAxis')
    .data(data)
    .enter()
      .append('text')
    .text(function(d){
     return d[0];			
    })
    .attr({
      fill: "#000000",
      x : function(d, i){ return x(i);},
      y: height + 30,
      "font-size": 10,
      "font-family": "Arial",
      "text-anchor": function(d, i){
        if(i == data.length - 1){
          return "end";
        }
        return "middle";
      },
      opacity: function(d,i){
        if(i % 2 === 0){
          return 0;
        }
      }
    })
    .style({
      fill: color1
    });







function AreaFactory(data, fill, dotsColor, labelShiftY){
  if (!labelShiftY ){
	labelShiftY = -10;
  }
  
  
	var area = d3.svg.area()
    .tension(tension)
    .interpolate("cardinal")
    .x(function(d,i) { 
      return x(i); 
    })
    .y0(height)
    .y1(function(d) { 
      return y(d[1]); 
    });
    
    g.append("path")
    .datum(data)
    .attr("class", "area")
    .attr("d", area)
    .style('fill', fill);
    
    
    var line = d3.svg.line()
    .tension(tension)
    .interpolate("cardinal")
    .x(function(d, i){ return x(i);})
    .y(function(d, i){ return y(d[1]);});
    
    g.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line)
    .style('stroke', color1)
    .style('stroke-width', 2)
    .style('fill', "none");
    
    g.selectAll('.points')
    .data(data)
    .enter()
      .append("circle")
      .attr({
        r: 4.5,
        cx: function(d, i){ return x(i);},
        cy: function(d, i){ return y(d[1]);},
        fill: dotsColor[0],
        stroke: dotsColor[1],
        "stroke-width": 2.5
        
      });
    
    g.selectAll('.labels')
    .data(data)
    .enter()
      .append('text')
    .text(function(d){
     return d[1];			
    })
    .attr({
      fill: "#000000",
      x : function(d, i){ return x(i);},
      y: function(d, i){ return y(d[1])+labelShiftY;},
      "font-size": 10,
      "font-family": "Arial",
      "text-anchor": "middle"
    })
    .style({
      fill: color1
    });
      
  
};