block by fil 24d5ee71f09ba72893323d803242c38a

Urquhart graph of container ports

Full Screen

This map shows, on a Bertin projection, a selection of the largest container ports in the world. Their Urquhart graph is computed by d3.geoVoronoi and displayed in red geodesics.

(Re: the obvious geographical bugs: the dataset is composed only of the coordinates of ports and contains no knowledge of the shape of continents – the network thus happily crosses through land.)

by Philippe Rivière, visionscarto.net.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .countries {
        stroke: white;
        stroke-width: 0.3;
        opacity: 0.95;
        fill: #aaa;
    }
    .polygons {
        fill: rgba(220,220,220,0.3);
    }
    .links {
        stroke: red;
        stroke-opacity: 0.8;
        stroke-width: 2;
        fill: none;
    }
</style>
<svg width="900" height="500"></svg>

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>

<script src="https://unpkg.com/d3-delaunay@4"></script>
<script src="https://unpkg.com/d3-geo-voronoi@1"></script>
<script src="https://unpkg.com/d3-geo-projection@2"></script>


<script>
    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");

    svg = svg
        .append('g');

    d3.queue()
        .defer(d3.csv, 'ports.csv')
        .defer(d3.json, 'countries.topo.json')
        .await(function (err, points, world) {


            var features = topojson.feature(world, world.objects.countries).features,
                sites = points
                .map(function (e) {
                    return [+e.lon, +e.lat, e.name];
                })


            var v = d3.geoVoronoi()(sites),
                polygons = v.polygons().features,
                links = v.links().features;


            var projection = d3.geoBertin1953();


            path = d3.geoPath()
                .projection(projection)
                .pointRadius(1);

            var g = svg.append('g')
                .append('g')
                .attr("class", "s");



            var defs = g.append("defs");

            defs.append("path")
                .datum({
                    type: "Sphere"
                })
                .attr("id", "sphere")
                .attr("d", path);

            g.append("use")
                .attr("xlink:href", "#sphere")
                .attr("fill", "white");

            defs.append("clipPath")
                .attr("id", "clip")
                .append("use")
                .attr("xlink:href", "#sphere");

            g.attr("clip-path", "url(#clip)")

            // countries
            countries = g.append('g')
                .attr('class', 'countries')
                .selectAll('path')
                .data(features)
                .enter()
                .append('path')
                .attr("d", path);

            var poly = g.append("g")
                .attr("class", "polygons")
                .selectAll("path")
                .data(polygons)
                .enter().append("path")
                .attr('opacity', 0.001)
                .on('mouseover', function () {
                    d3.select(this)
                        .attr('opacity', 1);
                })
                .on('mouseout', function () {
                    d3.select(this)
                        .transition()
                        .attr('opacity', 0.001);
                })
                .attr("d", path);

            poly
                .append('title')
                .text(function (d, i) {
                    return sites[i][2];
                });


            var link = g.append("g")
                .attr("class", "links")
                .selectAll("path")
                .data(links.filter(function (d) {
                    return d.properties.urquhart;
                }))
                .enter().append("path")
                .attr("d", path);


            g.append("use")
                .attr("class", "stroke")
                .attr("xlink:href", "#sphere")
                .attr("stroke", "black")
                .attr("stroke-width", 3)
                .attr("fill", "url(#grad1)")
                .attr('pointer-events', 'none');


            g.append("g")
                .attr("class", "site")
                .selectAll('path')
                .data([null])
                .enter()
                .append('path')
                .attr('d', function (d) {
                    return path({
                        type: "MultiPoint",
                        coordinates: sites
                    });
                });


        });
</script>

ports.csv

name,lon,lat
Dutch Harbour,-166.5422,53.8898
Honolulu,-157.8583333,21.3069444
Anchorage,-149.9002778,61.2180556
Roberts Bank,-123.1833333,49.0666667
Vancouver(CAN),-123.13,49.28
Tacoma,-122.4442906,47.2528768
Seattle,-122.3320708,47.6062095
Oakland,-122.2711137,37.8043637
Los Angeles,-118.2436849,34.0522342
Long Beach,-118.1937395,33.7700504
Manzanillo(MEX),-104.3384616,19.1138094
Lazaro Cardenas,-102.1943485,17.9567646
Altamira,-97.9211555,22.4077462
Veracruz,-96.1342241,19.173773
Barbours Cut,-94.9977057,29.6818946
Puerto Quetzal,-90.787778,13.920556
New Orleans,-90.0715323,29.9510658
Santo Tomas de Castilla,-88.6096575,15.6896526
Puerto Cortes,-87.94,15.85
Puerto Limon,-83.033333,9.983333
Jacksonville,-81.655651,30.3321838
Savannah,-81.0998342,32.0835407
Miami,-80.1917902,25.7616798
Port Everglades,-80.1246643,26.0937112
Charleston,-79.9310512,32.7764749
Guayaquil,-79.9223592,-2.1709979
Cristobal,-79.901527,9.350599
Coco Solo,-79.879913,9.368985
Balboa,-79.56,8.94
Taboguilla Is. Anch.,-79.5167829,8.8064281
Freeport(BHS),-78.64,26.54
Callao Anch.,-77.1259843,-12.0508491
Buenaventura,-77.070229,3.886611
Kingston(JAM),-76.8,17.983333
Baltimore,-76.6121893,39.2903848
Portsmouth(VA USA),-76.2982742,36.8354258
Norfolk(USA),-76.2858726,36.8507689
Cartagena(COL),-75.5335769,10.41373
Philadelphia,-75.1652215,39.9525839
Barranquilla,-74.7970435,10.9642103
New York,-74.0059413,40.7127837
Montreal,-73.57,45.52
Bayport,-73.0506656,40.7384317
Valparaiso,-71.620361,-33.045646
San Antonio(CHL),-71.613065,-33.583647
Rio Haina,-70.0173225,18.4253926
Caucedo,-69.6308326,18.425741
Puerto Cabello,-68.17,10.47
La Guaira,-66.89,10.61
San Juan(PRI),-66.1057217,18.4663338
Halifax,-63.61,44.67
Port of Spain,-61.516667,10.666667
Point Lisas,-61.4630653,10.4056994
Buenos Aires,-58.3815931,-34.6037232
Montevideo,-56.17,-34.87
Rio Grande(BRA) Anch.,-52.1075802,-32.0353776
Navegantes,-48.6550692,-26.8947924
Itapoa,-48.6177384,-26.0713285
Paranagua,-48.5229975,-25.5165725
Santos Anch.,-46.3288865,-23.9678823
Sepetiba,-43.7056394,-22.9674264
Rio de Janeiro,-43.1728965,-22.9068467
Suape,-38.612782,-12.73864
Salvador,-38.502304,-12.9730401
Reykjavik,-21.933333,64.133333
Dakar,-17.3660286,14.7645042
Santa Cruz de Tenerife,-16.2518467,28.4636296
Las Palmas,-15.4362574,28.1235459
Lisbon,-9.1393366,38.7222524
Sines,-8.86,37.95
Vigo,-8.7207268,42.2405989
Leixoes,-8.6808176,41.1890177
Cork,-8.4863157,51.8968917
Casablanca,-7.5898434,33.5731104
Dublin,-6.2603097,53.3498053
Tangier-Mediterranee,-5.7635587,35.7821267
Algeciras,-5.456233,36.1407591
Abidjan,-4.033333,5.316667
Grangemouth,-3.7227698,56.0097152
Liverpool,-2.9915726,53.4083714
Bilbao,-2.9349852,43.2630126
Tees,-1.8041706,54.5791663
Southampton,-1.4043509,50.9097004
Valencia,-0.3762881,39.4699075
Immingham,-0.215913,53.614012
Castellon,-0.0513246,39.9863563
Tema Anch.,0.01,5.64
Le Havre,0.12,49.5
Tilbury,0.360498,51.463024
Thamesport,0.686924,51.433451
Lome Anch.,1.35,6.17
Felixstowe,1.351255,51.961726
Barcelona,2.0832941,41.297445
Dunkirk,2.3767763,51.0343684
Cotonou,2.433333,6.366667
Algiers,3.042048,36.752887
Zeebrugge,3.2,51.333333
Tin Can Is.,3.3451886,6.4327968
Apapa-Lagos,3.366667,6.45
Antwerp,4.4024643,51.2194475
Rotterdam,4.4777325,51.9244201
Moerdijk,4.6273499,51.7018167
Fos,4.945711,43.437882
Marseilles,5.36978,43.296482
Bremerhaven,8.5809424,53.5395845
Genoa,8.946256,44.4056499
Cagliari,9.1216613,39.2238411
La Spezia,9.8240826,44.1024504
Hamburg,9.9936818,53.5510846
Aarhus,10.203921,56.162939
Leghorn,10.3722477,43.5293029
Oslo,10.7522454,59.9138688
Pointe Noire(COG) Anch.,11.866362,-4.7691623
Gothenburg,11.97456,57.70887
Ravenna,12.2035294,44.4183598
Venice,12.3155151,45.4408474
Copenhagen,12.5683371,55.6760968
Helsingborg,12.6945121,56.0464674
Ancona,13.518915,43.6158299
Koper,13.7301877,45.548059
Trieste,13.7768182,45.6495264
Naples,14.2865792,40.8829943
Walvis Bay,14.508056,-22.956111
Marsaxlokk,14.544722,35.841667
Salerno,14.7680961,40.6824408
Misurata,15.092017,32.377533
Gioia Tauro,15.8988669,38.4262258
Cape Town,18.4240553,-33.9248685
Gdynia,18.5305409,54.5188898
Gdansk,18.6466384,54.3520252
Kaliningrad,20.516667,54.716667
Klaipeda,21.1442794,55.7032948
Rauma,21.5059588,61.1308422
Thessaloniki,22.9444191,40.6400629
Piraeus,23.6469832,37.9429857
Riga,24.1051864,56.9496487
Helsinki,24.9410248,60.1733244
Port Elizabeth,25.6,-33.958056
Ngqura,25.666667,-33.766667
Nemrut Bay,26.8381889,38.7402893
Izmir,27.12872,38.41885
Ust-Luga,28.276944,59.660278
Constantza,28.6320153,44.1688111
Ambarli,28.6730866,40.9660742
Evyap,28.92766,41.089101
Gemlik,29.1652303,40.4285523
Diliskelesi,29.519137,40.769507
Kronshtadt,29.7655452,59.9959303
Alexandria(EGY) Anch.,29.9187387,31.2000924
St. Petersburg,30.3350986,59.9342802
Odessa,30.7233095,46.482526
El Dekheila,30.7716308,30.7051537
Durban Anch.,31.0218404,-29.8586804
Damietta,31.8144434,31.4175388
Port Said,32.3018661,31.2652893
Limassol,33.0226174,34.7071301
Mersin Anch.,34.633333,36.8
Ashdod,34.655314,31.804381
Haifa,34.989571,32.7940463
Aqaba,35.0060842,29.5319199
Beirut,35.4954794,33.8886289
Iskenderun,36.165,36.5817
Novorossiysk,37.75,44.716667
Jeddah,39.172778,21.543333
Dar es Salaam Anch.,39.283333,-6.8
Mombasa,39.66,-4.04
Djibouti,43.145,11.588333
Aden,45.033333,12.8
Umm Qasr,47.929444,30.034167
Shuwaikh,47.9670892,29.3671914
Dammam,49.9777136,26.3926665
Doha(QAT),51.5304368,25.2916097
Salalah,54.089722,17.019722
Jebel Ali Anch.,55.06116,25.01126
Sharjah,55.390833,25.3575
Bandar Abbas Anch.,56.2666455,27.1832216
Khor Fakkan,56.35,25.333333
Karachi,67.01,24.86
Port Muhammad Bin Qasim,67.0152682,24.8550065
Mundra Anch.,69.7213266,22.8395202
Pipavav,71.5341894,21.0120728
Kochi(IND),76.2673041,9.9312328
New Tuticorin,78.1191813,8.795676
Colombo,79.85,6.93
Chennai,80.2707184,13.0826802
Jawaharlal Nehru Anch.,86.1737454,20.5760921
Kolkata,88.363895,22.572646
Chittagong,91.8,22.366667
Yangon,96.149722,16.780833
Belawan,98.694221,3.784303
Penang,100.3297612,5.414921
Bangkok,100.5017651,13.7563309
Laem Chabang,100.9158073,13.1040552
Port Klang Anch.,101.4086,3.005078
Sapangar Bay,101.975766,4.210484
Kuantan,103.333333,3.816667
Sihanoukville,103.5233963,10.6253016
Tanjung Pelepas,103.552088,1.363721
Singapore,103.8509491,1.2800945
Pasir Gudang,103.9029689,1.470288
Ho Chi Minh City,106.6588245,10.8184631
Haiphong,106.6880841,20.8449115
Jakarta Anch.,106.845599,-6.2087634
Da Nang,108.2021667,16.0544068
Fangcheng,108.3535,21.769212
Phu My,109.0475121,14.1770135
Kuching,110.345,1.56
Zhanjiang,110.359377,21.270708
Semarang,110.416667,-6.966667
Surabaya,112.7520883,-7.2574719
Bintulu,113.0419069,3.171322
Qianwan,113.2286722,22.1521666
Guangzhou,113.264385,23.12911
Nansha,113.525165,22.801624
Mawan,113.873825,22.491465
Shenzhen,114.057868,22.543099
Hong Kong,114.109497,22.396428
Fremantle,115.7471797,-32.0560399
Shantou,116.681972,23.354091
Xingang Anch.,117.7875,38.975833
Xiamen Anch.,118.089425,24.479834
Quanzhou,118.675676,24.874132
Lianyungang,119.221611,34.596653
Fuzhou,119.296494,26.074508
Fuqing,119.383811,25.720381
Makassar,119.4327314,-5.1476651
Kaohsiung Anch.,120.3014353,22.6272784
Qingdao,120.382612,36.067117
Taichung,120.6736482,24.1477358
Manila,120.97,14.62
Taicang,121.13055,31.457735
Yantai,121.447935,37.463822
Huangpu,121.4698984,31.1598268
Shanghai,121.473701,31.230416
Ningbo Anch.,121.54399,29.868336
Taipei,121.5654177,25.0329694
Dalian,121.614682,38.914003
Keelung,121.7391833,25.1276033
Beilun,121.844746,29.898908
Bayuquan,122.107814,40.230636
Weihai,122.12042,37.513068
Zhoushan,122.207216,29.985295
Cebu,123.9,10.32
Davao,125.63,7.11
Incheon,126.616936,37.476364
Pyeongtaek,127.1129451,36.9921075
Gwangyang,127.6958882,34.9406968
Busan Anch.,129.0756416,35.1795543
Ulsan,129.3113596,35.5383773
Hakata,130.4148783,33.5913576
Tanoura,130.516929,32.3595281
Vladivostok,131.9,43.133333
Vostochnyy,132.1,43.36
Hiroshima,132.4552927,34.3852029
Nakhodka,132.866667,42.816667
Fukuyama,133.3623127,34.4858993
Kobe,135.1955112,34.690083
Osaka,135.5021651,34.6937378
Yokkaichi,136.6244847,34.9651567
Mizushima,136.9015148,36.6387419
Nagoya,136.906398,35.1814464
Fushiki-Toyama,137.057263,36.7906316
Shimizu,138.4895275,35.0158879
Adelaide,138.5999594,-34.9286212
Niigata,139.0364126,37.9161924
Yokohama,139.6380256,35.4437078
Tokyo,139.7319925,35.7090259
Sendai-Shiogama,141.0220272,38.3143623
Tomakomai,141.6053721,42.6343021
Melbourne,144.96328,-37.814107
Botany Bay,151.175278,-33.9930374
Brisbane,153.0234489,-27.4710107
Lyttelton,172.7193227,-43.6032583
Auckland,174.7633315,-36.8484597
Tauranga,176.1651295,-37.6877975
Napier,176.9120178,-39.4928444