25:["$","title",null,{"children":"Prototyping in D3 | Harim Jung | Observable"}] 49: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) }) }4a:[{"id":"810b28ca96b51e589abdd92864a2af12998976e9a14c58ef683088425cc12e5dad43f39433465c41e8823d84cb288b6e4ea8dbfaf7dac03c50ab785407bd88fb","href":"https://static.observableusercontent.com/files/810b28ca96b51e589abdd92864a2af12998976e9a14c58ef683088425cc12e5dad43f39433465c41e8823d84cb288b6e4ea8dbfaf7dac03c50ab785407bd88fb","name":"image@1.png","type":"image/png","lastModified":1691786765901.992,"size":183837},{"id":"8123d88a5e798937b42277d15eac6f4d2ab2a1ed06cb93e2cbe5462f2072e66d0c727934b2cf8754782ba7c28a780bca4404b93d38496794bdb5d8ab6861ddb3","href":"https://static.observableusercontent.com/files/8123d88a5e798937b42277d15eac6f4d2ab2a1ed06cb93e2cbe5462f2072e66d0c727934b2cf8754782ba7c28a780bca4404b93d38496794bdb5d8ab6861ddb3","name":"nyc-weather.csv","type":"text/csv","lastModified":1691786765901.992,"size":75368}] 29:{"id":"af9706952d60dabe","slug":null,"title":"Prototyping in D3","thumbnail":"152e0b814a746088bb3a5c2a1e23eeb0bb93e734b8195787e1d9ffbc885ab2fa","access_level":"public","create_time":"$D2023-08-11T20:46:05.901Z","update_time":"$D2023-08-11T20:46:05.901Z","view_time":null,"first_public_time":"$D2023-08-11T20:46:05.901Z","has_unpublished_edits":null,"fork":{"id":"6584e4d5363a9706","slug":"prototyping-in-d3","title":"Prototyping in D3","owner":{"id":"e1b76b9b200a9fc5","login":"wattenberger","name":"Amelia Wattenberger"}},"stars":0,"starred":false,"owner":{"type":"team","id":"edacb788fb59ce32","login":"harimjung","name":"Harim Jung","avatar_url":"https://avatars-next.observableusercontent.com/5d9fd7abde557dd1cb1ab74c93112ac5a35883ff8c3e87e6fa45fb27f0d09911","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":252,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"777fab06c061b82c","login":"harimjung","name":"Harim Jung","avatar_url":"https://avatars-next.observableusercontent.com/5d9fd7abde557dd1cb1ab74c93112ac5a35883ff8c3e87e6fa45fb27f0d09911","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"777fab06c061b82c","login":"harimjung","name":"Harim Jung","avatar_url":"https://avatars-next.observableusercontent.com/5d9fd7abde557dd1cb1ab74c93112ac5a35883ff8c3e87e6fa45fb27f0d09911","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Prototyping in D3","cells":[{"id":0,"value":"md`# Prototyping in D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## Rules of thumb`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"FileAttachment(\"image@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md`---\n# Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`## 1. access & parse data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`## 2. access metrics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"xAccessor = d => +d[\"pressure\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"yAccessor = d => +d[\"humidity\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`## 3. draw chart structure`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"wrapper = d3.create(\"div\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`## 4. create scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"x = d => xScale(xAccessor(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"y = d => yScale(yAccessor(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`## 5. create axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"xAxis = d3.axisBottom(xScale) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"yAxis = d3.axisLeft(yScale) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`## 6. draw data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"md`## 7. render the chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"chart = wrapper.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`## 8. create interactions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null