Skip to content

Instantly share code, notes, and snippets.

@cmgiven

cmgiven/.block

Last active February 27, 2020 20:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save cmgiven/4cfa1a95f9b952622280a90138842b79 to your computer and use it in GitHub Desktop.
Save cmgiven/4cfa1a95f9b952622280a90138842b79 to your computer and use it in GitHub Desktop.
Download ZIP
Map to Force-Directed Graph
Raw
.block
license: mit
height: 600
Raw
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.
Display the source blob
Display the rendered blob
Raw
continental-us.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
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}]}
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment