Map to Force-Directed Graph

.block

license: mit
height: 600

README.md

Block-a-Day #1. A map transitions into an interactive force-directed graph (and back).

Data Sources: OpenFlights

What I Learned: I went down a few rabbit holes here; for a while, I was planning to use forces to draw each node to its lat/lon. This felt clunky (and I didn't have a good way to toggle forces on and off, although it occurs to me now that I could swap out two discrete simulations…). In the end, I settled on the current approach of replacing the simulation with a basic transition.

What I'd Do With More Time: Great arcs? Also this would be more visually interesting with color, even if that was only used to encode the region of each airport.

Block-a-Day

Just what it sounds like. For fifteen days, I will make a D3.js v4 block every single day. Rules:

1. Ideas over implementation. Do something novel, don't sweat the details.
2. No more than two hours can be spent on coding (give or take).
3. Every. Single. Day.

continental-us.json

data.json

{"nodes":[{"id":3448,"name":"General Edward Lawrence Logan Intl","city":"Boston","faa":"BOS","lat":42.364347,"lon":-71.005181},{"id":3453,"name":"Metropolitan Oakland Intl","city":"Oakland","faa":"OAK","lat":37.721278,"lon":-122.220722},{"id":3454,"name":"Eppley Afld","city":"Omaha","faa":"OMA","lat":41.303167,"lon":-95.894069},{"id":3457,"name":"Wichita Mid Continent","city":"Wichita","faa":"ICT","lat":37.649944,"lon":-97.433056},{"id":3458,"name":"Kansas City Intl","city":"Kansas City","faa":"MCI","lat":39.297606,"lon":-94.713905},{"id":3459,"name":"Dane Co Rgnl Truax Fld","city":"Madison","faa":"MSN","lat":43.139858,"lon":-89.337514},{"id":3462,"name":"Phoenix Sky Harbor Intl","city":"Phoenix","faa":"PHX","lat":33.434278,"lon":-112.011583},{"id":3467,"name":"Spokane Intl","city":"Spokane","faa":"GEG","lat":47.619861,"lon":-117.533833},{"id":3469,"name":"San Francisco Intl","city":"San Francisco","faa":"SFO","lat":37.618972,"lon":-122.374889},{"id":3472,"name":"Gainesville Rgnl","city":"Gainesville","faa":"GNV","lat":29.690056,"lon":-82.271778},{"id":3473,"name":"Memphis Intl","city":"Memphis","faa":"MEM","lat":35.042417,"lon":-89.976667},{"id":3484,"name":"Los Angeles Intl","city":"Los Angeles","faa":"LAX","lat":33.942536,"lon":-118.408075},{"id":3486,"name":"Cleveland Hopkins Intl","city":"Cleveland","faa":"CLE","lat":41.411689,"lon":-81.849794},{"id":3488,"name":"Cincinnati Northern Kentucky Intl","city":"Cincinnati","faa":"CVG","lat":39.048836,"lon":-84.667822},{"id":3494,"name":"Newark Liberty Intl","city":"Newark","faa":"EWR","lat":40.6925,"lon":-74.168667},{"id":3495,"name":"Boise Air Terminal","city":"Boise","faa":"BOI","lat":43.564361,"lon":-116.222861},{"id":3502,"name":"Dallas Love Fld","city":"Dallas","faa":"DAL","lat":32.847111,"lon":-96.851778},{"id":3515,"name":"Myrtle Beach Intl","city":"Myrtle Beach","faa":"MYR","lat":33.67975,"lon":-78.928333},{"id":3520,"name":"Ronald Reagan Washington Natl","city":"Washington","faa":"DCA","lat":38.852083,"lon":-77.037722},{"id":3533,"name":"Fort Lauderdale Hollywood Intl","city":"Fort Lauderdale","faa":"FLL","lat":26.072583,"lon":-80.15275},{"id":3536,"name":"Salt Lake City Intl","city":"Salt Lake City","faa":"SLC","lat":40.788389,"lon":-111.977772},{"id":3542,"name":"Harrisburg Intl","city":"Harrisburg","faa":"MDT","lat":40.193494,"lon":-76.763403},{"id":3550,"name":"George Bush Intercontinental","city":"Houston","faa":"IAH","lat":29.984433,"lon":-95.341442},{"id":3559,"name":"El Paso Intl","city":"El Paso","faa":"ELP","lat":31.80725,"lon":-106.377583},{"id":3561,"name":"Columbia Metropolitan","city":"Columbia","faa":"CAE","lat":33.938833,"lon":-81.119528},{"id":3564,"name":"Pensacola Rgnl","city":"Pensacola","faa":"PNS","lat":30.473425,"lon":-87.186611},{"id":3566,"name":"William P Hobby","city":"Houston","faa":"HOU","lat":29.645419,"lon":-95.278889},{"id":3570,"name":"Pittsburgh Intl","city":"Pittsburgh","faa":"PIT","lat":40.491467,"lon":-80.232872},{"id":3576,"name":"Miami Intl","city":"Miami","faa":"MIA","lat":25.79325,"lon":-80.290556},{"id":3577,"name":"Seattle Tacoma Intl","city":"Seattle","faa":"SEA","lat":47.449,"lon":-122.309306},{"id":3578,"name":"Lovell Fld","city":"Chattanooga","faa":"CHA","lat":35.035278,"lon":-85.203808},{"id":3580,"name":"Jackson Evers Intl","city":"Jackson","faa":"JAN","lat":32.311167,"lon":-90.075889},{"id":3582,"name":"Long Beach","city":"Long Beach","faa":"LGB","lat":33.817722,"lon":-118.151611},{"id":3585,"name":"Indianapolis Intl","city":"Indianapolis","faa":"IND","lat":39.717331,"lon":-86.294383},{"id":3589,"name":"Westchester Co","city":"White Plains","faa":"HPN","lat":41.066959,"lon":-73.707575},{"id":3608,"name":"Richmond Intl","city":"Richmond","faa":"RIC","lat":37.505167,"lon":-77.319667},{"id":3611,"name":"Norfolk Intl","city":"Norfolk","faa":"ORF","lat":36.894611,"lon":-76.201222},{"id":3613,"name":"Savannah Hilton Head Intl","city":"Savannah","faa":"SAV","lat":32.127583,"lon":-81.202139},{"id":3621,"name":"San Antonio Intl","city":"San Antonio","faa":"SAT","lat":29.533694,"lon":-98.469778},{"id":3622,"name":"Greater Rochester Intl","city":"Rochester","faa":"ROC","lat":43.118866,"lon":-77.672389},{"id":3626,"name":"Raleigh Durham Intl","city":"Raleigh-durham","faa":"RDU","lat":35.877639,"lon":-78.787472},{"id":3627,"name":"James M Cox Dayton Intl","city":"Dayton","faa":"DAY","lat":39.902375,"lon":-84.219375},{"id":3636,"name":"Tucson Intl","city":"Tucson","faa":"TUS","lat":32.116083,"lon":-110.941028},{"id":3641,"name":"Theodore Francis Green State","city":"Providence","faa":"PVD","lat":41.732581,"lon":-71.420383},{"id":3644,"name":"Bob Hope","city":"Burbank","faa":"BUR","lat":34.200667,"lon":-118.358667},{"id":3645,"name":"Detroit Metro Wayne Co","city":"Detroit","faa":"DTW","lat":42.212444,"lon":-83.353389},{"id":3646,"name":"Tampa Intl","city":"Tampa","faa":"TPA","lat":27.975472,"lon":-82.53325},{"id":3660,"name":"Adams Fld","city":"Little Rock","faa":"LIT","lat":34.729444,"lon":-92.224306},{"id":3670,"name":"Dallas Fort Worth Intl","city":"Dallas-Fort Worth","faa":"DFW","lat":32.896828,"lon":-97.037997},{"id":3673,"name":"Austin Bergstrom Intl","city":"Austin","faa":"AUS","lat":30.194528,"lon":-97.669889},{"id":3676,"name":"Mc Ghee Tyson","city":"Knoxville","faa":"TYS","lat":35.810972,"lon":-83.994028},{"id":3678,"name":"Lambert St Louis Intl","city":"St. Louis","faa":"STL","lat":38.748697,"lon":-90.370028},{"id":3682,"name":"Hartsfield Jackson Atlanta Intl","city":"Atlanta","faa":"ATL","lat":33.636719,"lon":-84.428067},{"id":3685,"name":"Gerald R Ford Intl","city":"Grand Rapids","faa":"GRR","lat":42.880833,"lon":-85.522806},{"id":3687,"name":"Fresno Yosemite Intl","city":"Fresno","faa":"FAT","lat":36.776194,"lon":-119.71814},{"id":3690,"name":"Nashville Intl","city":"Nashville","faa":"BNA","lat":36.124472,"lon":-86.678194},{"id":3697,"name":"La Guardia","city":"New York","faa":"LGA","lat":40.777245,"lon":-73.872608},{"id":3698,"name":"Tallahassee Rgnl","city":"Tallahassee","faa":"TLH","lat":30.396528,"lon":-84.350333},{"id":3711,"name":"Burlington Intl","city":"Burlington","faa":"BTV","lat":44.471861,"lon":-73.153278},{"id":3712,"name":"Jacksonville Intl","city":"Jacksonville","faa":"JAX","lat":30.494056,"lon":-81.687861},{"id":3714,"name":"Washington Dulles Intl","city":"Washington","faa":"IAD","lat":38.944533,"lon":-77.455811},{"id":3717,"name":"General Mitchell Intl","city":"Milwaukee","faa":"MKE","lat":42.947222,"lon":-87.896583},{"id":3720,"name":"Portland Intl","city":"Portland","faa":"PDX","lat":45.588722,"lon":-122.5975},{"id":3722,"name":"Palm Beach Intl","city":"West Palm Beach","faa":"PBI","lat":26.683161,"lon":-80.095589},{"id":3729,"name":"Des Moines Intl","city":"Des Moines","faa":"DSM","lat":41.533972,"lon":-93.663083},{"id":3731,"name":"San Diego Intl","city":"San Diego","faa":"SAN","lat":32.733556,"lon":-117.189667},{"id":3734,"name":"Ontario Intl","city":"Ontario","faa":"ONT","lat":34.056,"lon":-117.601194},{"id":3745,"name":"Syracuse Hancock Intl","city":"Syracuse","faa":"SYR","lat":43.111187,"lon":-76.106311},{"id":3747,"name":"Chicago Midway Intl","city":"Chicago","faa":"MDW","lat":41.785972,"lon":-87.752417},{"id":3748,"name":"Norman Y Mineta San Jose Intl","city":"San Jose","faa":"SJC","lat":37.3626,"lon":-121.929022},{"id":3751,"name":"Denver Intl","city":"Denver","faa":"DEN","lat":39.861656,"lon":-104.673178},{"id":3752,"name":"Philadelphia Intl","city":"Philadelphia","faa":"PHL","lat":39.871944,"lon":-75.241139},{"id":3759,"name":"Port Columbus Intl","city":"Columbus","faa":"CMH","lat":39.997972,"lon":-82.891889},{"id":3793,"name":"Southwest Florida Intl","city":"Fort Myers","faa":"RSW","lat":26.536167,"lon":-81.755167},{"id":3797,"name":"John F Kennedy Intl","city":"New York","faa":"JFK","lat":40.639751,"lon":-73.778925},{"id":3806,"name":"Charleston Afb Intl","city":"Charleston","faa":"CHS","lat":32.898647,"lon":-80.040528},{"id":3807,"name":"Reno Tahoe Intl","city":"Reno","faa":"RNO","lat":39.499108,"lon":-119.768108},{"id":3811,"name":"Birmingham Intl","city":"Birmingham","faa":"BHM","lat":33.562942,"lon":-86.75355},{"id":3817,"name":"Sacramento Intl","city":"Sacramento","faa":"SMF","lat":38.695417,"lon":-121.590778},{"id":3819,"name":"City Of Colorado Springs Muni","city":"Colorado Springs","faa":"COS","lat":38.805805,"lon":-104.700778},{"id":3820,"name":"Buffalo Niagara Intl","city":"Buffalo","faa":"BUF","lat":42.940525,"lon":-78.732167},{"id":3825,"name":"Bradley Intl","city":"Windsor Locks","faa":"BDL","lat":41.938889,"lon":-72.683222},{"id":3830,"name":"Chicago Ohare Intl","city":"Chicago","faa":"ORD","lat":41.978603,"lon":-87.904842},{"id":3839,"name":"Palm Springs Intl","city":"Palm Springs","faa":"PSP","lat":33.829667,"lon":-116.506694},{"id":3845,"name":"Wilmington Intl","city":"Wilmington","faa":"ILM","lat":34.270615,"lon":-77.902569},{"id":3849,"name":"Baltimore Washington Intl","city":"Baltimore","faa":"BWI","lat":39.175361,"lon":-76.668333},{"id":3855,"name":"Tulsa Intl","city":"Tulsa","faa":"TUL","lat":36.198389,"lon":-95.888111},{"id":3858,"name":"Minneapolis St Paul Intl","city":"Minneapolis","faa":"MSP","lat":44.881956,"lon":-93.221767},{"id":3861,"name":"Louis Armstrong New Orleans Intl","city":"New Orleans","faa":"MSY","lat":29.993389,"lon":-90.258028},{"id":3863,"name":"Will Rogers World","city":"Oklahoma City","faa":"OKC","lat":35.393089,"lon":-97.600733},{"id":3864,"name":"Albany Intl","city":"Albany","faa":"ALB","lat":42.748267,"lon":-73.801692},{"id":3867,"name":"John Wayne Arpt Orange Co","city":"Santa Ana","faa":"SNA","lat":33.675667,"lon":-117.868222},{"id":3873,"name":"Eglin Afb","city":"Valparaiso","faa":"VPS","lat":30.48325,"lon":-86.5254},{"id":3875,"name":"Key West Intl","city":"Key West","faa":"EYW","lat":24.556111,"lon":-81.759556},{"id":3876,"name":"Charlotte Douglas Intl","city":"Charlotte","faa":"CLT","lat":35.214,"lon":-80.943139},{"id":3877,"name":"Mc Carran Intl","city":"Las Vegas","faa":"LAS","lat":36.080056,"lon":-115.15225},{"id":3878,"name":"Orlando Intl","city":"Orlando","faa":"MCO","lat":28.429394,"lon":-81.308994},{"id":3948,"name":"Monterey Peninsula","city":"Monterey","faa":"MRY","lat":36.587,"lon":-121.842944},{"id":4007,"name":"Asheville Regional Airport","city":"Asheville","faa":"AVL","lat":35.436194,"lon":-82.541806},{"id":4008,"name":"Piedmont Triad","city":"Greensboro","faa":"GSO","lat":36.09775,"lon":-79.937306},{"id":4009,"name":"Sioux Falls","city":"Sioux Falls","faa":"FSD","lat":43.582014,"lon":-96.741914},{"id":4011,"name":"Manchester Regional Airport","city":"Manchester NH","faa":"MHT","lat":42.932556,"lon":-71.435667},{"id":4014,"name":"Louisville International Airport","city":"Louisville","faa":"SDF","lat":38.1740858,"lon":-85.7364989},{"id":4015,"name":"Charlottesville-Albemarle","city":"Charlottesville VA","faa":"CHO","lat":38.138639,"lon":-78.452861},{"id":4016,"name":"Roanoke Regional","city":"Roanoke VA","faa":"ROA","lat":37.325472,"lon":-79.975417},{"id":4017,"name":"Blue Grass","city":"Lexington KY","faa":"LEX","lat":38.0365,"lon":-84.605889},{"id":4019,"name":"Albuquerque International Sunport","city":"Albuquerque","faa":"ABQ","lat":35.0402222,"lon":-106.6091944},{"id":4034,"name":"Greenville-Spartanburg International","city":"Greenville","faa":"GSP","lat":34.895556,"lon":-82.218889},{"id":4037,"name":"Central Illinois Rgnl","city":"Bloomington","faa":"BMI","lat":40.477111,"lon":-88.915917},{"id":4041,"name":"Fort Wayne","city":"Fort Wayne","faa":"FWA","lat":40.978472,"lon":-85.195139},{"id":4043,"name":"Cedar Rapids","city":"Cedar Rapids","faa":"CID","lat":41.884694,"lon":-91.710806},{"id":4046,"name":"Peoria Regional","city":"Peoria","faa":"PIA","lat":40.664203,"lon":-89.693258},{"id":4067,"name":"Sarasota Bradenton Intl","city":"Sarasota","faa":"SRQ","lat":27.395444,"lon":-82.554389},{"id":4072,"name":"Quad City Intl","city":"Moline","faa":"MLI","lat":41.448528,"lon":-90.507539},{"id":4089,"name":"Bishop International","city":"Flint","faa":"FNT","lat":42.965424,"lon":-83.743629},{"id":4099,"name":"Mahlon Sweet Fld","city":"Eugene","faa":"EUG","lat":44.124583,"lon":-123.211972},{"id":4112,"name":"Akron Canton Regional Airport","city":"Akron","faa":"CAK","lat":40.9160833,"lon":-81.4421944},{"id":4113,"name":"Huntsville International Airport-Carl T Jones Field","city":"Huntsville","faa":"HSV","lat":34.6371944,"lon":-86.7750556},{"id":4285,"name":"Yeager","city":"Charleston","faa":"CRW","lat":38.373147,"lon":-81.593189},{"id":4292,"name":"Hector International Airport","city":"Fargo","faa":"FAR","lat":46.92065,"lon":-96.8157639},{"id":4348,"name":"Springfield Branson Natl","city":"Springfield","faa":"SGF","lat":37.245667,"lon":-93.388639},{"id":4355,"name":"Lehigh Valley Intl","city":"Allentown","faa":"ABE","lat":40.652083,"lon":-75.440806},{"id":4356,"name":"NW Arkansas Regional","city":"Bentonville","faa":"XNA","lat":36.2818694,"lon":-94.3068111},{"id":4359,"name":"South Bend Rgnl","city":"South Bend","faa":"SBN","lat":41.708661,"lon":-86.31725}],"links":[{"source":3448,"target":3462,"count":6},{"source":3448,"target":3469,"count":6},{"source":3448,"target":3484,"count":14},{"source":3448,"target":3520,"count":6},{"source":3448,"target":3570,"count":6},{"source":3448,"target":3577,"count":6},{"source":3448,"target":3608,"count":8},{"source":3448,"target":3670,"count":8},{"source":3448,"target":3682,"count":15},{"source":3448,"target":3697,"count":6},{"source":3448,"target":3720,"count":6},{"source":3448,"target":3731,"count":6},{"source":3448,"target":3751,"count":6},{"source":3448,"target":3752,"count":6},{"source":3448,"target":3797,"count":8},{"source":3448,"target":3820,"count":6},{"source":3448,"target":3830,"count":10},{"source":3448,"target":3849,"count":6},{"source":3448,"target":3876,"count":6},{"source":3448,"target":3878,"count":8},{"source":3453,"target":3462,"count":7},{"source":3453,"target":3484,"count":6},{"source":3453,"target":3536,"count":5},{"source":3453,"target":3577,"count":7},{"source":3453,"target":3720,"count":7},{"source":3453,"target":3877,"count":6},{"source":3454,"target":3462,"count":6},{"source":3454,"target":3520,"count":6},{"source":3454,"target":3682,"count":8},{"source":3454,"target":3751,"count":7},{"source":3454,"target":3830,"count":6},{"source":3457,"target":3682,"count":8},{"source":3457,"target":3830,"count":6},{"source":3458,"target":3462,"count":6},{"source":3458,"target":3484,"count":5},{"source":3458,"target":3520,"count":6},{"source":3458,"target":3577,"count":5},{"source":3458,"target":3682,"count":16},{"source":3458,"target":3751,"count":8},{"source":3458,"target":3752,"count":5},{"source":3458,"target":3830,"count":6},{"source":3458,"target":3858,"count":6},{"source":3458,"target":3878,"count":5},{"source":3459,"target":3682,"count":6},{"source":3459,"target":3830,"count":6},{"source":3462,"target":3467,"count":6},{"source":3462,"target":3469,"count":8},{"source":3462,"target":3484,"count":12},{"source":3462,"target":3494,"count":8},{"source":3462,"target":3495,"count":6},{"source":3462,"target":3533,"count":8},{"source":3462,"target":3536,"count":8},{"source":3462,"target":3550,"count":6},{"source":3462,"target":3559,"count":6},{"source":3462,"target":3570,"count":6},{"source":3462,"target":3577,"count":9},{"source":3462,"target":3585,"count":6},{"source":3462,"target":3621,"count":7},{"source":3462,"target":3644,"count":6},{"source":3462,"target":3645,"count":8},{"source":3462,"target":3646,"count":7},{"source":3462,"target":3670,"count":6},{"source":3462,"target":3673,"count":6},{"source":3462,"target":3678,"count":6},{"source":3462,"target":3682,"count":18},{"source":3462,"target":3717,"count":7},{"source":3462,"target":3720,"count":9},{"source":3462,"target":3729,"count":5},{"source":3462,"target":3731,"count":8},{"source":3462,"target":3734,"count":7},{"source":3462,"target":3748,"count":7},{"source":3462,"target":3751,"count":14},{"source":3462,"target":3752,"count":8},{"source":3462,"target":3759,"count":6},{"source":3462,"target":3797,"count":8},{"source":3462,"target":3807,"count":6},{"source":3462,"target":3817,"count":7},{"source":3462,"target":3830,"count":6},{"source":3462,"target":3849,"count":7},{"source":3462,"target":3858,"count":11},{"source":3462,"target":3867,"count":8},{"source":3462,"target":3877,"count":8},{"source":3462,"target":3878,"count":7},{"source":3462,"target":4019,"count":7},{"source":3467,"target":3751,"count":8},{"source":3469,"target":3484,"count":14},{"source":3469,"target":3533,"count":7},{"source":3469,"target":3576,"count":6},{"source":3469,"target":3577,"count":11},{"source":3469,"target":3670,"count":10},{"source":3469,"target":3673,"count":6},{"source":3469,"target":3682,"count":20},{"source":3469,"target":3720,"count":8},{"source":3469,"target":3731,"count":6},{"source":3469,"target":3751,"count":7},{"source":3469,"target":3752,"count":8},{"source":3469,"target":3797,"count":14},{"source":3469,"target":3830,"count":10},{"source":3469,"target":3839,"count":9},{"source":3469,"target":3858,"count":8},{"source":3469,"target":3867,"count":5},{"source":3469,"target":3877,"count":8},{"source":3472,"target":3682,"count":8},{"source":3473,"target":3520,"count":6},{"source":3473,"target":3670,"count":6},{"source":3473,"target":3682,"count":14},{"source":3473,"target":3751,"count":6},{"source":3473,"target":3830,"count":8},{"source":3473,"target":3878,"count":6},{"source":3484,"target":3520,"count":8},{"source":3484,"target":3533,"count":6},{"source":3484,"target":3536,"count":12},{"source":3484,"target":3550,"count":10},{"source":3484,"target":3559,"count":9},{"source":3484,"target":3570,"count":8},{"source":3484,"target":3576,"count":8},{"source":3484,"target":3577,"count":10},{"source":3484,"target":3585,"count":8},{"source":3484,"target":3621,"count":5},{"source":3484,"target":3626,"count":8},{"source":3484,"target":3636,"count":11},{"source":3484,"target":3645,"count":5},{"source":3484,"target":3670,"count":12},{"source":3484,"target":3673,"count":10},{"source":3484,"target":3678,"count":9},{"source":3484,"target":3682,"count":19},{"source":3484,"target":3687,"count":8},{"source":3484,"target":3690,"count":10},{"source":3484,"target":3714,"count":8},{"source":3484,"target":3720,"count":8},{"source":3484,"target":3731,"count":10},{"source":3484,"target":3748,"count":15},{"source":3484,"target":3751,"count":14},{"source":3484,"target":3752,"count":6},{"source":3484,"target":3759,"count":8},{"source":3484,"target":3797,"count":16},{"source":3484,"target":3807,"count":11},{"source":3484,"target":3817,"count":13},{"source":3484,"target":3825,"count":6},{"source":3484,"target":3830,"count":13},{"source":3484,"target":3849,"count":5},{"source":3484,"target":3858,"count":13},{"source":3484,"target":3861,"count":18},{"source":3484,"target":3863,"count":8},{"source":3484,"target":3877,"count":18},{"source":3484,"target":3878,"count":12},{"source":3484,"target":3948,"count":8},{"source":3484,"target":4019,"count":10},{"source":3484,"target":4099,"count":6},{"source":3486,"target":3670,"count":6},{"source":3486,"target":3682,"count":11},{"source":3486,"target":3751,"count":5},{"source":3486,"target":3797,"count":6},{"source":3486,"target":3830,"count":6},{"source":3486,"target":3849,"count":5},{"source":3486,"target":3876,"count":6},{"source":3488,"target":3520,"count":6},{"source":3488,"target":3670,"count":6},{"source":3488,"target":3682,"count":14},{"source":3488,"target":3751,"count":6},{"source":3488,"target":3752,"count":6},{"source":3488,"target":3797,"count":6},{"source":3488,"target":3830,"count":8},{"source":3488,"target":3876,"count":6},{"source":3494,"target":3576,"count":6},{"source":3494,"target":3577,"count":6},{"source":3494,"target":3670,"count":6},{"source":3494,"target":3682,"count":14},{"source":3494,"target":3690,"count":5},{"source":3494,"target":3830,"count":6},{"source":3494,"target":3861,"count":10},{"source":3494,"target":3876,"count":6},{"source":3495,"target":3751,"count":5},{"source":3502,"target":3682,"count":8},{"source":3515,"target":3682,"count":8},{"source":3515,"target":3752,"count":6},{"source":3520,"target":3533,"count":6},{"source":3520,"target":3645,"count":6},{"source":3520,"target":3646,"count":6},{"source":3520,"target":3678,"count":6},{"source":3520,"target":3682,"count":14},{"source":3520,"target":3697,"count":6},{"source":3520,"target":3793,"count":8},{"source":3520,"target":3797,"count":6},{"source":3520,"target":3830,"count":6},{"source":3520,"target":3858,"count":8},{"source":3520,"target":3878,"count":6},{"source":3533,"target":3626,"count":6},{"source":3533,"target":3646,"count":10},{"source":3533,"target":3670,"count":6},{"source":3533,"target":3673,"count":5},{"source":3533,"target":3682,"count":16},{"source":3533,"target":3697,"count":6},{"source":3533,"target":3751,"count":8},{"source":3533,"target":3752,"count":7},{"source":3533,"target":3830,"count":8},{"source":3533,"target":3849,"count":6},{"source":3533,"target":3878,"count":6},{"source":3536,"target":3577,"count":8},{"source":3536,"target":3670,"count":6},{"source":3536,"target":3682,"count":12},{"source":3536,"target":3720,"count":7},{"source":3536,"target":3751,"count":9},{"source":3536,"target":3752,"count":6},{"source":3536,"target":3830,"count":8},{"source":3536,"target":3849,"count":6},{"source":3536,"target":3876,"count":6},{"source":3536,"target":3877,"count":6},{"source":3542,"target":3682,"count":7},{"source":3542,"target":3830,"count":6},{"source":3550,"target":3576,"count":6},{"source":3550,"target":3577,"count":7},{"source":3550,"target":3645,"count":6},{"source":3550,"target":3670,"count":6},{"source":3550,"target":3682,"count":18},{"source":3550,"target":3751,"count":6},{"source":3550,"target":3752,"count":6},{"source":3550,"target":3830,"count":8},{"source":3550,"target":3858,"count":6},{"source":3550,"target":3861,"count":8},{"source":3550,"target":3876,"count":6},{"source":3559,"target":3682,"count":7},{"source":3561,"target":3682,"count":8},{"source":3564,"target":3682,"count":10},{"source":3566,"target":3682,"count":12},{"source":3570,"target":3670,"count":5},{"source":3570,"target":3682,"count":14},{"source":3570,"target":3697,"count":6},{"source":3570,"target":3797,"count":6},{"source":3570,"target":3830,"count":6},{"source":3570,"target":3878,"count":6},{"source":3576,"target":3645,"count":6},{"source":3576,"target":3682,"count":24},{"source":3576,"target":3697,"count":6},{"source":3576,"target":3714,"count":6},{"source":3576,"target":3751,"count":6},{"source":3576,"target":3797,"count":6},{"source":3576,"target":3830,"count":6},{"source":3576,"target":3849,"count":5},{"source":3576,"target":3858,"count":6},{"source":3576,"target":3861,"count":10},{"source":3577,"target":3582,"count":6},{"source":3577,"target":3670,"count":6},{"source":3577,"target":3682,"count":12},{"source":3577,"target":3731,"count":7},{"source":3577,"target":3748,"count":6},{"source":3577,"target":3751,"count":11},{"source":3577,"target":3752,"count":6},{"source":3577,"target":3797,"count":10},{"source":3577,"target":3817,"count":9},{"source":3577,"target":3830,"count":8},{"source":3577,"target":3858,"count":8},{"source":3577,"target":3877,"count":8},{"source":3578,"target":3682,"count":10},{"source":3580,"target":3682,"count":10},{"source":3582,"target":3720,"count":6},{"source":3585,"target":3646,"count":6},{"source":3585,"target":3682,"count":18},{"source":3585,"target":3751,"count":8},{"source":3585,"target":3797,"count":6},{"source":3585,"target":3830,"count":6},{"source":3585,"target":3878,"count":6},{"source":3589,"target":3682,"count":6},{"source":3589,"target":3830,"count":6},{"source":3608,"target":3682,"count":14},{"source":3608,"target":3697,"count":6},{"source":3608,"target":3830,"count":6},{"source":3608,"target":3878,"count":6},{"source":3611,"target":3682,"count":14},{"source":3611,"target":3697,"count":6},{"source":3611,"target":3797,"count":6},{"source":3611,"target":3878,"count":6},{"source":3613,"target":3682,"count":12},{"source":3621,"target":3682,"count":14},{"source":3621,"target":3751,"count":6},{"source":3621,"target":3830,"count":6},{"source":3621,"target":3878,"count":6},{"source":3622,"target":3682,"count":8},{"source":3622,"target":3830,"count":6},{"source":3626,"target":3646,"count":6},{"source":3626,"target":3682,"count":18},{"source":3626,"target":3697,"count":6},{"source":3626,"target":3752,"count":6},{"source":3626,"target":3797,"count":8},{"source":3626,"target":3830,"count":6},{"source":3626,"target":3849,"count":6},{"source":3626,"target":3877,"count":5},{"source":3626,"target":3878,"count":6},{"source":3627,"target":3682,"count":12},{"source":3627,"target":3697,"count":6},{"source":3627,"target":3830,"count":6},{"source":3636,"target":3682,"count":10},{"source":3636,"target":3751,"count":5},{"source":3641,"target":3682,"count":6},{"source":3641,"target":3878,"count":6},{"source":3645,"target":3670,"count":8},{"source":3645,"target":3678,"count":5},{"source":3645,"target":3682,"count":16},{"source":3645,"target":3697,"count":8},{"source":3645,"target":3747,"count":6},{"source":3645,"target":3751,"count":10},{"source":3645,"target":3752,"count":6},{"source":3645,"target":3830,"count":8},{"source":3645,"target":3849,"count":6},{"source":3645,"target":3861,"count":9},{"source":3645,"target":3876,"count":6},{"source":3645,"target":3877,"count":6},{"source":3646,"target":3670,"count":6},{"source":3646,"target":3682,"count":15},{"source":3646,"target":3751,"count":7},{"source":3646,"target":3752,"count":6},{"source":3646,"target":3759,"count":5},{"source":3646,"target":3797,"count":8},{"source":3646,"target":3825,"count":5},{"source":3646,"target":3830,"count":8},{"source":3646,"target":3875,"count":8},{"source":3660,"target":3682,"count":8},{"source":3660,"target":3830,"count":6},{"source":3670,"target":3673,"count":5},{"source":3670,"target":3678,"count":5},{"source":3670,"target":3682,"count":21},{"source":3670,"target":3697,"count":8},{"source":3670,"target":3714,"count":6},{"source":3670,"target":3720,"count":8},{"source":3670,"target":3731,"count":8},{"source":3670,"target":3751,"count":10},{"source":3670,"target":3752,"count":6},{"source":3670,"target":3793,"count":5},{"source":3670,"target":3797,"count":6},{"source":3670,"target":3830,"count":8},{"source":3670,"target":3849,"count":6},{"source":3670,"target":3858,"count":10},{"source":3670,"target":3861,"count":12},{"source":3670,"target":3867,"count":6},{"source":3670,"target":3877,"count":6},{"source":3670,"target":3878,"count":6},{"source":3673,"target":3682,"count":14},{"source":3673,"target":3751,"count":7},{"source":3673,"target":3797,"count":8},{"source":3673,"target":3830,"count":6},{"source":3673,"target":3861,"count":5},{"source":3673,"target":3877,"count":5},{"source":3673,"target":3878,"count":8},{"source":3676,"target":3682,"count":12},{"source":3676,"target":3697,"count":6},{"source":3676,"target":3830,"count":6},{"source":3678,"target":3682,"count":16},{"source":3678,"target":3697,"count":8},{"source":3678,"target":3751,"count":7},{"source":3678,"target":3752,"count":7},{"source":3678,"target":3830,"count":6},{"source":3678,"target":3858,"count":6},{"source":3682,"target":3685,"count":6},{"source":3682,"target":3690,"count":13},{"source":3682,"target":3697,"count":15},{"source":3682,"target":3698,"count":6},{"source":3682,"target":3711,"count":5},{"source":3682,"target":3712,"count":18},{"source":3682,"target":3714,"count":18},{"source":3682,"target":3717,"count":13},{"source":3682,"target":3720,"count":9},{"source":3682,"target":3722,"count":16},{"source":3682,"target":3729,"count":6},{"source":3682,"target":3731,"count":16},{"source":3682,"target":3745,"count":8},{"source":3682,"target":3747,"count":10},{"source":3682,"target":3748,"count":5},{"source":3682,"target":3751,"count":22},{"source":3682,"target":3752,"count":18},{"source":3682,"target":3759,"count":16},{"source":3682,"target":3793,"count":16},{"source":3682,"target":3797,"count":17},{"source":3682,"target":3806,"count":13},{"source":3682,"target":3811,"count":12},{"source":3682,"target":3817,"count":8},{"source":3682,"target":3819,"count":5},{"source":3682,"target":3820,"count":8},{"source":3682,"target":3825,"count":14},{"source":3682,"target":3830,"count":39},{"source":3682,"target":3845,"count":8},{"source":3682,"target":3849,"count":14},{"source":3682,"target":3855,"count":8},{"source":3682,"target":3858,"count":15},{"source":3682,"target":3861,"count":18},{"source":3682,"target":3863,"count":13},{"source":3682,"target":3864,"count":9},{"source":3682,"target":3867,"count":8},{"source":3682,"target":3873,"count":7},{"source":3682,"target":3875,"count":6},{"source":3682,"target":3876,"count":16},{"source":3682,"target":3877,"count":14},{"source":3682,"target":3878,"count":16},{"source":3682,"target":4007,"count":8},{"source":3682,"target":4008,"count":11},{"source":3682,"target":4011,"count":5},{"source":3682,"target":4014,"count":12},{"source":3682,"target":4015,"count":6},{"source":3682,"target":4016,"count":8},{"source":3682,"target":4017,"count":8},{"source":3682,"target":4019,"count":10},{"source":3682,"target":4034,"count":9},{"source":3682,"target":4037,"count":6},{"source":3682,"target":4041,"count":8},{"source":3682,"target":4043,"count":7},{"source":3682,"target":4046,"count":6},{"source":3682,"target":4067,"count":10},{"source":3682,"target":4072,"count":6},{"source":3682,"target":4089,"count":6},{"source":3682,"target":4112,"count":10},{"source":3682,"target":4113,"count":10},{"source":3682,"target":4285,"count":8},{"source":3682,"target":4348,"count":6},{"source":3682,"target":4355,"count":6},{"source":3682,"target":4356,"count":10},{"source":3682,"target":4359,"count":6},{"source":3685,"target":3830,"count":6},{"source":3690,"target":3697,"count":8},{"source":3690,"target":3751,"count":7},{"source":3690,"target":3752,"count":6},{"source":3690,"target":3797,"count":6},{"source":3690,"target":3830,"count":6},{"source":3690,"target":3878,"count":6},{"source":3697,"target":3722,"count":8},{"source":3697,"target":3751,"count":8},{"source":3697,"target":3759,"count":6},{"source":3697,"target":3830,"count":10},{"source":3697,"target":3845,"count":6},{"source":3697,"target":3861,"count":6},{"source":3697,"target":3876,"count":6},{"source":3697,"target":4008,"count":6},{"source":3697,"target":4014,"count":6},{"source":3697,"target":4015,"count":6},{"source":3712,"target":3830,"count":6},{"source":3714,"target":3751,"count":5},{"source":3714,"target":3797,"count":6},{"source":3714,"target":3861,"count":6},{"source":3714,"target":3876,"count":6},{"source":3717,"target":3751,"count":8},{"source":3717,"target":3830,"count":6},{"source":3717,"target":3858,"count":6},{"source":3717,"target":3878,"count":6},{"source":3720,"target":3731,"count":6},{"source":3720,"target":3748,"count":6},{"source":3720,"target":3751,"count":7},{"source":3720,"target":3830,"count":8},{"source":3720,"target":3877,"count":6},{"source":3720,"target":4099,"count":5},{"source":3729,"target":3830,"count":6},{"source":3731,"target":3751,"count":8},{"source":3731,"target":3797,"count":12},{"source":3731,"target":3830,"count":8},{"source":3731,"target":3858,"count":6},{"source":3731,"target":3877,"count":6},{"source":3734,"target":3751,"count":6},{"source":3745,"target":3830,"count":6},{"source":3747,"target":3751,"count":6},{"source":3747,"target":3858,"count":8},{"source":3748,"target":3751,"count":5},{"source":3751,"target":3752,"count":9},{"source":3751,"target":3759,"count":5},{"source":3751,"target":3807,"count":5},{"source":3751,"target":3817,"count":6},{"source":3751,"target":3830,"count":8},{"source":3751,"target":3849,"count":6},{"source":3751,"target":3855,"count":5},{"source":3751,"target":3858,"count":12},{"source":3751,"target":3861,"count":10},{"source":3751,"target":3863,"count":8},{"source":3751,"target":3867,"count":8},{"source":3751,"target":3877,"count":10},{"source":3751,"target":3878,"count":8},{"source":3751,"target":4019,"count":6},{"source":3752,"target":3793,"count":6},{"source":3752,"target":3830,"count":6},{"source":3752,"target":3858,"count":6},{"source":3752,"target":3877,"count":8},{"source":3752,"target":3878,"count":8},{"source":3759,"target":3797,"count":6},{"source":3759,"target":3830,"count":6},{"source":3793,"target":3830,"count":8},{"source":3797,"target":3830,"count":10},{"source":3797,"target":3849,"count":6},{"source":3797,"target":3861,"count":22},{"source":3797,"target":3876,"count":8},{"source":3797,"target":3877,"count":16},{"source":3797,"target":3878,"count":8},{"source":3807,"target":3877,"count":5},{"source":3811,"target":3878,"count":6},{"source":3820,"target":3830,"count":6},{"source":3820,"target":3878,"count":6},{"source":3825,"target":3830,"count":6},{"source":3825,"target":3878,"count":8},{"source":3830,"target":3849,"count":6},{"source":3830,"target":3855,"count":6},{"source":3830,"target":3858,"count":10},{"source":3830,"target":3861,"count":21},{"source":3830,"target":3863,"count":6},{"source":3830,"target":3867,"count":6},{"source":3830,"target":3876,"count":6},{"source":3830,"target":3877,"count":8},{"source":3830,"target":3878,"count":8},{"source":3830,"target":4009,"count":6},{"source":3830,"target":4014,"count":6},{"source":3830,"target":4017,"count":6},{"source":3830,"target":4019,"count":6},{"source":3830,"target":4041,"count":6},{"source":3830,"target":4043,"count":6},{"source":3830,"target":4046,"count":6},{"source":3830,"target":4072,"count":6},{"source":3830,"target":4113,"count":6},{"source":3830,"target":4292,"count":6},{"source":3830,"target":4348,"count":6},{"source":3830,"target":4356,"count":6},{"source":3849,"target":3876,"count":8},{"source":3849,"target":3877,"count":6},{"source":3858,"target":3861,"count":7},{"source":3858,"target":3876,"count":6},{"source":3858,"target":3877,"count":6},{"source":3858,"target":3878,"count":8},{"source":3876,"target":3878,"count":8},{"source":3878,"target":4014,"count":6}]}

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
#toggle {
    position: absolute;
    right: 15px; top: 15px;
    z-index: 100;
}

.map path {
    fill: #eee;
    stroke: #fff;
    stroke-width: 2;
}

.links line {
    stroke: #679;
    stroke-opacity: 0.25;
}

.nodes circle {
    fill: #679;
    stroke: #235;
    stroke-width: 2;
}
</style>
<body>
<button id="toggle">Toggle Map</button>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var positioning = 'map'

var width = 960
var height = 600

var projection = d3.geoAlbersUsa()
    .scale([width * 1.25])
    .translate([width / 2, height / 2])

var path = d3.geoPath().projection(projection)

var linkForce = d3.forceLink()
    .id(function (d) { return d.id })
    .distance(40)

var simulation = d3.forceSimulation()
    .force('link', linkForce)
    .force('charge', d3.forceManyBody().strength(-160))
    .force('center', d3.forceCenter(width / 2, height / 2))
    .stop()

var drag = d3.drag()
    .on('start', dragStarted)
    .on('drag', dragged)
    .on('end', dragEnded)

d3.queue()
    .defer(d3.json, 'data.json')
    .defer(d3.json, 'continental-us.json')
    .awaitAll(initialize)

function initialize(error, results) {
    if (error) { throw error }

    var graph = results[0]
    var features = results[1].features

    simulation.nodes(graph.nodes)
        .on('tick', ticked)

    simulation.force('link').links(graph.links)

    var svg = d3.select('body')
        .append('svg')
        .attr('width', width)
        .attr('height', height)

    var map = svg.append('g')
        .attr('class', 'map')
        .selectAll('path')
        .data(features)
        .enter().append('path')
        .attr('d', path)

    var links = svg.append('g')
        .attr('class', 'links')
        .selectAll('line')
        .data(graph.links)
        .enter().append('line')
        .attr('stroke-width', function (d) { return d.count / 4 })

    var nodes = svg.append('g')
        .attr('class', 'nodes')
        .selectAll('circle')
        .data(graph.nodes)
        .enter().append('circle')
        .attr('r', 5)
        .call(drag)

    nodes.append('title')
        .text(function (d) { return d.faa })

    fixed(true)
    d3.select('#toggle').on('click', toggle)

    function fixed(immediate) {
        graph.nodes.forEach(function (d) {
            var pos = projection([d.lon, d.lat])
            d.x = pos[0]
            d.y = pos[1]
        })

        var t = d3.transition()
            .duration(immediate ? 0 : 600)
            .ease(d3.easeElastic.period(0.5))

        update(links.transition(t), nodes.transition(t))
    }

    function ticked() {
        update(links, nodes)
    }

    function update(links, nodes) {
        links
            .attr('x1', function (d) { return d.source.x })
            .attr('y1', function (d) { return d.source.y })
            .attr('x2', function (d) { return d.target.x })
            .attr('y2', function (d) { return d.target.y })

        nodes
            .attr('cx', function (d) { return d.x })
            .attr('cy', function (d) { return d.y })
    }

    function toggle() {
        if (positioning === 'map') {
            positioning = 'sim'
            map.attr('opacity', 0.25)
            simulation.alpha(1).restart()
        } else {
            positioning = 'map'
            map.attr('opacity', 1)
            simulation.stop()
            fixed()
        }
    }
}

function dragStarted(d) {
    if (positioning === 'map') { return }
    simulation.alphaTarget(0.3).restart()
    d.fx = d.x
    d.fy = d.y
}

function dragged(d) {
    if (positioning === 'map') { return }
    d.fx = d3.event.x
    d.fy = d3.event.y
}

function dragEnded(d) {
    if (positioning === 'map') { return }
    simulation.alphaTarget(0)
    d.fx = null
    d.fy = null
}

</script>
</body>

thumbnail.png