2e:null 2f:["$","title",null,{"children":"Prototyping in D3 | Amelia Wattenberger | Observable"}] 34:T5e5,createInteractions = { const tooltipWidth = 100 const tooltip = wrapper.append("div") .style("position", "absolute") .style("padding", "10px 15px") .style("background", "white") .style("left", "0") .style("top", "0") .style("width", tooltipWidth + "px") .style("box-sizing", "border-box") .style("border", "1px solid") .style("font-family", "sans-serif") .style("font-size", "12px") .style("transition", "transform 0.1s ease-out") .style("pointer-events", "none") .style("opacity", 0) bounds.append("rect") .attr("width", dms.boundedWidth) .attr("height", dms.boundedHeight) .style("fill", "transparent") .on("mousemove", function(e) { const [mouseX, mouseY] = d3.mouse(this) const index = delaunay.find(mouseX, mouseY) const point = data[index] let parsedX = x(point) + dms.marginLeft if (parsedX > dms.width - tooltipWidth - 10) parsedX -= tooltipWidth let parsedY = y(point) + dms.marginTop tooltip.style("opacity", 1) tooltip.style("transform", `translate(${parsedX}px, calc(${parsedY > dms.height - 200 ? -100 : 0}% + ${parsedY}px))`) tooltip.html([ `

${point["date"]}

`, `

x: ${ xAccessor(point) }

`, `

y: ${ yAccessor(point) }

`, ].join(" ")) }) .on("mouseleave", metric => { tooltip.style("opacity", 0) }) }35:[{"id":"8123d88a5e798937b42277d15eac6f4d2ab2a1ed06cb93e2cbe5462f2072e66d0c727934b2cf8754782ba7c28a780bca4404b93d38496794bdb5d8ab6861ddb3","href":"https://static.observableusercontent.com/files/8123d88a5e798937b42277d15eac6f4d2ab2a1ed06cb93e2cbe5462f2072e66d0c727934b2cf8754782ba7c28a780bca4404b93d38496794bdb5d8ab6861ddb3","name":"nyc-weather.csv","type":"text/csv","lastModified":1598493381301.221,"size":75368},{"id":"1cd696a9e13d72947785039d9ade051cd158e2187fdfeb74f72d0c322486c6b2123f1e35e4d962ec4dab35444129336624f06b3fcacf1b1928256d0c1c6b6d88","href":"https://static.observableusercontent.com/files/1cd696a9e13d72947785039d9ade051cd158e2187fdfeb74f72d0c322486c6b2123f1e35e4d962ec4dab35444129336624f06b3fcacf1b1928256d0c1c6b6d88","name":"image.png","type":"image/png","lastModified":1598492783348.783,"size":175822},{"id":"810b28ca96b51e589abdd92864a2af12998976e9a14c58ef683088425cc12e5dad43f39433465c41e8823d84cb288b6e4ea8dbfaf7dac03c50ab785407bd88fb","href":"https://static.observableusercontent.com/files/810b28ca96b51e589abdd92864a2af12998976e9a14c58ef683088425cc12e5dad43f39433465c41e8823d84cb288b6e4ea8dbfaf7dac03c50ab785407bd88fb","name":"image@1.png","type":"image/png","lastModified":1598496228420.361,"size":183837}] 32:{"id":"6584e4d5363a9706","slug":"prototyping-in-d3","title":"Prototyping in D3","thumbnail":"9c3674bf4cd12993db0dc05da2e5b76280b8d3e905adc43056dc2c68b4c5cb46","access_level":"public","create_time":"$D2020-08-27T01:18:17.274Z","update_time":"$D2022-04-11T16:32:42.847Z","view_time":null,"first_public_time":"$D2020-08-27T02:18:37.657Z","has_unpublished_edits":null,"fork":false,"stars":69,"starred":false,"owner":{"type":"team","id":"e1b76b9b200a9fc5","login":"wattenberger","name":"Amelia Wattenberger","avatar_url":"https://avatars-next.observableusercontent.com/9e922bd7d37d99b27d302138dedc8d2387985f52c1715f463b45ab23765fddf2","tier":"starter_2024"},"version":252,"publish_version":252,"role":null,"authored":false,"authors":[{"type":"individual","id":"5b3290359e44e5cc","login":"wattenberger","name":"Amelia Wattenberger","avatar_url":"https://avatars-next.observableusercontent.com/9e922bd7d37d99b27d302138dedc8d2387985f52c1715f463b45ab23765fddf2","tier":null}],"members":[{"type":"individual","id":"5b3290359e44e5cc","login":"wattenberger","name":"Amelia Wattenberger","avatar_url":"https://avatars-next.observableusercontent.com/9e922bd7d37d99b27d302138dedc8d2387985f52c1715f463b45ab23765fddf2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":22,"collection":null,"type":"notebook","body":{"title":"Prototyping in D3","cells":[{"id":0,"value":"md`# Prototyping in D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## Rules of thumb`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`\n### Don't do anything more than thrice\n - find ways to automate your process\n\n### Defer decisions\n\n- when possible, make the code flexible\n- incorporate input (sliders, toggles) that increase the visualized options\n\n### Balance between flexibilty & conventions\n- basic chart structure\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"FileAttachment(\"image@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`\n- standard steps makes it easy to combine charts & dive into old code\n\n### Separation of concerns:\n- access & parse data\n- access metrics\n- draw chart structure\n- create scales\n- draw axes\n- draw data\n- create interactions\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md`---\n# Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`## 1. access & parse data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"data = d3.csvParse(await FileAttachment(\"nyc-weather.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`## 2. access metrics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"xAccessor = d => +d[\"pressure\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"yAccessor = d => +d[\"humidity\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`## 3. draw chart structure`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"dms = {\n let dms = {\n width: width,\n height: 500,\n marginTop: 0,\n marginRight: 0,\n marginBottom: 50,\n marginLeft: 50,\n }\n dms.boundedWidth = dms.width - dms.marginLeft - dms.marginRight\n dms.boundedHeight = dms.height - dms.marginTop - dms.marginBottom\n \n return dms\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"wrapper = d3.create(\"div\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"svg = wrapper.html(\"\").append(\"svg\")\n .attr(\"viewBox\", [0, 0, dms.width, dms.height])\n .style(\"overflow\", \"visible\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"bounds = svg.append(\"g\")\n .attr(\"transform\", move(dms.marginLeft, dms.marginTop))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"import {move} from \"@wattenberger/chart-utility-functions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`## 4. create scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"xScale = d3.scaleLinear()\n .domain(d3.extent(data, xAccessor))\n .range([0, dms.boundedWidth])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"yScale = d3.scaleLinear()\n .domain(d3.extent(data, yAccessor))\n .range([dms.boundedHeight, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"x = d => xScale(xAccessor(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"y = d => yScale(yAccessor(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`## 5. create axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"xAxis = d3.axisBottom(xScale) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"yAxis = d3.axisLeft(yScale) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"drawAxes = {\n bounds.append(\"g\")\n .attr(\"transform\", move(0, dms.boundedHeight))\n .call(xAxis)\n \n bounds.append(\"g\")\n .call(yAxis)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`## 6. draw data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"addData = bounds.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", x)\n .attr(\"cy\", y)\n .attr(\"r\", radius)\n .attr(\"fill\", \"cornflowerblue\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"md`## 7. render the chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"chart = wrapper.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`## 8. create interactions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"viewof radius = slider({min: 1, max: 10, value: 5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"delaunay = d3.Delaunay.from(data.map(d => ([\n x(d),\n y(d),\n])))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"d3 = require(\"d3@5\", \"d3-delaunay@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"