29:null 2a:["$","title",null,{"children":"Scatterplot with Interpolated Bivariate Fill Color | Stephanie Tuerk | Observable"}] 2f:T537,function dodge(text, iterations = 300) { const nodes = text.nodes(); const left = text => text.attr("text-anchor", "start").attr("dy", "0.32em"); const right = text => text.attr("text-anchor", "end").attr("dy", "0.32em"); const top = text => text.attr("text-anchor", "middle").attr("dy", "0.0em"); const bottom = text => text.attr("text-anchor", "middle").attr("dy", "0.8em"); const points = nodes.map(node => ({fx: +node.getAttribute("x"), fy: +node.getAttribute("y")})); const labels = points.map(({fx, fy}) => ({x: fx, y: fy})); const links = points.map((source, i) => ({source, target: labels[i]})); const simulation = d3.forceSimulation(points.concat(labels)) .force("charge", d3.forceManyBody().distanceMax(80)) .force("link", d3.forceLink(links).distance(4).iterations(4)) .stop(); for (let i = 0; i < iterations; ++i) simulation.tick(); text .attr("x", (_, i) => labels[i].x) .attr("y", (_, i) => labels[i].y) .each(function(_, i) { const a = Math.atan2(labels[i].y - points[i].fy, labels[i].x - points[i].fx); d3.select(this).call( a > Math.PI / 4 && a <= Math.PI * 3 / 4 ? bottom : a > -Math.PI / 4 && a <= Math.PI / 4 ? left : a > -Math.PI * 3 / 4 && a <= Math.PI * 3 / 4 ? top : right); }); }30:[] 2d:{"id":"677acdad1d0840bd","slug":"scatterplot-with-interpolated-bivatiate-fill-color","title":"Scatterplot with Interpolated Bivariate Fill Color","thumbnail":"1a49b7b3348463b10a2e5b2999b75c1ce721758de966dba79d41964154b8a098","access_level":"public","create_time":"$D2019-05-28T17:54:54.442Z","update_time":"$D2026-01-17T17:09:58.619Z","view_time":null,"first_public_time":"$D2019-05-28T23:46:30.601Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"fb1662282f83cbbe","login":"stephanietuerk","name":"Stephanie Tuerk","avatar_url":"https://avatars-next.observableusercontent.com/fd20d414d35cafe26a79b8e6c7b5a1c053320c918647f47ffdd64ff133c2e2ce","tier":"starter_2024"},"version":616,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06c9c56537cc9419","login":"stephanietuerk","name":"Stephanie Tuerk","avatar_url":"https://avatars-next.observableusercontent.com/fd20d414d35cafe26a79b8e6c7b5a1c053320c918647f47ffdd64ff133c2e2ce","tier":null}],"members":[{"type":"individual","id":"06c9c56537cc9419","login":"stephanietuerk","name":"Stephanie Tuerk","avatar_url":"https://avatars-next.observableusercontent.com/fd20d414d35cafe26a79b8e6c7b5a1c053320c918647f47ffdd64ff133c2e2ce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Scatterplot with Interpolated Bivariate Fill Color","cells":[{"id":1,"value":"md`# Scatterplot with Interpolated Bivariate Fill Color\n\nThis chart implements an interpolated bivariate color scheme for a scatterplot. By providing a dropdown menu with all d3 color space interpolators, it allows users to understand the implications of these different color spaces when interpolating between two colors. \n\nThe data are randomly generated, from (0, 0) to (1, 1).\n\nColor values are set manually for (0, 0), (0, 1), and (1, 0) positions. The color value for the (1, 1) position is the multiplication of the values at (0, 1) and (1, 0).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"md`### User-specified inputs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"viewof params = {\n const numPoints = slider({\n min: 1,\n max: 20000,\n step: 1,\n value: 100,\n title: \"Number of points\"\n });\n const r = slider({\n min: 1,\n max: 50,\n step: 1,\n value: 8,\n title: \"Radius\"\n });\n\n const container = html`

`;\n container.append(numPoints, r);\n\n container.value = {\n get numPoints() {\n return numPoints.value;\n },\n get r() {\n return r.value;\n }\n };\n\n const notify = () => container.dispatchEvent(new Event(\"input\"));\n numPoints.addEventListener(\"input\", notify);\n r.addEventListener(\"input\", notify);\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"viewof colors = {\n const interpFn = select({\n title: \"Color Space Interpolators\",\n options: colInterpolators,\n value: \"interpolateLab\"\n });\n const origin = color({\n value: \"#eeeeee\",\n title: \"0,0 color\"\n });\n const y = color({\n value: \"#cfcd3c\",\n title: \"Y axis color\"\n });\n const x = color({\n value: \"#C080C3\",\n title: \"X axis color\"\n });\n const container = html`

`;\n container.append(interpFn, origin, x, y);\n\n container.value = {\n get interpFn() {\n return interpFn.value;\n },\n get origin() {\n return origin.value;\n },\n get x() {\n return x.value;\n },\n get y() {\n return y.value;\n }\n };\n\n const notify = () => container.dispatchEvent(new Event(\"input\"));\n interpFn.addEventListener(\"input\", notify);\n origin.addEventListener(\"input\", notify);\n x.addEventListener(\"input\", notify);\n y.addEventListener(\"input\", notify);\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n svg\n .append(\"g\")\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", (d) => x(d.x))\n .attr(\"cy\", (d) => y(d.y))\n .attr(\"r\", params.r)\n .attr(\"fill\", (d) => {\n const xBot = interpXBottom(xVal(d.x));\n const xTop = interpXTop(xVal(d.x));\n return d3[colors.interpFn](xBot, xTop)(yVal(d.y));\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"md`Given the above inputs, we now calcuate a color for the top-right corner of the plot, whose value = (Y axis color * X axis color)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"colorXY = {\n const multiply = (channel) =>\n Math.round(\n (d3.color(colors.x)[channel] * d3.color(colors.y)[channel]) / 255\n );\n\n return d3\n .color(`rgb(${multiply(\"r\")},${multiply(\"g\")},${multiply(\"b\")})`)\n .hex();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"md`We also define two interpolation functions\n- one for values along the bottom x-axis: (0, 0) to (1, 0)\n- one for values along top x-axis: (0, 1) to (1, 1)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"interpXBottom = d3[colors.interpFn](colors.origin, colors.x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"interpXTop = d3[colors.interpFn](colors.y, colorXY)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"To calculate the fill color for any point, we enter the point's x-value into both of these x-axis interpolation functions, and interpolate again between the two results they give.\n\nThat code will look like this:\n\n```js\nconst interpolator = d3.interpolateLab // your choice of interpolation fn here\n \n.attr(\"fill\", (d) => {\n const xBot = interpXBottom(xVal(d.x));\n const xTop = interpXTop(xVal(d.x));\n return interpolator(xBot, xTop)(yVal(d.y));\n})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":590,"value":"

\n End of demo\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.x)).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"xVal = d3.scaleLinear()\n .domain(d3.extent(data, d => d.x)).nice()\n .range([0,1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.y)).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"yVal = d3.scaleLinear()\n .domain(d3.extent(data, d => d.y)).nice()\n .range([0,1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"format = d3.format(\".1%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"data = d3.range(params.numPoints).map((point) => {\n return { x: Math.random(), y: Math.random() };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"import {color, select, slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"import {colInterpolators} from \"@stephanietuerk/d3-color-space-interpolators\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"