3D Fun with a line

let box = document.querySelector('.box');

renderChart(1)

function renderChart(exponent) {
    d3.select('.svg_box').select('svg').remove()
    const data = [
        {date: '10/26/2018', value1: 3, value2: 0},
        {date: '10/27/2018', value1: 0, value2: 25},
        {date: '10/28/2018', value1: 0, value2: 62},
        {date: '10/29/2018', value1: 5, value2: 5},
        {date: '10/30/2018', value1: 8, value2: 37},
        {date: '10/31/2018', value1: 7, value2: 12},
        {date: '11/01/2018', value1: 11, value2: 55},
        {date: '11/02/2018', value1: 23, value2: 44},
        {date: '11/03/2018', value1: 13, value2: 53},
        {date: '11/04/2018', value1: 15, value2: 18},
        {date: '11/05/2018', value1: 37, value2: 12},
        {date: '11/06/2018', value1: 32, value2: 60},
        {date: '11/07/2018', value1: 38, value2: 60},
        {date: '11/08/2018', value1: 42, value2: 60},
        {date: '11/09/2018', value1: 43, value2: 3},
        {date: '11/10/2018', value1: 21, value2: 3},
        {date: '11/11/2018', value1: 24, value2: 2},
        {date: '11/12/2018', value1: 50, value2: 15},
        {date: '11/13/2018', value1: 53, value2: 3},
        {date: '11/14/2018', value1: 59, value2: 15},
        {date: '11/15/2018', value1: 61, value2: 3},
        {date: '11/16/2018', value1: 62, value2: 19},
    ]

    const margin = 50, width = 1024, height = 400;

    let dataGroup = d3.select('.svg_box')
        .append('svg')
        .attr('width', width + margin)
        .attr('height', height + 2 * margin)
        .append('g')
        .attr('transform', 'translate(' + margin + ',' + margin + ')')

    const parseDate = d3.timeParse('%m/%d/%Y')

    data.forEach(d => {
        d.date = parseDate(d.date)
    });

    let x = d3.scaleTime()
        .domain(d3.extent(data, d => d.date))
        .range([0, width])
    let y = d3.scalePow()
        .domain(d3.extent(data, d => d.value1))
        .range([height, 0])
        .exponent(exponent)

    let propertyNames = [], colors = d3.schemeCategory10
    for (const name in data[0]) {
        if (name === 'date') continue
        propertyNames.push([name])
        console.log('property: ' + name)
    }

    for (let index = 0; index < propertyNames.length; index++) {
        drawLine(propertyNames[index], colors[index])
    }

    let xAxisGroup = dataGroup.append('g')
        .attr('class', 'x-axis-group')
        .attr('transform', 'translate(0,' + height + ')')

    let xAxis = d3.axisBottom(x)
        .tickFormat(d3.timeFormat('%Y-%m-%d'))

    xAxis(xAxisGroup)

    let yAxisGroup = dataGroup.append('g')
        .attr('class', 'y-axis-group')

    let yAxis = d3.axisLeft(y).tickFormat(d => y.tickFormat(62, d3.format(',d'))(d))

    yAxis(yAxisGroup)

    function drawLine(valuename, color) {
        let line = d3.line()
            .x(d => x(d.date))
            .y(d => y(d[valuename]))

        dataGroup.append('path')
            .data([data])
            .attr('fill', 'none')
            .attr('stroke', color)
            .attr('d', line)
    }
}