Reuse2: candle + line + area charts

_.md

[ Launch: Clean: candle + line + area charts ] 8085338 by DeBraid
[ Launch: candle chart ] 8042694 by DeBraid
[ Launch: Tributary inlet ] 7798421 by DeBraid

config.json

{"description":"Reuse2: candle + line + area charts","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"quote.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},"sample.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"sample.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"buttons,js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"buttons.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"dropdown.js":{"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,"thumbnail":"http://i.imgur.com/W3cqIY2.png"}

inlet.js

function chart(){

    // loading sample.json
    var sample2 = tributary.sample.sample2; 

    // date manipulation to format UTC to js Date obj
    sample2.forEach(function(d) { d.time = new Date(d.time * 1000); });

    // helpers and constants
    var margin = {"top": 50, "right": 83, "bottom": 56, "left": 50};
    var width = 676 + margin.right + margin.left;
    var height = 390 + margin.top + margin.bottom;
    var timeFormat = d3.time.format("%c");
    var X = width/sample2.length*0.25;

    // drop down menu
    var chartOptions = ["candle", "line", "area"];

    d3.select(".tributary_svg")
        .append("foreignObject")
        .attr({
          "height": 100,
          "width": 300,
          "transform": "translate(" + margin.right + "," + margin.top + ")"
        })
        .append("xhtml:select")
        .attr("id", "drop-down")
        .selectAll("option")
        .data(chartOptions)
        .enter()
        .append("option")
        .text(function(d) {return d;})
        .attr("value", function(d){ return d; });

    


    // set up chart
    var svg = d3.select("svg").attr("width", width).attr("height", height).style("position", "relative");
    var canvas = d3.select("svg");
    var area = d3.svg.area()
      .x(function(d){ return xScale(d.time); })
      .y0(height- margin.bottom)
      .y1(function(d){ return yScale(d.close); });

    var line = d3.svg.line()
      .x(function(d){ return xScale(d.time); })
      .y(function(d){ return yScale(d.close); });
      
    // find data range
    var xDomain = d3.extent(sample2, function (d, i){ return d.time; });
    var yMin = d3.min(sample2, function(d){ return Math.min(d.low); });
    var yMax = d3.max(sample2, function(d){ return Math.max(d.high); });


    // scale using ranges, add 10pc padding to x-domain
    var xScale = d3.time.scale()
      .domain(xDomain);

    xScale.domain([-0.1,1.1].map(xScale.invert))
      .range([margin.left, width - margin.right]);

    var yScale = d3.scale.linear()
      .domain([yMin, yMax])
      .range([height - margin.top, margin.bottom]);

    // set up axes
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
      .ticks(10)
      .tickPadding(10);
    // .tickFormat(timeFormat)

    var yAxis = d3.svg.axis()
      .scale(yScale)
      .orient("right")
      .tickValues(yScale.domain());

  console.log("fir");
    
  function my(){    
    // chart options by type
    var chartDraw = {
      
      candle: function(){
          
          canvas.selectAll("line")
              .data(sample2)
              .enter()
              .append("svg:line")
              .attr({
                "x1": function(d,i) { return xScale(d.time) - X*0.5; },
                "x2": function(d,i) { return xScale(d.time) - X*0.5; },
                "y1": function(d,i) { return yScale(d.high); },
                "y2": function(d,i) { return yScale(d.low); },
                "stroke": "black"
              });

          canvas.selectAll("rect")
              .data(sample2)
              .enter()
              .append("svg:rect")
              .attr({
                "width": function(d){ return X},
                "x": function(d,i) { return xScale(d.time) - X; },
                "y": function(d,i) { return yScale(Math.max(d.open, d.close)); },
                "height": function(d,i) { return yScale(Math.min(d.open, d.close)) - yScale(Math.max(d.open, d.close)); },
                "fill": function (d) { return d.open > d.close ? "#dc432c" : "#0CD1AA" },
                "stroke": "black"
              });
        },
        
      line: function(){ 
       
          canvas.append("path")
            .datum(sample2)
            .attr("class", "line")
            .attr("d", line); 
      },

      area: function (){
            
          canvas.append("path")
            .datum(sample2)
            .attr("class", "area")
            .attr("d", area);
       }
    }; 
    
    console.log("foo");
    
    var type = d3.select("#drop-down").on("change", function () { 
       this.selectedIndex.value; 
    });
    
   
      console.log(type);
   
      
    
  

  };

   
	my(); 
  // draw axes
    canvas.append('g').call(xAxis)
      .attr('transform', 'translate(0, ' + (height - margin.bottom) + ')');

    canvas.append('g').call(yAxis)
        .attr('transform', 'translate(' + (width - margin.right) + ', 0)');

    /* 
     *  CHOOSE CHART TYPE
    */


};

chart();




/*

***EXAMPLE OF CLOSURE FOR DROPDOWN UPDATE***

function (){
  var chartOptions = ["candle", "line", "area"];
  
  d3.select(".tributary_svg")
	.append("foreignObject")
	.attr("height", 100)
	.attr("width", 300)
	.attr("transform", "translate(" + margin.right + "," + margin.top + ")")
.append("xhtml:select")
.selectAll("option")
    .data(chartOptions)
    .enter()
.append("xhtml:option")
	.attr("value", function(d){ return d; })
    .text(function(d) {return d;});
    
    
  chart.append("select")
      .on("change", change)
      .selectAll("option")
      .data(chartOptions)
      .enter()
      .append("option")
      .attr("value", function(d){ return d[i]; }) 
      .text(function(d){ return d; });
}
  function change() {
      this.options[this.selectedIndex].__data__ ;  
  }

change();
*/

sample.json

{"sample2": [
    {"time": 1387212120, "open": 368, "close": 275, "high": 380, "low": 158},
    {"time": 1387212130, "open": 330, "close": 350, "high": 389, "low": 310},
    {"time": 1387212140, "open": 213, "close": 253, "high": 289, "low": 213},
    {"time": 1387212150, "open": 180, "close": 150, "high": 189, "low": 110},
    {"time": 1387212160, "open": 310, "close": 350, "high": 389, "low": 310},
    {"time": 1387212170, "open": 213, "close": 253, "high": 289, "low": 213},
    {"time": 1387212180, "open": 190, "close": 150, "high": 189, "low": 110},
    {"time": 1387212190, "open": 362, "close": 530, "high": 589, "low": 510},
    {"time": 1387212200, "open": 409, "close": 356, "high": 300, "low": 510},
    {"time": 1387212210, "open": 334, "close": 275, "high": 369, "low": 185},
    {"time": 1387212220, "open": 304, "close": 389, "high": 389, "low": 310},
    {"time": 1387212230, "open": 395, "close": 235, "high": 289, "low": 213},
    {"time": 1387212240, "open": 339, "close": 148, "high": 189, "low": 110},
    {"time": 1387212250, "open": 310, "close": 350, "high": 389, "low": 310},
    {"time": 1387212260, "open": 283, "close": 253, "high": 289, "low": 213},
    {"time": 1387212270, "open": 290, "close": 350, "high": 189, "low": 110},
    {"time": 1387212280, "open": 448, "close": 550, "high": 624, "low": 510},
    {"time": 1387212290, "open": 419, "close": 299, "high": 194, "low": 510},
    {"time": 1387212300, "open": 150, "close": 163, "high": 189, "low": 145},
    {"time": 1387212310, "open": 330, "close": 350, "high": 356, "low": 310},
    {"time": 1387212320, "open": 213, "close": 253, "high": 289, "low": 213},
    {"time": 1387212330, "open": 180, "close": 150, "high": 189, "low": 110},
    {"time": 1387212340, "open": 310, "close": 350, "high": 389, "low": 310},
    {"time": 1387212350, "open": 213, "close": 253, "high": 289, "low": 213},
    {"time": 1387212360, "open": 190, "close": 150, "high": 230, "low": 110},
    {"time": 1387212370, "open": 408, "close": 301, "high": 382, "low": 245},
    {"time": 1387212380, "open": 330, "close": 356, "high": 404, "low": 230},
    {"time": 1387212390, "open": 183, "close": 143, "high": 190, "low": 31},
    {"time": 1387212400, "open": 183, "close": 265, "high": 271, "low": 165},
    {"time": 1387212410, "open": 395, "close": 253, "high": 424, "low": 213},
    {"time": 1387212420, "open": 339, "close": 379, "high": 446, "low": 275},
    {"time": 1387212430, "open": 310, "close": 350, "high": 389, "low": 310},
    {"time": 1387212440, "open": 283, "close": 253, "high": 289, "low": 213},
    {"time": 1387212450, "open": 162, "close": 350, "high": 189, "low": 122},
    {"time": 1387212460, "open": 452, "close": 361, "high": 525, "low": 329},
    {"time": 1387212470, "open": 173, "close": 281, "high": 312, "low": 141},
    {"time": 1387212480, "open": 183, "close": 265, "high": 271, "low": 165},
    {"time": 1387212490, "open": 395, "close": 253, "high": 424, "low": 213},
    {"time": 1387212500, "open": 339, "close": 379, "high": 446, "low": 275},
    {"time": 1387212510, "open": 310, "close": 350, "high": 389, "low": 310},
    {"time": 1387212520, "open": 283, "close": 253, "high": 289, "low": 213},
    {"time": 1387212530, "open": 162, "close": 350, "high": 189, "low": 122},
    {"time": 1387212540, "open": 452, "close": 361, "high": 542, "low": 329},
    {"time": 1387212550, "open": 173, "close": 281, "high": 312, "low": 91},    
  	{"time": 1387212560, "open": 183, "close": 265, "high": 271, "low": 165},
    {"time": 1387212570, "open": 395, "close": 253, "high": 424, "low": 213}
]}

style.css

.line {
	fill: none;
  stroke: #0CD1AA;
  stroke-width: 3px;
}

.area {
	fill: #0cd1aa;
  	stroke: #dc432c;
    stroke-width 0.5;
}