28:null 29:["$","title",null,{"children":"Contours | Catherine Deal's Workspace | Observable"}] 2f:[] 2c:{"id":"1900fc3e7e30cab0","slug":null,"title":"Contours","thumbnail":"32e2c8cb5bfa293cdf99191238d0ae78e643bcb72edbbaa1493b1864a8f2c3b8","access_level":"public","create_time":"$D2023-10-31T21:01:39.184Z","update_time":"$D2023-10-31T21:01:39.184Z","view_time":null,"first_public_time":"$D2023-10-31T21:01:39.184Z","fork":{"id":"9d7cc1d26bcca7c7","slug":"contours","title":"Contours","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f78043483f179305","login":"catherine-deal-ws","name":"Catherine Deal's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/4ec4a3f2b854476d7515e919a7797cce5de900ff54ad61af93e94e1d4bea24c3","tier":"starter_2024"},"version":358,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f2ee2f1935931d21","login":"catherine-deal","name":"Catherine Deal","avatar_url":"https://avatars-next.observableusercontent.com/bf2916f2279ef122e5fe796d142137e4d94f582b39b634b55f4526e7964b4374","tier":null}],"members":[{"type":"individual","id":"f2ee2f1935931d21","login":"catherine-deal","name":"Catherine Deal","avatar_url":"https://avatars-next.observableusercontent.com/bf2916f2279ef122e5fe796d142137e4d94f582b39b634b55f4526e7964b4374","tier":null,"role":"editor"},{"type":"team","id":"f78043483f179305","login":"catherine-deal-ws","name":"Catherine Deal's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/4ec4a3f2b854476d7515e919a7797cce5de900ff54ad61af93e94e1d4bea24c3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Contours","cells":[{"id":0,"value":"

Contours

D3 › Gallery

\n\n# Contours\n\nShowing the [Goldstein–Price test function](https://en.wikipedia.org/wiki/Test_functions_for_optimization).","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"value = (x, y) =>\n (1 + (x + y + 1) ** 2 * (19 - 14 * x + 3 * x ** 2 - 14 * y + 6 * x * y + 3 * y ** 2))\n * (30 + (2 * x - 3 * y) ** 2 * (18 - 32 * x + 12 * x * x + 48 * y - 36 * x * y + 27 * y ** 2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"Legend(color, {title: \"Value\", tickFormat: \",\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width + 28, height])\n .style(\"display\", \"block\")\n .style(\"margin\", \"0 -14px\")\n .style(\"width\", \"calc(100% + 28px)\");\n\n svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-opacity\", 0.5)\n .selectAll(\"path\")\n .data(contours)\n .join(\"path\")\n .attr(\"fill\", d => color(d.value))\n .attr(\"d\", d3.geoPath());\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"color = d3.scaleSequentialLog(d3.extent(thresholds), d3.interpolateMagma)","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"thresholds = d3.range(1, 20).map(i => Math.pow(2, i))","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"grid = {\n const q = 4; // The level of detail, e.g., sample every 4 pixels in x and y.\n const x0 = -q / 2, x1 = width + 28 + q;\n const y0 = -q / 2, y1 = height + q;\n const n = Math.ceil((x1 - x0) / q);\n const m = Math.ceil((y1 - y0) / q);\n const grid = new Array(n * m);\n for (let j = 0; j < m; ++j) {\n for (let i = 0; i < n; ++i) {\n grid[j * n + i] = value(x.invert(i * q + x0), y.invert(j * q + y0));\n }\n }\n grid.x = -q;\n grid.y = -q;\n grid.k = q;\n grid.n = n;\n grid.m = m;\n return grid;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"// Converts from grid coordinates (indexes) to screen coordinates (pixels).\ntransform = ({type, value, coordinates}) => {\n return {type, value, coordinates: coordinates.map(rings => {\n return rings.map(points => {\n return points.map(([x, y]) => ([\n grid.x + grid.k * x,\n grid.y + grid.k * y\n ]));\n });\n })};\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"contours = d3.contours()\n .size([grid.n, grid.m])\n .thresholds(thresholds)\n (grid)\n .map(transform)","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"x = d3.scaleLinear([-2, 2], [0, width + 28])","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"y = d3.scaleLinear([-2, 1], [height, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height})`)\n .call(d3.axisTop(x).ticks(width / height * 10))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick\").filter(d => x.domain().includes(d)).remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"yAxis = g => g\n .attr(\"transform\", \"translate(-1,0)\")\n .call(d3.axisRight(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick\").filter(d => y.domain().includes(d)).remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"---\nUsing [Observable Plot](/plot/)’s built-in [contour mark](/plot/marks/contour), we can create the same chart in a few lines—or see the [complete example with custom axes](/@observablehq/plot-goldstein-price-contours). Explicit thresholds are necessary due to the skewed distribution of the value.","pinned":false,"hidden":false,"mode":"md"},{"id":275,"value":"Plot.plot({\n color: {scheme: \"Magma\", type: \"log\", legend: true, width: 300, label: \"Value\", tickFormat: \",\"},\n marks: [\n Plot.contour({\n x1: -2,\n x2: 2,\n y1: -2,\n y2: 1,\n fill: value,\n stroke: \"#fff\",\n strokeOpacity: 0.5,\n thresholds: d3.range(1, 20).map(n => 2 ** n)\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"