21:null 22:["$","title",null,{"children":"FRB detection visualization with zoom | Maarten van Meersbergen | Observable"}] 27:T10c5,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var symbol = d3.symbol(); svg.append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis_scatter); svg.append("g") .attr("class", "grid") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis_grid); svg.append("g") .attr("class", "axis axis--y") .attr("transform", `translate(${margin.left},0)`) .call(yAxis_scatter); svg.append("g") .attr("class", "grid") .attr("transform", `translate(${margin.left},0)`) .call(yAxis_grid); // svg.selectAll(".domain") // .style("display", "none"); const gt_scatter_g = svg.append("g") .attr('class', 'gt-scatter') .attr("stroke-width", 1.5) .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data(gt2_data) .join("g") .attr("class", "symbols") .attr("transform", d => translate_multiaxis(axisX, axisY, d)) .call(g => g.append("circle") .attr("stroke", function(d) { if (d[10] != null) { return"#66c2a5"; } else { return"#000000" }; }) .attr("fill", "none") .attr("r", d => d[1] *dotSize)) const alg_scatter_g = svg.append("g") .attr('class', 'alg-scatter') .attr("stroke-width", 1.5) .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data(alg2_data) .join("g") .attr("class", "symbols") .attr("transform", d => translate_multiaxis(axisX, axisY, d)) .call(g => g.append("path") .attr("fill", function(d) { if (d[4] != null) { return"#fc8d62"; } else { return"#000000" }; }) .attr("d", function(d) { symbol.size(d[1] *dotSize*5); symbol.type(d3.symbolCross); return symbol(); })) svg.append("g") .attr("transform", `translate(${width - 150},20)`) .attr("class", "legend") .attr("height", 0) .attr("width", 0) .style("font-size","12px") .call(legend); const brush = d3.brush() .extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]]) .on("end", brushended); svg.append("g") .attr("class", "brush") .call(brush); var idleTimeout = null; const idleDelay = 350; function idled() { idleTimeout = null; } function zoom() { var t = svg.transition().duration(750); svg.select(".axis--x").transition(t).call(xAxis_scatter); svg.select(".axis--y").transition(t).call(yAxis_scatter); svg.selectAll(".symbols").transition(t) .attr("transform", d => translate_multiaxis(axisX, axisY, d)); } function brushended() { var s = d3.event.selection; if (s) { const [[new_x0, new_y0], [new_x1, new_y1]] = d3.event.selection; // Filter the selected values based on the extent mutable selection_alg = alg2_data.filter(d => new_x0 <= x_scatter(currentX_value(axisX, d)) && x_scatter(currentX_value(axisX, d)) < new_x1 && new_y0 <= y_scatter(currentY_value(axisY, d)) && y_scatter(currentY_value(axisY, d)) < new_y1); mutable selection_gt = gt2_data.filter(d => new_x0 <= x_scatter(currentX_value(axisX, d)) && x_scatter(currentX_value(axisX, d)) < new_x1 && new_y0 <= y_scatter(currentY_value(axisY, d)) && y_scatter(currentY_value(axisY, d)) < new_y1); x_scatter.domain([s[0][0], s[1][0]].map(x_scatter.invert, x_scatter)); y_scatter.domain([s[1][1], s[0][1]].map(y_scatter.invert, y_scatter)); svg.select(".brush").call(brush.move, null); } else { if (!idleTimeout) return idleTimeout = setTimeout(idled, idleDelay); mutable selection_alg = alg2_data.filter(d => true); mutable selection_gt = gt2_data.filter(d => true); x_scatter.domain(x0); y_scatter.domain(y0); } zoom(); } return svg.node(); }28:T494,translate_multiaxis = function(xAxis_selection, yAxis_selection, d) { if (xAxis_selection == "Time" && yAxis_selection == "DM") {return `translate(${x_scatter(d[2])},${y_scatter(d[0])})`;} if (xAxis_selection == "DM" && yAxis_selection == "DM") {return `translate(${x_scatter(d[0])},${y_scatter(d[0])})`;} if (xAxis_selection == "Sigma" && yAxis_selection == "DM") {return `translate(${x_scatter(d[1])},${y_scatter(d[0])})`;} if (xAxis_selection == "Time" && yAxis_selection == "Time") {return `translate(${x_scatter(d[2])},${y_scatter(d[2])})`;} if (xAxis_selection == "DM" && yAxis_selection == "Time") {return `translate(${x_scatter(d[0])},${y_scatter(d[2])})`;} if (xAxis_selection == "Sigma" && yAxis_selection == "Time") {return `translate(${x_scatter(d[1])},${y_scatter(d[2])})`;} if (xAxis_selection == "Time" && yAxis_selection == "Sigma") {return `translate(${x_scatter(d[2])},${y_scatter(d[1])})`;} if (xAxis_selection == "DM" && yAxis_selection == "Sigma") {return `translate(${x_scatter(d[0])},${y_scatter(d[1])})`;} if (xAxis_selection == "Sigma" && yAxis_selection == "Sigma") {return `translate(${x_scatter(d[1])},${y_scatter(d[1])})`;} }29:[] 25:{"id":"ca73e5396ad61ad5","slug":"frb-detection-evaluation/3","title":"FRB detection visualization with zoom","thumbnail":"464d15492927115f1d8bf73cb868fc54e9a0bb0dc0c1e9184a6202fb06e56729","access_level":"public","create_time":"$D2019-06-07T09:23:05.882Z","update_time":"$D2019-07-02T08:24:07.029Z","view_time":null,"first_public_time":"$D2019-06-11T15:44:49.128Z","has_unpublished_edits":null,"fork":{"id":"74a9abb9a52b7b24","slug":"frb-detection-evaluation/2","title":"FRB detection evaluation","owner":{"id":"137e4289e70da9fc","login":"maartenvm","name":"Maarten van Meersbergen"}},"stars":1,"starred":false,"owner":{"type":"team","id":"137e4289e70da9fc","login":"maartenvm","name":"Maarten van Meersbergen","avatar_url":"https://avatars-next.observableusercontent.com/5480f938072b1f5f75f78a2dc622b8d012e1c72b52d09e633e25a1b9bfb2d85c","tier":"starter_2024"},"version":1187,"publish_version":1187,"role":null,"authored":false,"authors":[{"type":"individual","id":"efce69e3c64a4fb9","login":"maartenvm","name":"Maarten van Meersbergen","avatar_url":"https://avatars-next.observableusercontent.com/5480f938072b1f5f75f78a2dc622b8d012e1c72b52d09e633e25a1b9bfb2d85c","tier":null}],"members":[{"type":"individual","id":"efce69e3c64a4fb9","login":"maartenvm","name":"Maarten van Meersbergen","avatar_url":"https://avatars-next.observableusercontent.com/5480f938072b1f5f75f78a2dc622b8d012e1c72b52d09e633e25a1b9bfb2d85c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"FRB detection visualization with zoom","cells":[{"id":0,"value":"md`# FRB detection visualization with zoom`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"eval_data = {\n var jobId = new URLSearchParams(html``.search).get(\"id\");\n var job_instance = await fetchURL(`https://api.staging.eyrabenchmark.net/api/v1/jobs/${jobId}`); \n var data_file_instance = await fetchURL(`https://api.staging.eyrabenchmark.net/api/v1/data_files/${job_instance.output}`); \n var data_file = await fetchURLWithProxy(`${data_file_instance.file}`);\n \n return data_file;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"md`Select X axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"viewof axisX = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md`Select Y axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"viewof axisY = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"viewof dotSize = slider({\n min: 0.05, \n max: 1,\n step: 0.05, \n value: 0.25, \n title: \"Signal to Noise radius multiplier\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$27","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"DOM.download(await serialize(chart), 'chart.svg', 'Download as svg')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"md`Please select an area on the chart to see the individual values of the elements in the table below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"viewof datatable = table((selection_reformatted.concat(selection_gt_reformatted)).sort((a, b) => a.DM - b.DM), {\n sortable: true, \n paged: 50,\n columns: { \n DM: {\n title: \"DM (Dispersion Measure)\"\n },\n Sigma: {\n title: \"Sigma (Signal to Noise Ratio)\"\n },\n Time: {\n title: \"Time (in s)\"\n },\n Width: {\n title: \"Width\"\n },\n id: {\n title: \"Detection?\",\n formatter(val, i) {\n if (val.gt) {\n return html`GT`;\n } else {\n return html` ${val.id !== null ? \"TRUE\" : \"false\"}`;\n } \n }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"md`## Variables needed by the workbook`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"margin = ({top: 30, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"mutable selection_alg = alg2_data;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"selection_reformatted = selection_alg.map(\n function(row, i) {\n var result = {}\n columns.map(\n function(col, j) {\n result[col] = row[j]; \n })\n result.id = { gt: false, id: result.id };\n return result;\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"mutable selection_gt = gt2_data;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"selection_gt_reformatted = selection_gt.map(\n function(row, i) {\n var result = {}\n columns.map(\n function(col, j) {\n result[col] = row[j]; \n })\n result.id = { gt: true, id: result.id };\n return result;\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1034,"value":"x0 = d3.extent(gt2_data, function(d) { \n if (axisX == \"Time\") return d[2];\n else if (axisX == \"DM\") return d[0];\n else if (axisX == \"Sigma\") return d[1];\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"x_scatter = d3.scaleLinear()\n .domain(x0).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"y0 = d3.extent(gt2_data, function(d) { \n if (axisY == \"Time\") return d[2];\n else if (axisY == \"DM\") return d[0];\n else if (axisY == \"Sigma\") return d[1];\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"y_scatter = d3.scaleLinear()\n .domain(y0).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"xAxis_scatter = d3.axisBottom(x_scatter)\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(`${axisX}`))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"yAxis_scatter = d3.axisLeft(y_scatter)\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(`${axisY}`))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"xAxis_grid = g => g\n .attr(\"style\", \"stroke: lightgrey; stroke-opacity: 0.2; \")\n .call(d3.axisBottom(x_scatter) \n .ticks(10)\n .tickFormat(\"\")\n .tickSize(-height))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"yAxis_grid = g => g\n .attr(\"style\", \"stroke: lightgrey; stroke-opacity: 0.2;\")\n .call(d3.axisLeft(y_scatter) \n .ticks(10)\n .tickFormat(\"\")\n .tickSize(-width))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"legendData = [[\"Correct guess\",\"#fc8d62\", d3.symbolCross, true], \n [\"Matched Injected FRB\",\"#66c2a5\", d3.symbolCircle, false], \n [\"False Positive\",\"#000000\", d3.symbolCross, true],\n [\"False Negative\",\"#000000\", d3.symbolCircle, false]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"legend = g => g\n .selectAll('g')\n .data(legendData)\n .enter()\n .append(\"g\")\n .attr(\"transform\", function(d,i){\n return 'translate(0, ' + (i * 20) + ')';\n })\n .call(g => g.append('path')\n .attr(\"d\", d3.symbol().type((d) => { return d[2] })) \n .style(\"fill\", function (d) {\n if (d[3]) return d[1]; else return \"none\";\n })\n .style(\"stroke\", function (d) {\n return d[1];\n }))\n .call(g => g.append(\"text\") \n .attr(\"x\", 10)\n .attr(\"y\", 5)\n .text(function (d) {\n return d[0];\n }))\n \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"// eval_data = Files.text(eval_file).then(t => JSON.parse(t))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"gt2_data = eval_data.ground_truth.data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"alg2_data = eval_data.implementation_output.data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"axes = [\"DM\",\"Sigma\",\"Time\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"columns = [\"DM\",\"Sigma\",\"Time\", \"Width\", \"id\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"$28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"currentX_value = function(xAxis_selection, d) {\n if (xAxis_selection == \"Time\") {return d[2]}\n if (xAxis_selection == \"DM\") {return d[0]}\n if (xAxis_selection == \"Sigma\") {return d[1]}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"currentY_value = function(yAxis_selection, d) {\n if (yAxis_selection == \"Time\") {return d[2]}\n if (yAxis_selection == \"DM\") {return d[0]}\n if (yAxis_selection == \"Sigma\") {return d[1]}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"defaultOptions = ({ columns: {}, style: 'normal', paged: 25 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"th = (c, sortKey, sortDirection, sortable) => {\n let {\n options: { title }\n } = c;\n let sortIndicator = sortKey && sortDirection ? \"↑\" : \"↓\";\n let arrow = html`${sortIndicator}`;\n let displayedTitle = title !== undefined ? title : c.key;\n return c.type === \"number\"\n ? html`\n ${arrow}${displayedTitle}\n `\n : html`\n ${displayedTitle}${arrow}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"identity = i => i","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"fetchURL = await function(url) {\n return fetch(`${url}`, {\n headers: {\n Accept: '*/*',\n 'Accept-Language': 'en-US,en;q=0.5',\n Referer: 'https://observablehq.com/@randomfractals/fetch',\n },\n //credentials: 'include',\n cache: 'no-store',\n mode: 'cors',\n redirect: 'follow',\n }).then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n }).catch(error => {return error;})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"fetchURLWithProxy = await function(url) {\n return fetch(`https://observable-cors.glitch.me/` + \n `${url}`, {\n headers: {\n Accept: '*/*',\n 'Accept-Language': 'en-US,en;q=0.5',\n Referer: 'https://observablehq.com/@randomfractals/fetch',\n },\n //credentials: 'include',\n cache: 'no-store',\n mode: 'cors',\n redirect: 'follow',\n }).then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n }).catch(error => {return error;})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\",\"d3-tile@0.0\", \"d3-hexbin@0.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"import {serialize} from '@mbostock/saving-svg'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {text, select, slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"import {table} from \"@tmcw/tables@513\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"d3Legend = require(\"d3-svg-legend\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W29","stdlib":"1","titling":"auto"}} 26:"$25:body"