取得した株価データ（csvファイル）をd3.jsでグラフ化してブログ（WordPress）に貼り付けたい

前提・実現したいこと

d3.js(TechanJS)でチャートを作成したいのですが、上手く表示されない。

該当のソースコード index.html

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

    body {
        font: 10px sans-serif;
    }

    text {
        fill: #000;
    }

    button {
        position: absolute;
        right: 20px;
        top: 440px;
        display: none;
    }

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

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

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

    .ichimoku path {
        fill: none;
        stroke-width: 0.8;
    }

    .ichimoku path {
        stroke: #000000;
    }

    .ichimoku path.chikouspan {
        stroke: #BF5FFF;
    }

    .ichimoku path.tenkansen {
        stroke: #0033FF;
    }

    .ichimoku path.kijunsen {
        stroke: #FBB117;
    }

    .ichimoku path.kumo {
        opacity: 0.1;
    }

    .ichimoku path.kumo.up {
        fill: #00AA00;
    }

    .ichimoku path.kumo.down {
        fill: #FF0000;
    }

    .ichimoku path.senkouspana {
        stroke: #006600;
    }

    .ichimoku path.senkouspanb {
        stroke: #FF0000;
    }

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

    var margin = {top: 20, right: 20, bottom: 30, left: 50},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

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

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

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

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

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

    var xAxis = d3.axisBottom(x);

    var yAxis = d3.axisLeft(y)
            .tickFormat(d3.format(",.3s"));

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

    svg.append("clipPath")
            .attr("id", "clip")
        .append("rect")
            .attr("x", 0)
            .attr("y", y(1))
            .attr("width", width)
            .attr("height", y(0) - y(1));

    var ichimokuIndicator = techan.indicator.ichimoku();
    // Don't show where indicators don't have data
    var indicatorPreRoll = ichimokuIndicator.kijunSen()+ichimokuIndicator.senkouSpanB();

    d3.csv("data.csv", function(error, data) {
        var accessor = candlestick.accessor();

        data = data.map(function(d) {
            // Open, high, low, close generally not required, is being used here to demonstrate colored volume
            // bars
            return {
                date: parseDate(d.Date),
                volume: +d.Volume,
                open: +d.Open,
                high: +d.High,
                low: +d.Low,
                close: +d.Close
            };
        }).sort(function(a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });

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

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

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

        svg.append("g")
                .attr("class", "y axis")
            .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Ichimoku");

        // Data to display initially
        draw(data.slice(0, data.length-20));
        // Only want this button to be active if the data has loaded
        d3.select("button").on("click", function() { draw(data); }).style("display", "inline");
    });

    function draw(data) {
        var ichimokuData = ichimokuIndicator(data);
        x.domain(data.map(ichimokuIndicator.accessor().d));
        // Calculate the y domain for visible data points (ensure to include Kijun Sen additional data offset)
        y.domain(techan.scale.plot.ichimoku(ichimokuData.slice(indicatorPreRoll-ichimokuIndicator.kijunSen())).domain());

        // Logic to ensure that at least +KijunSen displacement is applied to display cloud plotted ahead of ohlc
        x.zoomable().clamp(false).domain([indicatorPreRoll, data.length+ichimokuIndicator.kijunSen()]);

        svg.selectAll("g.candlestick").datum(data).call(candlestick);
        svg.selectAll("g.ichimoku").datum(ichimokuData).call(ichimoku);
        svg.selectAll("g.x.axis").call(xAxis);
        svg.selectAll("g.y.axis").call(yAxis);
    }

</script>

data.csv

Date,Open,High,Low,Close,Volume
9-Jun-14,62.40,63.34,61.79,62.88,37617413
6-Jun-14,63.37,63.48,62.15,62.50,42442096
5-Jun-14,63.66,64.36,62.82,63.19,47352368

14-Jun-13,23.56,23.89,23.26,23.63,30561387
13-Jun-13,23.72,23.83,23.26,23.73,31189247
12-Jun-13,24.16,24.26,23.58,23.77,26445790
11-Jun-13,24.03,24.35,24.00,24.03,29676383

https://gist.github.com/Shun08/0089042ebde537020982e3d597b4d46e