Vue + D3

by IPWright83

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="chart1">
    <svg width="800" height="800">
        <g>
            <series
                v-for="item in series"
                v-bind:type="item.type"
                v-bind:value="item.key"
                v-bind:key="item.key + item.type"
            ></series>
        </g>
    </svg>
</div>

Vue

Vue.component("line-plot", {
        props: ["value", "data", "scales"],
        template: `<path></path>`,
    });

    Vue.component("series", {
        props: ["value", "type"],
        template: `<g><text>{{ type }} : {{ value }}</text></g>`,
    });

    (async function() {
        const parseTime = d3.timeParse("%d-%b-%y");
        const response = await d3.tsv("https://gist.githubusercontent.com/mbostock/3883195/raw/96353535acc55d84e0360ddc42e2b95db9d84152/data.tsv");
        
        const data = response.map(d => ({ date: parseTime(d.date), close: +d.close }));
        const series = [
            { key: "close", type: "area" },
            { key: "close2", type: "line" },
            { key: "close", type: "scatter" },
        ];

        const app = new Vue({
            el: "#chart1",
            data: {
                data,
                series,
            }
        });
    })();