{"id":67,"date":"2013-06-09T14:16:47","date_gmt":"2013-06-09T19:16:47","guid":{"rendered":"http:\/\/natkale.com\/?page_id=67"},"modified":"2016-07-23T13:17:46","modified_gmt":"2016-07-23T18:17:46","slug":"67-2","status":"publish","type":"page","link":"https:\/\/natkale.com\/?page_id=67","title":{"rendered":"D3.js example"},"content":{"rendered":"\r\n\r\n<style>\r\n\r\ntext {\r\n  font: bold 36px monospace;\r\n}\r\n\r\n.enter {\r\n  fill: green;\r\n}\r\n\r\n.update {\r\n  fill: #333;\r\n}\r\n\r\n.exit {\r\n  fill: brown;\r\n}\r\n\r\n<\/style>\r\n\r\n<svg width=\"300\" height=\"300\"><\/svg>\r\n<script src=\"https:\/\/d3js.org\/d3.v4.min.js\"><\/script>\r\n\r\n<script type=\"text\/javascript\">\/\/ <![CDATA[\r\nvar alphabet = \"aeiouy\".split(\"\");\r\n\r\nvar svg = d3.select(\"svg\"),\r\n    width = +svg.attr(\"width\"),\r\n    height = +svg.attr(\"height\"),\r\n    g = svg.append(\"g\").attr(\"transform\", \"translate(32,\" + (height \/ 2) + \")\");\r\n\r\nfunction update(data) {\r\n  var t = d3.transition()\r\n      .duration(750);\r\n\r\n  \/\/ JOIN new data with old elements.\r\n  var text = g.selectAll(\"text\")\r\n    .data(data, function(d) { return d; });\r\n\r\n  \/\/ EXIT old elements not present in new data.\r\n  text.exit()\r\n      .attr(\"class\", \"exit\")\r\n    .transition(t)\r\n      .attr(\"y\", 60)\r\n      .style(\"fill-opacity\", 1e-6)\r\n      .remove();\r\n\r\n  \/\/ UPDATE old elements present in new data.\r\n  text.attr(\"class\", \"update\")\r\n      .attr(\"y\", 0)\r\n      .style(\"fill-opacity\", 1)\r\n    .transition(t)\r\n      .attr(\"x\", function(d, i) { return i * 32; });\r\n\r\n  \/\/ ENTER new elements present in new data.\r\n  text.enter().append(\"text\")\r\n      .attr(\"class\", \"enter\")\r\n      .attr(\"dy\", \".35em\")\r\n      .attr(\"y\", -60)\r\n      .attr(\"x\", function(d, i) { return i * 32; })\r\n      .style(\"fill-opacity\", 1e-6)\r\n      .text(function(d) { return d; })\r\n    .transition(t)\r\n      .attr(\"y\", 0)\r\n      .style(\"fill-opacity\", 1);\r\n}\r\n\r\n\/\/ The initial display.\r\nupdate(alphabet);\r\n\r\n\/\/ Grab a random sample of letters from the alphabet, in alphabetical order.\r\nd3.interval(function() {\r\n  update(d3.shuffle(alphabet)\r\n      .slice(0, Math.floor(Math.random() * 26))\r\n      .sort());\r\n}, 1500);\r\n\/\/ ]]><\/script>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-67","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/natkale.com\/index.php?rest_route=\/wp\/v2\/pages\/67","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/natkale.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/natkale.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/natkale.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/natkale.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=67"}],"version-history":[{"count":16,"href":"https:\/\/natkale.com\/index.php?rest_route=\/wp\/v2\/pages\/67\/revisions"}],"predecessor-version":[{"id":136,"href":"https:\/\/natkale.com\/index.php?rest_route=\/wp\/v2\/pages\/67\/revisions\/136"}],"wp:attachment":[{"href":"https:\/\/natkale.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=67"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}