{"id":484,"date":"2016-12-16T13:21:44","date_gmt":"2016-12-16T12:21:44","guid":{"rendered":"https:\/\/solidt.eu\/blog\/?p=484"},"modified":"2019-04-23T15:25:01","modified_gmt":"2019-04-23T14:25:01","slug":"d3-js-bar-chart-example","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/d3-js-bar-chart-example\/","title":{"rendered":"D3.js: Bar chart example"},"content":{"rendered":"<style>\n\nbody {\n  font: 10px sans-serif;\n}\n\n.bar rect {\n  fill: steelblue;\n}\n\n.bar text {\n  fill: white;\n}\n\n.axis path, .axis line {\n  fill: none;\n  stroke: black;\n  shape-rendering: crispEdges;\n}\n\n<\/style>\n<script src=\"https:\/\/d3js.org\/d3.v3.min.js\"><\/script> <script>\n\nvar margin = {top: 0, right: 10, bottom: 20, left: 50},\n    width = 960 - margin.left - margin.right,\n    height = 500 - margin.top - margin.bottom;\n\nvar index = d3.range(24),\n    data = index.map(d3.random.normal(100, 10));\n\nvar x = d3.scale.linear()\n    .domain([0, d3.max(data)])\n    .range([0, width]);\n\nvar y = d3.scale.ordinal()\n    .domain(index)\n    .rangeRoundBands([0, height], .1);\n\nvar svg = d3.select(\"body\").append(\"svg\")\n    .attr(\"width\", width + margin.left + margin.right)\n    .attr(\"height\", height + margin.top + margin.bottom)\n\t.append(\"g\")\n    .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n\nvar bar = svg.selectAll(\".bar\")\n    .data(data)\n  .enter().append(\"g\")\n    .attr(\"class\", \"bar\")\n    .attr(\"transform\", function(d, i) { return \"translate(\" + 0 + \",\" + y(i) + \")\"; });\n\nbar.append(\"rect\")\n    .attr(\"height\", y.rangeBand())\n    .attr(\"width\", x);\n\nbar.append(\"text\")\n    .attr(\"text-anchor\", \"end\")\n    .attr(\"x\", function(d) { return x(d) - 6; })\n    .attr(\"y\", y.rangeBand() \/ 2)\n    .attr(\"dy\", \".35em\")\n    .text(function(d, i) { return i; });\n\nsvg.append(\"g\")\n    .attr(\"class\", \"x axis\")\n    .attr(\"transform\", \"translate(0,\" + height + \")\")\n    .call(d3.svg.axis()\n    .scale(x)\n    .orient(\"bottom\"));\n\t\nsvg.append(\"g\")\n    .attr(\"class\", \"y axis\")\n    .call(d3.svg.axis()\n    .scale(y)\n    .orient(\"left\"));\t\n\nvar sort = false;\n\nsetInterval(function() {\n\n  if (sort = !sort) {\n    index.sort(function(a, b) { return data[a] - data[b]; });\n  } else {\n    index = d3.range(24);\n  }\n\n  y.domain(index);\n\n  bar.transition()\n      .duration(750)\n      .delay(function(d, i) { return i * 50; })\n      .attr(\"transform\", function(d, i) { return \"translate(\" + 0 + \",\" + y(i) + \")\"; });\n\n}, 5000);\n\n<\/script>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;style>\n\nbody {\n  font: 10px sans-serif;\n}\n\n.bar rect {\n  fill: steelblue;\n}\n\n.bar text {\n  fill: white;\n}\n\n.axis path, .axis line {\n  fill: none;\n  stroke: black;\n  shape-rendering: crispEdges;\n}\n\n&lt;\/style>\n&lt;script src=\"https:\/\/d3js.org\/d3.v3.min.js\">&lt;\/script> &lt;script>\n\nvar margin = {top: 0, right: 10, bottom: 20, left: 50},\n    width = 960 - margin.left - margin.right,\n    height = 500 - margin.top - margin.bottom;\n\nvar index = d3.range(24),\n    data = index.map(d3.random.normal(100, 10));\n\nvar x = d3.scale.linear()\n    .domain([0, d3.max(data)])\n    .range([0, width]);\n\nvar y = d3.scale.ordinal()\n    .domain(index)\n    .rangeRoundBands([0, height], .1);\n\nvar svg = d3.select(\"body\").append(\"svg\")\n    .attr(\"width\", width + margin.left + margin.right)\n    .attr(\"height\", height + margin.top + margin.bottom)\n\t.append(\"g\")\n    .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n\nvar bar = svg.selectAll(\".bar\")\n    .data(data)\n  .enter().append(\"g\")\n    .attr(\"class\", \"bar\")\n    .attr(\"transform\", function(d, i) { return \"translate(\" + 0 + \",\" + y(i) + \")\"; });\n\nbar.append(\"rect\")\n    .attr(\"height\", y.rangeBand())\n    .attr(\"width\", x);\n\nbar.append(\"text\")\n    .attr(\"text-anchor\", \"end\")\n    .attr(\"x\", function(d) { return x(d) - 6; })\n    .attr(\"y\", y.rangeBand() \/ 2)\n    .attr(\"dy\", \".35em\")\n    .text(function(d, i) { return i; });\n\nsvg.append(\"g\")\n    .attr(\"class\", \"x axis\")\n    .attr(\"transform\", \"translate(0,\" + height + \")\")\n    .call(d3.svg.axis()\n    .scale(x)\n    .orient(\"bottom\"));\n\t\nsvg.append(\"g\")\n    .attr(\"class\", \"y axis\")\n    .call(d3.svg.axis()\n    .scale(y)\n    .orient(\"left\"));\t\n\nvar sort = false;\n\nsetInterval(function() {\n\n  if (sort = !sort) {\n    index.sort(function(a, b) { return data[a] - data[b]; });\n  } else {\n    index = d3.range(24);\n  }\n\n  y.domain(index);\n\n  bar.transition()\n      .duration(750)\n      .delay(function(d, i) { return i * 50; })\n      .attr(\"transform\", function(d, i) { return \"translate(\" + 0 + \",\" + y(i) + \")\"; });\n\n}, 5000);\n\n&lt;\/script>\n<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-484","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=484"}],"version-history":[{"count":5,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/484\/revisions"}],"predecessor-version":[{"id":2108,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/484\/revisions\/2108"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}