{"id":"63fa591c902f126b","slug":"updatable-bar-chart","first_public_version":323,"paused_version":null,"likes":0,"publish_level":"live","forks":0,"fork_of":null,"has_importers":false,"thumbnail":"d304e20bd278e92d9ac0b1990f87ed05a50aee7fdfce0c5257f3ba1e7ffacd2a","default_thumbnail":"d304e20bd278e92d9ac0b1990f87ed05a50aee7fdfce0c5257f3ba1e7ffacd2a","update_time":"2020-06-12T13:50:51.856Z","publish_time":"2023-09-07T07:29:32.613Z","publish_version":325,"latest_version":325,"roles":[],"sharing":null,"owner":{"id":"1a55a189adb52dd7","avatar_url":"https://avatars.observableusercontent.com/avatar/39220b21cbf7eff8318ad71b8f1f1b73aaaa40953e51c89e2bf097d8e901318c","login":"juba","name":"Julien Barnier","bio":"Trying to do things.","home_url":"https://data.nozav.org","type":"team","tier":"starter_2024"},"creator":{"id":"ef385df54c3fe400","avatar_url":"https://avatars.observableusercontent.com/avatar/39220b21cbf7eff8318ad71b8f1f1b73aaaa40953e51c89e2bf097d8e901318c","login":"juba","name":"Julien Barnier","bio":"Trying to do things.","home_url":"https://data.nozav.org","tier":"public"},"authors":[{"id":"ef385df54c3fe400","avatar_url":"https://avatars.observableusercontent.com/avatar/39220b21cbf7eff8318ad71b8f1f1b73aaaa40953e51c89e2bf097d8e901318c","name":"Julien Barnier","login":"juba","bio":"Trying to do things.","home_url":"https://data.nozav.org","tier":"public","approved":true,"description":""}],"files":[],"comments":[],"commenting_lock":null,"suggestions_to":[],"suggestion_from":null,"collections":[],"version":323,"title":"Updatable Bar Chart","license":null,"copyright":"","nodes":[{"id":1,"value":"md`# Updatable Bar Chart`","pinned":false,"mode":"js","data":null,"name":null},{"id":19,"value":"chart = {\n  const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n  const g = svg.append(\"g\").attr(\"fill\", color);\n  const gx = svg\n    .append(\"g\")\n    .attr(\"transform\", `translate(0,${height - margin.bottom})`);\n  const gy = svg.append(\"g\").attr(\"transform\", `translate(${margin.left}, 0)`);\n\n  return Object.assign(svg.node(), {\n    update(dat) {\n      const t = svg.transition().duration(1000);\n\n      const x = d3\n        .scaleBand()\n        .domain(d3.range(dat.length))\n        .range([margin.left, width - margin.right])\n        .padding(0.1);\n\n      const y = d3\n        .scaleLinear()\n        .domain([0, d3.max(dat, d => d.value)])\n        .nice()\n        .range([height - margin.bottom, margin.top]);\n\n      g.selectAll(\"rect\")\n        .data(dat, d => d.name)\n        .join(\n          enter =>\n            enter\n              .append(\"rect\")\n              .attr(\"opacity\", 0)\n              .call(enter =>\n                enter\n                  .transition(t)\n                  .attr(\"opacity\", 1)\n                  .attr(\"x\", (d, i) => x(i))\n                  .attr(\"y\", d => y(d.value))\n                  .attr(\"height\", d => y(0) - y(d.value))\n                  .attr(\"width\", x.bandwidth())\n              ),\n          update =>\n            update.call(update =>\n              update\n                .transition(t)\n                .attr(\"x\", (d, i) => x(i))\n                .attr(\"y\", d => y(d.value))\n                .attr(\"height\", d => y(0) - y(d.value))\n                .attr(\"width\", x.bandwidth())\n            ),\n          exit =>\n            exit.call(exit =>\n              exit\n                .transition(t)\n                .attr(\"opacity\", 0)\n                .remove()\n            )\n        );\n\n      gx.transition(t).call(\n        d3\n          .axisBottom(x)\n          .tickFormat(i => dat[i].name)\n          .tickSizeOuter(0)\n      );\n      gy.transition(t).call(d3.axisLeft(y));\n    }\n  });\n}","pinned":false,"mode":"js","data":null,"name":null},{"id":263,"value":"draw = chart.update(data)","pinned":true,"mode":"js","data":null,"name":null},{"id":265,"value":"data = [\n  { name: \"A\", value: 23 },\n  { name: \"B\", value: 15 },\n  { name: \"C\", value: 50 },\n  { name: \"D\", value: 10 },\n  { name: \"F\", value: 10 }\n]","pinned":true,"mode":"js","data":null,"name":null},{"id":255,"value":"color = \"steelblue\"","pinned":false,"mode":"js","data":null,"name":null},{"id":69,"value":"height = 500","pinned":false,"mode":"js","data":null,"name":null},{"id":74,"value":"margin = ({top: 30, right: 0, bottom: 30, left: 40})","pinned":false,"mode":"js","data":null,"name":null},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"mode":"js","data":null,"name":null}],"resolutions":[],"schedule":null,"last_view_time":null}