Created
December 5, 2012 04:01
-
-
Save JohnCoogan/4212091 to your computer and use it in GitHub Desktop.
Visualizing My Twitter Graph
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"directed": false, | |
"graph": [], | |
"links": [ | |
{ | |
"source": 0, | |
"target": 6 | |
}, | |
{ | |
"source": 0, | |
"target": 13 | |
}, | |
{ | |
"source": 0, | |
"target": 24 | |
}, | |
{ | |
"source": 0, | |
"target": 14 | |
}, | |
{ | |
"source": 0, | |
"target": 15 | |
}, | |
{ | |
"source": 0, | |
"target": 9 | |
}, | |
{ | |
"source": 0, | |
"target": 23 | |
}, | |
{ | |
"source": 0, | |
"target": 10 | |
}, | |
{ | |
"source": 0, | |
"target": 16 | |
}, | |
{ | |
"source": 0, | |
"target": 21 | |
}, | |
{ | |
"source": 0, | |
"target": 7 | |
}, | |
{ | |
"source": 0, | |
"target": 17 | |
}, | |
{ | |
"source": 1, | |
"target": 8 | |
}, | |
{ | |
"source": 1, | |
"target": 4 | |
}, | |
{ | |
"source": 2, | |
"target": 14 | |
}, | |
{ | |
"source": 2, | |
"target": 6 | |
}, | |
{ | |
"source": 2, | |
"target": 23 | |
}, | |
{ | |
"source": 2, | |
"target": 22 | |
}, | |
{ | |
"source": 2, | |
"target": 19 | |
}, | |
{ | |
"source": 2, | |
"target": 18 | |
}, | |
{ | |
"source": 2, | |
"target": 11 | |
}, | |
{ | |
"source": 2, | |
"target": 10 | |
}, | |
{ | |
"source": 2, | |
"target": 3 | |
}, | |
{ | |
"source": 2, | |
"target": 17 | |
}, | |
{ | |
"source": 2, | |
"target": 21 | |
}, | |
{ | |
"source": 3, | |
"target": 5 | |
}, | |
{ | |
"source": 3, | |
"target": 9 | |
}, | |
{ | |
"source": 4, | |
"target": 24 | |
}, | |
{ | |
"source": 4, | |
"target": 20 | |
}, | |
{ | |
"source": 4, | |
"target": 9 | |
}, | |
{ | |
"source": 4, | |
"target": 8 | |
}, | |
{ | |
"source": 4, | |
"target": 17 | |
}, | |
{ | |
"source": 5, | |
"target": 13 | |
}, | |
{ | |
"source": 5, | |
"target": 24 | |
}, | |
{ | |
"source": 5, | |
"target": 14 | |
}, | |
{ | |
"source": 5, | |
"target": 15 | |
}, | |
{ | |
"source": 5, | |
"target": 21 | |
}, | |
{ | |
"source": 5, | |
"target": 9 | |
}, | |
{ | |
"source": 5, | |
"target": 23 | |
}, | |
{ | |
"source": 5, | |
"target": 10 | |
}, | |
{ | |
"source": 5, | |
"target": 6 | |
}, | |
{ | |
"source": 5, | |
"target": 7 | |
}, | |
{ | |
"source": 6, | |
"target": 19 | |
}, | |
{ | |
"source": 6, | |
"target": 13 | |
}, | |
{ | |
"source": 6, | |
"target": 7 | |
}, | |
{ | |
"source": 6, | |
"target": 11 | |
}, | |
{ | |
"source": 6, | |
"target": 24 | |
}, | |
{ | |
"source": 6, | |
"target": 14 | |
}, | |
{ | |
"source": 6, | |
"target": 22 | |
}, | |
{ | |
"source": 6, | |
"target": 15 | |
}, | |
{ | |
"source": 6, | |
"target": 8 | |
}, | |
{ | |
"source": 6, | |
"target": 9 | |
}, | |
{ | |
"source": 6, | |
"target": 23 | |
}, | |
{ | |
"source": 6, | |
"target": 18 | |
}, | |
{ | |
"source": 6, | |
"target": 10 | |
}, | |
{ | |
"source": 6, | |
"target": 16 | |
}, | |
{ | |
"source": 6, | |
"target": 21 | |
}, | |
{ | |
"source": 6, | |
"target": 12 | |
}, | |
{ | |
"source": 6, | |
"target": 17 | |
}, | |
{ | |
"source": 7, | |
"target": 13 | |
}, | |
{ | |
"source": 7, | |
"target": 24 | |
}, | |
{ | |
"source": 7, | |
"target": 14 | |
}, | |
{ | |
"source": 7, | |
"target": 15 | |
}, | |
{ | |
"source": 7, | |
"target": 25 | |
}, | |
{ | |
"source": 7, | |
"target": 9 | |
}, | |
{ | |
"source": 7, | |
"target": 23 | |
}, | |
{ | |
"source": 7, | |
"target": 18 | |
}, | |
{ | |
"source": 7, | |
"target": 10 | |
}, | |
{ | |
"source": 7, | |
"target": 21 | |
}, | |
{ | |
"source": 7, | |
"target": 17 | |
}, | |
{ | |
"source": 9, | |
"target": 13 | |
}, | |
{ | |
"source": 9, | |
"target": 18 | |
}, | |
{ | |
"source": 9, | |
"target": 24 | |
}, | |
{ | |
"source": 9, | |
"target": 14 | |
}, | |
{ | |
"source": 9, | |
"target": 15 | |
}, | |
{ | |
"source": 9, | |
"target": 23 | |
}, | |
{ | |
"source": 9, | |
"target": 10 | |
}, | |
{ | |
"source": 9, | |
"target": 16 | |
}, | |
{ | |
"source": 9, | |
"target": 25 | |
}, | |
{ | |
"source": 9, | |
"target": 21 | |
}, | |
{ | |
"source": 9, | |
"target": 17 | |
}, | |
{ | |
"source": 10, | |
"target": 24 | |
}, | |
{ | |
"source": 10, | |
"target": 12 | |
}, | |
{ | |
"source": 10, | |
"target": 14 | |
}, | |
{ | |
"source": 10, | |
"target": 13 | |
}, | |
{ | |
"source": 10, | |
"target": 15 | |
}, | |
{ | |
"source": 10, | |
"target": 18 | |
}, | |
{ | |
"source": 10, | |
"target": 16 | |
}, | |
{ | |
"source": 10, | |
"target": 23 | |
}, | |
{ | |
"source": 10, | |
"target": 17 | |
}, | |
{ | |
"source": 10, | |
"target": 25 | |
}, | |
{ | |
"source": 10, | |
"target": 21 | |
}, | |
{ | |
"source": 12, | |
"target": 15 | |
}, | |
{ | |
"source": 12, | |
"target": 14 | |
}, | |
{ | |
"source": 12, | |
"target": 23 | |
}, | |
{ | |
"source": 12, | |
"target": 25 | |
}, | |
{ | |
"source": 12, | |
"target": 21 | |
}, | |
{ | |
"source": 13, | |
"target": 24 | |
}, | |
{ | |
"source": 13, | |
"target": 15 | |
}, | |
{ | |
"source": 13, | |
"target": 21 | |
}, | |
{ | |
"source": 13, | |
"target": 23 | |
}, | |
{ | |
"source": 13, | |
"target": 14 | |
}, | |
{ | |
"source": 13, | |
"target": 18 | |
}, | |
{ | |
"source": 13, | |
"target": 16 | |
}, | |
{ | |
"source": 13, | |
"target": 17 | |
}, | |
{ | |
"source": 14, | |
"target": 15 | |
}, | |
{ | |
"source": 14, | |
"target": 21 | |
}, | |
{ | |
"source": 14, | |
"target": 24 | |
}, | |
{ | |
"source": 14, | |
"target": 23 | |
}, | |
{ | |
"source": 14, | |
"target": 18 | |
}, | |
{ | |
"source": 15, | |
"target": 24 | |
}, | |
{ | |
"source": 15, | |
"target": 23 | |
}, | |
{ | |
"source": 15, | |
"target": 18 | |
}, | |
{ | |
"source": 15, | |
"target": 21 | |
}, | |
{ | |
"source": 16, | |
"target": 24 | |
}, | |
{ | |
"source": 16, | |
"target": 18 | |
}, | |
{ | |
"source": 16, | |
"target": 21 | |
}, | |
{ | |
"source": 17, | |
"target": 24 | |
}, | |
{ | |
"source": 17, | |
"target": 18 | |
}, | |
{ | |
"source": 17, | |
"target": 21 | |
}, | |
{ | |
"source": 17, | |
"target": 23 | |
}, | |
{ | |
"source": 18, | |
"target": 24 | |
}, | |
{ | |
"source": 18, | |
"target": 23 | |
}, | |
{ | |
"source": 18, | |
"target": 25 | |
}, | |
{ | |
"source": 19, | |
"target": 22 | |
}, | |
{ | |
"source": 21, | |
"target": 24 | |
}, | |
{ | |
"source": 21, | |
"target": 23 | |
}, | |
{ | |
"source": 21, | |
"target": 25 | |
}, | |
{ | |
"source": 23, | |
"target": 24 | |
}, | |
{ | |
"source": 24, | |
"target": 25 | |
} | |
], | |
"multigraph": false, | |
"nodes": [ | |
{ | |
"degree": 496, | |
"degree_cent": 0.006775771153793612, | |
"eigen_cent": 0.243840711008099, | |
"followers_count": 251, | |
"following": true, | |
"friends_count": 489, | |
"id": "311428321", | |
"indegree": 7, | |
"name": "Brian Martinez", | |
"outdegree": 489, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/2701060960/c6229cd327c2f1558a7c21094e0e7b0a_normal.png", | |
"screen_name": "BC_Martinez" | |
}, | |
{ | |
"degree": 2102, | |
"degree_cent": 0.02871506242998825, | |
"eigen_cent": 0.07190881386987996, | |
"followers_count": 2615, | |
"following": true, | |
"friends_count": 2100, | |
"id": "103917660", | |
"indegree": 2, | |
"name": "David Jacobs", | |
"outdegree": 2100, | |
"partition": 2, | |
"profile_image_url": "http://a0.twimg.com/profile_images/624905068/avatar_fullsize_normal.jpeg", | |
"screen_name": "MetaThis" | |
}, | |
{ | |
"degree": 225, | |
"degree_cent": 0.0030736865112975056, | |
"eigen_cent": 0.19114884408778857, | |
"followers_count": 247, | |
"following": true, | |
"friends_count": 198, | |
"id": "243869548", | |
"indegree": 27, | |
"name": "David Renteln", | |
"outdegree": 198, | |
"partition": 9, | |
"profile_image_url": "http://a0.twimg.com/profile_images/1931870271/twitter_default_3_normal.jpg", | |
"screen_name": "Dteln" | |
}, | |
{ | |
"degree": 565, | |
"degree_cent": 0.007718368350591514, | |
"eigen_cent": 0.06106063048434986, | |
"followers_count": 824, | |
"following": true, | |
"friends_count": 561, | |
"id": "48008960", | |
"indegree": 4, | |
"name": "Evan M. Rose", | |
"outdegree": 561, | |
"partition": 17, | |
"profile_image_url": "http://a0.twimg.com/profile_images/1974026484/emr_linkedin_normal.jpg", | |
"screen_name": "evanmrose" | |
}, | |
{ | |
"degree": 3461, | |
"degree_cent": 0.047280128958225184, | |
"eigen_cent": 0.1068051662842218, | |
"followers_count": 9053, | |
"following": true, | |
"friends_count": 3434, | |
"id": "16061930", | |
"indegree": 27, | |
"name": "Jeff Hammerbacher", | |
"outdegree": 3434, | |
"partition": 13, | |
"profile_image_url": "http://a0.twimg.com/profile_images/2888888777/d9dd0d9a3d7236cb27b90e07bf15d281_normal.jpeg", | |
"screen_name": "hackingdata" | |
}, | |
{ | |
"degree": 1628, | |
"degree_cent": 0.02223982951285484, | |
"eigen_cent": 0.194851298393719, | |
"followers_count": 2259, | |
"following": true, | |
"friends_count": 1617, | |
"id": "310050530", | |
"indegree": 11, | |
"name": "Jack West", | |
"outdegree": 1617, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/1379691054/JackProfile_normal.JPG", | |
"screen_name": "JackCWest" | |
}, | |
{ | |
"degree": 442, | |
"degree_cent": 0.006038086391082211, | |
"eigen_cent": 0.34289860979141984, | |
"followers_count": 367, | |
"following": true, | |
"friends_count": 422, | |
"id": "182927076", | |
"indegree": 20, | |
"name": "Drop Some Knowledge", | |
"outdegree": 422, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/2757083762/b7b3ee9956e4e00dcf5137905876b34c_normal.png", | |
"screen_name": "PlayDSK" | |
}, | |
{ | |
"degree": 619, | |
"degree_cent": 0.008456053113302915, | |
"eigen_cent": 0.2788273614544869, | |
"followers_count": 635, | |
"following": true, | |
"friends_count": 606, | |
"id": "344781168", | |
"indegree": 13, | |
"name": "betaclassroom", | |
"outdegree": 606, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/1505792330/TImage_normal.png", | |
"screen_name": "betaclassroom" | |
}, | |
{ | |
"degree": 797, | |
"degree_cent": 0.01088768066446272, | |
"eigen_cent": 0.0642734758828458, | |
"followers_count": 6912, | |
"following": true, | |
"friends_count": 777, | |
"id": "15540222", | |
"indegree": 20, | |
"name": "Guillermo Rauch", | |
"outdegree": 777, | |
"partition": 3, | |
"profile_image_url": "http://a0.twimg.com/profile_images/1867093513/photo_normal.png", | |
"screen_name": "rauchg" | |
}, | |
{ | |
"degree": 595, | |
"degree_cent": 0.008128193218764514, | |
"eigen_cent": 0.17232885449494298, | |
"followers_count": 5423, | |
"following": true, | |
"friends_count": 577, | |
"id": "274793711", | |
"indegree": 18, | |
"name": "EdSurge", | |
"outdegree": 577, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/1639864764/Live_-_v4-notext_normal.png", | |
"screen_name": "EdSurge" | |
}, | |
{ | |
"degree": 316, | |
"degree_cent": 0.004316821944755607, | |
"eigen_cent": 0.3099137538495145, | |
"followers_count": 192, | |
"following": true, | |
"friends_count": 306, | |
"id": "720931356", | |
"indegree": 10, | |
"name": "SmarterCookie", | |
"outdegree": 306, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/2581769378/wxhbirmnsx2rnm009525_normal.jpeg", | |
"screen_name": "smartercookie" | |
}, | |
{ | |
"degree": 2005, | |
"degree_cent": 0.027389962022895547, | |
"eigen_cent": 0.06383191642120138, | |
"followers_count": 925, | |
"following": true, | |
"friends_count": 2001, | |
"id": "69618874", | |
"indegree": 4, | |
"name": "Clare Sayas", | |
"outdegree": 2001, | |
"partition": 16, | |
"profile_image_url": "http://a0.twimg.com/profile_images/2917667269/94997b4130187aab4b53ae373ff77468_normal.jpeg", | |
"screen_name": "claresayas" | |
}, | |
{ | |
"degree": 59, | |
"degree_cent": 0.0008059889074069015, | |
"eigen_cent": 0.11069252634947015, | |
"followers_count": 47, | |
"following": true, | |
"friends_count": 53, | |
"id": "573273555", | |
"indegree": 6, | |
"name": "Tess Brustein", | |
"outdegree": 53, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/2197505142/kristin_and_me_normal.jpg", | |
"screen_name": "tbrustein" | |
}, | |
{ | |
"degree": 581, | |
"degree_cent": 0.007936941613617115, | |
"eigen_cent": 0.1411386124031156, | |
"followers_count": 786, | |
"following": true, | |
"friends_count": 567, | |
"id": "18739136", | |
"indegree": 14, | |
"name": "Jessie Arora", | |
"outdegree": 567, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/1879603558/photo__14__normal.jpg", | |
"screen_name": "Jessie_Arora" | |
}, | |
{ | |
"degree": 792, | |
"degree_cent": 0.01081937651976722, | |
"eigen_cent": 0.25407143725002423, | |
"followers_count": 1577, | |
"following": true, | |
"friends_count": 780, | |
"id": "14609431", | |
"indegree": 12, | |
"name": "Robert Pronovost", | |
"outdegree": 780, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/2808327100/c186617396f5a9c0ea990f2098a76e20_normal.png", | |
"screen_name": "pronovost" | |
}, | |
{ | |
"degree": 69, | |
"degree_cent": 0.0009425971967979016, | |
"eigen_cent": 0.15377448495430635, | |
"followers_count": 1431, | |
"following": true, | |
"friends_count": 56, | |
"id": "267753999", | |
"indegree": 13, | |
"name": "Imagine K12", | |
"outdegree": 56, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/2695170892/e1f00aa91536c116e330189b3e872a92_normal.jpeg", | |
"screen_name": "imaginek12" | |
}, | |
{ | |
"degree": 236, | |
"degree_cent": 0.003223955629627606, | |
"eigen_cent": 0.07082109871675088, | |
"followers_count": 412, | |
"following": true, | |
"friends_count": 231, | |
"id": "39029972", | |
"indegree": 5, | |
"name": "Jeff Scheur", | |
"outdegree": 231, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/1814517078/P1010011_2_normal.JPG", | |
"screen_name": "jscheur" | |
}, | |
{ | |
"degree": 1682, | |
"degree_cent": 0.02297751427556624, | |
"eigen_cent": 0.1872126505180465, | |
"followers_count": 1701, | |
"following": true, | |
"friends_count": 1669, | |
"id": "14155782", | |
"indegree": 13, | |
"name": "Michael Staton", | |
"outdegree": 1669, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/1834673971/Staton_Twitter_Pic_normal.jpg", | |
"screen_name": "mpstaton" | |
}, | |
{ | |
"degree": 1070, | |
"degree_cent": 0.014617086964837026, | |
"eigen_cent": 0.21792485467808734, | |
"followers_count": 807, | |
"following": true, | |
"friends_count": 1060, | |
"id": "17831644", | |
"indegree": 10, | |
"name": "Daniel Jhin Yoo", | |
"outdegree": 1060, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/1552742813/techcrunch_about_me_square_normal.png", | |
"screen_name": "danieljyoo" | |
}, | |
{ | |
"degree": 832, | |
"degree_cent": 0.01136580967733122, | |
"eigen_cent": 0.0633385771732664, | |
"followers_count": 296, | |
"following": true, | |
"friends_count": 825, | |
"id": "15987934", | |
"indegree": 7, | |
"name": "Brigitte Bradford", | |
"outdegree": 825, | |
"partition": 21, | |
"profile_image_url": "http://a0.twimg.com/profile_images/2737307107/03ffbc940235021aa83f697b3eeec489_normal.jpeg", | |
"screen_name": "brig42" | |
}, | |
{ | |
"degree": 1056, | |
"degree_cent": 0.014425835359689625, | |
"eigen_cent": 0.061510680166126125, | |
"followers_count": 9768, | |
"following": true, | |
"friends_count": 1042, | |
"id": "14344469", | |
"indegree": 14, | |
"name": "Peter Skomoroch", | |
"outdegree": 1042, | |
"partition": 13, | |
"profile_image_url": "http://a0.twimg.com/profile_images/2862590929/a9fe716b562b57480a6052c5aba15b1c_normal.jpeg", | |
"screen_name": "peteskomoroch" | |
}, | |
{ | |
"degree": 354, | |
"degree_cent": 0.004835933444441409, | |
"eigen_cent": 0.2181072802446081, | |
"followers_count": 384, | |
"following": true, | |
"friends_count": 341, | |
"id": "18576413", | |
"indegree": 13, | |
"name": "Amy Lin", | |
"outdegree": 341, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/1871590274/twitterpic_normal.png", | |
"screen_name": "heyamylin" | |
}, | |
{ | |
"degree": 219, | |
"degree_cent": 0.0029917215376629052, | |
"eigen_cent": 0.07666831053821732, | |
"followers_count": 125, | |
"following": true, | |
"friends_count": 209, | |
"id": "364495209", | |
"indegree": 10, | |
"name": "Jacob Makler", | |
"outdegree": 209, | |
"partition": 18, | |
"profile_image_url": "http://a0.twimg.com/profile_images/1657573700/15000_1267119842707_1371120100_30605281_3806364_n_normal.jpg", | |
"screen_name": "JPmakler" | |
}, | |
{ | |
"degree": 281, | |
"degree_cent": 0.003838692931887107, | |
"eigen_cent": 0.29728621261644617, | |
"followers_count": 104, | |
"following": true, | |
"friends_count": 271, | |
"id": "24399559", | |
"indegree": 10, | |
"name": "Kasey Brown", | |
"outdegree": 271, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/2350558628/fccgxw1xeywigsrmgxin_normal.jpeg", | |
"screen_name": "digitwhiz" | |
}, | |
{ | |
"degree": 591, | |
"degree_cent": 0.008073549903008114, | |
"eigen_cent": 0.2501744854809419, | |
"followers_count": 309, | |
"following": true, | |
"friends_count": 580, | |
"id": "23357834", | |
"indegree": 11, | |
"name": "Anthony Wu", | |
"outdegree": 580, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/2183843281/fb_profile_normal.jpg", | |
"screen_name": "anthonywu" | |
}, | |
{ | |
"degree": 148, | |
"degree_cent": 0.0020218026829868035, | |
"eigen_cent": 0.11215757100267687, | |
"followers_count": 67, | |
"following": true, | |
"friends_count": 144, | |
"id": "505239133", | |
"indegree": 4, | |
"name": "Gary Tsai", | |
"outdegree": 144, | |
"partition": 1, | |
"profile_image_url": "http://a0.twimg.com/profile_images/1856614632/IMG_0010_6_normal.JPG", | |
"screen_name": "GMTsai" | |
} | |
], | |
"user": [{ | |
"followers_count": 427, | |
"following": false, | |
"friends_count": 180, | |
"name": "John Coogan", | |
"profile_image_url": "http://a0.twimg.com/profile_images/2054496309/image_normal.jpg", | |
"screen_name": "johncoogan" | |
}] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script> | |
<style> | |
body { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
margin: 0; | |
position: absolute; | |
width: 960px; | |
height: 500px; | |
font-size: 14px; | |
} | |
.link { | |
stroke: #ccc; | |
} | |
.node text { | |
pointer-events: none; | |
} | |
.nodetext { | |
font-size: 24px; | |
} | |
.title { | |
font-size: 34px; | |
} | |
.sizeby { | |
font-size: 18px; | |
} | |
.sizenote { | |
font-size: 15px; | |
} | |
.rankingtext { | |
font-size: 16px; | |
} | |
.rankingtitle { | |
font-size: 28px; | |
} | |
.rankingnum { | |
font-size: 16px; | |
} | |
.clickfortwitter { | |
font-size: 18px; | |
} | |
form { | |
position: absolute; | |
left: 10px; | |
top: 353px; | |
font-size: 20px; | |
} | |
.highlight { | |
stroke-width: 3px !important; | |
stroke: #000 !important; | |
} | |
</style> | |
<body> | |
<form> | |
<label><input type="radio" name="mode" value="eigen" checked="checked"> Eigenvector</label> | |
<label><input type="radio" name="mode" value="degree"> Degree</label> | |
</form> | |
<script> | |
var w = 960, | |
h = 500, | |
l = 265, | |
svg, | |
force, | |
link, | |
node, | |
clip, | |
graph, | |
graphData, | |
max, | |
nodes, | |
metric = "eigen_cent", | |
eigen_scale = 0.7, | |
degree_scale = 5, | |
scale = eigen_scale; | |
var color = d3.scale.category20(); | |
function showNodeDetails() { | |
return function(d, i) { | |
svg.selectAll(".nodetext").remove(); | |
labels = []; | |
labels.push("" + d['name'], "@" + d['screen_name'], "Following: " + d['friends_count'], "Followers: " + d['followers_count'], "Eigenvector: " + d['eigen_cent'].toFixed(4), "Degree: " + d['degree_cent'].toFixed(4)) | |
setDetailLabels(labels); | |
graph.selectAll(".circle") | |
.transition() | |
.duration(100) | |
.attr("fill-opacity", 0.5); | |
graph.selectAll("image") | |
.transition() | |
.duration(100) | |
.attr("style", "opacity: .5;"); | |
d3.select("." + d.screen_name).selectAll("image") | |
.transition() | |
.duration(100) | |
.attr("style", "opacity: 1;"); | |
d3.select("." + d.screen_name).selectAll("circle") | |
.transition() | |
.duration(100) | |
.attr("class", "circle highlight") | |
.attr("fill-opacity", 1); | |
d3.select(".id" + d.id) | |
.attr("fill", "#F00"); | |
} | |
} | |
function setDetailLabels(labels) { | |
svg.selectAll(".nodetext").remove(); | |
svg.selectAll("text.nodetext").data(labels).enter().append("svg:text") | |
.attr("class", "nodetext") | |
.text(function() { return this.__data__; }) | |
.attr("x", 10) | |
.attr("y", function(d, i){ return (this.getBBox().height * 1.2) * (i+3.2)}); | |
} | |
function resetDetailLabels() { | |
svg.selectAll(".nodetext").remove(); | |
labels = ["Hover on a circle", "to see details", "Following: ", "Followers: ", "Eigenvector: ", "Degree: "]; | |
setDetailLabels(labels); | |
} | |
function removeNodeDetails() { | |
return function(d, i) { | |
resetDetailLabels(); | |
graph.selectAll(".circle") | |
.transition() | |
.attr("fill-opacity", 1); | |
graph.selectAll("image") | |
.transition() | |
.attr("style", "opacity: 1;"); | |
d3.select("." + d.screen_name).selectAll("circle") | |
.attr("class", "circle"); | |
d3.select(".id" + d.id) | |
.attr("fill", "#000"); | |
} | |
} | |
function followLink() { | |
return function(d) { | |
window.open("http://twitter.com/"+d['screen_name']) | |
} | |
} | |
function sizeBy(metric, scale) { | |
for (var i = 0; i < nodes.length; i++) { | |
nodes[i]['radius'] = Math.sqrt(nodes[i][metric] * scale) * 110; | |
}; | |
force.start(); | |
graph.selectAll(".clipping") | |
.transition() | |
.duration(2000) | |
.attr("x", function(d) { return Math.sqrt(d[metric] * scale) * -75; }) | |
.attr("y", function(d) { return Math.sqrt(d[metric] * scale) * -75; }) | |
.attr("rx", function(d) { return Math.sqrt(d[metric] * scale) * 20; }) | |
.attr("ry", function(d) { return Math.sqrt(d[metric] * scale) * 20; }) | |
.attr("width", function(d) { return Math.sqrt(d[metric] * scale) * 150; }) | |
.attr("height", function(d) { return Math.sqrt(d[metric] * scale) * 150; }) | |
graph.selectAll(".circle") | |
.transition() | |
.duration(2000) | |
.attr("x", function(d) { return Math.sqrt(d[metric] * scale) * -90; }) | |
.attr("y", function(d) { return Math.sqrt(d[metric] * scale) * -90; }) | |
.attr("width", function(d) { return Math.sqrt(d[metric] * scale) * 180; }) | |
.attr("height", function(d) { return Math.sqrt(d[metric] * scale) * 180; }) | |
.attr("rx", function(d) { return Math.sqrt(d[metric] * scale) * 20; }) | |
.attr("ry", function(d) { return Math.sqrt(d[metric] * scale) * 20; }) | |
graph.selectAll("image") | |
.transition() | |
.duration(2000) | |
.attr("x", function(d) { return Math.sqrt(d[metric] * scale) * -75; }) | |
.attr("y", function(d) { return Math.sqrt(d[metric] * scale) * -75; }) | |
.attr("width", function(d) { return Math.sqrt(d[metric] * scale) * 150; }) | |
.attr("height", function(d) { return Math.sqrt(d[metric] * scale) * 150; }); | |
transitionRanking(metric); | |
} | |
d3.selectAll("input").on("change", function change() { | |
if (this.value === "eigen") sizeBy("eigen_cent", eigen_scale); | |
else sizeBy("degree_cent", degree_scale); | |
}); | |
svg = d3.select("body").append("svg") | |
.attr("width", w + l - 25) | |
.attr("height", h) | |
.style("border", "3px solid #000"); | |
graph = svg.append("g") | |
.attr("transform", "translate(" + l + ",10)"); | |
function drawGraph() { | |
d3.json("graph.json", function(json) { | |
nodes = json.nodes; | |
graphData = json; | |
json.user[0]["degree_cent"] = nodes.sort(function(a,b) { return b["degree_cent"] - a["degree_cent"] } )[0]["degree_cent"] * 1.2; | |
json.user[0]["eigen_cent"] = nodes.sort(function(a,b) { return b["eigen_cent"] - a["eigen_cent"] } )[0]["eigen_cent"] * 1.2; | |
json.user[0]["partition"] = 0; | |
nodes.unshift(json.user[0]); | |
for (var i = 0; i < nodes.length; i++) { | |
nodes[i]['radius'] = Math.sqrt(nodes[i][metric] * scale) * 110; | |
}; | |
force = d3.layout.force() | |
.gravity(0.05) | |
.charge(0) | |
.nodes(nodes) | |
.friction(0.1) | |
.size([w-l, h]); | |
force.start(); | |
node = graph.selectAll(".node") | |
.data(nodes) | |
.enter().append("svg:g") | |
.attr("r", function(d) { return Math.sqrt(d[metric] * scale) * 90; }) | |
.attr("class", function(d) { return "node " + d['screen_name']; }) | |
.on("mouseover", showNodeDetails()) | |
.on("mouseout", removeNodeDetails()) | |
.on("click", followLink()) | |
.call(force.drag); | |
clip = node.append("defs").append("svg:clipPath") | |
.attr("id", function(d) { return "clip-" + d['screen_name']; }) | |
.append("svg:rect") | |
.attr("id", "clip-rect") | |
.attr("class", "clipping"); | |
node.append("svg:rect") | |
.style("fill", function(d) { return color(d.partition); }) | |
.style("stroke", "#000") | |
.style("stroke-width", 1) | |
.attr("class","circle"); | |
node.append("image") | |
.attr("xlink:href", function(d) { return d.profile_image_url; }) | |
.attr("clip-path", function(d) { return "url(#clip-" + d['screen_name'] + ")"; }); | |
svg.append("svg:rect") | |
.attr("class", "rankingBG") | |
.attr("x", w + 20) | |
.attr("y", -2) | |
.attr("width", l) | |
.attr("height", h + 4) | |
.style("fill", "#ddd") | |
.style("stroke", "#000") | |
.style("stroke-width", 3); | |
svg.append("svg:text") | |
.attr("class", "rankingtitle") | |
.text("Ranking") | |
.attr("x", w + 88) | |
.attr("y", 33); | |
svg.selectAll(".rankingnum") | |
.data(d3.range(1,31)) | |
.enter().append("svg:text") | |
.attr("class", "rankingnum") | |
.text(function(d) { return d + ":"; }) | |
.attr("x", w + 50) | |
.attr("text-anchor","end") | |
.attr("y", function(d, i) { return i * 25 + 63; }); | |
drawRanking(graphData); | |
force.on("tick", function(e) { | |
var q = d3.geom.quadtree(nodes), | |
i = 0, | |
n = nodes.length; | |
while (++i < n) { | |
q.visit(collide(nodes[i])); | |
} | |
svg.selectAll(".node") | |
.attr("transform", function(d) { return "translate("+ d.x + "," + d.y + ")";}); | |
}); | |
sizeBy(metric, scale); | |
}); | |
} | |
function collide(node) { | |
var r = (node.radius * 1.2) + 16, | |
nx1 = node.x - r, | |
nx2 = node.x + r, | |
ny1 = node.y - r, | |
ny2 = node.y + r; | |
return function(quad, x1, y1, x2, y2) { | |
if (quad.point && (quad.point !== node)) { | |
var x = node.x - quad.point.x, | |
y = node.y - quad.point.y, | |
l = Math.sqrt(x * x + y * y), | |
r = (node.radius * 1.2) + quad.point.radius; | |
if (l < r) { | |
l = (l - r) / l * .5; | |
node.x -= x *= l; | |
node.y -= y *= l; | |
quad.point.x += x; | |
quad.point.y += y; | |
} | |
} | |
return x1 > nx2 | |
|| x2 < nx1 | |
|| y1 > ny2 | |
|| y2 < ny1; | |
}; | |
} | |
function redrawGraph() { | |
d3.selectAll("input")[0][0].checked = true; | |
d3.selectAll("input")[0][1].checked = false; | |
svg.selectAll(".rankingtext").remove(); | |
svg.selectAll(".rankingnum").remove(); | |
node.remove(); | |
drawGraph(); | |
} | |
function compareVals(a, b) { | |
return a < b ? 1 : a == b ? 0 : -1; | |
} | |
function drawRanking(data) { | |
svg.selectAll(".rankingtext") | |
.data(data.nodes) | |
.enter().append("svg:text") | |
.sort(function (a, b) { return compareVals(a[metric], b[metric]); }) | |
.attr("class", function(d) { return "rankingtext id" + d['id'];} ) | |
.text(function(d, i) { return d['name']; }) | |
.attr("x", w + 63) | |
.attr("y", function(d, i) { return i * 25 + 63; }) | |
.on("mouseover", showNodeDetails()) | |
.on("mouseout", removeNodeDetails()) | |
.on("click", followLink()); | |
} | |
function transitionRanking(metric) { | |
svg.selectAll(".rankingtext") | |
.sort(function (a, b) { return compareVals(a[metric], b[metric]); }) | |
.transition() | |
.duration(2000) | |
.attr("y", function(d, i) { return i * 25 + 63; }); | |
} | |
function drawLegend() { | |
svg.append("svg:rect") | |
.attr("x", -20) | |
.attr("y", -20) | |
.attr("width", l) | |
.attr("height", 320) | |
.attr("ry", 20) | |
.style("fill", "#ddd") | |
.style("stroke", "#000") | |
.style("stroke-width", 3); | |
svg.append("svg:text") | |
.attr("class", "title") | |
.text("Twitter Graph") | |
.attr("x", 22) | |
.attr("y", 40); | |
svg.append("svg:text") | |
.attr("class", "title") | |
.text("Visualization") | |
.attr("x", 33) | |
.attr("y", 75); | |
var o = 25; | |
svg.append("svg:rect") | |
.attr("x", -20) | |
.attr("y", 335 - o) | |
.attr("width", l) | |
.attr("height", 180) | |
.attr("ry", 20) | |
.style("fill", "#ddd") | |
.style("stroke", "#000") | |
.style("stroke-width", 3); | |
svg.append("svg:text") | |
.attr("class", "sizeby") | |
.text("Show size by centrality:") | |
.attr("x", 10) | |
.attr("y", 360 - o); | |
svg.append("svg:text") | |
.attr("class", "sizenote") | |
.text("Eigenvector Centrality measures") | |
.attr("x", 10) | |
.attr("y", 430 - o); | |
svg.append("svg:text") | |
.attr("class", "sizenote") | |
.text("most similar connections.") | |
.attr("x", 10) | |
.attr("y", 450 - o); | |
svg.append("svg:text") | |
.attr("class", "sizenote") | |
.text("Degree Centrality measures") | |
.attr("x", 10) | |
.attr("y", 480 - o); | |
svg.append("svg:text") | |
.attr("class", "sizenote") | |
.text("most popular connections.") | |
.attr("x", 10) | |
.attr("y", 500 - o); | |
svg.append("svg:rect") | |
.attr("x", -20) | |
.attr("y", 550) | |
.attr("width", l) | |
.attr("height", 180) | |
.attr("ry", 20) | |
.style("fill", "#ddd") | |
.style("stroke", "#000") | |
.style("stroke-width", 3) | |
.on("click", function(){ | |
redrawGraph(); | |
}); | |
svg.append("svg:text") | |
.attr("class", "title") | |
.text("Click to Reset") | |
.attr("x", 17) | |
.attr("y", 615) | |
.on("click", function(){ | |
redrawGraph(); | |
}); | |
svg.append("svg:text") | |
.attr("class", "clickfortwitter") | |
.text("Click to see full Twitter profile") | |
.attr("x", 500) | |
.attr("y", h - 10); | |
} | |
drawGraph(); | |
drawLegend(); | |
resetDetailLabels(); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment