28:null 29:["$","title",null,{"children":"Contour Boxplots | Nicolas Chaves-de-Plaza | Observable"}] 2e:T5ef,## Contour boxplots Contour boxplots are analogous to regular boxplots but applied to shapes. Similarly to boxplots, the goal is to organize the data points in an outward manner using the concept of data depth. The deepest point is the median. As the points drift outwards the center of the distribution their depth decreases. In traditional boxplots, this is depicted with the shaded square that encloses the inter-quartile area (i,e. between the first and third quartile). In the case of shapes, data points are no longer univariate. Instead, in [1], they regard them as sets. With this, the next step is to define a way of compute the centrality of each data point. We can use this value to rank the shapes. In [1], the authors use the membership of a shape to the band formed by a selection of other shapes for this. This suggests that to implement contour boxplots we need the following ingredients: - A way to obtain the band formed by a subset of shapes. The band corresponds to the difference between the union and the intersection of the shapes. - A way to test if a band contains a shape. For this, strict membership would produce values that don't allow proper ranking. Therefore, in the paper the authors define ${tex`\epsilon`} membership as a relaxed version. The example below shows how a test member T related to a band formed by a subset of other members (two in this case). As we will see next, contour boxplots use the "contains" relationship of T in the band to determine the members' depth.2f:[] 2c:{"id":"5f4bf257adcc5aca","slug":null,"title":"Contour Boxplots","thumbnail":"9d424c9f22e3c86416d1bcc5ff18621184d39c44b111dff27091ebec029e94b5","access_level":"public","create_time":"$D2022-11-19T20:45:29.903Z","update_time":"$D2024-11-09T18:32:46.365Z","view_time":null,"first_public_time":"$D2022-12-01T11:09:52.468Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"0fc762e6ec92cf4d","login":"chadepl","name":"Nicolas Chaves-de-Plaza","avatar_url":"https://avatars-next.observableusercontent.com/dd297f2748b6c75edf7f42d52a5e2b8380d834942da3d614b4e2c6d19868bb52","tier":"starter_2024"},"version":1579,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b2b625b2cafcd05","login":"chadepl","name":"Nicolas Chaves-de-Plaza","avatar_url":"https://avatars-next.observableusercontent.com/dd297f2748b6c75edf7f42d52a5e2b8380d834942da3d614b4e2c6d19868bb52","tier":null}],"members":[{"type":"individual","id":"3b2b625b2cafcd05","login":"chadepl","name":"Nicolas Chaves-de-Plaza","avatar_url":"https://avatars-next.observableusercontent.com/dd297f2748b6c75edf7f42d52a5e2b8380d834942da3d614b4e2c6d19868bb52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"0c4d5889da38e8ad","slug":"visualization-concepts-and-tools","title":"Visualization concepts and tools","owner":{"id":"0fc762e6ec92cf4d","login":"chadepl","name":"Nicolas Chaves-de-Plaza"}},"type":"notebook","body":{"title":"Contour Boxplots","cells":[{"id":795,"value":"# Contour Boxplots\nThis notebook illustrates the concept of contour boxplots [1]. \nSimilarly to regular boxplots, this method permits understanding the distribution of an ensemble of data points. \nIn regular boxplots, these data points are univariate points. \nFor contour boxplots, a each contour or shape in an ensemble is a datapoints.\n\nFor reference, the diagram below shows a boxplot computed for a cloud or randomly distributed points. \nThe horizonal line of the boxplot shows the range of the data, without outliers\nThe gray box shows the inter-quartile range and the thicker vertical line indicates the median. \nFinally, the diagram depicts outliers as unfilled circles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":802,"value":"boxplot_data = Array(1000).fill(0.0).map(d => { return {value: d3.randomNormal(0, 1)()}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":800,"value":"Plot.plot({\n marks: [\n Plot.boxX(boxplot_data, {x: \"value\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1464,"value":"viewof w = Inputs.select([100, 200, 300, 400], {value: 300, label: \"Canvas size (reduce it for smoother experience)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1466,"value":"h = w","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"## Generating ensemble of ellipses\nIn the reminder of this notebook we will use a synthetic dataset of ellipses to illustrate how contour boxplots work. \nSimilar to [1], we change four parameters: ellipticity, rotation, size (level) and frequency of the noise applied to the ellipse.\nFor more information about the ellipse ensemble generation process please visit [this](https://observablehq.com/d/a6d2d5f3cf3ef0a4) notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1410,"value":"ensemble_params = get_ensemble_params(ensemble_size, d3.randomNormal(0.6, 0.1), d3.randomNormal(0.7, 0.1), d3.randomNormal(45, 5));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1433,"value":"ensemble = {\n let ensemble_raw = get_ensemble_ellipses_sdfs(w, h, ensemble_params);\n return ensemble_raw.map(d => threshold_contour_sdf(d, 0.0, [0.0, 1.0]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":897,"value":"viewof ensemble_size = Inputs.select(d3.range(0, 100, 10).map(d => d === 0? 1 : d), {value: 10, label: \"ensemble_size\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":311,"value":"viewof member_idx = Inputs.range([0, ensemble.length - 1], {value: 0, step:1, label: \"Current shape\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":474,"value":"{\n const member = ensemble[member_idx];\n let [h, w] = [member.length, member[0].length];\n\n let canvas = DOM.canvas(w, h);\n let ctx = canvas.getContext(\"2d\");\n\n render_image(ctx, member, d3.interpolateGreys, true);\n plot_isocurve(ctx, member, 0);\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"## Naive variability visualization\n\nWe now have an ensemble of shapes, ellipses in this case.\n\nNow that we have our ensemble of shapes we can turn our attention to the contour boxplots.\nTheir main goal is to understand the variability of an ensemble of shapes by characterizing their distribution.\nBefore delving deeper into the contour boxplot method, though, we briefly explore three naive ways of to visualize variability in an ensemble of shapes:\n 1. Overlap all the ensemble members (masks).\n 2. Overlap all the ensemble members (shapes).\n 3. Compute mean and std across members. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":623,"value":"ensemble_mean = {\n const num_members = ensemble.length;\n const step = 1.0 / num_members;\n let mean_arr = Array(h).fill(Object).map(d => Array(w).fill(0.0)); // generate grid of pixels\n\n for(let r=0; r Array(w).fill(0.0)); // generate grid of pixels\n\n for(let r=0; r Array(h).fill(0.0)); // generate grid of pixels\n \n for(let r=0; r i);\n let out = [];\n\n a.forEach((el0, il0) => {\n a.forEach((el1, il1) => {\n if(il0 < il1){\n out.push([el0, el1]); \n } \n });\n }) ;\n \n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1131,"value":"subsets_components = subsets.map(d => get_subset_band_components(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1138,"value":"contains_tests = {\n const num_subsets = subsets.length;\n const num_members = ensemble.length;\n let subset_idx, subset_components, member;\n let lc, cr;\n const out_lc = Array(num_subsets).fill(Object).map(d => Array(num_members).fill(0.0));\n const out_cr = Array(num_subsets).fill(Object).map(d => Array(num_members).fill(0.0));\n \n for(let m=0; m Array(num_members).fill(0.0));\n const out_tidy = [];\n \n for(let m=0; m d3.mean(v, d => d.contained), d => d.m), ([key, value]) => ({id:key, value}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1180,"value":"depths_member_mean = Array.from(d3.rollup(depths_matrices.tidy, v => d3.mean(v, d => d.contained), d => d.n), ([key, value]) => ({id:key, value}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1301,"value":"deepest = depths_member_mean[d3.maxIndex(depths_member_mean, d => d.value)].id; // median ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1286,"value":"hundred_percent = d3.sort(d3.filter(depths_member_mean, d => d.value !== 0.0), (a,b) => d3.descending(a.value, b.value)).map(d => d.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1264,"value":"fifty_percent = d3.filter(hundred_percent, (d,i) => i + 1 <= hundred_percent.length / 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1291,"value":"outliers = d3.filter(depths_member_mean, d => d.value == 0).map(d => d.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1045,"value":"{\n const canvas = DOM.canvas(w, h);\n let ctx = canvas.getContext(\"2d\");\n\n ctx.fillStyle = \"white\";\n ctx.fillRect(0, 0, w, h);\n\n outliers.forEach(d => plot_isocurve(ctx, ensemble[d], 0.5, {color:color_outlier, width: 1, dash_pattern: [2,2]}));\n\n render_binary_mask(ctx, get_subset_band_components(fifty_percent).band, color_band_inner, 0.5);\n render_binary_mask(ctx, get_subset_band_components(hundred_percent).band, color_band_outer, 0.2);\n \n plot_isocurve(ctx, ensemble[deepest], 0.5, {color: color_median, width: 3});\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":819,"value":"## References\n[1] Whitaker, R. T., Mirzargar, M., & Kirby, R. M. (2013). Contour boxplots: A method for characterizing uncertainty in feature sets from simulation ensembles. IEEE Transactions on Visualization and Computer Graphics, 19(12), 2713-2722.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":880,"value":"## Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1066,"value":"viewof color_default = Inputs.color({value: \"#40E0D0\", label: \"color_default\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1054,"value":"viewof color_band_inner = Inputs.color({value: \"#cab2d6\", label: \"color_band_inner\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1058,"value":"viewof color_band_outer = Inputs.color({value: \"#6a3d9a\", label: \"color_band_outer\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1062,"value":"viewof color_outlier = Inputs.color({value: \"#e31a1c\", label: \"color_outlier\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1064,"value":"viewof color_median = Inputs.color({value: \"#ffff99\", label: \"color_median\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1366,"value":"viewof color_bg = Inputs.color({value: \"#000\", label: \"color_bg\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":344,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":739,"value":"function get_subset_band_components(subset_idx){\n const subset = ensemble.filter((d, i) => subset_idx.includes(i));\n const [h, w] = [subset[0].length, subset[0][0].length];\n \n const union = Array(w).fill(Object).map(d => Array(h).fill(0.0));\n const union_neg = Array(w).fill(Object).map(d => Array(h).fill(0.0));\n const intersection = Array(w).fill(Object).map(d => Array(h).fill(0.0));\n const band = Array(w).fill(Object).map(d => Array(h).fill(0.0));\n\n for(let r=0; r 0 ? 1.0 : 0.0;\n union_neg[r][c] = 1.0 - union[r][c];\n intersection[r][c] = sum === subset.length ? 1.0 : 0.0;\n band[r][c] = union[r][c] + intersection[r][c] === 1.0 ? 1.0 : 0.0;\n }\n }\n return {union, union_neg, intersection, band};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":751,"value":"function contained_in_frac(A, B){\n // Operator: A contained in B\n // Returns the fraction of pixels of A that lie outside of B (relative to A): (|B - A|/A)\n let [h, w] = [A.length, A[0].length];\n let val_a, val_b;\n\n let sum_outside = 0.0\n let cardinality_a = 0.0;\n\n for(let r=0; r