2b:null 2c:["$","title",null,{"children":"Contour for Discrete | Chuncheng | Observable"}] 31:[] 2f:{"id":"2a89e245c706ddf7","slug":"contour-for-discrete","title":"Contour for Discrete","thumbnail":"880c0eea76ac1e3f8ed351b6de105f4342dba466373a73da61120ec580b8a185","access_level":"public","create_time":"$D2021-09-30T11:57:47.659Z","update_time":"$D2021-10-01T14:21:19.256Z","view_time":null,"first_public_time":"$D2021-09-30T16:13:04.592Z","fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":2,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":703,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Contour for Discrete","cells":[{"id":0,"value":"# Contour for Discrete\n\nPlot Contour Curves for Discrete Situation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"viewof num = Inputs.range([30, 100], { label: \"num:\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"viewof order = Inputs.range([0, 3], { label: \"order\", step: 1, value: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"viewof thresholds = Inputs.range([5, 20], {\n label: \"thresholds\",\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"{\n let { delaunay, points } = pd;\n const svg = d3.select(DOM.svg(width, height));\n const scale = d3.scaleLinear().domain([0, 10]).range([0, 1]);\n const color = d3.interpolateViridis;\n\n const zoom = (d) => d.map((e) => e.map((f) => f * s));\n\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(delaunay.trianglePolygons())\n .join(\"path\")\n .attr(\"fill\", (d, i) => {\n let p3 = delaunay.triangles.slice(i * 3, i * 3 + 3);\n let v = (points[p3[0]].v + points[p3[1]].v + points[p3[2]].v) / 3;\n return color(scale(v));\n })\n .attr(\"fill-opacity\", 0.9)\n .attr(\"d\", (d) => {\n let p = d3.line()(zoom(d));\n return p;\n });\n\n svg\n .append(\"g\")\n .selectAll(\"circle\")\n .data(points.slice(0, num + 4))\n .join(\"circle\")\n .attr(\"cx\", (d) => d.x * s)\n .attr(\"cy\", (d) => d.y * s)\n .attr(\"r\", 5)\n .attr(\"fill\", (d) => color(scale(d.v)));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"{\n const svg = d3.select(DOM.svg(width, height));\n const scale = d3.scaleLinear().domain([0, 10]).range([0, 1]);\n const color = d3.interpolateViridis;\n\n svg\n .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) => {\n return color(scale(d.value));\n })\n .attr(\"stroke\", \"none\")\n .attr(\"d\", (d) => {\n let p = d3.geoPath()(d);\n return p;\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"// width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = width * 0.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"nWidth = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"nHeight = parseInt((nWidth / width) * height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"s = width / nWidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"contours = mkContours(grid)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"grid = mkGrid(pd)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"pd = mkDelaunay(points, order)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"points = mkPoints(num)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"mkContours = (d) => {\n let c = d3.contours().thresholds(thresholds).size([nWidth, nHeight])(d);\n\n for (let ic = 0; ic < c.length; ic++) {\n for (let i = 0; i < c[ic].coordinates.length; i++) {\n for (let j = 0; j < c[ic].coordinates[i].length; j++) {\n for (let k = 0; k < c[ic].coordinates[i][j].length; k++) {\n c[ic].coordinates[i][j][k][0] *= s;\n c[ic].coordinates[i][j][k][1] *= s;\n }\n }\n }\n }\n\n return c;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"mkGrid = (pd) => {\n let { delaunay, points } = pd;\n const values = new Array(nWidth * nHeight);\n let t0 = new Date();\n let s = 0;\n for (var j = 0.5, k = 0; j < nHeight; j++) {\n for (var i = 0.5; i < nWidth; i++, k++) {\n let c = estValue(i, j, pd, s);\n s = c.triIdx;\n values[k] = c.v;\n }\n }\n let t1 = new Date();\n console.log(d3.extent(values));\n console.log(\"Making Grid costs\", t1 - t0, \"ms\");\n return values;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"estValue = (x, y, pd, start = 0) => {\n let { delaunay, points } = pd;\n for (let i = 0; i < delaunay.triangles.length / 3; i++) {\n let ii = (i + start) % (delaunay.triangles.length / 3);\n let p3 = delaunay.triangles.slice(ii * 3, ii * 3 + 3);\n let poly = [];\n for (let j = 0; j < 3; j++) {\n poly.push([points[p3[j]].x, points[p3[j]].y]);\n }\n if (d3.polygonContains(poly, [x, y])) {\n let bc = barycentric(poly, [x, y]);\n let v =\n points[p3[0]].v * bc[0] +\n points[p3[1]].v * bc[1] +\n points[p3[2]].v * bc[2];\n\n return Object.assign({\n triIdx: ii,\n poly: poly,\n bary: bc,\n v: v\n });\n }\n // console.log(poly, d3.polygonContains(poly, [x, y]));\n }\n return -1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"mkDelaunay = (points, order) => {\n let points1 = [];\n for (let i = 0; i < points.length; i++) {\n points1.push(points[i]);\n }\n\n // 3rd, interpolate nodes by [order] times\n for (let o = 0; o < order; o++) {\n let delaunay = d3.Delaunay.from(points1.map((d) => [d.x, d.y]));\n //mkDelaunay(points1, 0);\n for (let i = 0; i < delaunay.triangles.length / 3; i++) {\n let a = delaunay.triangles[i * 3 + 0],\n b = delaunay.triangles[i * 3 + 1],\n c = delaunay.triangles[i * 3 + 2];\n\n let p = Object.assign({\n x: (points1[a].x + points1[b].x + points1[c].x) / 3,\n y: (points1[a].y + points1[b].y + points1[c].y) / 3,\n v: (points1[a].v + points1[b].v + points1[c].v) / 3\n });\n\n points1.push(p);\n }\n }\n\n const delaunay = d3.Delaunay.from(points1.map((d) => [d.x, d.y]));\n return Object.assign({ delaunay: delaunay, points: points1 });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"mkPoints = (num = 30) => {\n const rnd = (x) => Math.random() * x;\n\n // 1st, we need to setup the 4 vertex of the rect\n const points = [\n Object.assign({\n x: 0,\n y: 0,\n v: 0\n }),\n Object.assign({\n x: 0,\n y: height,\n v: 0\n }),\n Object.assign({\n x: width,\n y: height,\n v: 0\n }),\n Object.assign({\n x: width,\n y: 0,\n v: 0\n })\n ];\n\n // 2nd, place [num] points randomly\n for (let i = 0; i < num; i++) {\n points.push(\n Object.assign({\n x: rnd(nWidth),\n y: rnd(nHeight),\n v: rnd(10)\n })\n );\n }\n\n return points;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"## Packages","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"barycentric = require(\"https://bundle.run/barycentric@1.0.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"