Line Chart Transition

forked from pjsier's block: Line Chart Transition

forked from elangobharathi's block: Line Chart Transition

forked from ConorAspell's block: Line Chart Transition

<!DOCTYPE html>
<html>
<head>
    <title>Line Chart Transition</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset='utf-8' />
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
    
        #chart {
            max-width: 600px;
            max-height: 400px;
        }
    </style>
</head>

<body>
    <div id="chart"></div>
    <script src="script.js"></script>
    <script>
        var lines = timelineChart();

function resize() {
            if (d3.select("#chart svg").empty()) {
                return;
            }
            lines.width(+d3.select("#chart").style("width").replace(/(px)/g, ""))
                .height(+d3.select("#chart").style("height").replace(/(px)/g, ""));
            d3.select("#chart").call(lines);
        }

d3.csv("data.csv", function (data) {
            d3.select("#chart").datum(data).call(lines);
            d3.select(window).on('resize', resize);
            resize();
        });
    </script>
</body>

</html>

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