let margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
};

let width = 960 - margin.left - margin.right;
let height = 500 - margin.top - margin.bottom;

let x = d3.scaleTime().range([0, width]);
let y = d3.scaleLinear().range([height, 0]);

let area = d3.area()
    .x(function (d) { return x(d.date) })
    .y0(height)
    .y1(function (d) { return y(d.volume) });

let valueline = d3.line()
    .x(function (d) { return x(d.date) })
    .y(function (d) { return y(d.volume) });

let svg = d3.select('svg#intro')
    .attr('width', width + margin.left + margin.bottom)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`);

console.log(x);

d3.csv('crypto-markets.csv', function (d) {
        return {
            date: new Date(d.date),
            open: +d.open,
            high: +d.high,
            low: +d.low,
            close: +d.close,
            volume: +d.volume,
            market: +d.market,
            symbol: d.symbol,
            coin: d.coin,
            variance: +d.variance,
            volatility: +d.volatility
        }
    }, function (d) {
    plotArea(d);
});


function plotArea(data) {
    x.domain(d3.extent(data, d => d.date));
    y.domain([0, d3.max(data, d => d.volume)]);

    svg.append('path')
        .data([data])
        .attr('class', 'area')
        .attr('d', area);

    svg.append('path')
        .data([data])
        .attr('class', 'line')
        .attr('d', valueline);

    svg.append('g')
        .attr("transform", `translate(0, ${height})`)
        .call(d3.axisBottom(x));

    svg.append('g')
        .call(d3.axisLeft(y));
}
