31:T633,//Example lineup. Imagine we have ten charts. // Two are of the "real" data: 50 specific samples from a Gaussian. // The other eight are imposters: 50 different samples. Can we tell the difference? p5(sketch => { sketch.setup = function() { let realData = sampleNormal(50); let allData = []; let n = 10; //the ``correct'' answers let answers = [0, 7]; for(let i = 0;i < n; i++){ if(answers.includes(i)){ allData.push(realData); } else{ allData.push(sampleNormal(50)); } } // How many charts per row let perRow = 5; let h = 100; let w = 250; let rows = Math.ceil(n / perRow); let sampleData = gaussianExample; sketch.createCanvas(w * perRow + 4 , 2 * h * rows + 4); sketch.push(); sketch.translate(2, 2); for(const [i, data] of allData.entries()){ let x = w * (i % perRow); let y = h * Math.floor(i / perRow); sketch.fill(0, 0); sketch.stroke(rainFill); sketch.strokeWeight(2); sketch.rect(x, y, w - 5, h - 5); rain(sketch, data, x, y - ((h - 5) / 4), w - 5, h - 5 + ((h - 5) / 4), rainTypes.JITTERED); } sketch.translate(0, h * rows); for(const [i, data] of allData.entries()){ let x = w * (i % perRow); let y = h * Math.floor(i / perRow); sketch.fill(0, 0); sketch.stroke(cloudFill); sketch.strokeWeight(2); sketch.rect(x, y, w - 5, h - 5); cloud(sketch, data, x, y, w - 5, h - 5, cloudTypes.DENSITY); } sketch.pop(); }; })32:T53e,//Hiding a mode through overplotting and other trickery. p5(sketch => { sketch.setup = function() { let n = 198; //create two distributions with mean = 0, sd = 1, but one is secretly bimodal! let uniData = standardize(sampleNormal(n, 0, 0.5)); let bimodalData = standardize(sampleNormal(Math.floor(n / 2), -1, 0.5).concat(sampleNormal(Math.floor(n / 2), 1, 0.5))); if(n % 2 != 0){ bimodalData = bimodalData.concat(0); } let min = Math.min(d3.min(uniData), d3.min(bimodalData)); let max = Math.max(d3.max(uniData), d3.max(bimodalData)); uniData.push(min, max); bimodalData.push(min, max); let padding = 5; let w = 400; sketch.createCanvas((w * 2) + (padding * 3), height + padding); sketch.push(); sketch.translate(4, 4); sketch.fill(0, 0); sketch.stroke(cloudFill); sketch.strokeWeight(2); sketch.rect(0, padding, w, height - padding); sketch.rect(w + padding, padding, w, height - padding); raincloud(sketch, uniData, 0, padding, w, height - padding, cloudTypes.DENSITY, rainTypes.STRIP, lightningTypes.INTERVAL); raincloud(sketch, bimodalData, w + padding, padding, w, height - padding, cloudTypes.DENSITY, rainTypes.STRIP, lightningTypes.INTERVAL); sketch.pop(); //bimodalData = alignQuartiles(bimodalData,uniData); }; })33:T49a,p5(sketch => { sketch.setup = function() { let toAdd = 10; let padding = 10; let w = 350; let h = 150; let data = standardize(sampleNormal(100)); let inlier = data.concat(Array(toAdd).fill(0)); let outlier = data.concat(Array(toAdd).fill(-1.5)); sketch.createCanvas(w + (2 * padding), (3 * h) + (5 * padding)); sketch.push(); raincloud(sketch, data, padding, padding, w, h, cloudTypes.HISTOGRAM, rainTypes.DOTPLOT, lightningTypes.MEAN); sketch.fill(0, 0); sketch.stroke(cloudFill); sketch.strokeWeight(2); sketch.rect(padding, padding, w, h); sketch.translate(0, h); raincloud(sketch, outlier, padding, padding, w, h, cloudTypes.HISTOGRAM, rainTypes.DOTPLOT, lightningTypes.MEAN); sketch.fill(0, 0); sketch.stroke(cloudFill); sketch.strokeWeight(2); sketch.rect(padding, padding, w, h); sketch.translate(0, h); raincloud(sketch, inlier, padding, padding, w, h, cloudTypes.HISTOGRAM, rainTypes.DOTPLOT, lightningTypes.MEAN); sketch.fill(0, 0); sketch.stroke(cloudFill); sketch.strokeWeight(2); sketch.rect(padding, padding, w, h); sketch.pop(); }; })34:T489,violin = function(p5, data, x=0, y=0, w=width, h=height){ p5.push(); p5.translate(x, y); let pdf = kde(data).pdf; let extent = d3.extent(data); let range = extent[1] - extent[0]; let n = Math.min(500, w); let xs = d3.range(extent[0], extent[1], range / n).concat(extent[1]); let ys = xs.map(d => pdf(d)); let xScale = d3.scaleLinear().domain(d3.extent(data)).range([0, w]); let yScale = d3.scaleLinear().domain([0, d3.max(ys)]).range([h / 2, 0]); p5.noStroke(); p5.fill(cloudFill); //Half of the violin p5.beginShape(); p5.vertex(0, h / 2); for(const [i, x] of xs.entries()){ p5.vertex(xScale(x), yScale(ys[i])); } p5.vertex(w, h / 2); p5.endShape(p5.CLOSE); //The other half, need to invert scale yScale = d3.scaleLinear().domain([0, d3.max(ys)]).range([h / 2, h]); p5.beginShape(); p5.vertex(0, h / 2); for(const [i, x] of xs.entries()){ p5.vertex(xScale(x), yScale(ys[i])); } p5.vertex(w, h / 2); p5.endShape(p5.CLOSE); //This creates an annoying aliasing artifact, which I will cover up with a line. Plus, it's a baseline. p5.stroke(cloudFill); p5.line(0, h / 2, w, h / 2); p5.pop(); }35:T40b,// Draw a Quantile Dot Plot, based on suggestions from Kay et al. function dotplot_c(p5, data, x=0, y=0, w=width, h=height, n = 20) { p5.push(); p5.translate(x, y); p5.fill(cloudFill); p5.noStroke(); let sorted = data.sort(d3.ascending); let samples = d3.range( (1 / n) / 2, 1, 1/ n); let xs = samples.map(d => d3.quantile(sorted, d)); let bins; //same procedure as a rain style dotplot: //make mark size "the biggest that will fit in our h" if not provided let markSize = 1; bins = dotPlotBin(xs, w, markSize); while(d3.max(bins,d => d.count) * markSize < h){ markSize++; bins = dotPlotBin(xs, w, markSize); } markSize = Math.max(1, markSize - 1); bins = dotPlotBin(xs, w, markSize); let xScale = d3.scaleLinear().domain(d3.extent(sorted)).range([markSize, w - markSize]); p5.translate(0, h - (markSize / 2)); for(const bin of bins){ for(let i = 0;i < bin.count; i++){ p5.ellipse(xScale(bin.value),-1 * (i * markSize), markSize, markSize); } } p5.pop(); }36:Taf3,moment_l = function(p5, data, x=0, y=0, w=width, h=height){ // Marks in a potter et al. moment plot: // mean // median // skew // kurtosis // +/- 1 sd // +/- 2 sd // tail let sorted = data.sort(d3.ascending); let mean = d3.mean(sorted); let median = d3.median(sorted); let q1 = d3.quantile(sorted, 0.25); let q3 = d3.quantile(sorted, 0.75); let sd = d3.deviation(sorted); let skew = moment(sorted, 3) / Math.pow(sd, 3); let kurtosis = moment(sorted, 4) / Math.pow(sd, 4); let tail = moment(sorted, 5) / Math.pow(sd, 5); let xScale = d3.scaleLinear().domain(d3.extent(data)).range([0, w]); p5.push(); p5.translate(x, y); p5.fill(lightningFill); p5.stroke(lightningFill); let l = 2 * r; p5.strokeWeight(r); //cross for the mean p5.line(xScale(mean), (h / 2) - l, xScale(mean), (h / 2) + l); p5.line(xScale(mean) - l, h / 2, xScale(mean) + l, h / 2); //t's for the median p5.line(xScale(median), 0, xScale(median), l); p5.line(xScale(median), h - l, xScale(median), h); p5.line(xScale(median) - l, 0, xScale(median) + l, 0); p5.line(xScale(median) - l, h, xScale(median) + l, h); //abbreviated boxplot elements //notches for the quartiles p5.line(xScale(q1), 1, xScale(q1), r); p5.line(xScale(q1), h - 1, xScale(q1), h - r); p5.line(xScale(q1), 1, xScale(q1) + r, 1); p5.line(xScale(q1), h - 1, xScale(q1) + r, h - 1); p5.line(xScale(q3), 1, xScale(q3), r); p5.line(xScale(q3), h - 1, xScale(q3), h - r); p5.line(xScale(q3), 1, xScale(q3) - r, 1); p5.line(xScale(q3), h - 1, xScale(q3) - r, h - 1); //range markers (a bit silly since the data is already scaled to the range of the data p5.line(0, h / 2, xScale(q1), h / 2); p5.line(xScale(q3), h / 2, w, h / 2); //Half-ellipses for 1, 2 sd p5.push(); p5.noFill(); //1 sd p5.arc(xScale(mean - sd) + (h / 8), h / 2, h / 4, h, p5.HALF_PI, p5.PI + p5.HALF_PI); p5.arc(xScale(mean + sd) - (h / 8), h / 2, h / 4, h, p5.PI + p5.HALF_PI, p5.HALF_PI); //2 sd p5.arc(xScale(mean - (2 * sd)) + (h / 16), h / 2, h / 8, h / 2, p5.HALF_PI, p5.PI + p5.HALF_PI); p5.arc(xScale(mean + (2 * sd)) - (h / 16), h / 2, h / 8, h / 2, p5.PI + p5.HALF_PI, p5.HALF_PI); p5.pop(); //skewness is a triangle scaled by abs(skew), pointing towards the tail let sizeScale = d3.scaleLinear().domain([0,2]).range([0, h / l]).clamp(true); let size = sizeScale(Math.abs(skew)); p5.push(); p5.noStroke(); p5.translate(xScale(mean - skew), h / 2); p5.scale(size); if(skew > 0){ p5.triangle(-1 * (l / 2), - l / 2, -1 * (l / 2), l / 2, l / 2, 0); } else if(skew < 0){ p5.triangle(l / 2, - l / 2, l / 2, l / 2, -1 * l / 2, 0); } p5.pop(); p5.pop(); }37:[{"id":"858ba71edf853c9cc06b1e5ce1603810c56e054892c22d6ea68abf777cabdaf7b00e7c4349a1eee5f4634fa918e32bc8542516b34ef777bb8c6421a2dc59ad2d","href":"https://static.observableusercontent.com/files/858ba71edf853c9cc06b1e5ce1603810c56e054892c22d6ea68abf777cabdaf7b00e7c4349a1eee5f4634fa918e32bc8542516b34ef777bb8c6421a2dc59ad2d","name":"seattlerain@2.csv","type":"text/csv","lastModified":1669147007153.056,"size":717},{"id":"f17589e2aeedfbf2f971456139d10f289a189bb420ed91ee021774c8c0b41df30b566292b8ff529808e39784fb3f4d9483878a50cfd25d3a1c81db75bf79308c","href":"https://static.observableusercontent.com/files/f17589e2aeedfbf2f971456139d10f289a189bb420ed91ee021774c8c0b41df30b566292b8ff529808e39784fb3f4d9483878a50cfd25d3a1c81db75bf79308c","name":"lifexpectancy2012.csv","type":"text/csv","lastModified":1670001609146.218,"size":2692},{"id":"16f4399f803ac9dff575248182339626ffd54135b37dd5925981edb2f2e1ab6bf50aff56bae136da8be4b5b60622a576e6af67eca086a05dcecbcb9d33be18fa","href":"https://static.observableusercontent.com/files/16f4399f803ac9dff575248182339626ffd54135b37dd5925981edb2f2e1ab6bf50aff56bae136da8be4b5b60622a576e6af67eca086a05dcecbcb9d33be18fa","name":"EuroVis Slides - Rainclouds.pdf","type":"application/pdf","lastModified":1686830152678.167,"size":3023662}] 2f:{"title":"Raincloud Robustness","cells":[{"id":0,"value":"# Raincloud Robustness","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"## Explanation\nThis notebook contains code associated with [a paper](https://arxiv.org/pdf/2303.17709.pdf) that appeared at EuroVis 2023, \"*Teru Teru Bōzu*: Defensive Raincloud Plots\". For reproducibility, there is a seed number. If you keep this seed number the same, the results relying on randomness should be identical to the paper on page load (although note that rerunning a cell will generate new values).\n\nI also wrote a brief [paper explainer](https://mcorrell.medium.com/what-makes-raincloud-plots-tick-1cc0f68e3e5a) and have attached the talk slides to the files of this notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"seed = 0.12022023;","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"A [raincloud plot](https://wellcomeopenresearch.org/articles/4-63/v2) is a class of designs for visualizing distributions. Rainclouds combine visualizations of the *overall shape* of the distribution, the *raw data values*, and (optionally) relevant inferential or *derived statistics*. We refer to these components as the **cloud**, **rain**, and **lightning**, respectively. A common design is a cloud of a density plot atop the rain of a jittered dot plot, with box plot lightning superimposed. Here is an example of this canonical design, on [a dataset](https://www.kaggle.com/datasets/rtatman/did-it-rain-in-seattle-19482017) of precipitation data from Seattle. In particular, the distribution of the number of days that there was precipitation in Seattle, 1948-2017.","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"p5(sketch => {\n sketch.setup = function() {\n let sampleData = exampleData.map(d => d.RainyDays);\n sketch.createCanvas(width, height);\n raincloud(sketch, sampleData,0,0,width,height,cloudTypes.DENSITY,rainTypes.JITTERED,lightningTypes.BOXPLOT);\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":605,"value":"But there are other options for rainclouds that show shape, raw values, and derived statistics. For instance, instead of a density plot, we could use a histogram, or even a modified box plot. Instead of a jittered dot plot, we could use more deterministic designs like dot plots, strip plots, or beeswarms.","pinned":false,"hidden":false,"mode":"md"},{"id":556,"value":"p5(sketch => {\n sketch.setup = function() {\n let sampleData = exampleData.map(d => d.RainyDays);\n sketch.createCanvas(width, height);\n raincloud(sketch, sampleData,0,0,width,height,cloudTypes.HISTOGRAM,rainTypes.DOTPLOT,lightningTypes.INTERVAL);\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"p5(sketch => {\n sketch.setup = function() {\n let sampleData = exampleData.map(d => d.RainyDays);\n sketch.createCanvas(width, height);\n raincloud(sketch, sampleData,0,0,width,height,cloudTypes.BOXPLOT,rainTypes.STRIP,lightningTypes.MEAN);\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1290,"value":"## Xeno Rainclouds\nYou can get really weird with it, too. Below is a cloud based on a quantile dot plot, as in [When-ish is my Bus?](https://idl.cs.washington.edu/papers/when-ish-is-my-bus/), which is supposed to be good for distributional shapes and decision-marking. I think it's weird because it's unclear what is (or isn't) the \"raw\" data:","pinned":false,"hidden":false,"mode":"md"},{"id":645,"value":"p5(sketch => {\n sketch.setup = function() {\n let sampleData = exampleData.map(d => d.RainyDays);\n sketch.createCanvas(width, height);\n raincloud(sketch, sampleData,0,0,width,height,cloudTypes.QUANTILE,rainTypes.CIRCLES,lightningTypes.INTERVAL);\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1340,"value":"And another entry in the \"oops, all circles\" genre of rainclouds:","pinned":false,"hidden":false,"mode":"md"},{"id":1287,"value":"p5(sketch => {\n sketch.setup = function() {\n let sampleData = lifeData.map(d => d[\"Life Expectancy\"]);\n sketch.createCanvas(width, height);\n raincloud(sketch, sampleData,0,0,width,height,cloudTypes.QUANTILE,rainTypes.BEESWARM,lightningTypes.INTERVAL);\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1302,"value":"I'd rather the components be mutually supportive. For instance, here the strip plot doesn't let you see density due to overplotting, but that's okay, because you get it from the density plot. The density plot doesn't directly give you information about central tendencies or cumulative distribution, but that's okay because you get it from the quartile interval.","pinned":false,"hidden":false,"mode":"md"},{"id":1296,"value":"p5(sketch => {\n sketch.setup = function() {\n let sampleData = lifeData.map(d => d[\"Life Expectancy\"]);\n sketch.createCanvas(width, height);\n raincloud(sketch, sampleData,0,0,width,height,cloudTypes.DENSITY,rainTypes.STRIP,lightningTypes.QIINTERVAL);\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1316,"value":"## I'm Feeling Lucky\nClick the button below to get a random raincloud. Note that it's not connected to the seed value up top, so (hopefully) shouldn't mess with other components of this notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":1343,"value":"viewof dice = Inputs.button(\"I'm Feeling Lucky\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1320,"value":"p5(sketch => {\n sketch.setup = function() {\n //referencing the button in the cell above forces a refresh.\n dice;\n let allClouds = Object.entries(cloudTypes).map(d => d[1]);\n let allRains = Object.entries(rainTypes).map(d => d[1]);\n let allLightning = Object.entries(lightningTypes).map(d => d[1]);\n let c = allClouds[Math.floor(Math.random() * allClouds.length)];\n let r = allRains[Math.floor(Math.random() * allRains.length)];\n let l = allLightning[Math.floor(Math.random() * allLightning.length)];\n let sampleData = lifeData.map(d => d[\"Life Expectancy\"]);\n sketch.createCanvas(width, height);\n raincloud(sketch, sampleData,0,0,width,height,c,r,l);\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"# Robustness Tests","pinned":false,"hidden":false,"mode":"md"},{"id":985,"value":"## Jitter Lineup\nJittered dot plots violate the AVD \"Principle of Visual-Data Correspondence\". Meaningful changes to the data are not represented, and meaningless changes are salient. As in this example, where two sets of identical data are difficult (I'd say, almost impossible without tedious inspection) to disambiguate from a sea of imposters.","pinned":false,"hidden":false,"mode":"md"},{"id":988,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"## Hiding Modes\nBoxplots and means are famously incapable of revealing important distributional structure, like distinguishing unimodal from bimodal data. But that doesn't mean that just plotting raw values will help! Overplotting can hide density information too.","pinned":false,"hidden":false,"mode":"md"},{"id":1070,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1244,"value":"## Hiding Data Types\nPlotting raw data is also supposed to let you \"sanity check\" things to see if there's any funny business going on (gaps or modes or outliers), but that's also contingent on how you represent things and how (visually) dense things are. I've converted float data into integers and often the difference is either minor (pushing a few values across histogram bin barriers, for instance) or entirely imperceivable.","pinned":false,"hidden":false,"mode":"md"},{"id":1166,"value":"//Example discretization issue.\np5(sketch => {\n sketch.setup = function() {\n let floatData = sampleNormal(100, 0, 20);\n let padding = 5;\n let w = 400;\n let intData = floatData.map(d => Math.round(d));\n sketch.createCanvas((w * 2) + (padding * 3), height + padding + 25);\n sketch.push();\n sketch.translate(padding, padding);\n sketch.fill(0, 0);\n sketch.stroke(cloudFill);\n sketch.strokeWeight(2);\n sketch.rect(0, padding, w, height - padding);\n sketch.rect(w + padding, padding, w, height - padding);\n raincloud(sketch, floatData, 0, padding, w, height - padding - 20, cloudTypes.HISTOGRAM, rainTypes.DOTPLOT, lightningTypes.BOXPLOT);\n rain(sketch, floatData, 0, height - 45, w, 50, rainTypes.CIRCLES);\n raincloud(sketch, intData, w + padding, padding, w, height - padding - 20, cloudTypes.HISTOGRAM, rainTypes.DOTPLOT, lightningTypes.BOXPLOT);\n rain(sketch, intData, w + padding, height - 45, w, 50, rainTypes.CIRCLES);\n sketch.pop();\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"## Rebinning and Renormalizing\nRebinning histograms creates significant visual disruption, and does so in a stepwise way. You can be adding points, happy as a clam, looking at the same histogram, but then you cross the threshold and now everything has a different shape.","pinned":false,"hidden":false,"mode":"md"},{"id":1256,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"# Draw Functions","pinned":false,"hidden":false,"mode":"md"},{"id":435,"value":"cloudTypes = {\n const obj = {\n DENSITY: \"DENSITY\",\n VIOLIN: \"VIOLIN\",\n BOXPLOT: \"BOXPLOT\",\n HEATMAP: \"HEATMAP\",\n HISTOGRAM: \"HISTOGRAM\",\n QUANTILE: \"QUANTILE\"\n }\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"rainTypes = {\n const obj = {\n STRIP: \"STRIP\",\n CIRCLES: \"CIRCLES\",\n JITTERED: \"JITTERED\",\n BEESWARM: \"BEESWARM\",\n DOTPLOT: \"DOTPLOT\",\n WHEATPLOT: \"WHEATPLOT\"\n }\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"lightningTypes = {\n const obj = {\n BOXPLOT: \"BOXPLOT\",\n MIDGAP: \"MIDGAP\",\n QIINTERVAL: \"QIINTERVAL\",\n MEAN: \"MEAN\",\n INTERVAL: \"INTERVAL\",\n MOMENT: \"MOMENT\"\n }\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"function raincloud(p5, data, x=0, y=0, w=width, h=height, cloud_type=\"density\", rain_type=\"jittered\", lightning_type=\"boxplot\"){\n /*\n Rainclouds est omnis divisa in partes tres:\n \"Rain\": Plots of individual values\n \"Cloud\": Plot of the overall distributional shape\n \"Lightning\": Derived distributional statistics\n */\n rain(p5, data, x, y + (h / 2), w, (h / 2), rain_type);\n cloud(p5, data, x, y, w, (h / 2), cloud_type);\n if(cloud_type===cloudTypes.VIOLIN){\n lightning(p5, data, x, y + ((3 * h) / 16), w, (h / 8), lightning_type);\n }\n else{\n lightning(p5, data, x, y + ((7 * h) / 16), w, (h / 8), lightning_type);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"## Rain Drawing","pinned":false,"hidden":false,"mode":"md"},{"id":739,"value":"p5(sketch => {\n sketch.setup = function() {\n let h = 150;\n let sampleData = gaussianExample;\n let types = Object.entries(rainTypes).map(d => d[0]);\n let n = types.length;\n sketch.createCanvas(width, h * n);\n sketch.push();\n for(const type of types){\n rain(sketch, sampleData, 0, 0, width, h - 5, type);\n sketch.translate(0, h);\n }\n sketch.pop();\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"function rain(p5, data, x=0, y=0, w=width, h=height, type=rainTypes.JITTERED){\n switch(type){\n case rainTypes.STRIP:\n strip(p5, data, x, y + (h /4), w, h / 2);\n break;\n\n case rainTypes.BEESWARM:\n beeswarm(p5, data, x, y, w, h);\n break;\n\n case rainTypes.DOTPLOT:\n dotPlot(p5, data, x, y + (h / 4), w, h - (h / 4));\n break;\n\n case rainTypes.CIRCLES:\n circles(p5, data, x, y + (h/ 4), w, h / 2);\n break;\n\n case rainTypes.WHEATPLOT:\n wheat(p5, data, x, y + (h /4), w, h - (h / 4));\n break;\n \n case rainTypes.JITTERED:\n default:\n jittered(p5, data, x, y + (h /4), w, h - (h / 4)); \n break;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"function jittered(p5, data, x=0, y=0, w=width, h=height){\n p5.push();\n p5.translate(x, y);\n p5.fill(rainFill);\n p5.noStroke();\n let jitter = d3.randomUniform.source(randomSrc)(r, h - r);\n let xScale = d3.scaleLinear().domain(d3.extent(data)).range([0 + r, w - r]);\n for(const datum of data){\n let xpos = xScale(datum);\n let ypos = jitter();\n p5.ellipse(xpos, ypos, r * 2, r * 2);\n }\n p5.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"function strip(p5, data, x=0, y=0, w=width, h=height){\n p5.push();\n p5.translate(x, y);\n p5.stroke(rainFill);\n p5.strokeWeight(r);\n let xScale = d3.scaleLinear().domain(d3.extent(data)).range([0 + r, w - r]);\n for(const datum of data){\n p5.line(xScale(datum), 0, xScale(datum), h);\n }\n p5.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"function beeswarm(p5, data, x=0, y=0, w=width, h=height){\n p5.push();\n p5.translate(x, y);\n p5.fill(rainFill);\n p5.noStroke();\n let xScale = d3.scaleLinear().domain(d3.extent(data)).range([0 + r, w - r]).clamp(true);\n let yScale = d3.scaleLinear().domain([0, 1]).range([0, h]);\n\n let vals = data.map(d => ({\"value\": d}));\n var simulation = d3.forceSimulation(vals)\n .force(\"x\", d3.forceX(d => xScale(d.value)).strength(1))\n .force(\"y\", d3.forceY(yScale(0.5)))\n .force(\"collide\", d3.forceCollide(r+1))\n .stop();\n\n for(let i = 0;i < 120;i++){\n simulation.tick();\n }\n \n for(const val of vals){\n p5.ellipse(val.x, val.y, 2 * r, 2 * r);\n }\n p5.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"function wheat(p5, data, x=0, y=0, w=width, h=height){\n p5.push();\n p5.translate(x, y);\n p5.fill(rainFill);\n p5.noStroke();\n let sorted = data.sort(d3.ascending);\n let bins = d3.bin()(sorted);\n let maxC = d3.max(bins, d=> d.length);\n let radius = (h / maxC) / 2;\n let xScale = d3.scaleLinear().domain(d3.extent(data)).range([radius, w - radius]);\n let yScale = d3.scaleLinear().domain([0,maxC]).range([radius, h - radius]);\n for(const bin of bins){\n for(const [i, datum] of bin.entries()){\n p5.ellipse(xScale(datum), i * (2 * radius), 2 * radius, 2 * radius);\n }\n }\n p5.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"function dotPlot(p5, data, x=0, y=0, w=width, h=height){\n p5.push();\n p5.translate(x, y);\n p5.fill(rainFill);\n p5.noStroke();\n let bins;\n\n //make mark size \"the biggest that will fit in our h\"\n //if not provided\n let markSize = 1;\n bins = dotPlotBin(data, w, markSize);\n while(d3.max(bins,d => d.count) * markSize < h){\n markSize++;\n bins = dotPlotBin(data, w, markSize);\n }\n markSize = Math.max(1, markSize - 1);\n bins = dotPlotBin(data, w, markSize);\n \n let xScale = d3.scaleLinear().domain(d3.extent(data)).range([0 + markSize, w - markSize]);\n p5.translate(0, markSize / 2);\n for(const bin of bins){\n for(let i = 0;i < bin.count; i++){\n p5.ellipse(xScale(bin.value),(i * markSize), markSize, markSize);\n }\n }\n p5.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"function circles(p5, data, x=0, y=0, w=width, h=height){\n p5.push();\n p5.translate(x, y);\n p5.stroke(rainFill);\n p5.strokeWeight(r / 2);\n p5.ellipseMode(p5.RADIUS);\n p5.fill(255,0);\n let xScale = d3.scaleLinear().domain(d3.extent(data)).range([0 + r + (r / 2), w - r - (r / 2)]);\n for(const datum of data){\n p5.ellipse(xScale(datum), h / 2, r, r);\n }\n p5.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"## Cloud Drawing","pinned":false,"hidden":false,"mode":"md"},{"id":716,"value":"p5(sketch => {\n sketch.setup = function() {\n let h = 100;\n let sampleData = gaussianExample;\n let types = Object.entries(cloudTypes).map(d => d[0]);\n let n = types.length;\n sketch.createCanvas(width, h * n);\n sketch.push();\n for(const type of types){\n cloud(sketch, sampleData, 0, 0, width, h - 5, type);\n sketch.translate(0, h);\n }\n sketch.pop();\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"function cloud(p5, data, x=0, y=0, w=width, h=height, type=cloudTypes.DENSITY){\n switch(type){\n case cloudTypes.HISTOGRAM:\n histogram(p5, data, x, y, w, h);\n break;\n \n case cloudTypes.BOXPLOT:\n boxplot_c(p5, data, x, y, w, h);\n break;\n\n case cloudTypes.QUANTILE:\n dotplot_c(p5, data, x, y, w, h);\n break;\n\n case cloudTypes.HEATMAP:\n heatmap(p5, data, x, y + (h / 2), w, h / 2);\n break;\n\n case cloudTypes.VIOLIN:\n violin(p5, data, x, y, w, h);\n break;\n \n case cloudTypes.DENSITY:\n default:\n density(p5, data, x, y, w, h);\n break;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"// Draw a boxplot (in cloud role)\nfunction boxplot_c(p5, data, x=0, y=0, w=width, h=height){\n p5.push();\n p5.translate(x, y);\n let sorted = data.sort(d3.ascending);\n let xScale = d3.scaleLinear().domain(d3.extent(sorted)).range([0, w]);\n let q1 = d3.quantile(sorted, 0.25);\n let q2 = d3.quantile(sorted, 0.5);\n let q3 = d3.quantile(sorted, 0.75);\n let iqr = q3 - q1;\n let fence1 = q1 - (1.5 * iqr);\n let fence2 = q3 + (1.5 * iqr);\n p5.stroke(0);\n p5.strokeWeight(r);\n p5.fill(cloudFill);\n p5.line(xScale(fence1), h, xScale(q1), h);\n p5.rectMode(p5.CORNERS);\n p5.rect(xScale(q1), h, xScale(q2), 0);\n p5.rect(xScale(q2), h, xScale(q3), 0);\n p5.line(xScale(q3), h, xScale(fence2), h);\n p5.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"histogram = function(p5, data, x=0, y=0, w=width, h=height, m_bins){\n p5.push();\n p5.translate(x, y);\n let bins = m_bins ? d3.bin().threshold(m_bins) : d3.bin()(data);\n let maxC = d3.max(bins, d=> d.length);\n let xScale = d3.scaleLinear().domain(d3.extent(data)).range([0, w]).clamp(true);\n let yScale = d3.scaleLinear().domain([0,maxC]).range([0, h]);\n p5.noStroke();\n p5.fill(cloudFill);\n let curX = 0;\n p5.beginShape();\n p5.vertex(0, h);\n for(const bin of bins){\n let c = bin.length;\n let binH = yScale(c);\n let binEnd = xScale(bin.x1);\n let binW = binEnd - curX;\n p5.vertex(curX, h - binH);\n p5.vertex(binEnd, h - binH);\n curX+= binW;\n }\n p5.vertex(curX, h);\n p5.endShape(p5.CLOSE);\n p5.pop();\n return bins;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"density = function(p5, data, x=0, y=0, w=width, h=height, m_bandwidth){\n p5.push();\n p5.translate(x, y);\n let pdf = kde(data, m_bandwidth).pdf;\n let extent = d3.extent(data);\n let range = extent[1] - extent[0];\n let n = Math.min(500, w);\n let xs = d3.range(extent[0], extent[1], range / n).concat(extent[1]);\n let ys = xs.map(d => pdf(d));\n let xScale = d3.scaleLinear().domain(d3.extent(data)).range([0, w]);\n let yScale = d3.scaleLinear().domain([0, d3.max(ys)]).range([h, 0]);\n p5.noStroke();\n p5.fill(cloudFill);\n p5.beginShape();\n p5.vertex(0, h);\n for(const [i, x] of xs.entries()){\n p5.vertex(xScale(x), yScale(ys[i]));\n }\n p5.vertex(w, h);\n p5.endShape(p5.CLOSE);\n p5.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"heatmap = function(p5, data, x=0, y=0, w=width, h=height){\n p5.push();\n p5.translate(x, y);\n let pdf = kde(data).pdf;\n let extent = d3.extent(data);\n let range = extent[1] - extent[0];\n let n = Math.min(50, w);\n let xs = d3.range(extent[0], extent[1], range / n);\n let ys = xs.map(d => pdf(d));\n let rw = w / n;\n let xScale = d3.scaleLinear().domain(d3.extent(data)).range([0, w]);\n let yScale = d3.scaleLinear().domain([0, d3.max(ys)]).interpolate(d3.interpolateLab).range([d3.lab(\"white\"),d3.lab(cloudFill)]);\n p5.noStroke();\n for(const [i, x] of xs.entries()){\n p5.fill(yScale(ys[i]));\n p5.rect(xScale(x), 0, rw, h);\n }\n p5.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"## Lightning Drawing","pinned":false,"hidden":false,"mode":"md"},{"id":748,"value":"p5(sketch => {\n sketch.setup = function() {\n let h = 50;\n let sampleData = gaussianExample;\n let types = Object.entries(lightningTypes).map(d => d[0]);\n let n = types.length;\n sketch.createCanvas(width, h * n);\n sketch.push();\n for(const type of types){\n lightning(sketch, sampleData, 0, 0, width, h - 5, type);\n sketch.translate(0, h);\n }\n sketch.pop();\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"function lightning(p5, data, x=0, y=0, w=width, h=height, type=lightningTypes.BOXPLOT){\n switch(type){\n case lightningTypes.MEAN:\n mean_l(p5, data, x, y, w, h);\n break;\n\n case lightningTypes.INTERVAL:\n interval_l(p5, data, x, y, w, h);\n break;\n\n case lightningTypes.MIDGAP:\n midgap(p5, data, x, y, w, h);\n break;\n\n case lightningTypes.QIINTERVAL:\n qi_interval(p5, data, x, y, w, h);\n break;\n\n case lightningTypes.MOMENT:\n moment_l(p5, data, x, y, w, h);\n break;\n \n case lightningTypes.BOXPLOT:\n boxplot_l(p5, data, x, y, w, h);\n break;\n\n default:\n break;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"// Draw a boxplot (in lightning role)\nfunction boxplot_l(p5, data, x=0, y=0, w=width, h=height){\n p5.push();\n p5.translate(x, y);\n let sorted = data.sort(d3.ascending);\n let xScale = d3.scaleLinear().domain(d3.extent(sorted)).range([0, w]).clamp(true);\n let q1 = d3.quantile(sorted, 0.25);\n let q2 = d3.quantile(sorted, 0.5);\n let q3 = d3.quantile(sorted, 0.75);\n let iqr = q3 - q1;\n let fence1 = q1 - (1.5 * iqr);\n let fence2 = q3 + (1.5 * iqr);\n p5.stroke(lightningFill);\n p5.strokeWeight(r);\n p5.fill(0, 0);\n p5.line(xScale(fence1), h / 2, xScale(q1), h / 2);\n p5.rectMode(p5.CORNERS);\n p5.rect(xScale(q1), h, xScale(q2), 0);\n p5.rect(xScale(q2), h, xScale(q3), 0);\n p5.line(xScale(q3), h / 2, xScale(fence2), h / 2);\n p5.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"// Draw a midgap plot (in lightning role)\nfunction midgap(p5, data, x=0, y=0, w=width, h=height){\n p5.push();\n p5.translate(x, y);\n let sorted = data.sort(d3.ascending);\n let xScale = d3.scaleLinear().domain(d3.extent(sorted)).range([0, w]).clamp(true);\n let q1 = d3.quantile(sorted, 0.25);\n let q2 = d3.quantile(sorted, 0.5);\n let q3 = d3.quantile(sorted, 0.75);\n let iqr = q3 - q1;\n let fence1 = q1 - (1.5 * iqr);\n let fence2 = q3 + (1.5 * iqr);\n p5.stroke(lightningFill);\n p5.strokeWeight(r);\n p5.fill(0, 0);\n p5.line(xScale(fence1), h / 2, xScale(q1), h / 2);\n p5.line(xScale(q3), h / 2, xScale(fence2), h / 2);\n p5.noStroke();\n p5.fill(lightningFill);\n p5.ellipse(xScale(q2), h / 2, r * 2, r * 2);\n p5.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"mean_l = function(p5, data, x=0, y=0, w=width, h=height){\n p5.push();\n p5.translate(x, y);\n let mean = d3.mean(data);\n let xScale = d3.scaleLinear().domain(d3.extent(data)).range([0, w]);\n p5.fill(lightningFill);\n p5.noStroke();\n p5.translate(xScale(mean), h / 2);\n p5.rotate(Math.PI / 4);\n p5.rectMode(p5.RADIUS);\n p5.rect(0, 0, r * 2, r * 2);\n p5.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"interval_l = function(p5, data, x=0, y=0, w=width, h=height){\n p5.push();\n p5.translate(x, y);\n let mean = d3.mean(data);\n let sd = d3.deviation(data);\n let xScale = d3.scaleLinear().domain(d3.extent(data)).range([0, w]);\n p5.fill(lightningFill);\n p5.noStroke();\n p5.ellipse(xScale(mean), h / 2, r * 4, r * 4);\n p5.stroke(lightningFill);\n p5.strokeWeight(r);\n p5.line( xScale(mean - sd), h / 2, xScale(mean + sd), h / 2);\n p5.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"qi_interval = function(p5, data, x=0, y=0, w=width, h=height){\n //Based on the \"qi intervals\" as used in the {{ggdist}} R package, https://cran.r-project.org/web/packages/ggdist/vignettes/dotsinterval.html\n p5.push();\n p5.translate(x, y);\n let sorted = data.sort(d3.ascending);\n let median = d3.median(data);\n let alpha_1 = 0.05;\n let alpha_2 = 1 / 3;\n let qi_fence = d3.quantile(sorted, alpha_1 / 2);\n let qi_fence_2 = d3.quantile(sorted, 1 - (alpha_1 / 2));\n let q1 = d3.quantile(sorted, alpha_2 / 2);\n let q3 = d3.quantile(sorted, 1 - (alpha_2 / 2));\n let xScale = d3.scaleLinear().domain(d3.extent(data)).range([0, w]);\n p5.fill(lightningFill);\n p5.noStroke();\n p5.ellipse(xScale(median), h / 2, r * 4, r * 4);\n p5.stroke(lightningFill);\n p5.strokeWeight(2 * r);\n p5.line( xScale(q1), h / 2, xScale(q3), h / 2);\n p5.strokeWeight(r);\n p5.line( xScale(qi_fence), h / 2, xScale(qi_fence_2), h / 2);\n p5.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"# Statistics","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"function sampleNormal(n = 100, mu = 0, sd = 1){\n let sampleData = [];\n let sampler = d3.randomNormal.source(randomSrc)(mu,sd);\n for(let i = 0; i < n; i++){\n sampleData.push(sampler());\n }\n return sampleData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"randomSrc = d3.randomLcg(seed);","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"function epanechinikov(mu,support){\n var epa = {};\n epa.mu = mu;\n epa.support = support;\n epa.pdf = function(x){\n var dist = x - epa.mu;\n if(Math.abs(dist) > epa.support){\n return 0;\n }\n else{\n var u = dist / epa.support;\n return 0.75 * (1 - (u * u));\n }\n }\n return epa;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"function kde(data, m_bandwidth){\n const bandwidth = m_bandwidth ? m_bandwidth : bandwidthEstimate(data);\n let density = {};\n density.kernels = [];\n for(var i = 0;i < data.length;i++){\n density.kernels.push(epanechinikov(data[i], bandwidth));\n }\n density.pdf = function(x){\n let val = 0;\n for(let i = 0;i (curx + (2 * markSize))) {\n curIndex++;\n bins[curIndex] = {\"value\": datum, \"count\": 1, \"sum\": datum};\n }\n else {\n bins[curIndex].count++;\n bins[curIndex].sum+= data[i];\n bins[curIndex].value = bins[curIndex].sum / bins[curIndex].count;\n }\n curx = xScale(bins[curIndex].value);\n }\n return bins;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"meanCenter = function(data) {\n let mean = d3.mean(data);\n let offset = mean / data.length;\n return data.map(d => d - offset);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"quartiles = function(data) {\n let sorted = data.sort(d3.ascending);\n return {\"q1\": d3.quantile(data, 0.25), \"q2\": d3.quantile(data, 0.5), \"q3\": d3.quantile(data, 0.75)};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"constrain = function(data){\n //force the data into [-1, 1]\n let mapper = d3.scaleLinear().domain(d3.extent(data)).range([-1, 1]);\n return data.map(d => mapper(d));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"standardize = function(data){\n let mu = d3.mean(data);\n let sd = d3.deviation(data);\n return data.map(d => (d - mu) / sd);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"moment = function(data, k) {\n // This method is not mathematically stable, don't try this at home, kids.\n let sum = 0;\n let mean = d3.mean(data);\n if(k===1) {\n return mean;\n }\n for(const datum of data){\n let val = datum - mean;\n sum+= Math.pow(val, k);\n }\n sum/= data.length;\n return sum;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"# Image Processing","pinned":false,"hidden":false,"mode":"md"},{"id":516,"value":"bDiff = function(color1, color2) {\n const c1 = d3.rgb(color1);\n const c2 = d3.rgb(color2);\n\n return c1.r==c2.r && c1.g==c2.g && c1.b==c2.b && c1.opacity==c2.opacity ? 0 : 1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"function rectDiff(p5, x1, x2, y1, y2, w, h) {\n const d = p5.pixelDensity();\n let sumDiff = 0;\n const n = w * h;\n let i1, i2, c1 ,c2;\n\n const image1 = p5.get(x1, y1, w, h);\n image1.loadPixels();\n const image2 = p5.get(x2, y2, w, h);\n image2.loadPixels();\n i1 = image1.pixels;\n i2 = image2.pixels;\n for(let i = 0;i