Step Chart D3 V4

<html>

<head>
    <title>Chandrakant Thakkar</title>

</head>

<body>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="lineSteps.js"></script>
    <script>
        window.addEventListener('resize', function (event) {
            $("#chart").width(window.innerWidth * 0.9);
            $("#chart").height(window.innerHeight);
        });
    </script>

<div id="startDate"></div>
        <div id="endDate"></div>
        <div id="processType"></div>
    </div>
    <script>
        let data = [{
            start_date: "2017-09-04 07:00:00",
            end_date: "2017-09-08 5:00:00",
            processType: "cleaning"
        }, {
            start_date: "2017-09-08 5:00:00",
            end_date: "2017-09-15 6:00:00",
            processType: "batch"
        }, {
            start_date: "2017-09-15 6:00:00",
            end_date: "2017-09-20 7:00:00",
            processType: "waiting"
        }, {
            start_date: "2017-09-20 7:00:00",
            end_date: "2017-09-24 8:00:00",
            processType: "batch"
        }, {
            start_date: "2017-09-24 8:00:00",
            end_date: "2017-09-28 9:00:00",
            processType: "cleaning"
        }, {
            start_date: "2017-09-28 9:00:00",
            end_date: "2017-10-07 10:00:00",
            processType: "waiting"
        }, {
            start_date: "2017-10-07 10:00:00",
            end_date: "2017-10-12 11:00:00",
            processType: "batch"
        }, {
            start_date: "2017-10-12 11:00:00",
            end_date: "2017-10-15 12:00:00",
            processType: "cleaning"
        }, {
            start_date: "2017-10-15 12:00:00",
            end_date: "2017-10-20 13:00:00",
            processType: "batch"
        }, {
            start_date: "2017-10-20 13:00:00",
            end_date: "2017-10-29 14:00:00",
            processType: "waiting"
        }, {
            start_date: "2017-10-29 14:00:00",
            end_date: "2017-11-04 15:00:00",
            processType: "batch"
        }];

$("#chart").empty();
        var chartConfig = {
            mainDiv: "#chart",
            data: data,
            lineColor: " #3880aa",
            upLineValue: ["batch"],
            typeFields: "processType",
            minValueField: "start_date",
            maxValueField: "end_date"
        };
        var lineStepCharts = new lineStepChart(chartConfig);
    </script>
</body>

</html>

Modified http://code.jquery.com/jquery-latest.min.js to a secure url

https://code.jquery.com/jquery-latest.min.js

https://d3js.org/d3.v4.min.js