{"id":485,"date":"2018-12-14T13:15:46","date_gmt":"2018-12-14T13:15:46","guid":{"rendered":"http:\/\/lanimcleod.com\/?p=485"},"modified":"2022-01-14T10:12:07","modified_gmt":"2022-01-14T10:12:07","slug":"d3-hexbin-as-a-design-feature","status":"publish","type":"post","link":"https:\/\/lanimcleod.com\/?p=485","title":{"rendered":"D3 Hexbin as a design feature"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Skill Summary<\/h2>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td><strong>Language<\/strong><\/td><td><strong>Method<\/strong><\/td><\/tr><tr><td>D3.js v5<\/td><td>Hexabin<\/td><\/tr><tr><td>HTML5<\/td><td>WordPress<\/td><\/tr><\/tbody><\/table>\n\n\n\n<style>\n\nbody {\n  margin: 1em 0 4em 0;\n}\n\n#examples {\n  background: #ddd;\n  height: 460px;\n  overflow: hidden;\n  padding: 0;\n  position: relative;\n  border-top: solid 1px #fff;\n}\n\n#examples:after,\n#examples:before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  position: absolute;\n  background: white;\n  height: 16px;\n  z-index: 2;\n\t\n}\n\n#examples:before {\n  bottom: -16px;\n  box-shadow: 0px -8px 16px rgba(0,0,0,.3);\n}\n\n#examples:after {\n  top: -16px;\n  box-shadow: 0px 8px 16px rgba(0,0,0,.3);\n}\n\n#examples-deep {\n  -webkit-transform-style: preserve-3d;\n  -moz-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  backface-visibility: hidden;\n\t\n}\n\n#examples svg,\n#examples canvas {\n  position: absolute;\n}\n\n.example-mesh {\n  fill: none;\n  stroke: #fff;\n  stroke-width: 4px;\n}\n\n.example-anchor path {\n  fill: none;\n  pointer-events: all;\n  cursor: pointer;\n\t\n}\n\n.example-anchor path:hover {\n  stroke: #003663;\n  stroke-width: 4px;\n}\n\n\n.column {\n  margin: auto;\n  width: 720px;\n  padding-right: 0px;\n  position: relative;\n}\n\n\n\npre,\ncode {\n  font-family: \"Menlo\", monospace;\n  -webkit-text-size-adjust: 100%;\n}\n\ncode {\n  line-height: 1em;\n}\n\npre {\n  border-left: solid 2px #ccc;\n  padding-left: 0px;\n  margin: 2em 0 2em -20px;\n}\n\n.html .string,\n.javascript .string,\n.javascript .regexp {\n  color: #756bb1;\n}\n\n.html .tag,\n.css .tag,\n.javascript .keyword {\n  color: #3182bd;\n}\n\n.comment {\n  color: #636363;\n}\n\n.html .doctype,\n.javascript .number {\n  color: #31a354;\n}\n\n.html .attr,\n.css .attr,\n.javascript .class,\n.javascript .special {\n  color: #e6550d;\n}\n\n<\/style>\n\n\n\n<div class=\"column\">\n\n<\/div>\n\n\n\n<div id=\"examples\">\n  <div id=\"examples-deep\"><\/div>\n  <div id=\"examples-service\"><\/div>\n<\/div>\n\n\n\n<section id=\"about\">\n<p>I used the simple script from Mike Bockstock&#8217;s D3.js page to play around with hex bins. I repurposed it here to feature services.<\/p>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Skill Summary Language Method D3.js v5 Hexabin HTML5 WordPress I used the simple script from Mike Bockstock&#8217;s D3.js page to play around with hex bins. I repurposed it here to feature services.<\/p>\n","protected":false},"author":2,"featured_media":486,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[9,7,2,10],"tags":[],"class_list":["post-485","post","type-post","status-publish","format-standard","has-post-thumbnail","category-graphic-design","category-infographics","category-visualization","category-web-design","entry"],"_links":{"self":[{"href":"https:\/\/lanimcleod.com\/index.php?rest_route=\/wp\/v2\/posts\/485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lanimcleod.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lanimcleod.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lanimcleod.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lanimcleod.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=485"}],"version-history":[{"count":6,"href":"https:\/\/lanimcleod.com\/index.php?rest_route=\/wp\/v2\/posts\/485\/revisions"}],"predecessor-version":[{"id":520,"href":"https:\/\/lanimcleod.com\/index.php?rest_route=\/wp\/v2\/posts\/485\/revisions\/520"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lanimcleod.com\/index.php?rest_route=\/wp\/v2\/media\/486"}],"wp:attachment":[{"href":"https:\/\/lanimcleod.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lanimcleod.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lanimcleod.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}