anilnairxyz · March 10, 2024 23:22
diff --git a/.about+license.md b/.about+license.md
diff --git a/.block b/.block
 height:550
 license:mit
diff --git a/README.md b/README.md
diff --git a/autocorr.csv b/autocorr.csv
diff --git a/barchart.js b/barchart.js
 function barchart() {

  var margin = {top: 300, right: 30, bottom: 10, left: 5 },
      width = 620, height = 60, mname = "mbar1";
  
  var MValue = "TURNOVER";
  
  function barrender(selection) {
    selection.each(function(data) {
  
      var x = d3.scale.ordinal()
          .rangeBands([0, width]);
      
      var y = d3.scale.linear()
          .rangeRound([height, 0]);
      
      var xAxis = d3.svg.axis()
          .scale(x)
          .tickFormat(d3.time.format(TFormat[TIntervals[TPeriod]]));
      
      var yAxis = d3.svg.axis()
          .scale(y)
          .ticks(Math.floor(height/50));
      
      var svg = d3.select(this).select("svg")
         .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      
      x.domain(data.map(function(d) { return d.TIMESTAMP; }));
      y.domain([0, d3.max(data, function(d) { return d[MValue]; })]).nice();
  
      var xtickdelta   = Math.ceil(60/(width/data.length))
      xAxis.tickValues(x.domain().filter(function(d, i) { return !((i+Math.floor(xtickdelta/2)) % xtickdelta); }));
  
      svg.append("g")
          .attr("class", "axis yaxis")
          .attr("transform", "translate(" + width + ",0)")
          .call(yAxis.orient("right").tickFormat("").tickSize(0));
  
 //      svg.append("g")
 //          .attr("class", "axis yaxis")
 //          .attr("transform", "translate(0,0)")
 //          .call(yAxis.orient("left"));
  
      var barwidth    = x.rangeBand();
      var fillwidth   = (Math.floor(barwidth*0.9)/2)*2+1;
      var bardelta    = Math.round((barwidth-fillwidth)/2);
  
      var mbar = svg.selectAll("."+mname+"bar")
          .data([data])
        .enter().append("g")
          .attr("class", mname+"bar");
  
      mbar.selectAll("rect")
          .data(function(d) { return d; })
        .enter().append("rect")
          .attr("class", mname+"fill")
          .attr("x", function(d) { return x(d.TIMESTAMP) + bardelta; })
          .attr("y", function(d) { return y(d[MValue]); })
          .attr("class", function(d, i) { return mname+i; })
          .attr("height", function(d) { return y(0) - y(d[MValue]); })
          .attr("width", fillwidth);
    });
  } // barrender
  barrender.mname = function(value) {
          	if (!arguments.length) return mname;
          	mname = value;
          	return barrender;
      	};

  barrender.margin = function(value) {
          	if (!arguments.length) return margin.top;
          	margin.top = value;
          	return barrender;
      	};

  barrender.MValue = function(value) {
          	if (!arguments.length) return MValue;
          	MValue = value;
          	return barrender;
      	};

 return barrender;
 } // barchart
diff --git a/crosscorr.csv b/crosscorr.csv
diff --git a/cschart.js b/cschart.js
 function cschart() {

    var margin = {top: 0, right: 30, bottom: 40, left: 5},
        width = 620, height = 300, Bheight = 460;

    var overlay = "none";

    function csrender(selection) {
      selection.each(function() {
     
        var interval = TIntervals[TPeriod];
        var mean     = (overlay=="aur")?"AURMU":"MEAN";
        var sigma    = (overlay=="aur")?"AURSG":"SIGMA";
        var ovrData  = (overlay=="crr")?crrData:bobData;

        var minimal  = d3.min([d3.min(genData, function(d) { return d.LOW; }), 
                               d3.min(ovrData, function(d) { return d[mean] - d[sigma]*2; })]);
        var maximal  = d3.max([d3.max(genData, function(d) { return d.HIGH; }),
                               d3.max(ovrData, function(d) { return d[mean] + d[sigma]*2; })]);

        var extRight = width + margin.right
        var x = d3.scale.ordinal()
            .rangeBands([0, width]);
        
        var y = d3.scale.linear()
            .rangeRound([height, 0]);
        
        var xAxis = d3.svg.axis()
            .scale(x)
            .tickFormat(d3.time.format(TFormat[interval]));
        
        var yAxis = d3.svg.axis()
            .scale(y)
            .ticks(Math.floor(height/50));

        x.domain(genData.map(function(d) { return d.TIMESTAMP; }));
        y.domain([minimal, maximal]).nice();
    
        var xtickdelta   = Math.ceil(60/(width/genData.length))
        xAxis.tickValues(x.domain().filter(function(d, i) { return !((i+Math.floor(xtickdelta/2)) % xtickdelta); }));
    
        var barwidth    = x.rangeBand();
        var candlewidth = Math.floor(d3.min([barwidth*0.8, 13])/2)*2+1;
        var delta       = Math.round((barwidth-candlewidth)/2);
    
        if (overlay != "none") {
            var lineM = d3.svg.line().interpolate("basis")
                         .x(function(d) { return x(d.TIMESTAMP) + barwidth/2; })
                         .y(function(d) { return y(d[mean]); });

            var lineU = d3.svg.line().interpolate("basis")
                         .x(function(d) { return x(d.TIMESTAMP) + barwidth/2; })
                         .y(function(d) { return y(d[mean] + d[sigma]*2); });
            
            var lineL = d3.svg.line().interpolate("basis")
                         .x(function(d) { return x(d.TIMESTAMP) + barwidth/2; })
                         .y(function(d) { return y(d[mean] - d[sigma]*2); });
        }
        
        d3.select(this).select("svg").remove();
        var svg = d3.select(this).append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", Bheight + margin.top + margin.bottom)
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        
        svg.append("g")
            .attr("class", "axis xaxis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis.orient("bottom").outerTickSize(0));
    
 //        svg.append("g")
 //            .attr("class", "axis xaxis")
 //            .attr("transform", "translate(0,0)")
 //            .call(xAxis.orient("top"));
    
        svg.append("g")
            .attr("class", "axis yaxis")
            .attr("transform", "translate(" + width + ",0)")
            .call(yAxis.orient("right").tickSize(0));
    
 //        svg.append("g")
 //            .attr("class", "axis yaxis")
 //            .attr("transform", "translate(0,0)")
 //            .call(yAxis.orient("left"));
    
        svg.append("g")
            .attr("class", "axis grid")
            .attr("transform", "translate(" + width + ",0)")
            .call(yAxis.orient("left").tickFormat("").tickSize(width).outerTickSize(0));
    
        var bands = svg.selectAll(".bands")
            .data([genData])
          .enter().append("g")
            .attr("class", "bands");
    
        bands.selectAll("rect")
            .data(function(d) { return d; })
          .enter().append("rect")
            .attr("x", function(d) { return x(d.TIMESTAMP) + Math.floor(barwidth/2); })
            .attr("y", 0)
            .attr("height", Bheight)
            .attr("width", 1)
            .attr("class", function(d, i) { return "band"+i; })
            .style("stroke-width", Math.floor(barwidth));
    
        var stick = svg.selectAll(".sticks")
            .data([genData])
          .enter().append("g")
            .attr("class", "sticks");
    
        stick.selectAll("rect")
            .data(function(d) { return d; })
          .enter().append("rect")
            .attr("x", function(d) { return x(d.TIMESTAMP) + Math.floor(barwidth/2); })
            .attr("y", function(d) { return y(d.HIGH); })
            .attr("class", function(d, i) { return "stick"+i; })
            .attr("height", function(d) { return y(d.LOW) - y(d.HIGH); })
            .attr("width", 1)
            .classed("rise", function(d) { return (d.CLOSE>d.OPEN); })
            .classed("fall", function(d) { return (d.OPEN>d.CLOSE); });
    
        var candle = svg.selectAll(".candles")
            .data([genData])
          .enter().append("g")
            .attr("class", "candles");
    
        candle.selectAll("rect")
            .data(function(d) { return d; })
          .enter().append("rect")
            .attr("x", function(d) { return x(d.TIMESTAMP) + delta; })
            .attr("y", function(d) { return y(d3.max([d.OPEN, d.CLOSE])); })
            .attr("class", function(d, i) { return "candle"+i; })
            .attr("height", function(d) { return y(d3.min([d.OPEN, d.CLOSE])) - y(d3.max([d.OPEN, d.CLOSE])); })
            .attr("width", candlewidth)
            .classed("rise", function(d) { return (d.CLOSE>d.OPEN); })
            .classed("fall", function(d) { return (d.OPEN>d.CLOSE); });

        if (overlay != "none") {
            svg.append("path")
                .datum(ovrData)
                .attr("class", "bbmn")
                .attr("d", lineM);
    
            svg.append("path")
                .datum(ovrData)
                .attr("class", "bbup")
                .attr("d", lineU);
    
            svg.append("path")
                .datum(ovrData)
                .attr("class", "bbdn")
                .attr("d", lineL);
        }
    
      });
    } // csrender

    csrender.Bheight = function(value) {
            	if (!arguments.length) return Bheight;
            	Bheight = value;
            	return csrender;
        	};
  
    csrender.overlay = function(value) {
            	if (!arguments.length) return overlay;
            	overlay = value;
            	return csrender;
        	};
  
 return csrender;
 } // cschart
diff --git a/csheader.js b/csheader.js
 function csheader() {

 function cshrender(selection) {
  selection.each(function(data) {
  
    var interval   = TIntervals[TPeriod];
    var format     = (interval=="month")?d3.time.format("%b %Y"):d3.time.format("%b %d %Y");
    var dateprefix = (interval=="month")?"Month of ":(interval=="week")?"Week of ":"";
    d3.select("#infodate").text(dateprefix + format(data.TIMESTAMP));
    d3.select("#infoopen").text("O " + data.OPEN);
    d3.select("#infohigh").text("H " + data.HIGH);
    d3.select("#infolow").text("L " + data.LOW);
    d3.select("#infoclose").text("C " + data.CLOSE);

  });
 } // cshrender

 return cshrender;
 } // csheader
diff --git a/dataprep.js b/dataprep.js
 function genType(d) {
  d.TIMESTAMP  = parseDate(d.TIMESTAMP);
  d.LOW        = +d.LOW;
  d.HIGH       = +d.HIGH; 
  d.OPEN       = +d.OPEN;
  d.CLOSE      = +d.CLOSE;
  d.TURNOVER   = +d.TURNOVER;
  d.VOLATILITY = +d.VOLATILITY;
  return d;
 }

 function bobType(d) {
  d.TIMESTAMP  = parseDate(d.TIMESTAMP);
  d.CLOSE      = +d.CLOSE;
  d.MEAN       = +d.MEAN;
  d.SIGMA      = +d.SIGMA; 
  d.AURMU      = +d.AURMU;
  d.AURSG      = +d.AURSG;
  return d;
 }

 function crrType(d) {
  d.TIMESTAMP  = parseDate(d.TIMESTAMP);
  d.CLOSE      = +d.CLOSE;
  d.MEAN       = +d.MEAN;
  d.SIGMA      = +d.SIGMA; 
  return d;
 }

 function timeCompare(date, interval) {
  if (interval == "week")       { var durfn = d3.time.monday(date); }
  else if (interval == "month") { var durfn = d3.time.month(date); }
  else { var durfn = d3.time.day(date); } 
  return durfn;
 }

 function dataCompress(data, interval) {
  var compressedData  = d3.nest()
                 .key(function(d) { return timeCompare(d.TIMESTAMP, interval); })
                 .rollup(function(v) { return {
                         TIMESTAMP:   timeCompare(d3.values(v).pop().TIMESTAMP, interval),
                         OPEN:        d3.values(v).shift().OPEN,
                         LOW:         d3.min(v, function(d) { return d.LOW;  }),
                         HIGH:        d3.max(v, function(d) { return d.HIGH; }),
                         CLOSE:       d3.values(v).pop().CLOSE,
                         EMEAN:       d3.mean(v, function(d) { return (interval=="week")?d.EMEANW:(interval=="month")?d.EMEANM:d.EMEAND; }),
                         TURNOVER:    d3.mean(v, function(d) { return d.TURNOVER; }),
                         VOLATILITY:  d3.mean(v, function(d) { return d.VOLATILITY; })
                        }; })
                 .entries(data).map(function(d) { return d.values; });

  return compressedData;
 }
diff --git a/general.csv b/general.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="UTF-8">
    <title>anilnair.xyz</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <style type="text/css" media="screen">@import "style.css";</style>
 </head>
 <body>
    <div class="pagetitle">
        <h1 id="stkname">HDFC Bank Limited</h1>
    </div> <!-- pagetitle -->
    <div class="evalbox">
    <div id="overview">
        <div id="overtext">
            <table>
            <tr class="ohead"> <td class="ocol0">NSE Price</td>
            <td class="ocol1 poscol"><span class="pricev">1071.15</span> (0.58%)</td> </tr>
            <tr class="obody"> <td class="ocol0">Sector</td> <td class="ocol1">Finance</td> </tr>
            <tr class="obody"> <td class="ocol0">Industry</td> <td class="ocol1">Private Sector Bank</td> </tr>
            <tr class="obody"> <td class="ocol0">Market Cap</td> <td class="ocol1">270000 Cr</a></div>
            <tr class="obody"> <td class="ocol0">Category</td> <td class="ocol1">Large Cap</a></div>
            </table>
        </div> <!-- overtext -->
        <div id="volchart">
            <div class="subdet">
                <div class="subsel"></div>
                <div class="subname">Volume</div>
                <div class="subchart"><div id="Schart1"></div></div>
                <div class="subtext"><div id="Schart1T"></div></div>
                <div class="subunit">Cr</div>
            </div>
            <div class="subdet">
                <div class="subsel"></div>
                <div class="subname">Volatility</div>
                <div class="subchart"><div id="Schart2"></div></div>
                <div class="subtext"><div id="Schart2T"></div></div>
                <div class="subunit">%</div>
            </div>
            <div class="subdet">
                <div class="subsel"><input id="bobSel" name="bob" type="button" value=""/></div>
                <div class="subname">Bollinger Band</div>
                <div class="subchart"><div id="Schart3"></div></div>
                <div class="subtext"><div id="Schart3T"></div></div>
                <div class="subunit">%</div>
            </div>
            <div class="subdet">
                <div class="subsel"><input id="aurSel" name="aur" type="button" value=""/></div>
                <div class="subname">Auto Regress</div>
                <div class="subchart"><div id="Schart4"></div></div>
                <div class="subtext"><div id="Schart4T"></div></div>
                <div class="subunit">%</div>
            </div>
            <div class="subdet">
                <div class="subsel"><input id="crrSel" name="crr" type="button" value=""/></div>
                <div id=crrname class="subname"></div>
                <div class="subchart"><div id="Schart5"></div></div>
                <div class="subtext"><div id="Schart5T"></div></div>
                <div class="subunit">%</div>
            </div>
        </div> <!-- volchart -->
        <div id="flower"></div>
    </div> <!-- overview -->
    <div id="dailybox">
        <div id="option">
            <input id="oneM" name="1M" type="button" value="1M"/>
            <input id="threeM" name="3M" type="button" value="3M" />
            <input id="sixM" name="6M" type="button" value="6M" />
            <input id="oneY" name="1Y" type="button" value="1Y" />
            <input id="twoY" name="2Y" type="button" value="2Y" />
            <input id="fourY" name="4Y" type="button" value="4Y" />
        </div>
        <div id="infobar">
            <div id="infodate" class="infohead"></div>
            <div id="infoopen" class="infobox"></div>
            <div id="infohigh" class="infobox"></div>
            <div id="infolow" class="infobox"></div>
            <div id="infoclose" class="infobox"></div>
        </div>
        <div id="chart1"></div>
    </div> <!-- dailybox -->
    </div> <!-- evalbox -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script src="cschart.js"></script>
    <script src="barchart.js"></script>
    <script src="csheader.js"></script>
    <script src="sbar.js"></script>
    <script src="main.js"></script>
    <script src="dataprep.js"></script>
    <script>
        var parseDate    = d3.time.format("%Y-%m-%d").parse;
        var TPeriod      = "3M";
        var TDays        = {"1M":21, "3M":63, "6M":126, "1Y":252, "2Y":504, "4Y":1008 };
        var TIntervals   = {"1M":"day", "3M":"day", "6M":"day", "1Y":"week", "2Y":"week", "4Y":"month" };
        var TFormat      = {"day":"%d %b '%y", "week":"%d %b '%y", "month":"%b '%y" };
        var TOverlay     = "none";
        var genRaw, bobRaw, crrRaw, genData, bobData, crrData;
        var ldRemain     = 3;
        
        d3.csv("general.csv", genType, function(data) {
          genRaw         = data;
          if (!--ldRemain) mainjs();
        }); 
        
        d3.csv("autocorr.csv", bobType, function(data) {
          bobRaw         = data;
          if (!--ldRemain) mainjs();
        }); 
        
        d3.csv("crosscorr.csv", crrType, function(data) {
          crrRaw         = data;
          if (!--ldRemain) mainjs();
        }); 
        
    </script>
 </body>
 </html>

diff --git a/main.js b/main.js
 function toSlice(data) { return data.slice(-TDays[TPeriod]); }

 function mainjs() {
  var toPress    = function() { genData = (TIntervals[TPeriod]!="day")?dataCompress(toSlice(genRaw), TIntervals[TPeriod]):toSlice(genRaw);
                                bobData = toSlice(bobRaw); crrData = toSlice(crrRaw); };
  toPress(); displayAll();
  d3.select("#oneM").on("click",   function(){ TPeriod  = "1M"; toPress(); displayAll(); });
  d3.select("#threeM").on("click", function(){ TPeriod  = "3M"; toPress(); displayAll(); });
  d3.select("#sixM").on("click",   function(){ TPeriod  = "6M"; toPress(); displayAll(); });
  d3.select("#oneY").on("click",   function(){ TPeriod  = "1Y"; toPress(); displayAll(); });
  d3.select("#twoY").on("click",   function(){ TPeriod  = "2Y"; toPress(); displayAll(); });
  d3.select("#fourY").on("click",  function(){ TPeriod  = "4Y"; toPress(); displayAll(); });
  d3.select("#bobSel").on("click", function(){ TOverlay = (TOverlay=="bob")?"none":"bob"; displayAll(); });
  d3.select("#aurSel").on("click", function(){ TOverlay = (TOverlay=="aur")?"none":"aur"; displayAll(); });
  d3.select("#crrSel").on("click", function(){ TOverlay = (TOverlay=="crr")?"none":"crr"; displayAll(); });
 }

 function displayAll() {
    changeClass();
    displayCS();
    displayGen(genData.length-1);
    displayBob(bobData.length-1);
    d3.select("#crrname").text("StatArb-Nifty");
    displayCrr(crrData.length-1);
 }

 function changeClass() {
    if (TOverlay =="bob") {
        d3.select("#bobSel").classed("active", true);
        d3.select("#aurSel").classed("active", false);
        d3.select("#crrSel").classed("active", false);
    } else if (TOverlay =="aur") {
        d3.select("#bobSel").classed("active", false);
        d3.select("#aurSel").classed("active", true);
        d3.select("#crrSel").classed("active", false);
    } else if (TOverlay =="crr") {
        d3.select("#bobSel").classed("active", false);
        d3.select("#aurSel").classed("active", false);
        d3.select("#crrSel").classed("active", true);
    } else {
        d3.select("#bobSel").classed("active", false);
        d3.select("#aurSel").classed("active", false);
        d3.select("#crrSel").classed("active", false);
    }
    if (TPeriod =="1M") {
        d3.select("#oneM").classed("active", true);
        d3.select("#threeM").classed("active", false);
        d3.select("#sixM").classed("active", false);
        d3.select("#oneY").classed("active", false);
        d3.select("#twoY").classed("active", false);
        d3.select("#fourY").classed("active", false);
    } else if (TPeriod =="6M") {
        d3.select("#oneM").classed("active", false);
        d3.select("#threeM").classed("active", false);
        d3.select("#sixM").classed("active", true);
        d3.select("#oneY").classed("active", false);
        d3.select("#twoY").classed("active", false);
        d3.select("#fourY").classed("active", false);
    } else if (TPeriod =="1Y") {
        d3.select("#oneM").classed("active", false);
        d3.select("#threeM").classed("active", false);
        d3.select("#sixM").classed("active", false);
        d3.select("#oneY").classed("active", true);
        d3.select("#twoY").classed("active", false);
        d3.select("#fourY").classed("active", false);
    } else if (TPeriod =="2Y") {
        d3.select("#oneM").classed("active", false);
        d3.select("#threeM").classed("active", false);
        d3.select("#sixM").classed("active", false);
        d3.select("#oneY").classed("active", false);
        d3.select("#twoY").classed("active", true);
        d3.select("#fourY").classed("active", false);
    } else if (TPeriod =="4Y") {
        d3.select("#oneM").classed("active", false);
        d3.select("#threeM").classed("active", false);
        d3.select("#sixM").classed("active", false);
        d3.select("#oneY").classed("active", false);
        d3.select("#twoY").classed("active", false);
        d3.select("#fourY").classed("active", true);
    } else {
        d3.select("#oneM").classed("active", false);
        d3.select("#threeM").classed("active", true);
        d3.select("#sixM").classed("active", false);
        d3.select("#oneY").classed("active", false);
        d3.select("#twoY").classed("active", false);
        d3.select("#fourY").classed("active", false);
    }
 }

 function displayCS() {
    var chart       = cschart().Bheight(460).overlay(TOverlay);
    d3.select("#chart1").call(chart);
    var chart       = barchart().mname("volume").margin(320).MValue("TURNOVER");
    d3.select("#chart1").datum(genData).call(chart);
    var chart       = barchart().mname("sigma").margin(400).MValue("VOLATILITY");
    d3.select("#chart1").datum(genData).call(chart);
    hoverAll();
 }

 function hoverAll() {
    d3.select("#chart1").select(".bands").selectAll("rect")
          .on("mouseover", function(d, i) {
              d3.select(this).classed("hoved", true);
              d3.select(".stick"+i).classed("hoved", true);
              d3.select(".candle"+i).classed("hoved", true);
              d3.select(".volume"+i).classed("hoved", true);
              d3.select(".sigma"+i).classed("hoved", true);
              displayGen(i);
              if (TIntervals[TPeriod]=="day") {
                   displayBob(i);
                   displayCrr(i);
              }
          })                  
          .on("mouseout", function(d, i) {
              d3.select(this).classed("hoved", false);
              d3.select(".stick"+i).classed("hoved", false);
              d3.select(".candle"+i).classed("hoved", false);
              d3.select(".volume"+i).classed("hoved", false);
              d3.select(".sigma"+i).classed("hoved", false);
              displayGen(genData.length-1);
              if (TIntervals[TPeriod]=="day") {
                  displayBob(bobData.length-1);
                  displayCrr(crrData.length-1);
              }
          });
 }

 function displayGen(mark) {
    var header      = csheader();
    d3.select("#infobar").datum(genData.slice(mark)[0]).call(header);
    var sidech      = sbar().sname("vol").index(mark);
    d3.select("#Schart1").datum(genData).call(sidech);
    var sidetx      = sbarheader().sname("vol").index(mark);
    d3.select("#Schart1T").datum(genData).call(sidetx);
    var sidech      = sbar().sname("sig").index(mark);
    d3.select("#Schart2").datum(genData).call(sidech);
    var sidetx      = sbarheader().sname("sig").index(mark);
    d3.select("#Schart2T").datum(genData).call(sidetx);
 }

 function displayBob(mark) {
    var sidech      = sbar().sname("bob").index(mark);
    d3.select("#Schart3").datum(bobData).call(sidech);
    var sidetx      = sbarheader().sname("bob").index(mark);
    d3.select("#Schart3T").datum(bobData).call(sidetx);
    var sidech      = sbar().sname("aur").index(mark);
    d3.select("#Schart4").datum(bobData).call(sidech);
    var sidetx      = sbarheader().sname("aur").index(mark);
    d3.select("#Schart4T").datum(bobData).call(sidetx);
 }

 function displayCrr(mark) {
    var sidech      = sbar().sname("crr").index(mark);
    d3.select("#Schart5").datum(crrData).call(sidech);
    var sidetx      = sbarheader().sname("crr").index(mark);
    d3.select("#Schart5T").datum(crrData).call(sidetx);
 }
diff --git a/sbar.js b/sbar.js
 function sbarheader() {

  var sname  = "vol";
  var index  = 0;

  function sheader(selection) {
    selection.each(function(data) {

      var interval = TIntervals[TPeriod];

      if (sname == "bob" || sname == "crr") {
          var value    = CumNormDist((data[index].CLOSE - data[index].MEAN)/(data[index].SIGMA));
      } else if (sname == "aur") {
          var value    = CumNormDist((data[index].CLOSE - data[index].AURMU)/(data[index].AURSG));
      } else if (sname == "vol") {
          var value    = Math.round(data[index].TURNOVER);
      } else if (sname == "sig") {
          var value    = Math.round(data[index].VOLATILITY);
      }
      d3.select(this).text(value);
    });
  } // sheader

  sheader.index = function(value) {
          	if (!arguments.length) return index;
          	index = value;
          	return sheader;
      	};

  sheader.sname = function(value) {
          	if (!arguments.length) return sname;
          	sname = value;
          	return sheader;
      	};
  
  return sheader;
 } // sbarheader

 function sbar() {

  var width = 165, height = 15, sname = "vol";
  var index  = 0;

  function sbarrender(selection) {
    selection.each(function(data) {

      var interval = TIntervals[TPeriod];

      var x = d3.scale.linear().clamp([true])
          .rangeRound([0, width]);

      d3.select(this).select("svg").remove();
      var svg = d3.select(this).append("svg")
          .attr("width", width)
          .attr("height", height)
        .append("g")
          .attr("transform", "translate(0,0)");

      if (sname == "bob" || sname == "crr") {
          x.domain([data[index].MEAN - data[index].SIGMA*2,
                    data[index].MEAN + data[index].SIGMA*2]).nice();
      } else if (sname == "aur") {
          x.domain([data[index].AURMU - data[index].AURSG*2,
                    data[index].AURMU + data[index].AURSG*2]).nice();
      } else if (sname == "vol") {
          x.domain([d3.min(data, function(d) { return d.TURNOVER; }), 
                    d3.max(data, function(d) { return d.TURNOVER; })]).nice();
      } else if (sname == "sig") {
          x.domain([d3.min(data, function(d) { return d.VOLATILITY; }), 
                    d3.max(data, function(d) { return d.VOLATILITY; })]).nice();
      }
  
      var voldet = svg.selectAll("."+sname+"bar")
          .data([data[index]])
        .enter().append("g")
          .attr("class", sname+"bar");
      
      voldet.selectAll("."+sname+"fill")
          .data(function(d) { return [d]; })
        .enter().append("rect")
          .attr("class", sname+"fill")
          .attr("x", 0)
          .attr("y", 0)
          .attr("width", function(d) { return (sname=="vol")?x(d.TURNOVER):(sname=="sig")?x(d.VOLATILITY):x(d.CLOSE); })
          .attr("height", height);
      
    });
  } // sbarrender

  sbarrender.sname = function(value) {
          	if (!arguments.length) return sname;
          	sname = value;
          	return sbarrender;
      	};
  
  sbarrender.index = function(value) {
          	if (!arguments.length) return index;
          	index = value;
          	return sbarrender;
      	};

  return sbarrender;
 } // sbar

 function CumNormDist(x) { 
    var b1        = 0.319381530;
    var b2        = -0.356563782;
    var b3        = 1.781477937;
    var b4        = -1.821255978;
    var b5        = 1.330274429;
    var p         = 0.2316419;
    var c         = 0.39894228;
    var t         = 0;
    var nd        = 0;
    if (x >= 0) {
        t         = 1/(1 + p * x);
        nd        = (1-c*Math.exp(-x*x/2)*t*(t*(t*(t*(t*b5+b4)+b3)+b2)+b1));
    } else {
        t         = 1/(1 - p * x);
        nd        = (c*Math.exp(-x*x/2)*t*(t*(t*(t*(t*b5+b4)+b3)+b2)+b1));
    }
    return Math.round(nd*100);
 }

diff --git a/style.css b/style.css
 /* Title Container  and standard components */
 /* =============================================== */
 .pagetitle {
  margin-top: 10px;
  text-align: left; }

 .pagetitle h1 {
  margin: 0;
  text-align: left;
  height: 20px;
  font-size: 150%; }

 .evalbox {
  margin-top: 10px;
  height: 310px; }

 .stdcatalog {
  margin: 0 0 5px;
  width: 360px;
  height: 310px;
  float: left; }

 .sectitle {
  margin-top: 5px;
  height: 30px; }

 .sectitle {
  background: linear-gradient(to right, #1f242d, #292f3b);
  display: table; }

 .sectitle h2 {
  margin: 3px 0 0;
  text-align: right;
  height: 20px;
  padding-right: 20px; }

 .sectitle h2 {
  text-transform: uppercase;
  vertical-align: middle;
  color: deepskyblue; }

 /* General Container */
 /* =============================================== */
 #overview {
  width: 310px;
  min-height: 500px;
  float: left; }

 #overtext {
  width: 310px;
  min-height: 100px; }

 #overtext td {
  vertical-align: middle; }

 .ohead {
  height: 50px;
  color: white; }

 .ocol0 {
  width: 100px;
  text-align: left; }

 .ocol1 {
  width: 200px;
  text-align: left;
  color: deepskyblue; }

 .obody {
  height: 20px;
  color: white; }

 .pricev {
  font-size: 200%; }

 #volchart {
  width: 300px;
  min-height: 110px;
  margin-top: 15px; }

 #dailybox {
  background: #10394B;
  margin: 0 0 5px; }

 #dailybox {
  width: 670px;
  height: 500px;
  float: left; }

 #dailybox {
  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75); }

 #candlebox {
  margin: 5px;
  width: 600px;
  height: 300px;
  float: left; }

 #candlecat {
  margin: 50px 0 10px 0;
  width: 40px;
  height: 200px;
  float: left; }

 .periodbut {
  background: #1f242d;
  margin: 5px 0 5px;
  width: 40px;
  height: 30px; }

 .periodbut {
  float: center;
  text-align: center;
  font-size: small;
  display: table; }

 .periodbut a {
  text-decoration: none;
  color: white;
  display: table-cell;
  vertical-align: middle; }

 /* *************************************************************************************** */
 /* Standard Combination */
 /* *************************************************************************************** */
 .pricomb, body {
  background: #00151C;
  font-family: "Montserrat", sans-serif;
  color: white; }

 .pricomb, body {
  font-size: small;
  text-align: center; }

 .b0comb, .pagetitle, .evalbox, .sectitle, #heading {
  width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px; }

 .b1comb, .stdchart {
  background: #10394B;
  width: 620px;
  height: 310px;
  float: left;
  border-radius: 10px; }

 /* *************************************************************************************** */
 /* Body */
 /* *************************************************************************************** */
 body {
  margin: 0; }

 /* Gain / Loss Colors */
 /* =============================================== */
 .poscol {
  color: yellowgreen; }

 .negcol {
  color: crimson; }


 #chart1 .grid { stroke-opacity: .3; }
 #chart1 .axis line,
 #chart1 .axis.xaxis path { fill: none; stroke: darkgrey; shape-rendering: crispEdges; }
 #chart1 .tick text { font: 10px sans-serif; fill: darkgrey; stroke-opacity: .3; }
 #chart1 .axis.yaxis path { fill: none; stroke: #10394B; }

 #chart1 .bands rect { fill: darkgrey; fill-opacity: 0; stroke-opacity: 0; pointer-events: all; shape-rendering: crispEdges; }
 #chart1 .bands .hoved { fill-opacity: .6; }
 #chart1 .sticks rect { pointer-events: none; shape-rendering: crispEdges; }
 #chart1 .sticks .rise, #chart1 .candles .rise { fill: lightgrey; } 
 #chart1 .sticks .fall, #chart1 .candles .fall { fill: turquoise; }
 #chart1 .sticks .hoved { stroke: white; }
 #chart1 .candles .hoved { stroke: white; }
 #chart1 .candles rect { pointer-events: none; shape-rendering: crispEdges; }

 #chart1 .bbmn { fill: none; stroke: cyan; stroke-width: 1.5px; pointer-events: none; }
 #chart1 .bbup { fill: none; stroke: green; stroke-width: 1.5px; pointer-events: none; }
 #chart1 .bbdn { fill: none; stroke: crimson; stroke-width: 1.5px; pointer-events: none; }

 #chart1 .volumebar { fill: darkgrey; } 
 #chart1 .volumebar rect { pointer-events: none; }
 #chart1 .volumebar .hoved { fill: white; }
 #chart1 .sigmabar { fill: darkgrey; } 
 #chart1 .sigmabar rect { pointer-events: none; }
 #chart1 .sigmabar .hoved { fill: white; }

 #option    { width: 230px; height: 25px; float: left; padding-top: 5px; }
 #option input { cursor: pointer; border-radius: 5px; color: #fff; background: #696d75; border: none; }
 #option input {
                -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
                -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
                box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
              }
 #option .active { cursor: auto; background: #94979d; }
 #option .active {
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
              }
 #infobar   { width: 440px; height: 25px; float: left; padding-top: 5px; text-align: left; }
 .infohead  { width: 140px; height: 25px; margin: 0px 2px; float: left; }
 .infobox   { width: 70px; height: 30px; margin: 0px 2px; float: left; }

 .subdet    { width: 300px; height: 15px; margin: 5px 0px; display: block; }
 .subsel    { width: 20px; height: 15px; float:left; font-size: x-small; }
 .subsel input { cursor: pointer; border-radius: 5px; color: #fff; background: #696d75; font-size: x-small; border: none; }
 .subsel input {
                -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
                -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
                box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
              }
 .subsel .active { cursor: auto; background: #94979d; }
 .subsel .active {
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
              }
 .subname   { width: 80px; height: 15px; float:left; font-size: x-small; text-align: left; }
 .subchart  { width: 170px; height: 15px; float:left; }
 .subtext   { width: 20px; height: 15px; float:left; font-size: x-small; text-align: left; }
 .subunit   { width: 10px; height: 15px; float:left; font-size: x-small; text-align: left; }

 #volchart .volbar .volfill { fill: crimson; } 
 #volchart .sigbar .sigfill { fill: crimson; } 
 #volchart .bobbar .bobfill { fill: crimson; } 
 #volchart .aurbar .aurfill { fill: crimson; } 
 #volchart .crrbar .crrfill { fill: crimson; } 
 #volchart input { cursor: pointer; }
diff --git a/thumbnail.png b/thumbnail.png
TIMESTAMP	CLOSE	MEAN	SIGMA	AURMU	AURSG
2015-04-13	1038.8	1041.24	13.56	1082.48	31.27
2015-04-15	1031.65	1040.97	14.43	1084.07	31.58
2015-04-16	1029.65	1039.66	12.91	1084.4	32.05
2015-04-17	1018.25	1037.88	13.18	1084.51	32.55
2015-04-20	1005.1	1035.66	14.82	1086.51	33.22
2015-04-21	1003	1032.95	15.87	1086.19	34.26
2015-04-22	1013.1	1030.63	15.82	1085.83	35.3
2015-04-23	1013.5	1029.29	17.58	1085.6	36.06
2015-04-24	1006.45	1027.52	14.8	1085.29	36.78
2015-04-27	1005.45	1025.32	18.09	1087.1	37.6
2015-04-28	1004.55	1022.94	17.76	1086.61	38.43
2015-04-29	993.15	1020.51	20.84	1085.88	39.23
2015-04-30	988.8	1017.43	13.08	1085.01	40.24
2015-05-04	1000.95	1016.07	13.29	1087.29	41.3
2015-05-05	987.65	1013.9	14.21	1086.28	42.1
2015-05-06	970.6	1010.28	15.06	1085.02	43.14
2015-05-07	951.3	1005.57	15.77	1083.55	44.47
2015-05-08	982	1002.43	13.89	1082.27	46.19
2015-05-11	990.3	1000.84	14.05	1083.1	47.1
2015-05-12	971.95	998.25	15.39	1081.63	47.85
2015-05-13	990.25	996.86	15.2	1080.38	48.87
2015-05-14	991.05	995.68	16.1	1079.13	49.49
2015-05-15	990.1	995.18	15.89	1077.95	50.07
2015-05-18	1009.85	995.82	14.31	1078.78	50.64
2015-05-19	1007.55	996.95	14.06	1077.84	50.93
2015-05-20	1024.05	999.18	12.59	1077.11	51.24
2015-05-21	1024.7	1001.34	12.76	1076.67	51.37
2015-05-22	1024.3	1003.44	10.88	1076.68	51.5
2015-05-25	1023.55	1005.42	14.87	1078.46	51.61
2015-05-26	1027.4	1007.09	15.7	1078.37	51.75
2015-05-27	1038.15	1009.41	15.12	1078.4	51.83
2015-05-28	1029.4	1011.25	13.51	1078.94	51.87
2015-05-29	1050.55	1014.17	13.81	1079.51	51.96
2015-06-01	1036.2	1017.06	15.08	1081.81	51.94
2015-06-02	1008.8	1017.47	13.71	1081.86	52.01
2015-06-03	1005.55	1016.68	14.31	1081.6	52.3
2015-06-04	1014.95	1015.82	14.57	1081.2	52.61
2015-06-05	1011.75	1015.43	14.5	1080.93	52.72
2015-06-08	1003.45	1014.31	14.62	1082.22	52.8
2015-06-09	1001.85	1013.22	14.1	1081.95	52.97
2015-06-10	1015.6	1013.14	12.85	1081.81	52.98
2015-06-11	1000.2	1012.56	13.24	1081.37	52.86
2015-06-12	1009.15	1011.49	12.11	1080.97	52.87
2015-06-15	1005.2	1011.0	12.94	1082.4	52.5
2015-06-16	1008.4	1010.2	11.87	1082.07	51.66
2015-06-17	1004.7	1009.79	12.24	1081.64	51.09
2015-06-18	1019.6	1010.58	11.62	1081.45	49.73
2015-06-19	1030.5	1011.61	10.45	1081.43	48.66
2015-06-22	1047.15	1015.13	14.21	1083.4	47.46
2015-06-23	1052.1	1018.73	14.34	1083.82	46.62
2015-06-24	1045.8	1021.42	15.6	1084.29	45.71
2015-06-25	1065	1024.78	11.73	1085.01	44.62
2015-06-26	1062.85	1027.93	11.72	1085.62	44.03
2015-06-29	1056.65	1029.33	12.84	1087.58	43.69
2015-06-30	1067.15	1031.96	12.27	1088.14	43.1
2015-07-01	1072.35	1035.64	11.62	1088.82	42.49
2015-07-02	1058.2	1037.94	13.48	1089.26	41.55
2015-07-03	1074.25	1040.77	12.92	1089.76	40.75
2015-07-06	1083.5	1043.73	13.8	1092.0	40.05
2015-07-07	1086.85	1047.56	12.96	1092.79	39.27
2015-07-08	1068.85	1049.85	14.13	1093.2	38.41
2015-07-09	1074.05	1051.64	14.3	1093.59	37.56
2015-07-10	1090.75	1054.74	13.68	1094.27	36.91
2015-07-13	1096.15	1058.52	13.62	1096.66	36.42
2015-07-14	1091.85	1061.71	14.41	1097.5	36.27
2015-07-15	1096.7	1064.95	14.08	1098.42	36.26
2015-07-16	1114.7	1069.1	13.54	1099.62	36.08
2015-07-17	1110.55	1072.92	13.81	1100.78	35.85
2015-07-20	1115.25	1076.52	16.45	1103.5	35.31
2015-07-21	1098.05	1079.74	16.38	1104.43	34.81
2015-07-22	1114.4	1082.41	15.01	1105.31	34.46
2015-07-23	1107.9	1084.84	15.09	1106.04	33.92
2015-07-24	1107.85	1087.15	14.51	1106.74	33.88
2015-07-27	1095.85	1088.16	17.22	1108.96	33.94
2015-07-28	1108.5	1089.86	17.91	1109.66	33.77
2015-07-29	1108.35	1091.74	20.81	1110.47	33.78
2015-07-30	1110.55	1093.54	13.04	1111.24	33.93
2015-07-31	1111.65	1095.06	13.29	1112.01	34.04
2015-08-03	1095.4	1095.74	14.36	1114.32	34.07
2015-08-04	1086.45	1095.3	13.44	1114.78	33.81
2015-08-05	1092.2	1095.0	13.27	1115.25	33.65
2015-08-06	1095.95	1095.0	12.93	1115.75	33.48
2015-08-07	1092.65	1094.71	12.27	1116.07	33.47
2015-08-10	1094.65	1095.17	12.58	1118.16	33.5
2015-08-11	1094.7	1094.83	12.91	1118.45	33.56
2015-08-12	1070.45	1093.25	13.3	1118.35	33.61
2015-08-13	1077.55	1091.81	13.1	1118.13	33.6
2015-08-14	1101.8	1092.24	12.91	1118.24	33.58
2015-08-17	1091.5	1092.2	13.32	1119.81	33.73
2015-08-18	1086.35	1091.53	13.17	1119.63	33.77
2015-08-19	1081.85	1090.64	13.6	1119.22	33.79
2015-08-20	1074.7	1089.4	13.2	1118.68	33.8
2015-08-21	1061.3	1086.73	14.32	1117.92	33.8
2015-08-24	1019.05	1081.16	28.75	1118.17	33.74
2015-08-25	1018.45	1075.42	24.3	1116.93	34.16
2015-08-26	1013.5	1070.24	24.62	1115.71	34.57
2015-08-27	1022.1	1065.7	16.35	1114.48	35.03
2015-08-28	1027.95	1062.58	15.2	1113.41	35.32
2015-08-31	1027.45	1059.19	15.89	1113.67	35.48
2015-09-01	1000.1	1054.07	18.52	1112.23	35.53
2015-09-02	995.15	1048.63	18.31	1110.7	35.96
2015-09-03	1010.3	1044.95	16.31	1109.36	36.53
2015-09-04	996.05	1040.13	18.1	1107.7	36.81
2015-09-07	984.45	1035.85	19.29	1107.37	37.25
2015-09-08	1004.05	1032.0	17.47	1105.72	37.86
2015-09-09	1016.3	1030.57	16.77	1104.57	38.09
2015-09-10	1011	1028.17	17.08	1103.27	38.04
2015-09-11	1010.5	1026.63	16.71	1102.02	37.99
2015-09-14	1019.7	1025.51	18.32	1101.96	38.05
2015-09-15	1013.15	1024.4	18.1	1100.75	37.86
2015-09-16	1023.35	1024.18	17.44	1099.75	37.47
2015-09-18	1049.75	1026.8	14.46	1099.73	36.59
2015-09-21	1052.95	1028.72	16.11	1100.14	36.21
2015-09-22	1030.65	1030.32	18.32	1099.33	35.92
2015-09-23	1049.2	1031.12	16.93	1098.46	35.41
2015-09-24	1051.4	1032.3	14.93	1097.61	35.14
2015-09-28	1046.4	1034.09	15.87	1098.38	34.89
2015-09-29	1064.8	1036.13	15.57	1097.65	34.63
2015-09-30	1068.8	1039.01	14.89	1097.12	34.59
2015-10-01	1067.65	1041.53	15.29	1096.52	34.55
2015-10-05	1098.35	1046.27	15.43	1097.82	34.58
2015-10-06	1085.95	1049.98	15.09	1097.45	34.9
2015-10-07	1087.75	1053.53	15.14	1097.12	35.07
2015-10-08	1083.1	1055.96	14.97	1096.71	35.24
2015-10-09	1086.15	1058.81	14.56	1096.47	35.37
2015-10-12	1080.55	1061.36	15.41	1097.18	35.54
2015-10-13	1076.35	1062.79	14.78	1096.68	35.64
2015-10-14	1084.75	1064.45	14.45	1096.18	35.69
2015-10-15	1084.15	1066.64	15.61	1095.82	35.84
2015-10-16	1100.05	1069.17	14.33	1095.72	35.84
2015-10-19	1097.8	1071.8	16.4	1096.46	35.98
2015-10-20	1094.9	1074.07	16.67	1096.19	36.15
2015-10-21	1095	1076.03	14.84	1095.92	36.25
2015-10-23	1108.5	1078.91	12.93	1096.21	36.24
2015-10-26	1101.5	1081.0	17.47	1096.94	36.37
2015-10-27	1110.9	1083.48	18.51	1097.04	36.51
2015-10-28	1111.5	1086.39	18.99	1097.24	36.59
2015-10-29	1103.55	1088.19	13.83	1097.3	36.77
2015-10-30	1099.6	1089.33	13.87	1097.23	36.76
2015-11-02	1083.1	1088.68	15.24	1097.72	36.72
2015-11-03	1084.9	1088.49	14.49	1097.39	36.49
2015-11-04	1081.7	1088.68	14.41	1097.09	36.42
2015-11-05	1079.85	1087.61	15.07	1096.56	36.42
2015-11-06	1080.9	1087.25	15.52	1096.28	36.45
2015-11-09	1064.8	1084.84	13.75	1096.38	36.49
2015-11-10	1054.6	1082.33	13.06	1095.69	36.48
2015-11-11	1054.4	1079.85	12.66	1094.8	36.47
2015-11-13	1052.05	1077.26	13.13	1094.2	36.47
2015-11-16	1060.95	1075.59	13.14	1094.14	36.49
2015-11-17	1060.8	1074.1	12.63	1093.39	36.47
2015-11-18	1048.6	1072.41	13.46	1092.57	36.43
2015-11-19	1068.9	1071.54	12.57	1091.95	36.45
2015-11-20	1070.85	1071.74	11.17	1091.47	36.42
2015-11-23	1066.05	1071.28	14.01	1091.56	36.35
2015-11-24	1064.35	1070.97	13.82	1091.05	36.25
2015-11-26	1063.95	1070.31	11.68	1090.65	36.25
2015-11-27	1079.4	1070.94	11.51	1090.25	36.23
2015-11-30	1077.75	1071.41	11.79	1090.54	36.17
2015-12-01	1083	1072.24	11.03	1090.38	36.07
2015-12-02	1077.8	1072.96	11.27	1090.2	36.06
2015-12-03	1076.75	1073.2	11.65	1089.92	35.98
2015-12-04	1058.9	1072.19	11.41	1089.51	35.68
2015-12-07	1061.95	1071.51	11.58	1089.66	35.4
2015-12-08	1049.25	1069.7	11.6	1088.91	35.08
2015-12-09	1047.45	1068.03	12.13	1088.09	34.96
2015-12-10	1060.6	1067.03	11.82	1087.36	34.66
2015-12-11	1046.35	1065.49	12.22	1086.54	34.46
2015-12-14	1055.05	1064.31	13.48	1086.21	34.24
2015-12-15	1059.45	1063.37	13.27	1085.34	34.16
2015-12-16	1067.3	1063.65	12.79	1084.66	33.98
2015-12-17	1080.25	1064.58	11.18	1084.1	33.85
2015-12-18	1073	1065.33	10.58	1083.53	33.82
2015-12-21	1075.4	1066.08	10.31	1083.47	33.72
2015-12-22	1066.45	1066.43	9.73	1082.79	33.8
2015-12-23	1074.1	1067.06	8.86	1082.09	33.85
2015-12-24	1074	1067.53	8.84	1081.44	33.95
2015-12-28	1077.25	1068.3	10.33	1081.53	34.04
2015-12-29	1077.95	1069.11	11.35	1081.14	34.18
2015-12-30	1074.3	1069.74	12.46	1080.83	34.32
2015-12-31	1082.15	1070.84	10.14	1080.47	34.43
2016-01-01	1088.75	1072.26	9.95	1080.17	34.63
2016-01-04	1070.5	1072.35	11.52	1080.03	34.92
2016-01-05	1062.4	1071.78	11.35	1079.4	34.96
2016-01-06	1067.1	1071.52	11.06	1078.81	35.0
2016-01-07	1056.2	1070.29	12.34	1078.02	35.08
2016-01-08	1062.35	1069.42	12.17	1077.41	35.11
2016-01-11	1058.6	1068.09	12.96	1076.94	35.15
2016-01-12	1046.95	1066.32	12.47	1075.97	35.1
2016-01-13	1060.15	1064.73	11.69	1074.98	34.43
2016-01-14	1049.75	1063.33	13.27	1074.15	33.79
2016-01-15	1042.15	1061.9	13.57	1073.38	32.99
2016-01-18	1025.85	1059.27	15.56	1072.55	32.36
2016-01-19	1035.8	1056.89	14.08	1071.46	31.89
2016-01-20	1018.3	1053.15	15.2	1070.09	31.36
2016-01-21	1023	1050.26	15.46	1069.01	30.24
2016-01-22	1030.3	1048.7	16.61	1068.27	28.92
2016-01-25	1041.15	1047.83	15.46	1067.82	27.98
2016-01-27	1035.65	1047.07	18.71	1067.33	26.56
2016-01-28	1031.7	1046.06	12.33	1066.79	24.59
2016-01-29	1049.85	1045.99	12.23	1066.4	23.3
2016-02-01	1059.75	1047.35	12.32	1066.55	22.35
2016-02-02	1053.8	1048.54	11.86	1066.69	21.26
2016-02-03	1043.85	1048.3	12.31	1066.68	20.05
2016-02-04	1049.2	1048.53	12.09	1066.87	19.05
2016-02-05	1055.25	1049.21	11.69	1067.08	17.77
2016-02-08	1035.85	1049.13	12.71	1067.29	16.83
2016-02-09	1026.05	1047.02	13.11	1066.92	16.58
2016-02-10	1012.95	1044.37	14.01	1066.47	16.48
2016-02-11	975.3	1039.56	16.55	1065.67	16.07
2016-02-12	971.4	1033.92	15.46	1064.49	17.39
2016-02-15	973.6	1028.92	15.69	1063.29	18.76
2016-02-16	973.45	1023.69	15.16	1061.92	19.81
2016-02-17	974.9	1018.76	14.61	1060.61	20.96
2016-02-18	989.45	1015.6	12.53	1059.61	21.96
2016-02-19	989.3	1012.6	12.83	1058.63	22.5
2016-02-22	988.75	1010.58	14.13	1057.93	22.87
2016-02-23	970.05	1007.07	15.93	1056.83	23.32
2016-02-24	949.6	1002.19	22.23	1055.42	24.14
2016-02-25	942.65	997.28	12.99	1053.97	25.51
2016-02-26	961	993.97	12.95	1052.71	26.94
2016-02-29	971.85	991.48	13.84	1051.55	27.73
2016-03-01	984.15	990.48	13.36	1050.57	28.23
2016-03-02	1007.2	991.75	13.57	1049.84	28.44
2016-03-03	1015.85	993.84	12.7	1049.38	28.41
2016-03-04	1020.55	995.32	12.38	1048.91	28.2
2016-03-08	1014.15	997.15	13.93	1048.77	28.01
2016-03-09	1024.8	999.05	14.0	1048.63	27.86
2016-03-10	1021.25	1000.91	14.08	1048.52	27.69
2016-03-11	1028.7	1003.1	14.16	1048.43	27.33
2016-03-14	1027.55	1005.58	14.32	1048.36	27.11
2016-03-15	1026.7	1007.4	14.2	1048.11	26.72
2016-03-16	1030.45	1008.98	14.05	1047.86	26.31
2016-03-17	1018.4	1010.81	12.67	1047.68	26.05
2016-03-18	1028.4	1012.3	11.49	1047.39	25.8
2016-03-21	1045.6	1014.82	11.94	1047.39	25.77
2016-03-22	1053.85	1017.89	11.24	1047.53	25.88
2016-03-23	1049.35	1020.45	10.81	1047.7	26.13
2016-03-28	1047.5	1023.01	14.74	1047.95	26.32
2016-03-29	1053.8	1025.91	16.26	1048.19	26.47
2016-03-30	1064.95	1029.3	18.41	1048.55	26.75
2016-03-31	1071.15	1033.27	13.42	1049.01	27.19
2016-04-01	1064.45	1035.96	13.77	1049.23	27.71
2016-04-04	1069.05	1038.89	14.1	1049.36	28.08
2016-04-05	1057.45	1041.19	13.23	1049.42	28.54
2016-04-06	1061.5	1043.17	12.46	1049.55	28.79
2016-04-07	1055.5	1044.36	11.43	1049.57	29.05
2016-04-08	1059.35	1045.61	11.27	1049.6	29.26
2016-04-11	1070.95	1046.47	11.78	1049.66	29.51
2016-04-12	1063	1048.02	11.64	1049.81	29.93
2016-04-13	1081.75	1050.82	11.42	1050.25	30.22
2016-04-18	1087.8	1054.07	13.76	1050.99	30.81
2016-04-20	1097.85	1057.69	14.6	1051.75	31.44
	function barchart() {

	var margin = {top: 300, right: 30, bottom: 10, left: 5 },
	width = 620, height = 60, mname = "mbar1";

	var MValue = "TURNOVER";

	function barrender(selection) {
	selection.each(function(data) {

	var x = d3.scale.ordinal()
	.rangeBands([0, width]);

	var y = d3.scale.linear()
	.rangeRound([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.tickFormat(d3.time.format(TFormat[TIntervals[TPeriod]]));

	var yAxis = d3.svg.axis()
	.scale(y)
	.ticks(Math.floor(height/50));

	var svg = d3.select(this).select("svg")
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	x.domain(data.map(function(d) { return d.TIMESTAMP; }));
	y.domain([0, d3.max(data, function(d) { return d[MValue]; })]).nice();

	var xtickdelta = Math.ceil(60/(width/data.length))
	xAxis.tickValues(x.domain().filter(function(d, i) { return !((i+Math.floor(xtickdelta/2)) % xtickdelta); }));

	svg.append("g")
	.attr("class", "axis yaxis")
	.attr("transform", "translate(" + width + ",0)")
	.call(yAxis.orient("right").tickFormat("").tickSize(0));

	// svg.append("g")
	// .attr("class", "axis yaxis")
	// .attr("transform", "translate(0,0)")
	// .call(yAxis.orient("left"));

	var barwidth = x.rangeBand();
	var fillwidth = (Math.floor(barwidth0.9)/2)2+1;
	var bardelta = Math.round((barwidth-fillwidth)/2);

	var mbar = svg.selectAll("."+mname+"bar")
	.data([data])
	.enter().append("g")
	.attr("class", mname+"bar");

	mbar.selectAll("rect")
	.data(function(d) { return d; })
	.enter().append("rect")
	.attr("class", mname+"fill")
	.attr("x", function(d) { return x(d.TIMESTAMP) + bardelta; })
	.attr("y", function(d) { return y(d[MValue]); })
	.attr("class", function(d, i) { return mname+i; })
	.attr("height", function(d) { return y(0) - y(d[MValue]); })
	.attr("width", fillwidth);
	});
	} // barrender
	barrender.mname = function(value) {
	if (!arguments.length) return mname;
	mname = value;
	return barrender;
	};

	barrender.margin = function(value) {
	if (!arguments.length) return margin.top;
	margin.top = value;
	return barrender;
	};

	barrender.MValue = function(value) {
	if (!arguments.length) return MValue;
	MValue = value;
	return barrender;
	};

	return barrender;
	} // barchart
	function cschart() {

	var margin = {top: 0, right: 30, bottom: 40, left: 5},
	width = 620, height = 300, Bheight = 460;

	var overlay = "none";

	function csrender(selection) {
	selection.each(function() {

	var interval = TIntervals[TPeriod];
	var mean = (overlay=="aur")?"AURMU":"MEAN";
	var sigma = (overlay=="aur")?"AURSG":"SIGMA";
	var ovrData = (overlay=="crr")?crrData:bobData;

	var minimal = d3.min([d3.min(genData, function(d) { return d.LOW; }),
	d3.min(ovrData, function(d) { return d[mean] - d[sigma]*2; })]);
	var maximal = d3.max([d3.max(genData, function(d) { return d.HIGH; }),
	d3.max(ovrData, function(d) { return d[mean] + d[sigma]*2; })]);

	var extRight = width + margin.right
	var x = d3.scale.ordinal()
	.rangeBands([0, width]);

	var y = d3.scale.linear()
	.rangeRound([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.tickFormat(d3.time.format(TFormat[interval]));

	var yAxis = d3.svg.axis()
	.scale(y)
	.ticks(Math.floor(height/50));

	x.domain(genData.map(function(d) { return d.TIMESTAMP; }));
	y.domain([minimal, maximal]).nice();

	var xtickdelta = Math.ceil(60/(width/genData.length))
	xAxis.tickValues(x.domain().filter(function(d, i) { return !((i+Math.floor(xtickdelta/2)) % xtickdelta); }));

	var barwidth = x.rangeBand();
	var candlewidth = Math.floor(d3.min([barwidth0.8, 13])/2)2+1;
	var delta = Math.round((barwidth-candlewidth)/2);

	if (overlay != "none") {
	var lineM = d3.svg.line().interpolate("basis")
	.x(function(d) { return x(d.TIMESTAMP) + barwidth/2; })
	.y(function(d) { return y(d[mean]); });

	var lineU = d3.svg.line().interpolate("basis")
	.x(function(d) { return x(d.TIMESTAMP) + barwidth/2; })
	.y(function(d) { return y(d[mean] + d[sigma]*2); });

	var lineL = d3.svg.line().interpolate("basis")
	.x(function(d) { return x(d.TIMESTAMP) + barwidth/2; })
	.y(function(d) { return y(d[mean] - d[sigma]*2); });
	}

	d3.select(this).select("svg").remove();
	var svg = d3.select(this).append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", Bheight + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.append("g")
	.attr("class", "axis xaxis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis.orient("bottom").outerTickSize(0));

	// svg.append("g")
	// .attr("class", "axis xaxis")
	// .attr("transform", "translate(0,0)")
	// .call(xAxis.orient("top"));

	svg.append("g")
	.attr("class", "axis yaxis")
	.attr("transform", "translate(" + width + ",0)")
	.call(yAxis.orient("right").tickSize(0));

	// svg.append("g")
	// .attr("class", "axis yaxis")
	// .attr("transform", "translate(0,0)")
	// .call(yAxis.orient("left"));

	svg.append("g")
	.attr("class", "axis grid")
	.attr("transform", "translate(" + width + ",0)")
	.call(yAxis.orient("left").tickFormat("").tickSize(width).outerTickSize(0));

	var bands = svg.selectAll(".bands")
	.data([genData])
	.enter().append("g")
	.attr("class", "bands");

	bands.selectAll("rect")
	.data(function(d) { return d; })
	.enter().append("rect")
	.attr("x", function(d) { return x(d.TIMESTAMP) + Math.floor(barwidth/2); })
	.attr("y", 0)
	.attr("height", Bheight)
	.attr("width", 1)
	.attr("class", function(d, i) { return "band"+i; })
	.style("stroke-width", Math.floor(barwidth));

	var stick = svg.selectAll(".sticks")
	.data([genData])
	.enter().append("g")
	.attr("class", "sticks");

	stick.selectAll("rect")
	.data(function(d) { return d; })
	.enter().append("rect")
	.attr("x", function(d) { return x(d.TIMESTAMP) + Math.floor(barwidth/2); })
	.attr("y", function(d) { return y(d.HIGH); })
	.attr("class", function(d, i) { return "stick"+i; })
	.attr("height", function(d) { return y(d.LOW) - y(d.HIGH); })
	.attr("width", 1)
	.classed("rise", function(d) { return (d.CLOSE>d.OPEN); })
	.classed("fall", function(d) { return (d.OPEN>d.CLOSE); });

	var candle = svg.selectAll(".candles")
	.data([genData])
	.enter().append("g")
	.attr("class", "candles");

	candle.selectAll("rect")
	.data(function(d) { return d; })
	.enter().append("rect")
	.attr("x", function(d) { return x(d.TIMESTAMP) + delta; })
	.attr("y", function(d) { return y(d3.max([d.OPEN, d.CLOSE])); })
	.attr("class", function(d, i) { return "candle"+i; })
	.attr("height", function(d) { return y(d3.min([d.OPEN, d.CLOSE])) - y(d3.max([d.OPEN, d.CLOSE])); })
	.attr("width", candlewidth)
	.classed("rise", function(d) { return (d.CLOSE>d.OPEN); })
	.classed("fall", function(d) { return (d.OPEN>d.CLOSE); });

	if (overlay != "none") {
	svg.append("path")
	.datum(ovrData)
	.attr("class", "bbmn")
	.attr("d", lineM);

	svg.append("path")
	.datum(ovrData)
	.attr("class", "bbup")
	.attr("d", lineU);

	svg.append("path")
	.datum(ovrData)
	.attr("class", "bbdn")
	.attr("d", lineL);
	}

	});
	} // csrender

	csrender.Bheight = function(value) {
	if (!arguments.length) return Bheight;
	Bheight = value;
	return csrender;
	};

	csrender.overlay = function(value) {
	if (!arguments.length) return overlay;
	overlay = value;
	return csrender;
	};

	return csrender;
	} // cschart
	function csheader() {

	function cshrender(selection) {
	selection.each(function(data) {

	var interval = TIntervals[TPeriod];
	var format = (interval=="month")?d3.time.format("%b %Y"):d3.time.format("%b %d %Y");
	var dateprefix = (interval=="month")?"Month of ":(interval=="week")?"Week of ":"";
	d3.select("#infodate").text(dateprefix + format(data.TIMESTAMP));
	d3.select("#infoopen").text("O " + data.OPEN);
	d3.select("#infohigh").text("H " + data.HIGH);
	d3.select("#infolow").text("L " + data.LOW);
	d3.select("#infoclose").text("C " + data.CLOSE);

	});
	} // cshrender

	return cshrender;
	} // csheader
	function genType(d) {
	d.TIMESTAMP = parseDate(d.TIMESTAMP);
	d.LOW = +d.LOW;
	d.HIGH = +d.HIGH;
	d.OPEN = +d.OPEN;
	d.CLOSE = +d.CLOSE;
	d.TURNOVER = +d.TURNOVER;
	d.VOLATILITY = +d.VOLATILITY;
	return d;
	}

	function bobType(d) {
	d.TIMESTAMP = parseDate(d.TIMESTAMP);
	d.CLOSE = +d.CLOSE;
	d.MEAN = +d.MEAN;
	d.SIGMA = +d.SIGMA;
	d.AURMU = +d.AURMU;
	d.AURSG = +d.AURSG;
	return d;
	}

	function crrType(d) {
	d.TIMESTAMP = parseDate(d.TIMESTAMP);
	d.CLOSE = +d.CLOSE;
	d.MEAN = +d.MEAN;
	d.SIGMA = +d.SIGMA;
	return d;
	}

	function timeCompare(date, interval) {
	if (interval == "week") { var durfn = d3.time.monday(date); }
	else if (interval == "month") { var durfn = d3.time.month(date); }
	else { var durfn = d3.time.day(date); }
	return durfn;
	}

	function dataCompress(data, interval) {
	var compressedData = d3.nest()
	.key(function(d) { return timeCompare(d.TIMESTAMP, interval); })
	.rollup(function(v) { return {
	TIMESTAMP: timeCompare(d3.values(v).pop().TIMESTAMP, interval),
	OPEN: d3.values(v).shift().OPEN,
	LOW: d3.min(v, function(d) { return d.LOW; }),
	HIGH: d3.max(v, function(d) { return d.HIGH; }),
	CLOSE: d3.values(v).pop().CLOSE,
	EMEAN: d3.mean(v, function(d) { return (interval=="week")?d.EMEANW:(interval=="month")?d.EMEANM:d.EMEAND; }),
	TURNOVER: d3.mean(v, function(d) { return d.TURNOVER; }),
	VOLATILITY: d3.mean(v, function(d) { return d.VOLATILITY; })
	}; })
	.entries(data).map(function(d) { return d.values; });

	return compressedData;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>anilnair.xyz</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	<style type="text/css" media="screen">@import "style.css";</style>
	</head>
	<body>
	<div class="pagetitle">
	<h1 id="stkname">HDFC Bank Limited</h1>
	</div> <!-- pagetitle -->
	<div class="evalbox">
	<div id="overview">
	<div id="overtext">
	<table>
	<tr class="ohead"> <td class="ocol0">NSE Price</td>
	<td class="ocol1 poscol"><span class="pricev">1071.15</span> (0.58%)</td> </tr>
	<tr class="obody"> <td class="ocol0">Sector</td> <td class="ocol1">Finance</td> </tr>
	<tr class="obody"> <td class="ocol0">Industry</td> <td class="ocol1">Private Sector Bank</td> </tr>
	<tr class="obody"> <td class="ocol0">Market Cap</td> <td class="ocol1">270000 Cr</a></div>
	<tr class="obody"> <td class="ocol0">Category</td> <td class="ocol1">Large Cap</a></div>
	</table>
	</div> <!-- overtext -->
	<div id="volchart">
	<div class="subdet">
	<div class="subsel"></div>
	<div class="subname">Volume</div>
	<div class="subchart"><div id="Schart1"></div></div>
	<div class="subtext"><div id="Schart1T"></div></div>
	<div class="subunit">Cr</div>
	</div>
	<div class="subdet">
	<div class="subsel"></div>
	<div class="subname">Volatility</div>
	<div class="subchart"><div id="Schart2"></div></div>
	<div class="subtext"><div id="Schart2T"></div></div>
	<div class="subunit">%</div>
	</div>
	<div class="subdet">
	<div class="subsel"><input id="bobSel" name="bob" type="button" value=""/></div>
	<div class="subname">Bollinger Band</div>
	<div class="subchart"><div id="Schart3"></div></div>
	<div class="subtext"><div id="Schart3T"></div></div>
	<div class="subunit">%</div>
	</div>
	<div class="subdet">
	<div class="subsel"><input id="aurSel" name="aur" type="button" value=""/></div>
	<div class="subname">Auto Regress</div>
	<div class="subchart"><div id="Schart4"></div></div>
	<div class="subtext"><div id="Schart4T"></div></div>
	<div class="subunit">%</div>
	</div>
	<div class="subdet">
	<div class="subsel"><input id="crrSel" name="crr" type="button" value=""/></div>
	<div id=crrname class="subname"></div>
	<div class="subchart"><div id="Schart5"></div></div>
	<div class="subtext"><div id="Schart5T"></div></div>
	<div class="subunit">%</div>
	</div>
	</div> <!-- volchart -->
	<div id="flower"></div>
	</div> <!-- overview -->
	<div id="dailybox">
	<div id="option">
	<input id="oneM" name="1M" type="button" value="1M"/>
	<input id="threeM" name="3M" type="button" value="3M" />
	<input id="sixM" name="6M" type="button" value="6M" />
	<input id="oneY" name="1Y" type="button" value="1Y" />
	<input id="twoY" name="2Y" type="button" value="2Y" />
	<input id="fourY" name="4Y" type="button" value="4Y" />
	</div>
	<div id="infobar">
	<div id="infodate" class="infohead"></div>
	<div id="infoopen" class="infobox"></div>
	<div id="infohigh" class="infobox"></div>
	<div id="infolow" class="infobox"></div>
	<div id="infoclose" class="infobox"></div>
	</div>
	<div id="chart1"></div>
	</div> <!-- dailybox -->
	</div> <!-- evalbox -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
	<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
	<script src="cschart.js"></script>
	<script src="barchart.js"></script>
	<script src="csheader.js"></script>
	<script src="sbar.js"></script>
	<script src="main.js"></script>
	<script src="dataprep.js"></script>
	<script>
	var parseDate = d3.time.format("%Y-%m-%d").parse;
	var TPeriod = "3M";
	var TDays = {"1M":21, "3M":63, "6M":126, "1Y":252, "2Y":504, "4Y":1008 };
	var TIntervals = {"1M":"day", "3M":"day", "6M":"day", "1Y":"week", "2Y":"week", "4Y":"month" };
	var TFormat = {"day":"%d %b '%y", "week":"%d %b '%y", "month":"%b '%y" };
	var TOverlay = "none";
	var genRaw, bobRaw, crrRaw, genData, bobData, crrData;
	var ldRemain = 3;

	d3.csv("general.csv", genType, function(data) {
	genRaw = data;
	if (!--ldRemain) mainjs();
	});

	d3.csv("autocorr.csv", bobType, function(data) {
	bobRaw = data;
	if (!--ldRemain) mainjs();
	});

	d3.csv("crosscorr.csv", crrType, function(data) {
	crrRaw = data;
	if (!--ldRemain) mainjs();
	});

	</script>
	</body>
	</html>
	function toSlice(data) { return data.slice(-TDays[TPeriod]); }

	function mainjs() {
	var toPress = function() { genData = (TIntervals[TPeriod]!="day")?dataCompress(toSlice(genRaw), TIntervals[TPeriod]):toSlice(genRaw);
	bobData = toSlice(bobRaw); crrData = toSlice(crrRaw); };
	toPress(); displayAll();
	d3.select("#oneM").on("click", function(){ TPeriod = "1M"; toPress(); displayAll(); });
	d3.select("#threeM").on("click", function(){ TPeriod = "3M"; toPress(); displayAll(); });
	d3.select("#sixM").on("click", function(){ TPeriod = "6M"; toPress(); displayAll(); });
	d3.select("#oneY").on("click", function(){ TPeriod = "1Y"; toPress(); displayAll(); });
	d3.select("#twoY").on("click", function(){ TPeriod = "2Y"; toPress(); displayAll(); });
	d3.select("#fourY").on("click", function(){ TPeriod = "4Y"; toPress(); displayAll(); });
	d3.select("#bobSel").on("click", function(){ TOverlay = (TOverlay=="bob")?"none":"bob"; displayAll(); });
	d3.select("#aurSel").on("click", function(){ TOverlay = (TOverlay=="aur")?"none":"aur"; displayAll(); });
	d3.select("#crrSel").on("click", function(){ TOverlay = (TOverlay=="crr")?"none":"crr"; displayAll(); });
	}

	function displayAll() {
	changeClass();
	displayCS();
	displayGen(genData.length-1);
	displayBob(bobData.length-1);
	d3.select("#crrname").text("StatArb-Nifty");
	displayCrr(crrData.length-1);
	}

	function changeClass() {
	if (TOverlay =="bob") {
	d3.select("#bobSel").classed("active", true);
	d3.select("#aurSel").classed("active", false);
	d3.select("#crrSel").classed("active", false);
	} else if (TOverlay =="aur") {
	d3.select("#bobSel").classed("active", false);
	d3.select("#aurSel").classed("active", true);
	d3.select("#crrSel").classed("active", false);
	} else if (TOverlay =="crr") {
	d3.select("#bobSel").classed("active", false);
	d3.select("#aurSel").classed("active", false);
	d3.select("#crrSel").classed("active", true);
	} else {
	d3.select("#bobSel").classed("active", false);
	d3.select("#aurSel").classed("active", false);
	d3.select("#crrSel").classed("active", false);
	}
	if (TPeriod =="1M") {
	d3.select("#oneM").classed("active", true);
	d3.select("#threeM").classed("active", false);
	d3.select("#sixM").classed("active", false);
	d3.select("#oneY").classed("active", false);
	d3.select("#twoY").classed("active", false);
	d3.select("#fourY").classed("active", false);
	} else if (TPeriod =="6M") {
	d3.select("#oneM").classed("active", false);
	d3.select("#threeM").classed("active", false);
	d3.select("#sixM").classed("active", true);
	d3.select("#oneY").classed("active", false);
	d3.select("#twoY").classed("active", false);
	d3.select("#fourY").classed("active", false);
	} else if (TPeriod =="1Y") {
	d3.select("#oneM").classed("active", false);
	d3.select("#threeM").classed("active", false);
	d3.select("#sixM").classed("active", false);
	d3.select("#oneY").classed("active", true);
	d3.select("#twoY").classed("active", false);
	d3.select("#fourY").classed("active", false);
	} else if (TPeriod =="2Y") {
	d3.select("#oneM").classed("active", false);
	d3.select("#threeM").classed("active", false);
	d3.select("#sixM").classed("active", false);
	d3.select("#oneY").classed("active", false);
	d3.select("#twoY").classed("active", true);
	d3.select("#fourY").classed("active", false);
	} else if (TPeriod =="4Y") {
	d3.select("#oneM").classed("active", false);
	d3.select("#threeM").classed("active", false);
	d3.select("#sixM").classed("active", false);
	d3.select("#oneY").classed("active", false);
	d3.select("#twoY").classed("active", false);
	d3.select("#fourY").classed("active", true);
	} else {
	d3.select("#oneM").classed("active", false);
	d3.select("#threeM").classed("active", true);
	d3.select("#sixM").classed("active", false);
	d3.select("#oneY").classed("active", false);
	d3.select("#twoY").classed("active", false);
	d3.select("#fourY").classed("active", false);
	}
	}

	function displayCS() {
	var chart = cschart().Bheight(460).overlay(TOverlay);
	d3.select("#chart1").call(chart);
	var chart = barchart().mname("volume").margin(320).MValue("TURNOVER");
	d3.select("#chart1").datum(genData).call(chart);
	var chart = barchart().mname("sigma").margin(400).MValue("VOLATILITY");
	d3.select("#chart1").datum(genData).call(chart);
	hoverAll();
	}

	function hoverAll() {
	d3.select("#chart1").select(".bands").selectAll("rect")
	.on("mouseover", function(d, i) {
	d3.select(this).classed("hoved", true);
	d3.select(".stick"+i).classed("hoved", true);
	d3.select(".candle"+i).classed("hoved", true);
	d3.select(".volume"+i).classed("hoved", true);
	d3.select(".sigma"+i).classed("hoved", true);
	displayGen(i);
	if (TIntervals[TPeriod]=="day") {
	displayBob(i);
	displayCrr(i);
	}
	})
	.on("mouseout", function(d, i) {
	d3.select(this).classed("hoved", false);
	d3.select(".stick"+i).classed("hoved", false);
	d3.select(".candle"+i).classed("hoved", false);
	d3.select(".volume"+i).classed("hoved", false);
	d3.select(".sigma"+i).classed("hoved", false);
	displayGen(genData.length-1);
	if (TIntervals[TPeriod]=="day") {
	displayBob(bobData.length-1);
	displayCrr(crrData.length-1);
	}
	});
	}

	function displayGen(mark) {
	var header = csheader();
	d3.select("#infobar").datum(genData.slice(mark)[0]).call(header);
	var sidech = sbar().sname("vol").index(mark);
	d3.select("#Schart1").datum(genData).call(sidech);
	var sidetx = sbarheader().sname("vol").index(mark);
	d3.select("#Schart1T").datum(genData).call(sidetx);
	var sidech = sbar().sname("sig").index(mark);
	d3.select("#Schart2").datum(genData).call(sidech);
	var sidetx = sbarheader().sname("sig").index(mark);
	d3.select("#Schart2T").datum(genData).call(sidetx);
	}

	function displayBob(mark) {
	var sidech = sbar().sname("bob").index(mark);
	d3.select("#Schart3").datum(bobData).call(sidech);
	var sidetx = sbarheader().sname("bob").index(mark);
	d3.select("#Schart3T").datum(bobData).call(sidetx);
	var sidech = sbar().sname("aur").index(mark);
	d3.select("#Schart4").datum(bobData).call(sidech);
	var sidetx = sbarheader().sname("aur").index(mark);
	d3.select("#Schart4T").datum(bobData).call(sidetx);
	}

	function displayCrr(mark) {
	var sidech = sbar().sname("crr").index(mark);
	d3.select("#Schart5").datum(crrData).call(sidech);
	var sidetx = sbarheader().sname("crr").index(mark);
	d3.select("#Schart5T").datum(crrData).call(sidetx);
	}
	function sbarheader() {

	var sname = "vol";
	var index = 0;

	function sheader(selection) {
	selection.each(function(data) {

	var interval = TIntervals[TPeriod];

	if (sname == "bob" \|\| sname == "crr") {
	var value = CumNormDist((data[index].CLOSE - data[index].MEAN)/(data[index].SIGMA));
	} else if (sname == "aur") {
	var value = CumNormDist((data[index].CLOSE - data[index].AURMU)/(data[index].AURSG));
	} else if (sname == "vol") {
	var value = Math.round(data[index].TURNOVER);
	} else if (sname == "sig") {
	var value = Math.round(data[index].VOLATILITY);
	}
	d3.select(this).text(value);
	});
	} // sheader

	sheader.index = function(value) {
	if (!arguments.length) return index;
	index = value;
	return sheader;
	};

	sheader.sname = function(value) {
	if (!arguments.length) return sname;
	sname = value;
	return sheader;
	};

	return sheader;
	} // sbarheader

	function sbar() {

	var width = 165, height = 15, sname = "vol";
	var index = 0;

	function sbarrender(selection) {
	selection.each(function(data) {

	var interval = TIntervals[TPeriod];

	var x = d3.scale.linear().clamp([true])
	.rangeRound([0, width]);

	d3.select(this).select("svg").remove();
	var svg = d3.select(this).append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(0,0)");

	if (sname == "bob" \|\| sname == "crr") {
	x.domain([data[index].MEAN - data[index].SIGMA*2,
	data[index].MEAN + data[index].SIGMA*2]).nice();
	} else if (sname == "aur") {
	x.domain([data[index].AURMU - data[index].AURSG*2,
	data[index].AURMU + data[index].AURSG*2]).nice();
	} else if (sname == "vol") {
	x.domain([d3.min(data, function(d) { return d.TURNOVER; }),
	d3.max(data, function(d) { return d.TURNOVER; })]).nice();
	} else if (sname == "sig") {
	x.domain([d3.min(data, function(d) { return d.VOLATILITY; }),
	d3.max(data, function(d) { return d.VOLATILITY; })]).nice();
	}

	var voldet = svg.selectAll("."+sname+"bar")
	.data([data[index]])
	.enter().append("g")
	.attr("class", sname+"bar");

	voldet.selectAll("."+sname+"fill")
	.data(function(d) { return [d]; })
	.enter().append("rect")
	.attr("class", sname+"fill")
	.attr("x", 0)
	.attr("y", 0)
	.attr("width", function(d) { return (sname=="vol")?x(d.TURNOVER):(sname=="sig")?x(d.VOLATILITY):x(d.CLOSE); })
	.attr("height", height);

	});
	} // sbarrender

	sbarrender.sname = function(value) {
	if (!arguments.length) return sname;
	sname = value;
	return sbarrender;
	};

	sbarrender.index = function(value) {
	if (!arguments.length) return index;
	index = value;
	return sbarrender;
	};

	return sbarrender;
	} // sbar

	function CumNormDist(x) {
	var b1 = 0.319381530;
	var b2 = -0.356563782;
	var b3 = 1.781477937;
	var b4 = -1.821255978;
	var b5 = 1.330274429;
	var p = 0.2316419;
	var c = 0.39894228;
	var t = 0;
	var nd = 0;
	if (x >= 0) {
	t = 1/(1 + p * x);
	nd = (1-cMath.exp(-xx/2)t(t(t(t(tb5+b4)+b3)+b2)+b1));
	} else {
	t = 1/(1 - p * x);
	nd = (cMath.exp(-xx/2)t(t(t(t(tb5+b4)+b3)+b2)+b1));
	}
	return Math.round(nd*100);
	}
	/* Title Container and standard components */
	/* =============================================== */
	.pagetitle {
	margin-top: 10px;
	text-align: left; }

	.pagetitle h1 {
	margin: 0;
	text-align: left;
	height: 20px;
	font-size: 150%; }

	.evalbox {
	margin-top: 10px;
	height: 310px; }

	.stdcatalog {
	margin: 0 0 5px;
	width: 360px;
	height: 310px;
	float: left; }

	.sectitle {
	margin-top: 5px;
	height: 30px; }

	.sectitle {
	background: linear-gradient(to right, #1f242d, #292f3b);
	display: table; }

	.sectitle h2 {
	margin: 3px 0 0;
	text-align: right;
	height: 20px;
	padding-right: 20px; }

	.sectitle h2 {
	text-transform: uppercase;
	vertical-align: middle;
	color: deepskyblue; }

	/* General Container */
	/* =============================================== */
	#overview {
	width: 310px;
	min-height: 500px;
	float: left; }

	#overtext {
	width: 310px;
	min-height: 100px; }

	#overtext td {
	vertical-align: middle; }

	.ohead {
	height: 50px;
	color: white; }

	.ocol0 {
	width: 100px;
	text-align: left; }

	.ocol1 {
	width: 200px;
	text-align: left;
	color: deepskyblue; }

	.obody {
	height: 20px;
	color: white; }

	.pricev {
	font-size: 200%; }

	#volchart {
	width: 300px;
	min-height: 110px;
	margin-top: 15px; }

	#dailybox {
	background: #10394B;
	margin: 0 0 5px; }

	#dailybox {
	width: 670px;
	height: 500px;
	float: left; }

	#dailybox {
	-webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
	box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75); }

	#candlebox {
	margin: 5px;
	width: 600px;
	height: 300px;
	float: left; }

	#candlecat {
	margin: 50px 0 10px 0;
	width: 40px;
	height: 200px;
	float: left; }

	.periodbut {
	background: #1f242d;
	margin: 5px 0 5px;
	width: 40px;
	height: 30px; }

	.periodbut {
	float: center;
	text-align: center;
	font-size: small;
	display: table; }

	.periodbut a {
	text-decoration: none;
	color: white;
	display: table-cell;
	vertical-align: middle; }

	/* *************************************************************************************** */
	/* Standard Combination */
	/* *************************************************************************************** */
	.pricomb, body {
	background: #00151C;
	font-family: "Montserrat", sans-serif;
	color: white; }

	.pricomb, body {
	font-size: small;
	text-align: center; }

	.b0comb, .pagetitle, .evalbox, .sectitle, #heading {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 30px; }

	.b1comb, .stdchart {
	background: #10394B;
	width: 620px;
	height: 310px;
	float: left;
	border-radius: 10px; }

	/* *************************************************************************************** */
	/* Body */
	/* *************************************************************************************** */
	body {
	margin: 0; }

	/* Gain / Loss Colors */
	/* =============================================== */
	.poscol {
	color: yellowgreen; }

	.negcol {
	color: crimson; }


	#chart1 .grid { stroke-opacity: .3; }
	#chart1 .axis line,
	#chart1 .axis.xaxis path { fill: none; stroke: darkgrey; shape-rendering: crispEdges; }
	#chart1 .tick text { font: 10px sans-serif; fill: darkgrey; stroke-opacity: .3; }
	#chart1 .axis.yaxis path { fill: none; stroke: #10394B; }

	#chart1 .bands rect { fill: darkgrey; fill-opacity: 0; stroke-opacity: 0; pointer-events: all; shape-rendering: crispEdges; }
	#chart1 .bands .hoved { fill-opacity: .6; }
	#chart1 .sticks rect { pointer-events: none; shape-rendering: crispEdges; }
	#chart1 .sticks .rise, #chart1 .candles .rise { fill: lightgrey; }
	#chart1 .sticks .fall, #chart1 .candles .fall { fill: turquoise; }
	#chart1 .sticks .hoved { stroke: white; }
	#chart1 .candles .hoved { stroke: white; }
	#chart1 .candles rect { pointer-events: none; shape-rendering: crispEdges; }

	#chart1 .bbmn { fill: none; stroke: cyan; stroke-width: 1.5px; pointer-events: none; }
	#chart1 .bbup { fill: none; stroke: green; stroke-width: 1.5px; pointer-events: none; }
	#chart1 .bbdn { fill: none; stroke: crimson; stroke-width: 1.5px; pointer-events: none; }

	#chart1 .volumebar { fill: darkgrey; }
	#chart1 .volumebar rect { pointer-events: none; }
	#chart1 .volumebar .hoved { fill: white; }
	#chart1 .sigmabar { fill: darkgrey; }
	#chart1 .sigmabar rect { pointer-events: none; }
	#chart1 .sigmabar .hoved { fill: white; }

	#option { width: 230px; height: 25px; float: left; padding-top: 5px; }
	#option input { cursor: pointer; border-radius: 5px; color: #fff; background: #696d75; border: none; }
	#option input {
	-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
	}
	#option .active { cursor: auto; background: #94979d; }
	#option .active {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	}
	#infobar { width: 440px; height: 25px; float: left; padding-top: 5px; text-align: left; }
	.infohead { width: 140px; height: 25px; margin: 0px 2px; float: left; }
	.infobox { width: 70px; height: 30px; margin: 0px 2px; float: left; }

	.subdet { width: 300px; height: 15px; margin: 5px 0px; display: block; }
	.subsel { width: 20px; height: 15px; float:left; font-size: x-small; }
	.subsel input { cursor: pointer; border-radius: 5px; color: #fff; background: #696d75; font-size: x-small; border: none; }
	.subsel input {
	-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
	}
	.subsel .active { cursor: auto; background: #94979d; }
	.subsel .active {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	}
	.subname { width: 80px; height: 15px; float:left; font-size: x-small; text-align: left; }
	.subchart { width: 170px; height: 15px; float:left; }
	.subtext { width: 20px; height: 15px; float:left; font-size: x-small; text-align: left; }
	.subunit { width: 10px; height: 15px; float:left; font-size: x-small; text-align: left; }

	#volchart .volbar .volfill { fill: crimson; }
	#volchart .sigbar .sigfill { fill: crimson; }
	#volchart .bobbar .bobfill { fill: crimson; }
	#volchart .aurbar .aurfill { fill: crimson; }
	#volchart .crrbar .crrfill { fill: crimson; }
	#volchart input { cursor: pointer; }