D3 Examples - Line Chart Transition

xxxxxxxxxx
 
<!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) {
            console.log(data);
            d3.select("#chart").datum(data).call(lines);
            d3.select(window).on('resize', resize);
            resize();
        });
    </script>
</body>
​
</html>
    