visfest block visualization 3

README.md

Built with blockbuilder.org

forked from sxywu's block: visfest block visualization

forked from sxywu's block: visfest block visualization 2

data.json

[{"id":"caa2da1ea1558cdc3357","userId":"zanarmstrong","description":"Which is bigger: Africa or North America?","created_at":"2015-05-20T19:42:34Z","updated_at":"2015-09-08T03:23:49Z","thumbnail":"https://gist.githubusercontent.com/zanarmstrong/caa2da1ea1558cdc3357/raw/1537ffa757d44beb270091d2bc5bbdbb5c4b70b4/thumbnail.png","api":{"d3.scale.linear":2,"d3.select":9,"d3.geo.graticule":1,"d3.geo.orthographic":1,"d3.geo.path":2,"d3.geo.azimuthalEqualArea":1,"d3.json":1,"d3.selectAll":1,"d3.interpolate":9,"d3.behavior.drag":2,"d3.event.sourceEvent.preventDefault":2}},{"id":"80f308984b27dbab6a58","userId":"lelandlee","description":"Hexbin Wallpaper 1","created_at":"2015-10-08T19:27:17Z","updated_at":"2015-10-08T19:30:16Z","thumbnail":"https://gist.githubusercontent.com/lelandlee/80f308984b27dbab6a58/raw/fbbbfca20aefe6373da3830c4e119827d84e6535/thumbnail.png","api":{"d3.scale.linear":1,"d3.hexbin":1,"d3.select":1,"d3.values":1,"d3.range":1}},{"id":"9773732","userId":"cmpolis","description":"Airline Routes within the US","created_at":"2014-03-25T23:29:24Z","updated_at":"2015-08-29T13:57:45Z","api":{"d3.geo.albersUsa":1,"d3.geo.path":1,"d3.select":1}},{"id":"5605982","userId":"jsundram","description":"BoxyLady2.pjs","created_at":"2013-05-18T22:35:51Z","updated_at":"2015-08-29T13:50:08Z","thumbnail":"https://gist.githubusercontent.com/jsundram/5605982/raw/fc7addc664cf9000090cdf067cd5f0155d4facd7/thumbnail.png","api":{}},{"id":"9533174","userId":"nstawski","description":"","created_at":"2014-03-13T17:41:13Z","updated_at":"2015-08-29T13:57:20Z","api":{"d3.layout.chord":1,"d3.scale.ordinal":1,"d3.range":2,"d3.select":1,"d3.svg.arc":1,"d3.svg.chord":1}},{"id":"8d782030e4be9d832be7","userId":"kenpenn","description":"styling SVG markers","created_at":"2014-08-28T17:17:07Z","updated_at":"2015-08-29T14:05:48Z","thumbnail":"https://gist.githubusercontent.com/kenpenn/8d782030e4be9d832be7/raw/b805d0a6de69b561d3301c7b2852fb3a6f4f7a13/thumbnail.png","api":{}},{"id":"13fa3e31fed7834eee10","userId":"RandomEtc","description":"D3 Australia Conformal Conic","created_at":"2015-09-05T15:37:06Z","updated_at":"2015-09-05T15:50:36Z","api":{"d3.geo.conicConformal":1,"d3.geo.path":1,"d3.select":2,"d3.json":1}},{"id":"10754614","userId":"bhvaleri","description":"Quicksort through colours","created_at":"2014-04-15T18:12:48Z","updated_at":"2015-08-29T13:59:33Z","api":{"d3.select":1,"d3.range":2}},{"id":"bb75c89a2ce92cbbd909","userId":"dlwjiang","description":"Spiral Print","created_at":"2015-10-11T03:13:13Z","updated_at":"2015-10-11T03:43:26Z","api":{"d3.select":1,"d3.scale.category10":1}},{"id":"14c943d8f198d9f3fef2","userId":"john-guerra","description":"Group-in-a-box algorithm","created_at":"2014-11-07T01:56:19Z","updated_at":"2015-08-29T14:08:47Z","thumbnail":"https://gist.githubusercontent.com/john-guerra/14c943d8f198d9f3fef2/raw/b7853a44cb60e63d5f3b705f2525a97234ca32ef/thumbnail.png","api":{"d3.select":7,"d3.scale.category20":1,"d3.layout.forceInABox":1,"d3.json":1}},{"id":"9798276","userId":"corykendrick","description":"bl.ocks.org test for d3.unconf!","created_at":"2014-03-27T01:48:40Z","updated_at":"2015-08-29T13:57:47Z","api":{}},{"id":"c69c202db2ace12ad0e1","userId":"jeremycflin","description":"ONA 15 Attendees","created_at":"2015-10-12T22:16:24Z","updated_at":"2015-10-12T22:17:16Z","thumbnail":"https://gist.githubusercontent.com/jeremycflin/c69c202db2ace12ad0e1/raw/98bcfc8a9a43970bc7ca41bb70e48759f94dfb9c/thumbnail.png","api":{"d3.geo.orthographic":1,"d3.geo.path":1,"d3.behavior.zoom":2,"d3.geo.zoom":1,"d3.geom.voronoi":1,"d3.select":7,"d3.behavior.drag":2,"d3.event.sourceEvent.stopPropagation":1,"d3.dispatch":1,"d3.mouse":2,"d3.rebind":1}},{"id":"890c4a214e48bedc8755","userId":"jieqianzhang","description":"Horserace tool","created_at":"2015-10-13T17:50:34Z","updated_at":"2015-10-13T18:03:42Z","thumbnail":"https://gist.githubusercontent.com/jieqianzhang/890c4a214e48bedc8755/raw/327fd0ae3f1b7d5dfb020735e1902ff98b39494a/thumbnail.png","api":{"d3.scale.linear":2,"d3.scale.category10":1,"d3.svg.axis":2,"d3.svg.line":1,"d3.select":4,"d3.csv":1,"d3.keys":1,"d3.extent":1,"d3.min":2,"d3.max":2,"d3.svg.symbol":1,"d3.transition":1}},{"id":"e1270af1d94aa6b281e6","userId":"sampathweb","description":"Bar Lines - D3 Hackday with Ian","created_at":"2015-10-14T04:11:47Z","updated_at":"2015-10-14T04:14:02Z","api":{"d3.scale.linear":2,"d3.max":1,"d3.select":3}},{"id":"b536ee036c8c5ef50a8e","userId":"dhoboy","description":"Seismic Ratings and Collapse Probabilities of California Hospitals","created_at":"2015-09-07T21:56:58Z","updated_at":"2015-09-08T03:08:39Z","thumbnail":"https://gist.githubusercontent.com/dhoboy/b536ee036c8c5ef50a8e/raw/307f365325e6feb1d4c30fc970c9c4762280b4da/thumbnail.png","api":{"d3.csv":1,"d3.select":2,"d3.entries":1,"d3.scale.sqrt":3,"d3.max":4,"d3.scale.quantize":3,"d3.values":1,"d3.round":1}},{"id":"91aea9ae342da619297e","userId":"malgarianirudh","description":"Simple D3 Block - Bar Chart","created_at":"2015-10-14T23:40:01Z","updated_at":"2015-10-14T23:40:01Z","api":{"d3.select":1}},{"id":"80323b7f3881f874c02f","userId":"shubhgo","description":"D3 tree with weighted links and color coding","created_at":"2014-12-15T23:54:37Z","updated_at":"2015-08-29T14:11:31Z","api":{"d3.layout.tree":1,"d3.scale.linear":1,"d3.svg.diagonal":1,"d3.select":2,"d3.json":1}},{"id":"0956c361a6ce22362867","userId":"dannyko","description":"Newton-Raphson Visualization (2D)","created_at":"2014-08-28T23:43:19Z","updated_at":"2015-08-29T14:05:48Z","thumbnail":"https://gist.githubusercontent.com/dannyko/0956c361a6ce22362867/raw/657be2203e082541052e5cd7470d7d89abe85f8e/thumbnail.png","api":{"d3.selectAll":2,"d3.select":4,"d3.scale.linear":3,"d3.svg.line":1,"d3.mouse":2}},{"id":"60eec0e1727c6c628728","userId":"shobhitg","description":"Migrants-Deaths-Visualization","created_at":"2015-08-30T05:05:21Z","updated_at":"2015-08-30T05:49:03Z","api":{"d3.json":1,"d3.tip":1,"d3.time.scale":1}},{"id":"02b546929a8c4152d084","userId":"jckr","description":"fresh block","created_at":"2015-10-16T02:42:18Z","updated_at":"2015-10-16T03:32:22Z","api":{"d3.select":2}},{"id":"9f24af0ff261c065213e","userId":"m-arnold","description":"Run!Shoot!","created_at":"2015-10-15T18:44:40Z","updated_at":"2015-10-15T22:00:31Z","api":{"d3.select":14,"d3.scale.linear":4,"d3.selectAll":5,"d3.mouse":1,"d3.behavior.drag":1,"d3.timer":1}},{"id":"3a6f39dadf4d9fec7ca4","userId":"enoex","description":"Fog of War SVG Filter Mask Example","created_at":"2014-09-15T02:18:43Z","updated_at":"2015-08-29T14:06:29Z","api":{"d3.select":1}},{"id":"dfe7c0c8be07a461e6ba","userId":"Golodhros","description":"TDD D3 Template","created_at":"2015-02-21T23:43:49Z","updated_at":"2015-08-29T14:15:54Z","thumbnail":"https://gist.githubusercontent.com/Golodhros/dfe7c0c8be07a461e6ba/raw/aad45945cc8ca39038fa3d2d1e1616f168250e6b/thumbnail.png","api":{"d3.dispatch":1,"d3.rebind":1,"d3.json":1,"d3.tsv":1,"d3.select":3,"d3.scale.ordinal":1,"d3.scale.linear":1,"d3.max":1,"d3.svg.axis":2}},{"id":"fc27f5b8af7c9208dd56","userId":"rogerfischer","description":"fresh block","created_at":"2015-10-15T19:27:58Z","updated_at":"2015-10-15T23:33:59Z","api":{"d3.geo.path":1,"d3.map":1,"d3.select":1,"d3.json":1}},{"id":"5e3c1bed7c9cdd2b431c","userId":"curran","description":"Reactive Mixins for Visualizations","created_at":"2015-10-10T02:14:52Z","updated_at":"2015-10-10T02:25:38Z","thumbnail":"https://gist.githubusercontent.com/curran/5e3c1bed7c9cdd2b431c/raw/fc695c9a588c08b79a99aebd69e5c099c1a77c0e/thumbnail.png","api":{"d3.select":2,"d3.max":1,"d3.extent":2,"d3.scale.linear":2,"d3.scale.ordinal":1,"d3.time.scale":1,"d3.svg.axis":2}},{"id":"c2c7128c5226f9199f87","userId":"hwangmoretime","description":"Bar Chart Composed of Images (\"In One Chart\")","created_at":"2015-03-08T09:45:33Z","updated_at":"2015-08-29T14:16:44Z","thumbnail":"https://gist.githubusercontent.com/hwangmoretime/c2c7128c5226f9199f87/raw/70c4f171c403b97986f7ea69437595ef799a9344/thumbnail.png","api":{"d3.scale.ordinal":2,"d3.svg.axis":2,"d3.select":2,"d3.json":2,"d3.max":1,"d3.selectAll":1}},{"id":"9ab2d4a03d2d2a658a96","userId":"igb","description":"","created_at":"2015-10-15T21:18:08Z","updated_at":"2015-10-15T21:20:40Z","api":{"d3.svg.axis":2,"d3.layout.stack":1,"d3.scale.linear":2,"d3.max":2,"d3.scale.ordinal":1,"d3.svg.area":1,"d3.select":1}},{"id":"4604711cddb0a2054886","userId":"rcrocker13","description":"2015 unconf registration","created_at":"2015-10-15T21:12:17Z","updated_at":"2015-10-15T21:44:38Z","thumbnail":"https://gist.githubusercontent.com/rcrocker13/4604711cddb0a2054886/raw/f92716f7735bca70eda82a2f392478ff16710f13/thumbnail.png","api":{"d3.select":4,"d3.svg.line":1,"d3.range":1,"d3.interpolate":2}},{"id":"205c8da5ef4c95306f9b","userId":"MatthewSchumwinger","description":"gathering","created_at":"2015-09-29T01:58:21Z","updated_at":"2015-10-01T16:20:06Z","thumbnail":"https://gist.githubusercontent.com/MatthewSchumwinger/205c8da5ef4c95306f9b/raw/0b66c73fea5ea3863937007ecbc7dc1d4e5eeb3b/thumbnail.png","api":{"d3.select":13,"d3.mouse":2,"d3.geo.albers":1,"d3.geo.path":1,"d3.geo.graticule":1,"d3.helper.tooltip":4,"d3.selectAll":5,"d3.behavior.zoom":1,"d3.event.translate.join":1}},{"id":"cb2c793914089ccbf919","userId":"tarekrached","description":null,"created_at":"2015-06-26T22:58:35Z","updated_at":"2015-08-29T14:23:46Z","api":{"d3.select":1,"d3.scale.linear":2}},{"id":"230e1eff08ee8d6eaf35","userId":"khoomeister","description":"Map with names on mouseover","created_at":"2015-10-16T05:13:26Z","updated_at":"2015-10-16T05:24:16Z","thumbnail":"https://gist.githubusercontent.com/khoomeister/230e1eff08ee8d6eaf35/raw/cd3fb384393027972873d90eaa99d82559b9c5b8/thumbnail.png","api":{"d3.geo.kavrayskiy7":1,"d3.scale.category20":1,"d3.geo.graticule":1,"d3.geo.path":1,"d3.select":3}},{"id":"254cd5e45ec63fbab121","userId":"koalaboy808","description":"fresh block","created_at":"2015-10-16T06:56:13Z","updated_at":"2015-10-16T06:56:14Z","api":{"d3.select":2,"d3.csv":1,"d3.scale.ordinal":1,"d3.max":1,"d3.scale.linear":1,"d3.svg.axis":2}},{"id":"9902b56ec6dc1a3c5b25","userId":"jermspeaks","description":"fun block","created_at":"2015-10-16T17:12:37Z","updated_at":"2015-10-16T17:16:27Z","api":{"d3.format":1,"d3.scale.linear":2,"d3.max":2,"d3.scale.ordinal":1,"d3.range":1,"d3.select":8}},{"id":"a47ed061841c8e8361cb","userId":"hashcacher","description":"all-of-the-games","created_at":"2015-10-16T17:12:21Z","updated_at":"2015-10-16T17:19:07Z","thumbnail":"https://gist.githubusercontent.com/hashcacher/a47ed061841c8e8361cb/raw/b676b699fa1f9a9180ee0a02e2c9927a2b339b20/thumbnail.png","api":{"d3.format":2,"d3.scale.category20c":2,"d3.select":5,"d3.behavior.zoom":1,"d3.layout.pack":1,"d3.json":1,"d3.scale.ordinal":1,"d3.scale.linear":2,"d3.svg.axis":1,"d3.event.stopPropagation":1}},{"id":"b6bdb82045c2aa8225f5","userId":"susielu","description":"Annual Temp - New York 2015","created_at":"2015-10-14T03:50:27Z","updated_at":"2015-10-21T03:57:01Z","thumbnail":"https://gist.githubusercontent.com/susielu/b6bdb82045c2aa8225f5/raw/d4d0326e2c9be4340706aab44f79500c6f3b0135/thumbnail.png","api":{"d3.select":1,"d3.scale.linear":2,"d3.json":1,"d3.min":1,"d3.max":1,"d3.scale.ordinal":1,"d3.legend.color":1}},{"id":"9334581","userId":"KristinHenry","description":"Example of using a csv file generated by responses to a Google Form.","created_at":"2014-03-03T21:05:22Z","updated_at":"2015-08-29T13:56:59Z","api":{}},{"id":"40cff1c874a77b3692fb","userId":"vanshady","description":"","created_at":"2015-10-16T07:15:14Z","updated_at":"2015-10-16T07:15:15Z","api":{"d3.scale.category10":1,"d3.scale.ordinal":1,"d3.layout.force":1,"d3.select":1,"d3.json":1}},{"id":"7862981","userId":"emarschner","description":"DATADATADATA","created_at":"2013-12-08T19:50:32Z","updated_at":"2015-10-16T20:36:33Z","api":{"d3.scale.linear":1,"d3.select":1,"d3.svg.arc":1}},{"id":"b2a544536a5fb8fc5ce4","userId":"saraquigley","description":"Back where I started","created_at":"2014-09-17T18:11:20Z","updated_at":"2015-10-16T21:54:40Z","thumbnail":"https://gist.githubusercontent.com/saraquigley/b2a544536a5fb8fc5ce4/raw/9bce8e1baf01305a48f9446e8240669b4aeebe2c/thumbnail.png","api":{"d3.select":1,"d3.svg.line":1}},{"id":"62462c396b37874ebd87","userId":"tanykim","description":"Smart Axis Ticks","created_at":"2015-03-30T03:05:43Z","updated_at":"2015-08-29T14:17:59Z","api":{"d3.select":2,"d3.scale.ordinal":1,"d3.scale.linear":1,"d3.svg.axis":2}},{"id":"9d826246e45c80e81870","userId":"javidhsueh","description":"Motion Wheel","created_at":"2015-10-17T05:05:47Z","updated_at":"2015-10-17T05:09:52Z","api":{"d3.scale.linear":3,"d3.extent":3,"d3.select":2}},{"id":"95aacb340225a670dda4","userId":"datummm","description":"Lines in Log and Linear Spaces","created_at":"2015-10-16T15:12:05Z","updated_at":"2015-10-16T22:16:51Z","api":{"d3.scale.log":1,"d3.scale.linear":2,"d3.svg.axis":2,"d3.svg.line":1,"d3.select":1,"d3.csv":1}},{"id":"658b76559714de56d090","userId":"melalj","description":"fresh block","created_at":"2015-10-17T17:29:35Z","updated_at":"2015-10-17T17:29:37Z","api":{"d3.geo.equirectangular":2,"d3.geo.path":2,"d3.select":9,"d3.selectAll":5,"d3.json":3}},{"id":"10379e68f8a056a58363","userId":"k-izzo","description":"shape packing","created_at":"2015-10-17T23:14:47Z","updated_at":"2015-10-17T23:18:57Z","api":{"d3.sum":1,"d3.select":1,"d3.mouse":1,"d3.scale.linear":1,"d3.layout.force":1,"d3.geom.quadtree":1}},{"id":"371d0cfa404d32f01629","userId":"jeffcatania","description":"Voronoi","created_at":"2015-07-30T19:11:34Z","updated_at":"2015-08-29T14:26:18Z","api":{}},{"id":"1fbfe388201ffd759d56","userId":"duhoang","description":"Particles","created_at":"2015-10-18T00:18:02Z","updated_at":"2015-10-18T01:59:36Z","api":{"d3.select":1,"d3.scale.linear":2,"d3.svg.line":1,"d3.transform":1}},{"id":"1a9be2065a006dc3c9a5","userId":"karenpeng","description":"Clock","created_at":"2015-10-17T22:53:47Z","updated_at":"2015-10-18T02:38:48Z","thumbnail":"https://gist.githubusercontent.com/karenpeng/1a9be2065a006dc3c9a5/raw/1841c33485872df82d6e1eac833f7bf5d93d0405/thumbnail.png","api":{"d3.select":7}},{"id":"28476a3ae1297af52d95","userId":"treboresque","description":"Sierpinski Charlet","created_at":"2015-05-29T22:27:40Z","updated_at":"2015-08-29T14:22:12Z","thumbnail":"https://gist.githubusercontent.com/treboresque/28476a3ae1297af52d95/raw/729f82cc1d3ea7a487fac162cc0aef2a195a3722/thumbnail.png","api":{"d3.min":1,"d3.range":1,"d3.rgb":1}},{"id":"608c32b71c68bdda631d","userId":"epmoyer","description":"Arc Diagram","created_at":"2015-10-19T05:20:07Z","updated_at":"2015-10-19T14:19:21Z","api":{"d3.scale.category20":1,"d3.select":1}},{"id":"bc887ad8f48a99790bba","userId":"Jay-Oh-eN","description":"","created_at":"2015-10-19T18:44:12Z","updated_at":"2015-10-19T18:51:01Z","api":{"d3.time.format":2,"d3.geo.mercator":1,"d3.geo.path":1,"d3.select":11,"d3.json":2,"d3.extent":2,"d3.values":2,"d3.scale.pow":1,"d3.csv":1,"d3.max":1,"d3.scale.linear":1,"d3.svg.axis":2,"d3.time.scale":1,"d3.svg.line":1}},{"id":"ea165ce84f6cd9fd5c9d","userId":"nydame","description":"Exercise 3 for Data Visualization and Infographics with D3","created_at":"2015-04-10T04:14:02Z","updated_at":"2015-08-29T14:18:50Z","api":{"d3.csv":1,"d3.select":1,"d3.ascending":1}},{"id":"6c3ef6c133e8116b4254","userId":"jhellier","description":"Finding Word Patterns","created_at":"2015-10-17T00:09:44Z","updated_at":"2015-10-17T23:31:36Z","thumbnail":"https://gist.githubusercontent.com/jhellier/6c3ef6c133e8116b4254/raw/618764134b06b2a83024538dcf250c55f83fc704/thumbnail.png","api":{"d3.select":9}},{"id":"d67e0c64f0cb392f8a78","userId":"georules","description":"wankel spiral","created_at":"2015-10-13T18:40:06Z","updated_at":"2015-10-13T22:48:37Z","api":{"d3.select":1,"d3.svg.line":1}},{"id":"a85580f121250b92c748","userId":"nthitz","description":"photozoom_block","created_at":"2015-10-19T20:29:08Z","updated_at":"2015-10-19T20:34:24Z","api":{}},{"id":"e16ad218bc241dfd2d6e","userId":"boeric","description":"D3 Dynamic Array of Tables","created_at":"2015-09-26T17:09:49Z","updated_at":"2015-10-01T21:04:41Z","thumbnail":"https://gist.githubusercontent.com/boeric/e16ad218bc241dfd2d6e/raw/c95d2bf4bdd9c1c5514017b2886c7e9d9d88ac1f/thumbnail.png","api":{"d3.select":2,"d3.values":1}},{"id":"9870108","userId":"jm3","description":"d3.audio.waveforms","created_at":"2014-03-30T09:20:35Z","updated_at":"2015-08-29T13:57:54Z","thumbnail":"https://gist.githubusercontent.com/jm3/9870108/raw/7d42ab844febd86ba2e647b0eb6f77f6eca2399c/thumbnail.png","api":{}},{"id":"5e8287bd3fecf0cf7b8c","userId":"roundrobin","description":"Sankey diagram with horizontal and vertical node movement","created_at":"2015-09-10T06:40:24Z","updated_at":"2015-09-10T07:12:18Z","api":{"d3.interpolateNumber":1,"d3.sum":7,"d3.min":2,"d3.nest":1}},{"id":"9773732","userId":"cmpolis","description":"Airline Routes within the US","created_at":"2014-03-25T23:29:24Z","updated_at":"2015-08-29T13:57:45Z","api":{"d3.geo.albersUsa":1,"d3.geo.path":1,"d3.select":1}},{"id":"a772306d6fd49874ec92","userId":"micahstubbs","description":"radar chart with an interactive legend","created_at":"2015-10-20T21:05:34Z","updated_at":"2015-10-20T22:49:07Z","thumbnail":"https://gist.githubusercontent.com/micahstubbs/a772306d6fd49874ec92/raw/38825733d22223d48ad84b98f59307415bb6a318/thumbnail.png","api":{"d3.scale.ordinal":1,"d3.json":1}},{"id":"373e03ed01dfcf97d985","userId":"emeeks","description":"Networks - Graphs 6","created_at":"2015-07-26T01:47:59Z","updated_at":"2015-08-29T14:25:52Z","thumbnail":"https://gist.githubusercontent.com/emeeks/373e03ed01dfcf97d985/raw/08b89db9b87ca2804efb1c6405bb99dc308d242e/thumbnail.png","api":{"d3.csv":1,"d3.scale.ordinal":1,"d3.layout.force":1,"d3.select":4}},{"id":"7b040a736d72fe969873","userId":"drifkin","description":"Delunay with circumcircles","created_at":"2015-10-22T01:56:38Z","updated_at":"2015-10-22T02:11:10Z","api":{"d3.range":1,"d3.select":1,"d3.mouse":1,"d3.event.preventDefault":1,"d3.geom.voronoi":1,"d3.geom.delaunay":1}},{"id":"14c943d8f198d9f3fef2","userId":"john-guerra","description":"Group-in-a-box algorithm","created_at":"2014-11-07T01:56:19Z","updated_at":"2015-08-29T14:08:47Z","thumbnail":"https://gist.githubusercontent.com/john-guerra/14c943d8f198d9f3fef2/raw/b7853a44cb60e63d5f3b705f2525a97234ca32ef/thumbnail.png","api":{"d3.select":7,"d3.scale.category20":1,"d3.layout.forceInABox":1,"d3.json":1}},{"id":"a23f857ee922bea4bded","userId":"vicapow","description":"fresh block","created_at":"2015-10-22T05:22:25Z","updated_at":"2015-10-22T05:22:26Z","api":{"d3.select":1,"d3.range":1}},{"id":"28b9d73c2871da50c616","userId":"ptrikutam","description":"Heatmap of git commits - basic","created_at":"2015-10-22T04:48:32Z","updated_at":"2015-10-22T06:59:53Z","api":{"d3.scale.linear":1,"d3.json":1,"d3.extent":1,"d3.select":1}},{"id":"2a7a7eecb9a75347241b","userId":"mattdh666","description":"Arc Bubble Connector Chart","created_at":"2015-10-22T21:02:17Z","updated_at":"2015-10-22T21:50:51Z","thumbnail":"https://gist.githubusercontent.com/mattdh666/2a7a7eecb9a75347241b/raw/1bd322b1d36e037d0d6b316390b7d4b6d46ea565/thumbnail.png","api":{"d3.select":9,"d3.layout.pack":1,"d3.layout.chord":1,"d3.svg.diagonal.radial":1,"d3.promise.json":6,"d3.svg.arc":2}},{"id":"9011649d262c27c6774b","userId":"trinary","description":"","created_at":"2015-08-31T17:39:45Z","updated_at":"2015-08-31T18:27:34Z","api":{}},{"id":"da1c086e30a0174232a9","userId":"nmu","description":"d3.unconf 2015","created_at":"2015-10-23T05:15:10Z","updated_at":"2015-10-23T05:21:04Z","api":{"d3.select":5,"d3.time.format":3,"d3.json":1,"d3.time.scale":1,"d3.scale.linear":1,"d3.svg.axis":4,"d3.extent":1,"d3.max":1,"d3.svg.area":1}},{"id":"c0fc3e8bb09d3dd68a68","userId":"tvirot","description":"TweetTimeline","created_at":"2015-10-23T07:26:28Z","updated_at":"2015-10-23T07:34:31Z","api":{"d3.select":7,"d3.json":1,"d3.sum":1,"d3.max":2,"d3.scale.ordinal":1,"d3.scale.linear":2,"d3.scale.log":1,"d3.svg.line":1,"d3.time.format":2,"d3.selectAll":1}},{"id":"2a21754aeb6006cd5e9e","userId":"kenpenn","description":"d3 with three world tour","created_at":"2015-06-26T02:18:24Z","updated_at":"2015-08-29T14:23:44Z","thumbnail":"https://gist.githubusercontent.com/kenpenn/2a21754aeb6006cd5e9e/raw/9774bb6b1500400d642da3ae71790d067a5c0fd6/thumbnail.png","api":{"d3.rgb":3,"d3.select":3,"d3.geo.equirectangular":1,"d3.geo.centroid":1,"d3.transition":1,"d3.interpolateObject":1,"d3.geo.path":1,"d3.geo.graticule":1}},{"id":"9392270377ba1fa1ce3f","userId":"ramnathv","description":"Circular Grid Chart","created_at":"2015-10-23T18:03:24Z","updated_at":"2015-10-23T18:05:43Z","api":{"d3.range":1,"d3.merge":1,"d3.select":10,"d3.scale.ordinal":2,"d3.scale.linear":1,"d3.min":2,"d3.tip":1,"d3.svg.axis":2}},{"id":"3ec13d79f2f925dfab10","userId":"quinnhj","description":"Scatterplot With Inspector","created_at":"2015-10-22T22:52:06Z","updated_at":"2015-10-23T18:09:46Z","api":{"d3.scale.linear":6,"d3.scale.category10":1,"d3.svg.axis":3,"d3.select":2,"d3.mouse":2,"d3.selectAll":1,"d3.extent":3,"d3.format":1,"d3.layout.histogram":1,"d3.max":1,"d3.tsv":1}},{"id":"309fdc2d5e3423aa9b4b","userId":"c-johnson","description":"","created_at":"2015-10-23T18:41:51Z","updated_at":"2015-10-23T18:51:47Z","api":{"d3.quantile":2,"d3.variance.apply":1,"d3.min":2,"d3.zip.apply":1,"d3.event.preventDefault":1,"d3.select":19,"d3.ns.qualify":5,"d3.requote":2,"d3.map":10,"d3.rebind":8,"d3.interpolateZoom":1,"d3.mouse":6,"d3.touches":2,"d3.selectAll":3,"d3.rgb":3,"d3.dispatch":3,"d3.dsv":2,"d3.round":2,"d3.formatPrefix":2,"d3.locale":1,"d3.geo.stream":8,"d3.merge":3,"d3.geo.conicEqualArea":3,"d3.geo.albers":1,"d3.geo.albersUsa":1,"d3.range":14,"d3.geo.distance":1,"d3.geom.voronoi":1,"d3.hcl":2,"d3.hsl":2,"d3.lab":2,"d3.transform":2,"d3.geom.quadtree":1,"d3.timer":3,"d3.behavior.drag":1,"d3.layout.hierarchy":5,"d3.sum":1,"d3.permute":2,"d3.bisect":5,"d3.max":2,"d3.random.normal.apply":1,"d3.random.irwinHall":1,"d3.range.apply":1,"d3.format":4,"d3.scale.linear":5,"d3.scale.pow":1,"d3.scale.ordinal":4,"d3.svg.diagonal":1,"d3.selection":1,"d3.ease.apply":1,"d3.transition":5,"d3.csv":1}}]

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body {      margin:0;position:absolute;top:0;right:0;bottom:0;left:0;
        overflow-y: scroll;}
    svg { width: 1024px; height: 1024px; }
    .brush .extent {
      fill: #555;
      fill-opacity: .1;
      stroke: #fff;
      shape-rendering: crispEdges;
    }
  </style>
</head>

<body>
  <script>
    var margin = {top: 20, right: 10, bottom: 20, left: 10};
    var width = 1024 - margin.left - margin.right;
    var height = 1024 - margin.top - margin.bottom;
    var duration = 200;
    var radius = 450;
    var apiSize = 60;
    var ignoreApi = ['d3.select', 'd3.selectAll'];
    var selected = {};
    var hovered = false;
    var brushing = false;
    var force = d3.layout.force()
      .size([width, height])
      .charge(function(d) {return d.type === 'api' ? 5 : -Math.pow(d.size, 2)})
      .linkStrength(function(d) {return d.strength})
      .on('end', updateGraph);
    var nodes = [],
        links = [];
  
    var circle, path, text, summary;
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    var div = d3.select('body').append('div')
    	.style({
        'width': 1024
      });
    svg.append("g")
      .attr("class", "brush")
      .call(d3.svg.brush()
        .x(d3.scale.identity().domain([0, width]))
        .y(d3.scale.identity().domain([0, height]))
        .on('brushstart', function() {brushing = true;})
        .on("brush", brush)
        .on('brushend', function() {brushing = false;}));
    
    function enterGraph() {
      path = svg.selectAll('line')
        .data(links).enter().insert('line', '.brush')
        .attr('stroke', '#ccc')
        .attr('stroke-linecap', 'round');
      circle = svg.selectAll('circle')
        .data(nodes).enter().append('circle')
        .attr('stroke-width', 2)
      	.style({'cursor': 'pointer'})
        .on('mouseover', hover)
        .on('mouseleave', unhover)
        .on('click', select);
      text = svg.selectAll('text')
        .data(_.filter(nodes, function(node) {return node.type === 'api';}))
        .enter().append('text')
        .attr('text-anchor', 'middle')
        .attr('dy', '.35em')
        .attr('fill', '#555')
        .style({
          'font-size': '12px',
          'font-family': 'Helvetica',
          'font-weight': 600,
        	'cursor': 'pointer'
        }).on('mouseover', hover)
        .on('mouseleave', unhover)
        .on('click', select);
    };
    function updateGraph() { 
      circle.attr('r', function(d) {return d.size})
        .attr('fill', function(d) {return d.fill || '#fff'})
        .attr('fill-opacity', function(d) {return d.type === 'api' ? .25 : 1})
        .attr('stroke', function(d) {return d.stroke || 'none'})
        .attr('cx', function(d) {return d.x})
        .attr('cy', function(d) {return d.y});
      text.attr('x', function(d) {return d.x})
        .attr('y', function(d) {return d.y + 10})
        .text(function(d) {return d.id});
      
      path.attr('stroke-width', function(d) {return d.size})
        .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});
    };
    
    function renderSummary() {
      var selectedData = _.filter(selected, function(d) {return d.type !== 'api'});
      summary = div.selectAll('span').data(selectedData);
      
      var enterSummary = summary.enter().append('span');
      enterSummary.append('img');
      enterSummary.append('a');
      
      summary.style({
        'margin': '10px 5px',
        'width': 300,
        'position': 'relative'
      });
      
      summary.select('img')
      	.attr('src', function(d) {return d.image})
      	.attr('width', 230)
      	.attr('height', 120)
      	.style({
        	'border': '1px solid #555',
        	'border-radius': '3px',
        	'margin': 5
        });
      
      summary.select('a')
      	.attr('href', function(d) {
        	return 'http://bl.ocks.org/' + d.user + '/' + d.id;
        }).attr('target', '_new')
        .style({
        	'font-family': 'Garamond',
        	'display': 'block',
        	'color': '#555',
        	'width': '100%',
        	'text-align': 'center'
        }).text(function(d) {return d.title + ' (' + d.user + ')';});
      
      summary.exit().remove();
    };
    
    function hover() {
      hovered = d3.select(this).datum();
      calculateHighlight(hovered, true, 'hovered');
      applyHighlight();
      renderSummary();
    }
    
    function unhover() {
      hovered = false;
      calculateHighlight(d3.select(this).datum(), false, 'hovered');
      applyHighlight();
      renderSummary();
    }
    
    function select() {
      var data = d3.select(this).datum();
      if (selected[data.id]) {
        delete selected[data.id];
        calculateHighlight(data, false, 'selected');
      } else {
        selected[data.id] = data;
        calculateHighlight(data, true, 'selected');
      }
      renderSummary();
    }
    
    function brush() {
      selected = {};
      var extent = d3.event.target.extent();
      circle.each(function(d) {
        if (extent[0][0] <= d.x && d.x < extent[1][0]
            && extent[0][1] <= d.y && d.y < extent[1][1]) {
        	selected[d.id] = d; 
        }
      });
      
      calculateHighlight(null, true, 'selected');
      applyHighlight();
      renderSummary();
    }
    
    function calculateHighlight(data, highlight, type) {
      var nodesToHighlight = {};

      path.each(function(d) {
        if ((data && d.source.id === data.id) || selected[d.source.id]) {
          nodesToHighlight[d.target.id] = selected[d.source.id] ? true : highlight;
          d[type] = selected[d.source.id] ? true : highlight;
        } else if ((data && d.target.id === data.id) || selected[d.target.id]) {
          nodesToHighlight[d.source.id] = selected[d.target.id] ? true : highlight;
          d[type] = selected[d.target.id] ? true : highlight;
        } else {
          d[type] = false;
        }
      });

      circle.each(function(d) {
        if ((data && d.id === data.id) || selected[d.id]) {
          d[type] = selected[d.id] ? true : highlight;
        } else if (nodesToHighlight[d.id]) {
          d[type] = nodesToHighlight[d.id];
        } else {
          d[type] = false;
        }
      });

      text.each(function(d) {
        if ((data && d.id === data.id) || selected[d.id]) {
          d[type] = selected[d.id] ? true : highlight;
        } else if (nodesToHighlight[d.id]) {
          d[type] = nodesToHighlight[d.id];
        } else {
          d[type] = false;
        }
      });
    }
    
    function applyHighlight() {
      path.transition().duration(brushing ? 0 : duration)
        .attr('stroke-opacity', function(d) {
        	return d.selected || d.hovered ||
            (_.isEmpty(selected) && !hovered) ? 1 : .15;
        });
      circle.transition().duration(brushing ? 0 : duration)
        .attr('fill-opacity', function(d) {
          if (d.selected || d.hovered) {
            return d.type === 'api' ? .75 : 1;
          } else if (_.isEmpty(selected) && !hovered) {
            return d.type === 'api' ? .25 : 1;
          } else {
            return .15;
          }
        }).attr('stroke-opacity', function(d) {
        	return d.selected || d.hovered ||
            (_.isEmpty(selected) && !hovered) ? 1 : .15;
        });
      text.transition().duration(brushing ? 0 : duration)
        .attr('fill-opacity', function(d) {
          return d.selected || d.hovered ||
            (_.isEmpty(selected) && !hovered) ? 1 : .15;
        });
    }

    d3.json('data.json', function(data) {
      var linkStrengths = [];
      var api = _.chain(data)
        .pluck('api')
        .map(function(api) {return _.pairs(api)})
        .flatten().compact()
        .filter(function(api) {return !_.contains(ignoreApi, api[0])})
        .reduce(function(memo, api) {
          linkStrengths.push(api[1]);
          if (!memo[api[0]]) {
            memo[api[0]] = 0;
          }
          memo[api[0]] += api[1];
          return memo;
        }, {})
        .value();
      var colors = d3.scale.category20();
      var sizeScale = d3.scale.linear()
        .domain([_.min(api), _.max(api)])
        .range([5, 40]);
      var widthScale = d3.scale.linear()
      	.domain([_.min(linkStrengths), _.max(linkStrengths)])
        .range([1, 5]);
      var strengthScale = d3.scale.linear()
        .domain([_.min(linkStrengths), _.max(linkStrengths)])
        .range([0, 1]);
      var apiNodes = _.chain(api)
        .map(function(count, name) {
          api[name] = {
            id: name,
            size: sizeScale(count),
            fill: colors(name),
            fixed: true,
            type: 'api'
          };
          return api[name];
        }).sortBy(function(node) {
          return -node.size;  
        }).map(function(node, i) {
          if (i > (apiSize - 1)) {
            delete api[node.id];
          	return; 
          }
          var radian = (2 * Math.PI) / apiSize * i - (Math.PI / 2);
          node.x = radius * Math.cos(radian) + (width / 2);
          node.y = radius * Math.sin(radian) + (height / 2);
          return node;
        }).compact().value();
      var blockNodes = _.map(data, function(block) {
        var node = {
          id: block.id,
          title: block.description,
          user: block.userId,
          image: block.thumbnail,
          size: 5,
          stroke: '#999'
        };
        _.each(block.api, function(count, apiName) {
          if (!api[apiName]) return;
          links.push({
            source: node,
            target: api[apiName],
            size: widthScale(count),
            strength: strengthScale(count)
          });
        });

        return node;
      });
      
      nodes = _.union(apiNodes, blockNodes);
      force.nodes(nodes).links(links);
      
      enterGraph();
      
      force.start();
      _.times(1000, function() {force.tick();});
      force.stop();
    });
  </script>
</body>

thumbnail.png