{"id":554,"date":"2015-09-23T16:31:51","date_gmt":"2015-09-23T16:31:51","guid":{"rendered":"http:\/\/arlduc.org\/senseandscale\/?p=554"},"modified":"2015-09-24T16:55:38","modified_gmt":"2015-09-24T16:55:38","slug":"tutorial-d3-force-directed-bubble-chart","status":"publish","type":"post","link":"https:\/\/arlduc.org\/senseandscale\/?p=554","title":{"rendered":"Data Vis Tutorial: D3 Force Directed Bubble Chart"},"content":{"rendered":"<p>Full tutorial coming soon! In the meantime, check the JSFiddle below.<\/p>\n\n<!-- iframe plugin v.6.0 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" width=\"1000\" height=\"800\" src=\"\/\/jsfiddle.net\/0qczqsLy\/embedded\/result\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\" scrolling=\"yes\" class=\"iframe-class\"><\/iframe>\n\n<p>This visualization shows the top <a href=\"https:\/\/data.cityofnewyork.us\/Health\/Most-Popular-Baby-Names-by-Sex-and-Mother-s-Ethnic\/25th-nujf\" target=\"_blank\">2011 NYC baby names by mother&#8217;s ethnicity.<\/a>\u00a0The vis is a variation on our static bubble chart, but with some fun multi-foci force direction added in.<\/p>\n<p>Background from the D3 API reference and more:<\/p>\n<ul>\n<li>quick <a href=\"http:\/\/blog.visual.ly\/creating-animations-and-transitions-with-d3-js\/\" target=\"_blank\">primer on animations and transitions in visualizations<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Force-Layout\" target=\"_blank\">force layout<\/a><\/li>\n<li>bubble chart as\u00a0a flattened <a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Pack-Layout\" target=\"_blank\">pack layout<\/a><\/li>\n<li>the pack layout is one of D3&#8217;s <a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Hierarchy-Layout\" target=\"_blank\">hierarchy layouts<\/a><\/li>\n<\/ul>\n<p>This tutorial is based on our previous <a href=\"http:\/\/arlduc.org\/senseandscale\/?p=539\">bubble chart tutorial<\/a>\u00a0and M. Bostock&#8217;s <a href=\"http:\/\/bl.ocks.org\/mbostock\/1021841\" target=\"_blank\">multi-foci force layout,<\/a>\u00a0as well as our\u00a0<a href=\"http:\/\/arlduc.org\/senseandscale\/?p=498\">bar chart tutorial<\/a>,<a href=\"http:\/\/bl.ocks.org\/mbostock\/4063269\" target=\"_blank\">\u00a0Bostock&#8217;s bubble chart example<\/a>, and InfoCaptor&#8217;s <a href=\"http:\/\/www.infocaptor.com\/bubble-my-page?url=dukode.com&amp;size=800\" target=\"_blank\">Bubble My Page<\/a> service.<\/p>\n<p style=\"text-align: center;\">\n","protected":false},"excerpt":{"rendered":"<p>Full tutorial coming soon! In the meantime, check the JSFiddle below. This visualization shows the top 2011 NYC baby names by mother&#8217;s ethnicity.\u00a0The vis is a variation on our static bubble chart, but with some fun multi-foci force direction added in. Background from the D3 API reference and more: quick primer on animations and transitions [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,8],"tags":[],"class_list":["post-554","post","type-post","status-publish","format-standard","hentry","category-nyu-datavis","category-tutorials"],"_links":{"self":[{"href":"https:\/\/arlduc.org\/senseandscale\/index.php?rest_route=\/wp\/v2\/posts\/554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arlduc.org\/senseandscale\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arlduc.org\/senseandscale\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arlduc.org\/senseandscale\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arlduc.org\/senseandscale\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=554"}],"version-history":[{"count":5,"href":"https:\/\/arlduc.org\/senseandscale\/index.php?rest_route=\/wp\/v2\/posts\/554\/revisions"}],"predecessor-version":[{"id":561,"href":"https:\/\/arlduc.org\/senseandscale\/index.php?rest_route=\/wp\/v2\/posts\/554\/revisions\/561"}],"wp:attachment":[{"href":"https:\/\/arlduc.org\/senseandscale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arlduc.org\/senseandscale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arlduc.org\/senseandscale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}