31:T7c6,body = html` `32:[] 2f:{"title":"Data-Driven SVG Faucet with D3 v4","cells":[{"id":0,"value":"md`# Data-Driven SVG Faucet with D3 v4`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`\nThis notebook ports to Observable [shimizu](https://bl.ocks.org/shimizu)’s [Block 062920b3d6cbabc66a6444a0ab19d571](http://bl.ocks.org/shimizu/062920b3d6cbabc66a6444a0ab19d571).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"{\nvar rangeX = document.querySelector('#rangeX');\t\nvar h = 500;\n\nrangeX['oninput' in rangeX ? 'oninput' : 'onchange'] = slide;\n\nfunction slide(){\n\tvar barH = h * rangeX.value;\n\tvar bar = d3.select(\"#bar\");\n\tbar.transition()\n\t\t.attr(\"y\", h - barH)\n\t\t.attr(\"height\", barH)\n\t\n}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"css = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3@4')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}