Untitled

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <!-- I recommend you host this file on your own, since this will change without warning -->
    <script src="http://datamaps.github.io/scripts/datamaps.usa.min.js?v=1"></script>
    <div id="container1" style="position: relative; width: 80%; max-height: 80%;"></div>


        <script>
            function sleep(ms) {
                return new Promise(resolve => setTimeout(resolve, ms));
            }
            var lineFadeTime = 120000;
            var lineDrawTime = 850;
             //basic map config with custom fills, mercator projection
            async function demo(){
            var map = new Datamap({
                scope: 'usa',
                element: document.getElementById('container1'),
                projection: 'mercator',
                height: 1000,
                width: 1920,
                fills: {
                    defaultFill: 'blue',
                    lt50: 'rgba(0,244,244,0.9)',
                    gt50: 'red'
                },
            })
            // map.arc([
            // {
            //  origin: {
            //      latitude: 37.618889,
            //      longitude: -122.375
            //  },
            //  destination: {
            //      latitude: 30.194444,
            //      longitude: -97.67
            //  }
            // }
            // ], {strokeWidth: 5, animationSpeed: 850});

            var arcs = [
                {
                    origin: {
                        latitude: 64.2008,
                        longitude: -149.4937
                    },
                    destination: {
                        latitude: 21.289373,
                        longitude: -157.917480
                    }
                },
                {
                    origin: {
                        latitude: 37.618889,
                        longitude: -122.375
                    },
                    destination: {
                        latitude: 30.194444,
                        longitude: -97.67
                    }
                }
            ];

            map.arc(arcs, {strokeWidth: 2});

            map.svg.selectAll('path.datamaps-arc').attr("opacity", 1);
            // map.svg.selectAll('path.datamaps-arc').transition().duration(30000).style("opacity", 0);
            // map.svg.selectAll('path.datamaps-arc').transition().delay(30000).remove();

            await sleep(10000);

            arcs.push({
                origin: {
                    latitude: 27.6648,
                    longitude: -81.5158
                },
                destination: {
                    latitude: 43.8041,
                    longitude: -120.5542
                }
            });
        }
            demo();


        </script>
</body>