2c:null 2d:["$","title",null,{"children":"Bitmap Indices | Matthew Turk | Observable"}] 32:Td54,{ const margin = 80; const height = 500; const width = 500; const levels = 5; const nPoints = 1000; const nDims = 2; const top_div = d3.create("div").attr("id", "point_container"); const svg = top_div.append("svg").attr("height", height).attr("width", width); const text_div = top_div.append("div").attr("class", "point_text").style("margin-top", `${margin}px`); /*const c1 = "#1b9e77"; const c2 = "#d95f02";*/ const c1 = "#46219D"; const c2 = "#789d21"; /*const c1 = "#fd9ad0"; const c2 = "#ecac94";*/ var xScale = d3.scaleLinear().domain([0.0, 1.0]).range([margin, width - margin]).nice(); var yScale = d3.scaleLinear().domain([0.0, 1.0]).range([margin, height - margin]).nice(); var circles = svg.selectAll("circle") .data(particles) .enter() .append("circle") .attr("cx", v => xScale(v.x)) .attr("cy", v => yScale(v.y)) .attr("r", 1.5) .style("fill", v => v.g % 2 == 0 ? c1 : c2) .style("stroke-width", 2.0); // draw the quad tree var boxData = []; var boxElements = []; var boxSelectors = []; for (var l = 0; l < 5; l++) { var lBox = svg.append("g").attr("id", "level-" + l); var lWidth = (1.0)/Math.pow(2, l); var lHeight = (1.0)/Math.pow(2, l); var thisBoxData = []; var thisBoxElements = []; boxData.push(thisBoxData); boxElements.push(thisBoxElements); for (var xi = 0; xi < Math.pow(2, l); xi++) { var x = xScale(xi * lWidth); var rWidth = Math.abs(x - xScale((xi + 1) * lWidth)); for (var yi = 0; yi < Math.pow(2, l); yi++) { var myInd = 0; for (var l_ = 0 ; l_ <= l; l_++) { myInd = myInd << 1; myInd |= ((xi >> (l - l_)) & 1); myInd = myInd << 1; myInd |= ((yi >> (l - l_)) & 1); } var y = yScale(yi * lHeight); var rHeight = Math.abs(y - yScale((yi + 1) * lHeight)); thisBoxData.push( {'level': l, 'x0': x, 'x1': x + rWidth, 'y0': y, 'y1': y + rHeight, 'zInd': myInd}); var thisBox = lBox.append("rect") .attr("x", x) .attr("y", y) .attr("class", "indexBox level" + l) .attr("height", rHeight) .attr("width", rWidth) .style("fill", "none") .style("stroke-width", levels - l + 1); thisBoxElements.push(thisBox); } } boxSelectors.push(lBox.selectAll("rect.indexBox.level"+l).data(thisBoxData)); } var lastSelected = null; const label = svg.append("text").attr("x", margin/2).attr("y", margin/2).style("font-family", "monospace"); svg.append("rect") .attr("class", "quadtree") .attr("x", xScale.range()[0]) .attr("y", yScale.range()[0]) .attr("width", xScale.range()[1] - xScale.range()[0]) .attr("height", yScale.range()[1] - yScale.range()[0]); circles .on("mouseover", (d, i, nodes) => { var zPad = ("".padStart(nDims * levels, "0") + d.zInd.toString(2)).slice(-1 * levels * nDims); text_div.html(`index = ${zPad}
x = ${d.x.toFixed(8)}
y = ${d.y.toFixed(8)}`); if (lastSelected != null) lastSelected.attr("r", 1.5).style("stroke", "none"); lastSelected = d3.select(nodes[i]) .attr("r", 5.0).style("stroke", "black"); for (var l = 0; l < 5; l++) { boxSelectors[l].classed("highlight", d_ => d_.zInd == (d.zInd >> ((4-l) * 2))); } }).on("mouseout", (d, i, nodes) => { }); return top_div.node(); }33:[{"id":"c1401be08a668d1c020ffa93057e4f930635271528f1a54a81d2f7067d4793beedd476fc22154c60c19f38848ddca4a1536f91231728f9a995c09ed7c12a25e4","href":"https://static.observableusercontent.com/files/c1401be08a668d1c020ffa93057e4f930635271528f1a54a81d2f7067d4793beedd476fc22154c60c19f38848ddca4a1536f91231728f9a995c09ed7c12a25e4","name":"gal30_subset_particles.json","type":"application/json","lastModified":1580836546192.429,"size":844402}] 30:{"id":"e22d8cc34a360d79","slug":"bitmap-indices","title":"Bitmap Indices","thumbnail":"3aaf2b7807210e202062cd90bd4e91e9c062b9421253a396d0c76f578884825c","access_level":"public","create_time":"$D2020-02-04T17:15:46.192Z","update_time":"$D2020-02-14T00:22:41.835Z","view_time":null,"first_public_time":"$D2020-05-05T20:44:56.657Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"1fcd1ee6fffb0cba","login":"matthewturk","name":"Matthew Turk","avatar_url":"https://avatars-next.observableusercontent.com/221c00aeb2f6f114ca9960fbf8f060d9ba33c911e5f64cea2d589ea2d34d7e94","tier":"starter_2024"},"version":436,"publish_version":436,"role":null,"authored":false,"authors":[{"type":"individual","id":"294f57c680999965","login":"matthewturk","name":"Matthew Turk","avatar_url":"https://avatars-next.observableusercontent.com/221c00aeb2f6f114ca9960fbf8f060d9ba33c911e5f64cea2d589ea2d34d7e94","tier":null}],"members":[{"type":"individual","id":"294f57c680999965","login":"matthewturk","name":"Matthew Turk","avatar_url":"https://avatars-next.observableusercontent.com/221c00aeb2f6f114ca9960fbf8f060d9ba33c911e5f64cea2d589ea2d34d7e94","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bitmap Indices","cells":[{"id":0,"value":"md`# Bitmap Indices\n\nThis notebook demonstrates some of the bitmap index work in yt-4.0`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"function zorderXY(points, level) {\n // We will do the silly thing here! We'll just do left/right, left/right, left/right\n // the domain will be 0 .. 1\n var rv = [];\n var dims = points[0].length;\n points.forEach( (v, i) => {\n var center = {x: 0.5, y: 0.5};\n var width = {x: 0.5, y: 0.5};\n var index = 0;\n for (var l = 0; l < level; l++) {\n for (const d of [\"x\", \"y\"]) {\n index = index << 1;\n if ( v[d] > center[d] ) {\n index |= 1\n center[d] += width[d]/2.0;\n } else {\n center[d] -= width[d]/2.0;\n }\n width[d] /= 2.0;\n }\n }\n v.zInd = index;\n });\n return rv;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"seedrandom = require(\"seedrandom\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"particles = {\n var p = await FileAttachment(\"gal30_subset_particles.json\").json();\n var xExtent = d3.extent(p, v => v.x);\n var yExtent = d3.extent(p, v => v.y);\n \n var xScale = d3.scaleLinear().domain(xExtent).range([0.0, 1.0]);\n var yScale = d3.scaleLinear().domain(yExtent).range([0.0, 1.0]);\n \n p.forEach( (v, i) => {\n v.x = xScale(v.x);\n v.y = yScale(v.y);\n });\n \n zorderXY(p, 4);\n \n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"{\n /*\n var radialGradient1 = svg.append(\"defs\")\n .append(\"radialGradient\")\n .attr(\"id\", \"radial-gradient1\");\n\n radialGradient1.append(\"stop\")\n .attr(\"offset\", \"0%\")\n .attr(\"stop-color\", c1);\n\n radialGradient1.append(\"stop\")\n .attr(\"offset\", \"100%\")\n .attr(\"stop-color\", c1)\n .attr(\"stop-opacity\", 0);\n\n var radialGradient2 = svg.append(\"defs\")\n .append(\"radialGradient\")\n .attr(\"id\", \"radial-gradient2\");\n\n radialGradient2.append(\"stop\")\n .attr(\"offset\", \"0%\")\n .attr(\"stop-color\", c2);\n\n radialGradient2.append(\"stop\")\n .attr(\"offset\", \"100%\")\n .attr(\"stop-color\", c2)\n .attr(\"stop-opacity\", 0);\n*/\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"