{"id":862,"date":"2014-02-03T16:47:25","date_gmt":"2014-02-03T22:47:25","guid":{"rendered":"http:\/\/billdwhite.com\/?p=862"},"modified":"2014-02-03T16:47:25","modified_gmt":"2014-02-03T22:47:25","slug":"d3-pan-and-zoom-reuse-demo","status":"publish","type":"post","link":"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/","title":{"rendered":"D3 Pan and Zoom Reuse Demo"},"content":{"rendered":"<p>Here is a quick and dirty demo to show how one could reuse the pan and zoom code for other types of layouts.  This is in response to <a href=\"https:\/\/groups.google.com\/forum\/#!topic\/d3-js\/aaf7vCZaDKc\" title=\"d3 forum\" target=\"_blank\">this inquiry from the d3 forum<\/a>.<\/p>\n<p><!--\n<a class=\"jsbin-embed\" href=\"http:\/\/jsbin.com\/edOguXET\/7\/embed?output&amp;height=600px&amp;width=605px\">JS Bin<\/a><script src=\"http:\/\/static.jsbin.com\/js\/embed.js\"><\/script>\n--><\/p>\n<p data-height=\"618\" data-theme-id=\"2092\" data-slug-hash=\"cwbjo\" data-default-tab=\"result\" data-user=\"billdwhite\" class='codepen'>See the Pen <a href='http:\/\/codepen.io\/billdwhite\/pen\/cwbjo\/'>cwbjo<\/a> by Bill White (<a href='http:\/\/codepen.io\/billdwhite'>@billdwhite<\/a>) on <a href='http:\/\/codepen.io'>CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is a quick and dirty demo to show how one could reuse the pan and zoom code for other types of layouts. This is in response to this inquiry from the d3 forum. See the Pen cwbjo by Bill White (@billdwhite) on CodePen.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4,7,9,12],"tags":[],"class_list":["post-862","post","type-post","status-publish","format-standard","hentry","category-d3","category-html5","category-javascript","category-programming"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>D3 Pan and Zoom Reuse Demo - Bill White<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"D3 Pan and Zoom Reuse Demo - Bill White\" \/>\n<meta property=\"og:description\" content=\"Here is a quick and dirty demo to show how one could reuse the pan and zoom code for other types of layouts. This is in response to this inquiry from the d3 forum. See the Pen cwbjo by Bill White (@billdwhite) on CodePen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/\" \/>\n<meta property=\"og:site_name\" content=\"Bill White\" \/>\n<meta property=\"article:published_time\" content=\"2014-02-03T22:47:25+00:00\" \/>\n<meta name=\"author\" content=\"Bill White\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bill_d_white\" \/>\n<meta name=\"twitter:site\" content=\"@bill_d_white\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bill White\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/\"},\"author\":{\"name\":\"Bill White\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"headline\":\"D3 Pan and Zoom Reuse Demo\",\"datePublished\":\"2014-02-03T22:47:25+00:00\",\"dateModified\":\"2014-02-03T22:47:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/\"},\"wordCount\":50,\"commentCount\":13,\"publisher\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"articleSection\":[\"d3\",\"HTML5\",\"Javascript\",\"Programming\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/\",\"url\":\"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/\",\"name\":\"D3 Pan and Zoom Reuse Demo - Bill White\",\"isPartOf\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#website\"},\"datePublished\":\"2014-02-03T22:47:25+00:00\",\"dateModified\":\"2014-02-03T22:47:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/billdwhite.com\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D3 Pan and Zoom Reuse Demo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#website\",\"url\":\"https:\/\/billdwhite.com\/wordpress\/\",\"name\":\"Bill White's Blog\",\"description\":\"UI Development and Data Visualization:  Angular \/ React \/ D3 \/ Typescript \/ Javascript \/ UI \/ UX \/ Etc\",\"publisher\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/billdwhite.com\/wordpress\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\",\"name\":\"Bill White\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g\",\"caption\":\"Bill White\"},\"logo\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/www.billdwhite.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"D3 Pan and Zoom Reuse Demo - Bill White","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/","og_locale":"en_US","og_type":"article","og_title":"D3 Pan and Zoom Reuse Demo - Bill White","og_description":"Here is a quick and dirty demo to show how one could reuse the pan and zoom code for other types of layouts. This is in response to this inquiry from the d3 forum. See the Pen cwbjo by Bill White (@billdwhite) on CodePen.","og_url":"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/","og_site_name":"Bill White","article_published_time":"2014-02-03T22:47:25+00:00","author":"Bill White","twitter_card":"summary_large_image","twitter_creator":"@bill_d_white","twitter_site":"@bill_d_white","twitter_misc":{"Written by":"Bill White"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/#article","isPartOf":{"@id":"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/"},"author":{"name":"Bill White","@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"headline":"D3 Pan and Zoom Reuse Demo","datePublished":"2014-02-03T22:47:25+00:00","dateModified":"2014-02-03T22:47:25+00:00","mainEntityOfPage":{"@id":"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/"},"wordCount":50,"commentCount":13,"publisher":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"articleSection":["d3","HTML5","Javascript","Programming"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/","url":"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/","name":"D3 Pan and Zoom Reuse Demo - Bill White","isPartOf":{"@id":"https:\/\/billdwhite.com\/wordpress\/#website"},"datePublished":"2014-02-03T22:47:25+00:00","dateModified":"2014-02-03T22:47:25+00:00","breadcrumb":{"@id":"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/billdwhite.com\/wordpress\/2014\/02\/03\/d3-pan-and-zoom-reuse-demo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/billdwhite.com\/wordpress\/"},{"@type":"ListItem","position":2,"name":"D3 Pan and Zoom Reuse Demo"}]},{"@type":"WebSite","@id":"https:\/\/billdwhite.com\/wordpress\/#website","url":"https:\/\/billdwhite.com\/wordpress\/","name":"Bill White's Blog","description":"UI Development and Data Visualization:  Angular \/ React \/ D3 \/ Typescript \/ Javascript \/ UI \/ UX \/ Etc","publisher":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/billdwhite.com\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314","name":"Bill White","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g","caption":"Bill White"},"logo":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/www.billdwhite.com"]}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/comments?post=862"}],"version-history":[{"count":0,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/862\/revisions"}],"wp:attachment":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/media?parent=862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/categories?post=862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/tags?post=862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}