29:null 2a:["$","title",null,{"children":"Distance-limited interaction with d3-delaunay | Martín González Gómez | Observable"}] 2f:T408,function mousemoved() { const [mx, my] = d3.mouse(d3.select(this).node()); // the mutable keyword is an Observable thing, don't reference it on a normal browser // https://observablehq.com/@observablehq/introduction-to-mutable-state mutable hover = find(mx, my); if (!hover) return mouseleft(); // quick trick for avoiding the edges in the tooltip const xRatio = mx / chartWidth; d3 .select(tooltip) .style('display', 'block') .style( 'left', `${xRatio > 0.75 ? mx - 200 : xRatio < 0.15 ? mx + 50 : mx - 50}px` ) .style('top', `${my + 30}px`).html(`

${hover['Manufacturer ']} ${hover['Series ']}

Size

${hover['Size ']}

Price

${ft(hover.price)}

Price per 128GB

${ft(hover.price_gb)}

`); }30:T464,chart = { const svg = d3 .create('svg') .attr('width', chartWidth + margin.right + margin.left) .attr('height', height + margin.top + margin.bottom); const g = svg .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); g.append('g') .attr('class', 'x axis') .attr('transform', `translate(0,${height})`) .call(xAxis) .call(g => g.select(".domain").remove()); g.append('g') .attr('class', 'y axis') .call(yAxis) .call(g => g.select(".domain").remove()) .selectAll('.tick line') .attr('stroke', '#eee'); g.append('g') .attr('class', 'points') .selectAll('circle') .data(data) .join('circle') .attr('fill', 'steelblue') .attr('r', 4) .attr('cx', d => x(d.date)) .attr('cy', d => y(d.price_gb)); g.append('circle') .attr('opacity', hover ? 1 : 0) .attr('r', 4) .attr('stroke-width', 2) .attr('fill', 'none') .attr('stroke', 'black') .attr('cx', hover ? x(hover.date) : null) .attr('cy', hover ? y(hover.price_gb) : null); g.append('g').call(rect); return svg.node(); }31:[{"id":"796e20a894686b7831d329312a9249ed80ed264a4b9cfe438e9a7fe144ebf1d5f703d6f98176e4305d0650f0de988de0c5cec81fbddfdb537b020d0aef4d8577","href":"https://static.observableusercontent.com/files/796e20a894686b7831d329312a9249ed80ed264a4b9cfe438e9a7fe144ebf1d5f703d6f98176e4305d0650f0de988de0c5cec81fbddfdb537b020d0aef4d8577","name":"ssd_prices.tsv","type":"text/tab-separated-values","lastModified":1575922844785.464,"size":7166}] 2d:{"id":"7eb54e74e7b9ce78","slug":"distance-limited-interaction-with-d3-delaunay","title":"Distance-limited interaction with d3-delaunay","thumbnail":"65d393d963b69ccc91567ee1f07eee71e837621391fd181e81a75b35c8d30c50","access_level":"public","create_time":"$D2019-12-07T18:27:23.246Z","update_time":"$D2019-12-10T21:12:06.495Z","view_time":null,"first_public_time":"$D2019-12-10T21:12:09.479Z","has_unpublished_edits":null,"fork":false,"stars":25,"starred":false,"owner":{"type":"team","id":"b21fb4516e44e743","login":"martgnz","name":"Martín González Gómez","avatar_url":"https://avatars-next.observableusercontent.com/61ae4e1bdb4deae4bb7b09ac4af4c7abb9493e7adc330c811e321bb7829e7d4a","tier":"starter_2024"},"version":1001,"publish_version":1001,"role":null,"authored":false,"authors":[{"type":"individual","id":"1040659911657200","login":"martgnz","name":"Martín González Gómez","avatar_url":"https://avatars-next.observableusercontent.com/61ae4e1bdb4deae4bb7b09ac4af4c7abb9493e7adc330c811e321bb7829e7d4a","tier":null}],"members":[{"type":"individual","id":"1040659911657200","login":"martgnz","name":"Martín González Gómez","avatar_url":"https://avatars-next.observableusercontent.com/61ae4e1bdb4deae4bb7b09ac4af4c7abb9493e7adc330c811e321bb7829e7d4a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"Distance-limited interaction with d3-delaunay","cells":[{"id":0,"value":"md`# Distance-limited interaction with d3-delaunay\n\nA [Voronoi diagram](https://en.wikipedia.org/wiki/Voronoi_diagram) is one of the most popular techniques for improving the interactivity of a D3 chart. With this method we can find the closest point to our mouse coordinates with ease. The problem is that in charts with large, empty areas, hovering or tapping into a corner can potentially highlight a point far away. With a distance-limited interaction we can set a minimum radius to trigger our tooltip and have a more natural user experience. We're going to implement this technique step by step using [d3-delaunay](https://github.com/d3/d3-delaunay). This is the same code we use in our latest [UK elections map](https://projects.economist.com/uk-elections/2017/general-election-results).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`### SSD memory prices\nUS$ per 128GB, 2013-2019\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"container = html`\n

\n ${chart}\n ${tooltip}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`*Source: [John C. McCallum](http://www.jcmit.net/flashprice.htm)*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"md`First, let's create a slider. This value will store the minimum interaction radius we'll use in our chart later.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"viewof radius = slider({\n min: 1,\n value: 50,\n max: 100,\n step: 1,\n description: \"Interaction radius, in pixels\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"md`Let's load d3-delaunay with our points. We do this by passing our data and then our _x_ and _y_ accessors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"delaunay = d3.Delaunay.from(data, d => x(d.date), d => y(d.price_gb))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"md`The next step is to add a transparent rectangle that covers all our scatterplot, where we can listen to each mouse movement.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"rect = g =>\n g\n .append('rect')\n .attr('fill', 'transparent')\n .attr('width', chartWidth)\n .attr('height', height)\n .on('mousemove', mousemoved)\n .on('mouseleave', mouseleft)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"md`Let's prepare the markup of our tooltip. Make sure to use an absolute position and pointer-events none. We need to hide it by default, too.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"tooltip = {\n const div = d3\n .create('div')\n .style('width', '200px')\n .style('position', 'absolute')\n .style('padding', '8px')\n .style('border', '1px solid #ccc')\n .style('pointer-events', 'none')\n .style('background', 'white')\n .style('display', 'none');\n\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"md`This function, triggered on _mousemove_, is where most gets done. First, we retrieve the mouse coordinates with [d3.mouse](https://github.com/d3/d3-selection#mouse), and then we call our _find_ function, which accepts those coordinates and returns the data when a point is found. After getting a point, we'll select the tooltip and pass the markup with our highlighted point.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"md`We store the values of the hover in a [mutable](https://observablehq.com/@observablehq/introduction-to-mutable-state) cell. In your code outside of Observable you can just use the datum we get in the _mousemoved_ function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"mutable hover = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"md`Now that the tooltip is more or less set up, let's try find the closest point to our mouse! We call [delaunay.find](https://github.com/d3/d3-delaunay#delaunay_find), which returns the _index_ of the closest point from our mouse coordinates. If we find something, we calculate the distance in pixels between the mouse position and the point. This is the distance-limited interaction. If this value is smaller than the radius we set up earlier we will return back the datum to _mousemoved_. If it isn't, we will return a null value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"find = (mx, my) => {\n const idx = delaunay.find(mx, my);\n\n if (idx !== null) {\n const datum = data[idx];\n const d = distance(x(datum.date), y(datum.price_gb), mx, my);\n\n return d < radius ? datum : null;\n }\n\n return null;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"md`Our _distance_ function accepts the _x_ and _y_ coordinates of our datum and the mouse coordinates and calculates the distance between them using [Pythagoras' theorem](https://en.wikipedia.org/wiki/Pythagorean_theorem).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"distance = (px, py, mx, my) => {\n const a = px - mx;\n const b = py - my;\n\n return Math.sqrt(a * a + b * b);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"md`We also need a _mouseleft_ function that will hide the tooltip when we hover far away from the radius, or when we leave the chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"mouseleft = () => {\n d3.select(tooltip).style('display', 'none');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"md`And, as a final detail, let's style the rows of the tooltip a bit.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"md`And, if you were wondering, this is the code of the scatterplot.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"dateExtent = [new Date(2013, 6, 1), new Date(2019, 11, 30)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"priceExtent = d3.extent(data, d => d.price_gb)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"ft = d3.format('$.0f')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"x = d3\n .scaleTime()\n .range([0, chartWidth])\n .domain(dateExtent)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"y = d3\n .scaleLog()\n .range([height, 0])\n .domain(padLog(priceExtent, 0.1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"xAxis = d3.axisBottom(x).ticks(5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"yAxis = d3\n .axisLeft(y)\n .ticks(10, ft)\n .tickSize(-chartWidth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"height = 500 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"chartWidth = width - margin.right - margin.left","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"margin = ({ top: 10, right: 10, bottom: 20, left: 25 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"parse = d3.timeParse('%Y-%b-%d')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"data = d3.tsvParse(await FileAttachment(\"ssd_prices.tsv\").text(), d => {\n d.price_gb = +d['Y '] * 128000;\n d.price = +d['Cost'];\n d.date = `${d['Year '].substring(0, 4)}-${d['Month '].substring(0, 3)}-${d[\n 'Month '\n ].substring(3, 5)}`;\n\n d.date = parse(d.date);\n\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"d3 = require('d3@5', 'd3-delaunay@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"import { padLog } from \"@mbostock/inequality-in-american-cities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"