31:T5e9,createCanvas = colorPaletteOffset => { const context = DOM.context2d(width, height); const canvas = context.canvas; // An assortment of randomly-positioned colorful circles. const circles = (canvas.value = d3.range(numPoints).map(i => ({ x: xScale(i), y: height / 2, index: i, color: d3.schemePaired[(2 * i + colorPaletteOffset) % 10] }))); // Whenever the circles move, redraw the canvas. function render() { context.clearRect(0, 0, width, height); for (const { x, y, index, color, active } of circles) { context.beginPath(); context.moveTo(x + radius, y); context.arc(x, y, radius, 0, 2 * Math.PI); context.fillStyle = color; context.fill(); if (active) { context.lineWidth = 2; context.stroke(); } let fontSize = 16; context.beginPath(); context.textAlign = 'center'; context.font = `${fontSize}px Helvetica, Arial, sans-serif`; // context.fillStyle = d3.schemePaired[(2 * index + 1) % 10]; context.fillStyle = '#fff'; // let labels = ['a', 'b', 'c', 'd'] let label = index + 1; // xValueScale(x); // index + 1 context.fillText(label, x, y + fontSize / 3); context.fill(); } canvas.dispatchEvent(new CustomEvent("input")); } // Bind the drag behavior for interaction. d3.select(context.canvas).call( drag(circles).on("start.render drag.render end.render", render) ); // Render the initial canvas. render(); return canvas; }32:T42b,drag = circles => { // Choose the circle that is closest to the pointer for dragging. function dragsubject(event) { let subject = null; let distance = maxDistance; for (const c of circles) { let d = Math.hypot(event.x - c.x, event.y - c.y); if (d < distance) { distance = d; subject = c; } } return subject; } // When starting a drag gesture, move the subject to the top and mark it as active. function dragstarted(event) { circles.splice(circles.indexOf(event.subject), 1); circles.push(event.subject); event.subject.active = true; } // When dragging, update the subject’s position. function dragged(event) { event.subject.x = Math.max(0, Math.min(width, event.x)); event.subject.y = height / 2; } // When ending a drag gesture, mark the subject as inactive again. function dragended(event) { event.subject.active = false; } return d3 .drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }33:[] 2f:{"title":"Computing Distance Correlation","cells":[{"id":0,"value":"md`# Computing Distance Correlation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2446,"value":"md`By [Boris Vishnevsky](https://observablehq.com/@borisvish/) and [Yuri Vishnevsky](https://observablehq.com/@yurivish/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`The goal of this notebook is to present a recently developed approach\nfor discovering dependencies hidden in the datasets. You can read the original paper [here](https://arxiv.org/abs/0803.4101), and play with an interactive illustration in an [accompanying notebook](https://observablehq.com/d/b1010c7089fa65a9). In this notebook we will show how to calculate the sample [Distance correlation](https://en.wikipedia.org/wiki/Distance_correlation).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2250,"value":"md` The chart below shows one-dimensional vectors X and Y, each with four coordinates. **Move the colored data points to change their coordinates.** Each move triggers re-calculations of the matrices _edX_ or _edY_ which contains the pairwise Euclidean distances between elements of the vectors X or Y. The calculation of the distance correlation between vectors X and Y is detailed below and is based on the matrices _edX_ and _edY_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2044,"value":"md`Vector ${tex`X = \\left(\\begin{matrix}\n${strX}\n\\end{matrix}\\right)`}:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewof circlesX = (reset, createCanvas(1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2036,"value":"md`Vector ${tex`Y = \\left(\\begin{matrix}\n${strY}\n\\end{matrix}\\right) `}:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"viewof circlesY = (reset, createCanvas(1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"{\n return tex`Euclidean\\;\\;Distances\\;\\;edX = ${texMatrix(\n edArrX\n )} \\;\\;\\;\\; Euclidean\\;\\;Distances\\;\\; edY = ${texMatrix(edArrY)} `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"tex`\n\\bold{distanceCor(X,Y) = ${distCor}} {\\;\\;\\; \\;\\;\\;\\;\\;\\;} \n\\bold{pearsonCor(X,Y) = ${pearson_cor_formatted}} \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1415,"value":"viewof reset = Button('Reset')","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"md`The distance correlation was initially introduced in [2007](https://www.semanticscholar.org/paper/Measuring-and-testing-dependence-by-correlation-of-Sz%C3%A9kely-Rizzo/d966257057f3f06ee7bf9041509f337ce9273ec9). It is based the on theory of stochastic processes and allows for a few [alternative](https://projecteuclid.org/euclid.aoas/1267453933) formulations. Without going into the theory we are going detail here the amazingly simple [calculations](https://arxiv.org/abs/0803.4101) of the empirical (sample) distance correlation which are based on the distance covariance of scaled Euclidean distances between elements of the samples. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1778,"value":"md`Pearson correlation does not characterize independence. When two variables or datasets are independent their Pearson correlation is equal to zero. But the reverse is not true. Zero Pearson correlation does not guarantee independence. Contrary, distance correlation do guarantee statistical independence of datasets when it's equal to zero.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1711,"value":"md`\nThe algorithm for calulating distance covariance is as follows. \nWe take the first variable and calculate all pairwise distances between its sample\nvalues. We do the same for the second variable. We center each distance matrix to make \nits column and rows means equal to zero. Such [double centering](https://en.wikipedia.org/wiki/Centering_matrix) is a commonly used in multidimensional scaling. Then we define a matrix that holds [componentwise products](https://en.wikipedia.org/wiki/Hadamard_product_(matrices) of the two centered distance matrices. Finally, we average the entries of the Hadamard matrix and take square root of the resulting number. This gives us the sample distance covariance between the two variables.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`\nLet's describe step-by-step the algorithm sketched above. We will illustrate each step by reference to the small data set example at the top of the article:\n- Step 1. We have two one-dimensional vectors with four data points in each. In our example those are the vectors X and Y. \n- Step 2. Compute two matrices, each contained sixteen pairwise euclidean distances between four data points of variables X and Y. Those are matrices edX and edY. \n- Step 3. Perform double centering on each matrix. The row and column means and the overall mean of the elements all become zero.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"md`\n- Step 4. Multiply the two resultant matrices elementwise and compute the sum, or in other words, compute their summed cross-product.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1755,"value":"md`\n- Step 5. Calculate the value of the distance covariance. For this we need to calulate the average by dividing the result of the step 5 by the squared number of elements. Finally, take square root of result. \n` // Math.sqrt( prod / (N * N))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1758,"value":"md`\n- Step 6. Distance variances are the distance covariances between X and X, and between Y and Y. \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1762,"value":"md`\n\n- Step 7. Analogously to Pearson correlation, the distance correlation is obtained from these three numbers — the distance covariance and the pair of distance variances.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2229,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2289,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1746,"value":"cX = doubleCenter(edArrX)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1749,"value":"cY = doubleCenter(edArrY)","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"radius = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"strX = X.toArray().toString()","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"strY = Y.toArray().toString()","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"X = mathjs.matrix(\n circlesX\n .map(d => d)\n .sort((a, b) => d3.ascending(a.index, b.index))\n .map(d => xValueScale(d.x))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"Y = mathjs.matrix(\n circlesY\n .map(d => d)\n .sort((a, b) => d3.ascending(a.index, b.index))\n .map(d => xValueScale(d.x))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"numPoints = 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"xScale = d3.scaleLinear([0, numPoints - 1], [radius + 1, width - radius - 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"xValueScale = d3\n .scaleLinear()\n .domain(xScale.range())\n .rangeRound([0, 100])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"circlesX","pinned":true,"hidden":false,"mode":"ojs"},{"id":1035,"value":"circlesY","pinned":true,"hidden":false,"mode":"ojs"},{"id":1029,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"rowAve = edArrX.map(d=>d3.mean(d)) // return array of the means of rows","pinned":true,"hidden":false,"mode":"ojs"},{"id":1213,"value":"colAve = transpose(edArrX).map(d=>d3.mean(d)) // col ave using transpose","pinned":false,"hidden":false,"mode":"ojs"},{"id":1184,"value":"edArrX","pinned":false,"hidden":false,"mode":"ojs"},{"id":1181,"value":"edArrX.map(d=>d3.max(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1198,"value":"transpose = M => {\n let m = M.length; // the length of M is the number of rows\n let n = M[0].length; // the length of an element (row) of M is the number of columns\n return Array.from({ length: n }, (_, i) =>\n Array.from({ length: m }, (_, j) => M[j][i])\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"transpose([\n [1,2,3,4],\n [5,6,7,8]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"doubleCenter(edArrX)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"dc = doubleCenter(edArrX)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1360,"value":"dCorr = dCor(edArrX, edArrY)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1553,"value":"pearson_cor = dl.cor(X.toArray(), Y.toArray())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1581,"value":"pearson_cor_formatted = format(pearson_cor)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1570,"value":"format = d3.format('.4f')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1618,"value":"distCor = format(dCorr)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1347,"value":"function dCor(X, Y) {\n let cX = doubleCenter(X);\n let cY = doubleCenter(Y);\n let dCovXY = dCov(cX, cY)\n let dVarX = dCov(cX, cX)\n let dVarY = dCov(cY, cY)\n return dCovXY/Math.sqrt((dVarX*dVarY))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1324,"value":"dVarY = dCov(edArrYcentred,edArrYcentred)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1322,"value":"dVarX= dCov(edArrXcentred,edArrXcentred)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1338,"value":"dcov= dCov(edArrXcentred,edArrYcentred)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"// input: distance matrix\nfunction doubleCenter(x) {\n let centered = [];\n const rowsAve = x.map(d => d3.mean(d));\n const grandAve = d3.mean(rowsAve);\n for (let i = 0; i < x.length; i++) {\n let rowArr = [];\n for (let j = 0; j < x.length; j++) {\n rowArr[j] = x[i][j] - rowsAve[i] - rowsAve[j] + grandAve;\n }\n centered.push(rowArr);\n }\n return centered;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1267,"value":"edArrXcentred = doubleCenter(edArrX)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1310,"value":"edArrYcentred = doubleCenter(edArrY)","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"edArrX = edArr(X) // 1d matrix test","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"edArrY = edArr(Y) // 1d matrix test","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"edArr(Y) // 1d vector","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"maxDistance = 100 //Infinity // Limit the search distance, if desired.","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = 2 * radius + 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"X.size()","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"function edArr(X) {\n // accept vector and return matrix of euclidian distances\n let n = X._data.length;\n let arr = new Array(n);\n for (let i = 0; i < n; i++) {\n arr[i] = new Array(n);\n for (let j = 0; j < n; j++) {\n let di = X.size();\n if (di.length === 1) {\n arr[i][j] = Math.sqrt(Math.pow(X._data[i] - X._data[j], 2));\n } else {\n let sq = 0;\n for (let k = 0; k < di[1]; k++) {\n sq = sq + Math.pow(X._data[i][k] - X._data[j][k], 2);\n }\n arr[i][j] = Math.sqrt(sq);\n }\n }\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":" // dCov^2 = (sum of) pairwise products of X and Y divided by N**2\ndCov = (X, Y) => {\n let prod = 0;\n let N = X.length\n for (let i = 0; i < N; i++) {\n for (let j = 0; j < N; j++) {\n prod += X[i][j] * Y[i][j]\n }\n }\n return Math.sqrt( prod / (N * N))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":731,"value":"\nmathjs = require(\"mathjs@7.6.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"import { texMatrix } from '@tonyhschu/linear-algebra-homework-matrix-matrix-multiplication' //A little helper function for turning a MathJS matrix into latex-ready string.","pinned":false,"hidden":false,"mode":"ojs"},{"id":1413,"value":"import{Button}from'@observablehq/inputs'\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1550,"value":"dl = require('datalib')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}