2d:null 2e:["$","title",null,{"children":"Data-Driven SVG Faucet with D3 v4 | Aaron Kyle Dennis | Observable"}] 33:T7c6,body = html` `34:[] 31:{"id":"956a072ea024a03f","slug":"svg-faucet-with-d3-v4","title":"Data-Driven SVG Faucet with D3 v4","thumbnail":"e04784e000fe48dd0c464552cca21e72bb34aca901651bc296930064c12822f5","access_level":"public","create_time":"$D2018-06-05T18:20:50.000Z","update_time":"$D2018-11-27T22:15:04.048Z","view_time":null,"first_public_time":"$D2018-06-05T18:21:16.381Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":"starter_2024"},"version":31,"publish_version":31,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"7cbfafa649b21931","slug":"ports","title":"Ports","owner":{"id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"css = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require('d3@4')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"