bitmammoth/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

    body {
        font: 10px sans-serif;
    }

    text {
        fill: #000;
    }

    text.symbol {
        fill: #BBBBBB;
    }

    path {
        fill: none;
        stroke-width: 1;
    }

    path.candle {
        stroke: #000000;
    }

    path.candle.body {
        stroke-width: 0;
    }

    path.candle.up {
        fill: #00AA00;
        stroke: #00AA00;
    }

    path.candle.down {
        fill: #FF0000;
        stroke: #FF0000;
    }

    .close.annotation.up path {
        fill: #00AA00;
    }

    path.volume {
        fill: #DDDDDD;
    }

    .indicator-plot path.line {
        fill: none;
        stroke-width: 1;
    }

    .ma-0 path.line {
        stroke: #1f77b4;
    }

    .ma-1 path.line {
        stroke: #aec7e8;
    }

    .ma-2 path.line {
        stroke: #ff7f0e;
    }

    button {
        position: absolute;
        right: 110px;
        top: 25px;
    }

    path.macd {
        stroke: #0000AA;
    }

    path.signal {
        stroke: #FF9999;
    }

    path.zero {
        stroke: #BBBBBB;
        stroke-dasharray: 0;
        stroke-opacity: 0.5;
    }

    path.difference {
        fill: #BBBBBB;
        opacity: 0.5;
    }

    path.rsi {
        stroke: #000000;
    }

    path.overbought, path.oversold {
        stroke: #FF9999;
        stroke-dasharray: 5, 5;
    }

    path.middle, path.zero {
        stroke: #BBBBBB;
        stroke-dasharray: 5, 5;
    }

    .analysis path, .analysis circle {
        stroke: blue;
        stroke-width: 0.8;
    }

    .trendline circle {
        stroke-width: 0;
        display: none;
    }

    .mouseover .trendline path {
        stroke-width: 1.2;
    }

    .mouseover .trendline circle {
        stroke-width: 1;
        display: inline;
    }

    .dragging .trendline path, .dragging .trendline circle {
        stroke: darkblue;
    }

    .interaction path, .interaction circle {
        pointer-events: all;
    }

    .interaction .body {
        cursor: move;
    }

    .trendlines .interaction .start, .trendlines .interaction .end {
        cursor: nwse-resize;
    }

    .supstance path {
        stroke-dasharray: 2, 2;
    }

    .supstances .interaction path {
        pointer-events: all;
        cursor: ns-resize;
    }

    .mouseover .supstance path {
        stroke-width: 1.5;
    }

    .dragging .supstance path {
        stroke: darkblue;
    }

    .crosshair {
        cursor: crosshair;
    }

    .crosshair path.wire {
        stroke: #DDDDDD;
        stroke-dasharray: 1, 1;
    }

    .crosshair .axisannotation path {
        fill: #DDDDDD;
    }

    .tradearrow path.tradearrow {
        stroke: none;
    }

    .tradearrow path.buy {
        fill: #0000FF;
    }

    .tradearrow path.sell {
        fill: #9900FF;
    }

    .tradearrow path.highlight {
        fill: none;
        stroke-width: 2;
    }

    .tradearrow path.highlight.buy {
        stroke: #0000FF;
    }

    .tradearrow path.highlight.sell {
        stroke: #9900FF;
    }

</style>
<body>
<button>Reset</button>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="http://techanjs.org/techan.min.js"></script>
<script>

    var dim = {
        width: 960, height: 500,
        margin: { top: 20, right: 50, bottom: 30, left: 50 },
        ohlc: { height: 305 },
        indicator: { height: 65, padding: 5 }
    };
    dim.plot = {
        width: dim.width - dim.margin.left - dim.margin.right,
        height: dim.height - dim.margin.top - dim.margin.bottom
    };
    dim.indicator.top = dim.ohlc.height+dim.indicator.padding;
    dim.indicator.bottom = dim.indicator.top+dim.indicator.height+dim.indicator.padding;

    var indicatorTop = d3.scaleLinear()
            .range([dim.indicator.top, dim.indicator.bottom]);

    var parseDate = d3.timeParse("%d-%b-%y");

    var zoom = d3.zoom()
            .on("zoom", zoomed);

    var x = techan.scale.financetime()
            .range([0, dim.plot.width]);

    var y = d3.scaleLinear()
            .range([dim.ohlc.height, 0]);


    var yPercent = y.copy();   // Same as y at this stage, will get a different domain later

    var yInit, yPercentInit, zoomableInit;

    var yVolume = d3.scaleLinear()
            .range([y(0), y(0.2)]);

    var candlestick = techan.plot.candlestick()
            .xScale(x)
            .yScale(y);

    var tradearrow = techan.plot.tradearrow()
            .xScale(x)
            .yScale(y)
            .y(function(d) {
                // Display the buy and sell arrows a bit above and below the price, so the price is still visible
                if(d.type === 'buy') return y(d.low)+5;
                if(d.type === 'sell') return y(d.high)-5;
                else return y(d.price);
            });

    var sma0 = techan.plot.sma()
            .xScale(x)
            .yScale(y);

    var sma1 = techan.plot.sma()
            .xScale(x)
            .yScale(y);

    var ema2 = techan.plot.ema()
            .xScale(x)
            .yScale(y);

    var volume = techan.plot.volume()
            .accessor(candlestick.accessor())   // Set the accessor to a ohlc accessor so we get highlighted bars
            .xScale(x)
            .yScale(yVolume);

    var trendline = techan.plot.trendline()
            .xScale(x)
            .yScale(y);

    var supstance = techan.plot.supstance()
            .xScale(x)
            .yScale(y);

    var xAxis = d3.axisBottom(x);

    var timeAnnotation = techan.plot.axisannotation()
            .axis(xAxis)
            .orient('bottom')
            .format(d3.timeFormat('%Y-%m-%d'))
            .width(65)
            .translate([0, dim.plot.height]);

    var yAxis = d3.axisRight(y);

    var ohlcAnnotation = techan.plot.axisannotation()
            .axis(yAxis)
            .orient('right')
            .format(d3.format(',.2f'))
            .translate([x(1), 0]);

    var closeAnnotation = techan.plot.axisannotation()
            .axis(yAxis)
            .orient('right')
            .accessor(candlestick.accessor())
            .format(d3.format(',.2f'))
            .translate([x(1), 0]);

    var percentAxis = d3.axisLeft(yPercent)
            .tickFormat(d3.format('+.1%'));

    var percentAnnotation = techan.plot.axisannotation()
            .axis(percentAxis)
            .orient('left');

    var volumeAxis = d3.axisRight(yVolume)
            .ticks(3)
            .tickFormat(d3.format(",.3s"));

    var volumeAnnotation = techan.plot.axisannotation()
            .axis(volumeAxis)
            .orient("right")
            .width(35);

    var macdScale = d3.scaleLinear()
            .range([indicatorTop(0)+dim.indicator.height, indicatorTop(0)]);

    var rsiScale = macdScale.copy()
            .range([indicatorTop(1)+dim.indicator.height, indicatorTop(1)]);

    var macd = techan.plot.macd()
            .xScale(x)
            .yScale(macdScale);

    var macdAxis = d3.axisRight(macdScale)
            .ticks(3);

    var macdAnnotation = techan.plot.axisannotation()
            .axis(macdAxis)
            .orient("right")
            .format(d3.format(',.2f'))
            .translate([x(1), 0]);

    var macdAxisLeft = d3.axisLeft(macdScale)
            .ticks(3);

    var macdAnnotationLeft = techan.plot.axisannotation()
            .axis(macdAxisLeft)
            .orient("left")
            .format(d3.format(',.2f'));

    var rsi = techan.plot.rsi()
            .xScale(x)
            .yScale(rsiScale);

    var rsiAxis = d3.axisRight(rsiScale)
            .ticks(3);

    var rsiAnnotation = techan.plot.axisannotation()
            .axis(rsiAxis)
            .orient("right")
            .format(d3.format(',.2f'))
            .translate([x(1), 0]);

    var rsiAxisLeft = d3.axisLeft(rsiScale)
            .ticks(3);

    var rsiAnnotationLeft = techan.plot.axisannotation()
            .axis(rsiAxisLeft)
            .orient("left")
            .format(d3.format(',.2f'));

    var ohlcCrosshair = techan.plot.crosshair()
            .xScale(timeAnnotation.axis().scale())
            .yScale(ohlcAnnotation.axis().scale())
            .xAnnotation(timeAnnotation)
            .yAnnotation([ohlcAnnotation, percentAnnotation, volumeAnnotation])
            .verticalWireRange([0, dim.plot.height]);

    var macdCrosshair = techan.plot.crosshair()
            .xScale(timeAnnotation.axis().scale())
            .yScale(macdAnnotation.axis().scale())
            .xAnnotation(timeAnnotation)
            .yAnnotation([macdAnnotation, macdAnnotationLeft])
            .verticalWireRange([0, dim.plot.height]);

    var rsiCrosshair = techan.plot.crosshair()
            .xScale(timeAnnotation.axis().scale())
            .yScale(rsiAnnotation.axis().scale())
            .xAnnotation(timeAnnotation)
            .yAnnotation([rsiAnnotation, rsiAnnotationLeft])
            .verticalWireRange([0, dim.plot.height]);

    var svg = d3.select("body").append("svg")
            .attr("width", dim.width)
            .attr("height", dim.height);

    var defs = svg.append("defs");

    defs.append("clipPath")
            .attr("id", "ohlcClip")
        .append("rect")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", dim.plot.width)
            .attr("height", dim.ohlc.height);

    defs.selectAll("indicatorClip").data([0, 1])
        .enter()
            .append("clipPath")
            .attr("id", function(d, i) { return "indicatorClip-" + i; })
        .append("rect")
            .attr("x", 0)
            .attr("y", function(d, i) { return indicatorTop(i); })
            .attr("width", dim.plot.width)
            .attr("height", dim.indicator.height);

    svg = svg.append("g")
            .attr("transform", "translate(" + dim.margin.left + "," + dim.margin.top + ")");

    svg.append('text')
            .attr("class", "symbol")
            .attr("x", 20)
            .text("Facebook, Inc. (FB)");

    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + dim.plot.height + ")");

    var ohlcSelection = svg.append("g")
            .attr("class", "ohlc")
            .attr("transform", "translate(0,0)");

    ohlcSelection.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + x(1) + ",0)")
        .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", -12)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Price ($)");

    ohlcSelection.append("g")
            .attr("class", "close annotation up");

    ohlcSelection.append("g")
            .attr("class", "volume")
            .attr("clip-path", "url(#ohlcClip)");

    ohlcSelection.append("g")
            .attr("class", "candlestick")
            .attr("clip-path", "url(#ohlcClip)");

    ohlcSelection.append("g")
            .attr("class", "indicator sma ma-0")
            .attr("clip-path", "url(#ohlcClip)");

    ohlcSelection.append("g")
            .attr("class", "indicator sma ma-1")
            .attr("clip-path", "url(#ohlcClip)");

    ohlcSelection.append("g")
            .attr("class", "indicator ema ma-2")
            .attr("clip-path", "url(#ohlcClip)");

    ohlcSelection.append("g")
            .attr("class", "percent axis");

    ohlcSelection.append("g")
            .attr("class", "volume axis");

    var indicatorSelection = svg.selectAll("svg > g.indicator").data(["macd", "rsi"]).enter()
             .append("g")
                .attr("class", function(d) { return d + " indicator"; });

    indicatorSelection.append("g")
            .attr("class", "axis right")
            .attr("transform", "translate(" + x(1) + ",0)");

    indicatorSelection.append("g")
            .attr("class", "axis left")
            .attr("transform", "translate(" + x(0) + ",0)");

    indicatorSelection.append("g")
            .attr("class", "indicator-plot")
            .attr("clip-path", function(d, i) { return "url(#indicatorClip-" + i + ")"; });

    // Add trendlines and other interactions last to be above zoom pane
    svg.append('g')
            .attr("class", "crosshair ohlc");

    svg.append("g")
            .attr("class", "tradearrow")
            .attr("clip-path", "url(#ohlcClip)");

    svg.append('g')
            .attr("class", "crosshair macd");

    svg.append('g')
            .attr("class", "crosshair rsi");

    svg.append("g")
            .attr("class", "trendlines analysis")
            .attr("clip-path", "url(#ohlcClip)");
    svg.append("g")
            .attr("class", "supstances analysis")
            .attr("clip-path", "url(#ohlcClip)");

    d3.select("button").on("click", reset);

    d3.csv("data.csv", function(error, data) {
        var accessor = candlestick.accessor(),
            indicatorPreRoll = 33;  // Don't show where indicators don't have data

        data = data.map(function(d) {
            return {
                date: parseDate(d.Date),
                open: +d.Open,
                high: +d.High,
                low: +d.Low,
                close: +d.Close,
                volume: +d.Volume
            };
        }).sort(function(a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });

        x.domain(techan.scale.plot.time(data).domain());
        y.domain(techan.scale.plot.ohlc(data.slice(indicatorPreRoll)).domain());
        yPercent.domain(techan.scale.plot.percent(y, accessor(data[indicatorPreRoll])).domain());
        yVolume.domain(techan.scale.plot.volume(data).domain());

        var trendlineData = [
            { start: { date: new Date(2014, 2, 11), value: 72.50 }, end: { date: new Date(2014, 5, 9), value: 63.34 } },
            { start: { date: new Date(2013, 10, 21), value: 43 }, end: { date: new Date(2014, 2, 17), value: 70.50 } }
        ];

        var supstanceData = [
            { start: new Date(2014, 2, 11), end: new Date(2014, 5, 9), value: 63.64 },
            { start: new Date(2013, 10, 21), end: new Date(2014, 2, 17), value: 55.50 }
        ];

        var trades = [
            { date: data[67].date, type: "buy", price: data[67].low, low: data[67].low, high: data[67].high },
            { date: data[100].date, type: "sell", price: data[100].high, low: data[100].low, high: data[100].high },
            { date: data[130].date, type: "buy", price: data[130].low, low: data[130].low, high: data[130].high },
            { date: data[170].date, type: "sell", price: data[170].low, low: data[170].low, high: data[170].high }
        ];

        var macdData = techan.indicator.macd()(data);
        macdScale.domain(techan.scale.plot.macd(macdData).domain());
        var rsiData = techan.indicator.rsi()(data);
        rsiScale.domain(techan.scale.plot.rsi(rsiData).domain());

        svg.select("g.candlestick").datum(data).call(candlestick);
        svg.select("g.close.annotation").datum([data[data.length-1]]).call(closeAnnotation);
        svg.select("g.volume").datum(data).call(volume);
        svg.select("g.sma.ma-0").datum(techan.indicator.sma().period(10)(data)).call(sma0);
        svg.select("g.sma.ma-1").datum(techan.indicator.sma().period(20)(data)).call(sma1);
        svg.select("g.ema.ma-2").datum(techan.indicator.ema().period(50)(data)).call(ema2);
        svg.select("g.macd .indicator-plot").datum(macdData).call(macd);
        svg.select("g.rsi .indicator-plot").datum(rsiData).call(rsi);

        svg.select("g.crosshair.ohlc").call(ohlcCrosshair).call(zoom);
        svg.select("g.crosshair.macd").call(macdCrosshair).call(zoom);
        svg.select("g.crosshair.rsi").call(rsiCrosshair).call(zoom);
        svg.select("g.trendlines").datum(trendlineData).call(trendline).call(trendline.drag);
        svg.select("g.supstances").datum(supstanceData).call(supstance).call(supstance.drag);

        svg.select("g.tradearrow").datum(trades).call(tradearrow);

        // Stash for zooming
        zoomableInit = x.zoomable().domain([indicatorPreRoll, data.length]).copy(); // Zoom in a little to hide indicator preroll
        yInit = y.copy();
        yPercentInit = yPercent.copy();

        draw();
    });

    function reset() {
        zoom.scale(1);
        zoom.translate([0,0]);
        draw();
    }

    function zoomed() {
        x.zoomable().domain(d3.event.transform.rescaleX(zoomableInit).domain());
        y.domain(d3.event.transform.rescaleY(yInit).domain());
        yPercent.domain(d3.event.transform.rescaleY(yPercentInit).domain());

        draw();
    }

    function draw() {
        svg.select("g.x.axis").call(xAxis);
        svg.select("g.ohlc .axis").call(yAxis);
        svg.select("g.volume.axis").call(volumeAxis);
        svg.select("g.percent.axis").call(percentAxis);
        svg.select("g.macd .axis.right").call(macdAxis);
        svg.select("g.rsi .axis.right").call(rsiAxis);
        svg.select("g.macd .axis.left").call(macdAxisLeft);
        svg.select("g.rsi .axis.left").call(rsiAxisLeft);

        // We know the data does not change, a simple refresh that does not perform data joins will suffice.
        svg.select("g.candlestick").call(candlestick.refresh);
        svg.select("g.close.annotation").call(closeAnnotation.refresh);
        svg.select("g.volume").call(volume.refresh);
        svg.select("g .sma.ma-0").call(sma0.refresh);
        svg.select("g .sma.ma-1").call(sma1.refresh);
        svg.select("g .ema.ma-2").call(ema2.refresh);
        svg.select("g.macd .indicator-plot").call(macd.refresh);
        svg.select("g.rsi .indicator-plot").call(rsi.refresh);
        svg.select("g.crosshair.ohlc").call(ohlcCrosshair.refresh);
        svg.select("g.crosshair.macd").call(macdCrosshair.refresh);
        svg.select("g.crosshair.rsi").call(rsiCrosshair.refresh);
        svg.select("g.trendlines").call(trendline.refresh);
        svg.select("g.supstances").call(supstance.refresh);
        svg.select("g.tradearrow").call(tradearrow.refresh);
    }

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	text {
	fill: #000;
	}

	text.symbol {
	fill: #BBBBBB;
	}

	path {
	fill: none;
	stroke-width: 1;
	}

	path.candle {
	stroke: #000000;
	}

	path.candle.body {
	stroke-width: 0;
	}

	path.candle.up {
	fill: #00AA00;
	stroke: #00AA00;
	}

	path.candle.down {
	fill: #FF0000;
	stroke: #FF0000;
	}

	.close.annotation.up path {
	fill: #00AA00;
	}

	path.volume {
	fill: #DDDDDD;
	}

	.indicator-plot path.line {
	fill: none;
	stroke-width: 1;
	}

	.ma-0 path.line {
	stroke: #1f77b4;
	}

	.ma-1 path.line {
	stroke: #aec7e8;
	}

	.ma-2 path.line {
	stroke: #ff7f0e;
	}

	button {
	position: absolute;
	right: 110px;
	top: 25px;
	}

	path.macd {
	stroke: #0000AA;
	}

	path.signal {
	stroke: #FF9999;
	}

	path.zero {
	stroke: #BBBBBB;
	stroke-dasharray: 0;
	stroke-opacity: 0.5;
	}

	path.difference {
	fill: #BBBBBB;
	opacity: 0.5;
	}

	path.rsi {
	stroke: #000000;
	}

	path.overbought, path.oversold {
	stroke: #FF9999;
	stroke-dasharray: 5, 5;
	}

	path.middle, path.zero {
	stroke: #BBBBBB;
	stroke-dasharray: 5, 5;
	}

	.analysis path, .analysis circle {
	stroke: blue;
	stroke-width: 0.8;
	}

	.trendline circle {
	stroke-width: 0;
	display: none;
	}

	.mouseover .trendline path {
	stroke-width: 1.2;
	}

	.mouseover .trendline circle {
	stroke-width: 1;
	display: inline;
	}

	.dragging .trendline path, .dragging .trendline circle {
	stroke: darkblue;
	}

	.interaction path, .interaction circle {
	pointer-events: all;
	}

	.interaction .body {
	cursor: move;
	}

	.trendlines .interaction .start, .trendlines .interaction .end {
	cursor: nwse-resize;
	}

	.supstance path {
	stroke-dasharray: 2, 2;
	}

	.supstances .interaction path {
	pointer-events: all;
	cursor: ns-resize;
	}

	.mouseover .supstance path {
	stroke-width: 1.5;
	}

	.dragging .supstance path {
	stroke: darkblue;
	}

	.crosshair {
	cursor: crosshair;
	}

	.crosshair path.wire {
	stroke: #DDDDDD;
	stroke-dasharray: 1, 1;
	}

	.crosshair .axisannotation path {
	fill: #DDDDDD;
	}

	.tradearrow path.tradearrow {
	stroke: none;
	}

	.tradearrow path.buy {
	fill: #0000FF;
	}

	.tradearrow path.sell {
	fill: #9900FF;
	}

	.tradearrow path.highlight {
	fill: none;
	stroke-width: 2;
	}

	.tradearrow path.highlight.buy {
	stroke: #0000FF;
	}

	.tradearrow path.highlight.sell {
	stroke: #9900FF;
	}

	</style>
	<body>
	<button>Reset</button>
	<script src="http://d3js.org/d3.v4.min.js"></script>
	<script src="http://techanjs.org/techan.min.js"></script>
	<script>

	var dim = {
	width: 960, height: 500,
	margin: { top: 20, right: 50, bottom: 30, left: 50 },
	ohlc: { height: 305 },
	indicator: { height: 65, padding: 5 }
	};
	dim.plot = {
	width: dim.width - dim.margin.left - dim.margin.right,
	height: dim.height - dim.margin.top - dim.margin.bottom
	};
	dim.indicator.top = dim.ohlc.height+dim.indicator.padding;
	dim.indicator.bottom = dim.indicator.top+dim.indicator.height+dim.indicator.padding;

	var indicatorTop = d3.scaleLinear()
	.range([dim.indicator.top, dim.indicator.bottom]);

	var parseDate = d3.timeParse("%d-%b-%y");

	var zoom = d3.zoom()
	.on("zoom", zoomed);

	var x = techan.scale.financetime()
	.range([0, dim.plot.width]);

	var y = d3.scaleLinear()
	.range([dim.ohlc.height, 0]);


	var yPercent = y.copy(); // Same as y at this stage, will get a different domain later

	var yInit, yPercentInit, zoomableInit;

	var yVolume = d3.scaleLinear()
	.range([y(0), y(0.2)]);

	var candlestick = techan.plot.candlestick()
	.xScale(x)
	.yScale(y);

	var tradearrow = techan.plot.tradearrow()
	.xScale(x)
	.yScale(y)
	.y(function(d) {
	// Display the buy and sell arrows a bit above and below the price, so the price is still visible
	if(d.type === 'buy') return y(d.low)+5;
	if(d.type === 'sell') return y(d.high)-5;
	else return y(d.price);
	});

	var sma0 = techan.plot.sma()
	.xScale(x)
	.yScale(y);

	var sma1 = techan.plot.sma()
	.xScale(x)
	.yScale(y);

	var ema2 = techan.plot.ema()
	.xScale(x)
	.yScale(y);

	var volume = techan.plot.volume()
	.accessor(candlestick.accessor()) // Set the accessor to a ohlc accessor so we get highlighted bars
	.xScale(x)
	.yScale(yVolume);

	var trendline = techan.plot.trendline()
	.xScale(x)
	.yScale(y);

	var supstance = techan.plot.supstance()
	.xScale(x)
	.yScale(y);

	var xAxis = d3.axisBottom(x);

	var timeAnnotation = techan.plot.axisannotation()
	.axis(xAxis)
	.orient('bottom')
	.format(d3.timeFormat('%Y-%m-%d'))
	.width(65)
	.translate([0, dim.plot.height]);

	var yAxis = d3.axisRight(y);

	var ohlcAnnotation = techan.plot.axisannotation()
	.axis(yAxis)
	.orient('right')
	.format(d3.format(',.2f'))
	.translate([x(1), 0]);

	var closeAnnotation = techan.plot.axisannotation()
	.axis(yAxis)
	.orient('right')
	.accessor(candlestick.accessor())
	.format(d3.format(',.2f'))
	.translate([x(1), 0]);

	var percentAxis = d3.axisLeft(yPercent)
	.tickFormat(d3.format('+.1%'));

	var percentAnnotation = techan.plot.axisannotation()
	.axis(percentAxis)
	.orient('left');

	var volumeAxis = d3.axisRight(yVolume)
	.ticks(3)
	.tickFormat(d3.format(",.3s"));

	var volumeAnnotation = techan.plot.axisannotation()
	.axis(volumeAxis)
	.orient("right")
	.width(35);

	var macdScale = d3.scaleLinear()
	.range([indicatorTop(0)+dim.indicator.height, indicatorTop(0)]);

	var rsiScale = macdScale.copy()
	.range([indicatorTop(1)+dim.indicator.height, indicatorTop(1)]);

	var macd = techan.plot.macd()
	.xScale(x)
	.yScale(macdScale);

	var macdAxis = d3.axisRight(macdScale)
	.ticks(3);

	var macdAnnotation = techan.plot.axisannotation()
	.axis(macdAxis)
	.orient("right")
	.format(d3.format(',.2f'))
	.translate([x(1), 0]);

	var macdAxisLeft = d3.axisLeft(macdScale)
	.ticks(3);

	var macdAnnotationLeft = techan.plot.axisannotation()
	.axis(macdAxisLeft)
	.orient("left")
	.format(d3.format(',.2f'));

	var rsi = techan.plot.rsi()
	.xScale(x)
	.yScale(rsiScale);

	var rsiAxis = d3.axisRight(rsiScale)
	.ticks(3);

	var rsiAnnotation = techan.plot.axisannotation()
	.axis(rsiAxis)
	.orient("right")
	.format(d3.format(',.2f'))
	.translate([x(1), 0]);

	var rsiAxisLeft = d3.axisLeft(rsiScale)
	.ticks(3);

	var rsiAnnotationLeft = techan.plot.axisannotation()
	.axis(rsiAxisLeft)
	.orient("left")
	.format(d3.format(',.2f'));

	var ohlcCrosshair = techan.plot.crosshair()
	.xScale(timeAnnotation.axis().scale())
	.yScale(ohlcAnnotation.axis().scale())
	.xAnnotation(timeAnnotation)
	.yAnnotation([ohlcAnnotation, percentAnnotation, volumeAnnotation])
	.verticalWireRange([0, dim.plot.height]);

	var macdCrosshair = techan.plot.crosshair()
	.xScale(timeAnnotation.axis().scale())
	.yScale(macdAnnotation.axis().scale())
	.xAnnotation(timeAnnotation)
	.yAnnotation([macdAnnotation, macdAnnotationLeft])
	.verticalWireRange([0, dim.plot.height]);

	var rsiCrosshair = techan.plot.crosshair()
	.xScale(timeAnnotation.axis().scale())
	.yScale(rsiAnnotation.axis().scale())
	.xAnnotation(timeAnnotation)
	.yAnnotation([rsiAnnotation, rsiAnnotationLeft])
	.verticalWireRange([0, dim.plot.height]);

	var svg = d3.select("body").append("svg")
	.attr("width", dim.width)
	.attr("height", dim.height);

	var defs = svg.append("defs");

	defs.append("clipPath")
	.attr("id", "ohlcClip")
	.append("rect")
	.attr("x", 0)
	.attr("y", 0)
	.attr("width", dim.plot.width)
	.attr("height", dim.ohlc.height);

	defs.selectAll("indicatorClip").data([0, 1])
	.enter()
	.append("clipPath")
	.attr("id", function(d, i) { return "indicatorClip-" + i; })
	.append("rect")
	.attr("x", 0)
	.attr("y", function(d, i) { return indicatorTop(i); })
	.attr("width", dim.plot.width)
	.attr("height", dim.indicator.height);

	svg = svg.append("g")
	.attr("transform", "translate(" + dim.margin.left + "," + dim.margin.top + ")");

	svg.append('text')
	.attr("class", "symbol")
	.attr("x", 20)
	.text("Facebook, Inc. (FB)");

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + dim.plot.height + ")");

	var ohlcSelection = svg.append("g")
	.attr("class", "ohlc")
	.attr("transform", "translate(0,0)");

	ohlcSelection.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + x(1) + ",0)")
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", -12)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Price ($)");

	ohlcSelection.append("g")
	.attr("class", "close annotation up");

	ohlcSelection.append("g")
	.attr("class", "volume")
	.attr("clip-path", "url(#ohlcClip)");

	ohlcSelection.append("g")
	.attr("class", "candlestick")
	.attr("clip-path", "url(#ohlcClip)");

	ohlcSelection.append("g")
	.attr("class", "indicator sma ma-0")
	.attr("clip-path", "url(#ohlcClip)");

	ohlcSelection.append("g")
	.attr("class", "indicator sma ma-1")
	.attr("clip-path", "url(#ohlcClip)");

	ohlcSelection.append("g")
	.attr("class", "indicator ema ma-2")
	.attr("clip-path", "url(#ohlcClip)");

	ohlcSelection.append("g")
	.attr("class", "percent axis");

	ohlcSelection.append("g")
	.attr("class", "volume axis");

	var indicatorSelection = svg.selectAll("svg > g.indicator").data(["macd", "rsi"]).enter()
	.append("g")
	.attr("class", function(d) { return d + " indicator"; });

	indicatorSelection.append("g")
	.attr("class", "axis right")
	.attr("transform", "translate(" + x(1) + ",0)");

	indicatorSelection.append("g")
	.attr("class", "axis left")
	.attr("transform", "translate(" + x(0) + ",0)");

	indicatorSelection.append("g")
	.attr("class", "indicator-plot")
	.attr("clip-path", function(d, i) { return "url(#indicatorClip-" + i + ")"; });

	// Add trendlines and other interactions last to be above zoom pane
	svg.append('g')
	.attr("class", "crosshair ohlc");

	svg.append("g")
	.attr("class", "tradearrow")
	.attr("clip-path", "url(#ohlcClip)");

	svg.append('g')
	.attr("class", "crosshair macd");

	svg.append('g')
	.attr("class", "crosshair rsi");

	svg.append("g")
	.attr("class", "trendlines analysis")
	.attr("clip-path", "url(#ohlcClip)");
	svg.append("g")
	.attr("class", "supstances analysis")
	.attr("clip-path", "url(#ohlcClip)");

	d3.select("button").on("click", reset);

	d3.csv("data.csv", function(error, data) {
	var accessor = candlestick.accessor(),
	indicatorPreRoll = 33; // Don't show where indicators don't have data

	data = data.map(function(d) {
	return {
	date: parseDate(d.Date),
	open: +d.Open,
	high: +d.High,
	low: +d.Low,
	close: +d.Close,
	volume: +d.Volume
	};
	}).sort(function(a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });

	x.domain(techan.scale.plot.time(data).domain());
	y.domain(techan.scale.plot.ohlc(data.slice(indicatorPreRoll)).domain());
	yPercent.domain(techan.scale.plot.percent(y, accessor(data[indicatorPreRoll])).domain());
	yVolume.domain(techan.scale.plot.volume(data).domain());

	var trendlineData = [
	{ start: { date: new Date(2014, 2, 11), value: 72.50 }, end: { date: new Date(2014, 5, 9), value: 63.34 } },
	{ start: { date: new Date(2013, 10, 21), value: 43 }, end: { date: new Date(2014, 2, 17), value: 70.50 } }
	];

	var supstanceData = [
	{ start: new Date(2014, 2, 11), end: new Date(2014, 5, 9), value: 63.64 },
	{ start: new Date(2013, 10, 21), end: new Date(2014, 2, 17), value: 55.50 }
	];

	var trades = [
	{ date: data[67].date, type: "buy", price: data[67].low, low: data[67].low, high: data[67].high },
	{ date: data[100].date, type: "sell", price: data[100].high, low: data[100].low, high: data[100].high },
	{ date: data[130].date, type: "buy", price: data[130].low, low: data[130].low, high: data[130].high },
	{ date: data[170].date, type: "sell", price: data[170].low, low: data[170].low, high: data[170].high }
	];

	var macdData = techan.indicator.macd()(data);
	macdScale.domain(techan.scale.plot.macd(macdData).domain());
	var rsiData = techan.indicator.rsi()(data);
	rsiScale.domain(techan.scale.plot.rsi(rsiData).domain());

	svg.select("g.candlestick").datum(data).call(candlestick);
	svg.select("g.close.annotation").datum([data[data.length-1]]).call(closeAnnotation);
	svg.select("g.volume").datum(data).call(volume);
	svg.select("g.sma.ma-0").datum(techan.indicator.sma().period(10)(data)).call(sma0);
	svg.select("g.sma.ma-1").datum(techan.indicator.sma().period(20)(data)).call(sma1);
	svg.select("g.ema.ma-2").datum(techan.indicator.ema().period(50)(data)).call(ema2);
	svg.select("g.macd .indicator-plot").datum(macdData).call(macd);
	svg.select("g.rsi .indicator-plot").datum(rsiData).call(rsi);

	svg.select("g.crosshair.ohlc").call(ohlcCrosshair).call(zoom);
	svg.select("g.crosshair.macd").call(macdCrosshair).call(zoom);
	svg.select("g.crosshair.rsi").call(rsiCrosshair).call(zoom);
	svg.select("g.trendlines").datum(trendlineData).call(trendline).call(trendline.drag);
	svg.select("g.supstances").datum(supstanceData).call(supstance).call(supstance.drag);

	svg.select("g.tradearrow").datum(trades).call(tradearrow);

	// Stash for zooming
	zoomableInit = x.zoomable().domain([indicatorPreRoll, data.length]).copy(); // Zoom in a little to hide indicator preroll
	yInit = y.copy();
	yPercentInit = yPercent.copy();

	draw();
	});

	function reset() {
	zoom.scale(1);
	zoom.translate([0,0]);
	draw();
	}

	function zoomed() {
	x.zoomable().domain(d3.event.transform.rescaleX(zoomableInit).domain());
	y.domain(d3.event.transform.rescaleY(yInit).domain());
	yPercent.domain(d3.event.transform.rescaleY(yPercentInit).domain());

	draw();
	}

	function draw() {
	svg.select("g.x.axis").call(xAxis);
	svg.select("g.ohlc .axis").call(yAxis);
	svg.select("g.volume.axis").call(volumeAxis);
	svg.select("g.percent.axis").call(percentAxis);
	svg.select("g.macd .axis.right").call(macdAxis);
	svg.select("g.rsi .axis.right").call(rsiAxis);
	svg.select("g.macd .axis.left").call(macdAxisLeft);
	svg.select("g.rsi .axis.left").call(rsiAxisLeft);

	// We know the data does not change, a simple refresh that does not perform data joins will suffice.
	svg.select("g.candlestick").call(candlestick.refresh);
	svg.select("g.close.annotation").call(closeAnnotation.refresh);
	svg.select("g.volume").call(volume.refresh);
	svg.select("g .sma.ma-0").call(sma0.refresh);
	svg.select("g .sma.ma-1").call(sma1.refresh);
	svg.select("g .ema.ma-2").call(ema2.refresh);
	svg.select("g.macd .indicator-plot").call(macd.refresh);
	svg.select("g.rsi .indicator-plot").call(rsi.refresh);
	svg.select("g.crosshair.ohlc").call(ohlcCrosshair.refresh);
	svg.select("g.crosshair.macd").call(macdCrosshair.refresh);
	svg.select("g.crosshair.rsi").call(rsiCrosshair.refresh);
	svg.select("g.trendlines").call(trendline.refresh);
	svg.select("g.supstances").call(supstance.refresh);
	svg.select("g.tradearrow").call(tradearrow.refresh);
	}

	</script>