2d:null 2e:["$","title",null,{"children":"Interactive visualization of 2D slices in X-, Y-, and Z-plane for multiple synced volumes | Georgios Varnavides | Observable"}] 33:[{"id":"0fa47a38e089a2d35c46c99fc34b088aceddbbf07aa3990a7845b678ff730f4f71862b2f451fe66afa1d55dd53cf36a732db62afd5b2bfdff5e2720426a30935","href":"https://static.observableusercontent.com/files/0fa47a38e089a2d35c46c99fc34b088aceddbbf07aa3990a7845b678ff730f4f71862b2f451fe66afa1d55dd53cf36a732db62afd5b2bfdff5e2720426a30935","name":"NiO-sphere_OT_reconstruction_110_V@1.npy","type":"application/octet-stream","lastModified":1694501708525.685,"size":28311552},{"id":"d7dd45afe4a31f750f38ecdcbccf144144a5004b0c635369c6036c362173191bfa0d682c76bca42f27b30fda3b1fcd3c70c1ad39ff280680c0ca5748f99e875f","href":"https://static.observableusercontent.com/files/d7dd45afe4a31f750f38ecdcbccf144144a5004b0c635369c6036c362173191bfa0d682c76bca42f27b30fda3b1fcd3c70c1ad39ff280680c0ca5748f99e875f","name":"NiO-sphere_OT_reconstruction_110_Ax@2.npy","type":"application/octet-stream","lastModified":1694503023989.515,"size":28311552},{"id":"df7b6aacbb4fe64e3c9cc2dd27b3f9751b0d5928f18d3bc443c416c4247b80d23ec9a4201f7e81b729652acf52dfbd94b7e15c5350ba150215d5994644e44628","href":"https://static.observableusercontent.com/files/df7b6aacbb4fe64e3c9cc2dd27b3f9751b0d5928f18d3bc443c416c4247b80d23ec9a4201f7e81b729652acf52dfbd94b7e15c5350ba150215d5994644e44628","name":"NiO-sphere_OT_reconstruction_110_Ay@6.npy","type":"application/octet-stream","lastModified":1694503170512.874,"size":28311552},{"id":"dee012d745284ca03abf78945dd135b9bfe403247ed4c263e976e6b50573b2fff3098b561ac8d0bc883be4bebb8ba8288e162c9547c8d8f7abc024c0a4db1ec8","href":"https://static.observableusercontent.com/files/dee012d745284ca03abf78945dd135b9bfe403247ed4c263e976e6b50573b2fff3098b561ac8d0bc883be4bebb8ba8288e162c9547c8d8f7abc024c0a4db1ec8","name":"NiO-sphere_OT_reconstruction_110_Az@3.npy","type":"application/octet-stream","lastModified":1694503201541.063,"size":28311552}] 31:{"id":"52301e62a81283ca","slug":"magnetic-vector-potential-reconstruction","title":"Interactive visualization of 2D slices in X-, Y-, and Z-plane for multiple synced volumes","thumbnail":"874440c9f17f02f538bb84f687c49cf9c2f66819fcbdc2a025d9976fc82fd16e","access_level":"public","create_time":"$D2023-09-11T08:15:40.098Z","update_time":"$D2023-09-12T07:36:02.237Z","view_time":null,"first_public_time":"$D2023-09-11T08:15:40.098Z","has_unpublished_edits":null,"fork":{"id":"b783a5fef5427d8f","slug":"interactive-volume-visualization-of-2d-slices-in-x-y-and-z-plane","title":"Interactive volume visualization of 2D slices in X-, Y-, and Z-plane","owner":{"id":"167d1842b2306257","login":"mroehlig","name":"Martin Röhlig"}},"stars":0,"starred":false,"owner":{"type":"team","id":"69c521ca096fbf54","login":"gvarnavi","name":"Georgios Varnavides","avatar_url":"https://avatars-next.observableusercontent.com/57bb5cf1c4a2d1352d2dcf9f07e535f6e39eb182bbe2295099a4f46fdde5f613","tier":"starter_2024"},"version":761,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6649dc029d167559","login":"gvarnavi","name":"Georgios Varnavides","avatar_url":"https://avatars-next.observableusercontent.com/4c6924e984dc3d1f89f81dee4e6fc0ca3ab63880a01338b6b6f64d28bc7321e5","tier":null}],"members":[{"type":"individual","id":"6649dc029d167559","login":"gvarnavi","name":"Georgios Varnavides","avatar_url":"https://avatars-next.observableusercontent.com/4c6924e984dc3d1f89f81dee4e6fc0ca3ab63880a01338b6b6f64d28bc7321e5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Interactive visualization of 2D slices in X-, Y-, and Z-plane for multiple synced volumes","cells":[{"id":0,"value":"# Interactive visualization of 2D slices in X-, Y-, and Z-plane for multiple synced volumes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":397,"value":"Drag the cursor in each view to explore the slices.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"sliceViewer = html` \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

${canvasXY_V}	${canvasXY_Ax}	${canvasXY_Ay}	${canvasXY_Az}
${canvasYZ_V}	${canvasYZ_Ax}	${canvasYZ_Ay}	${canvasYZ_Az}
${canvasXZ_V}	${canvasXZ_Ax}	${canvasXZ_Ay}	${canvasXZ_Az}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"dimensions = [192, 192, 192]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"data_Ax = {\n let buffer = await FileAttachment(\n \"NiO-sphere_OT_reconstruction_110_Ax@2.npy\"\n ).arrayBuffer();\n let float_array = new Float32Array(buffer);\n return float_array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"data_Ay = {\n let buffer = await FileAttachment(\n \"NiO-sphere_OT_reconstruction_110_Ay@6.npy\"\n ).arrayBuffer();\n let float_array = new Float32Array(buffer);\n return float_array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"data_Az = {\n let buffer = await FileAttachment(\n \"NiO-sphere_OT_reconstruction_110_Az@3.npy\"\n ).arrayBuffer();\n let float_array = new Float32Array(buffer);\n return float_array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"data_V = {\n let buffer = await FileAttachment(\n \"NiO-sphere_OT_reconstruction_110_V@1.npy\"\n ).arrayBuffer();\n let float_array = new Float32Array(buffer);\n return float_array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"dataAspect = [1, 1, 1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"mutable position = dimensions.map(e => Math.floor(e / 2))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"function return_XY_params(data, label, cf, invert) {\n return {\n invert: invert,\n cf: cf,\n name: label,\n width: dimensions[0],\n height: dimensions[1],\n slice: { index: position[2], max: dimensions[2] },\n getPosition(x, y) {\n return [\n Math.floor((dimensions[0] * x) / this.width),\n Math.floor((dimensions[1] * y) / this.height),\n position[2]\n ];\n },\n sampler(x, y) {\n return data[\n dimensions[0] * dimensions[1] * position[2] + dimensions[0] * y + x\n ];\n },\n getX() {\n return (this.width * position[0]) / dimensions[0];\n },\n getY() {\n return (this.height * position[1]) / dimensions[1];\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"function return_YZ_params(data, label, cf, invert) {\n return {\n invert: invert,\n cf: cf,\n name: label,\n width: dimensions[2] / dataAspect[2],\n height: dimensions[1],\n slice: { index: position[0], max: dimensions[0] },\n getPosition(x, y) {\n return [\n position[0],\n Math.floor(((dimensions[2] / dataAspect[2]) * y) / this.width),\n Math.floor((dimensions[1] * dataAspect[2] * x) / this.height)\n ];\n },\n sampler(x, y) {\n return data[\n dimensions[0] * dimensions[1] * Math.floor(x * dataAspect[2]) +\n dimensions[0] * y +\n position[0]\n ];\n },\n getX() {\n return (this.width * position[2]) / dimensions[2];\n },\n getY() {\n return (this.height * position[1]) / dimensions[1];\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"function return_XZ_params(data, label, cf, invert) {\n return {\n invert: invert,\n cf: cf,\n name: label,\n width: dimensions[0],\n height: dimensions[2] / dataAspect[2],\n slice: { index: position[1], max: dimensions[1] },\n getPosition(x, y) {\n return [\n Math.floor((dimensions[0] * x) / this.width),\n position[1],\n Math.floor((dimensions[2] * y) / this.height)\n ];\n },\n sampler(x, y) {\n return data[\n dimensions[0] * dimensions[1] * Math.floor(y * dataAspect[2]) +\n dimensions[0] * position[1] +\n x\n ];\n },\n getX() {\n return (this.width * position[0]) / dimensions[0];\n },\n getY() {\n return (this.height * position[2]) / dimensions[2];\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"paramsXY_V = return_XY_params(\n data_V,\n \"Electrostatic Potential, V(XY)\",\n cf_e,\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"paramsXY_Az = return_XY_params(data_Az, \"Magnetic Potential, Az(XY)\", cf_m)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"paramsXY_Ay = return_XY_params(data_Ay, \"Magnetic Potential, Ay(XY)\", cf_m)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"paramsXY_Ax = return_XY_params(data_Ax, \"Magnetic Potential, Ax(XY)\", cf_m)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"paramsYZ_V = return_YZ_params(\n data_V,\n \"Electrostatic Potential, V(YZ)\",\n cf_e,\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"paramsYZ_Az = return_YZ_params(data_Az, \"Magnetic Potential, Az(YZ)\", cf_m)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"paramsYZ_Ay = return_YZ_params(data_Ay, \"Magnetic Potential, Ay(YZ)\", cf_m)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"paramsYZ_Ax = return_YZ_params(data_Ax, \"Magnetic Potential, Ax(YZ)\", cf_m)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"paramsXZ_V = return_XZ_params(\n data_V,\n \"Electrostatic Potential, V(XZ)\",\n cf_e,\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"paramsXZ_Az = return_XZ_params(data_Az, \"Magnetic Potential, Az(XZ)\", cf_m)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"paramsXZ_Ay = return_XZ_params(data_Ay, \"Magnetic Potential, Ay(XZ)\", cf_m)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"paramsXZ_Ax = return_XZ_params(data_Ax, \"Magnetic Potential, Ax(XZ)\", cf_m)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"canvasXY_Ax = getCanvas(paramsXY_Ax)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"canvasYZ_Ax = getCanvas(paramsYZ_Ax)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"canvasXZ_Ax = getCanvas(paramsXZ_Ax)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"canvasXY_Ay = getCanvas(paramsXY_Ay)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"canvasYZ_Ay = getCanvas(paramsYZ_Ay)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"canvasXZ_Ay = getCanvas(paramsXZ_Ay)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"canvasXY_Az = getCanvas(paramsXY_Az)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"canvasYZ_Az = getCanvas(paramsYZ_Az)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"canvasXZ_Az = getCanvas(paramsXZ_Az)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"canvasXY_V = getCanvas(paramsXY_V)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"canvasYZ_V = getCanvas(paramsYZ_V)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"canvasXZ_V = getCanvas(paramsXZ_V)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"async function* getCanvas(params) {\n const ctx = DOM.context2d(params.width, params.height);\n ctx.canvas.onmousemove = (e) => {\n if (!e.buttons) {\n return;\n }\n mutable position = params.getPosition(e.offsetX, e.offsetY);\n };\n\n let image = await getImage(\n ctx,\n params.width,\n params.height,\n params.sampler,\n params.cf\n );\n ctx.drawImage(image, 0, 0, params.width, params.height);\n\n drawCross(ctx, params.getX(), params.getY(), params.invert);\n drawInfo(ctx, params.name, params.invert);\n\n yield ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"function drawInfo(ctx, info, invert) {\n ctx.font = \"12px sans-serif\";\n ctx.fillStyle = invert ? \"white\" : \"black\";\n ctx.fillText(info, 5, 20);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"function drawCross(ctx, x, y, invert, radius = 10) {\n ctx.strokeStyle = invert ? \"white\" : \"black\";\n ctx.beginPath();\n ctx.moveTo(x - radius, y);\n ctx.lineTo(x + radius, y);\n ctx.moveTo(x, y - radius);\n ctx.lineTo(x, y + radius);\n ctx.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"async function getImage(ctx, width, height, sampler, cf) {\n let image = ctx.createImageData(width, height);\n\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n let value = sampler(x, y);\n let i = (image.width * y + x) * 4;\n let rgb = cf(value);\n image.data[i] = rgb.r;\n image.data[i + 1] = rgb.g;\n image.data[i + 2] = rgb.b;\n image.data[i + 3] = 255;\n }\n }\n\n return createImageBitmap(image);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"function cf_m(val) {\n return d3.rgb(\n d3.interpolatePuOr(d3.scaleLinear([-0.001, 0.001], [0, 1])(val))\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"function cf_e(val) {\n return d3.rgb(d3.interpolateMagma(d3.scaleLinear([0, 0.025], [0, 1])(val)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"