index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MCN timeline</title>
    <link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
    <link rel="stylesheet" href="tl-styles.css">
    <script src="timeline.local.js"></script>
</head>
<body id="mcn-timeline">


<div id='timeline-embed' style="width: 100%; height: 600px"></div>

<script type="text/javascript">
    // The TL.Timeline constructor takes at least two arguments:
    // the id of the Timeline container (no '#'), and
    // the URL to your JSON data file or Google spreadsheet.
    // the id must refer to an element "above" this code,
    // and the element must have CSS styling to give it width and height
    // optionally, a third argument with configuration options can be passed.
    // See below for more about options.

    var options = {
        timenav_height_percentage: 50,
        scale_factor: 8
    };
    timeline = new TL.Timeline('timeline-embed',
            'https://docs.google.com/spreadsheets/d/14Jez6kxGLUt05Hksa07k29TfR6tJ9cR764rIOOnaj98/pubhtml', options);
</script>

</body>
</html>