31:T128f,function plot(x, y, options = {}) { if (!Array.isArray(x)) throw new TypeError( "First argument (x) must be an array of numeric values, or an array of objects with exactly two keys per object." ); // x is an array, now find out if it's an array of value or an array of objects let dataframe; if (x.every((v) => typeof v === "object")) { // x is a dataframe const keys = Object.keys(x[0]); if (keys.length !== 2) throw new TypeError( "Array of objects in first argument needs to have exactly two keys (x and y)." ); dataframe = x .map((v) => ({ x: v[keys[0]], y: v[keys[1]] })) .filter( (v, i) => !isNaN(v.x) && v.x !== undefined && v.x !== null && !isNaN(v.y) && v.y !== undefined && v.y !== null ); options.xlab = options.xlab === undefined ? keys[0] : undefined; options.ylab = options.ylab === undefined ? keys[1] : undefined; x = dataframe.map((v) => v.x); y = dataframe.map((v) => v.y); } else if (x.filter((v) => typeof v === "number").length === 0) { throw new TypeError("First argument (x) does not contain numeric values"); } else { // x is an array of values if (!y) y = x.map((r, i) => i); dataframe = x .filter( (x, i) => !isNaN(x) && x !== undefined && x !== null && !isNaN(y[i]) && y[i] !== undefined && y[i] !== null ) .map((x, i) => ({ x: x, y: y[i] })); } const div = html`

`; div.style.margin = 20; let minX = d3.min(x); let maxX = d3.max(x); // add a 10th of the whole range as left and right padding const paddingX = (maxX - minX) / 10; minX = minX - paddingX; maxX = maxX + paddingX; let minY = d3.min(y); let maxY = d3.max(y); // add a 10th of the whole range as left and right padding const paddingY = (maxY - minY) / 10; minY = minY - paddingY; maxY = maxY + paddingY; // margins and widths const base = Math.min(width, 400); let margin = { left: 29, right: 8, top: 13, bottom: 24 }; if (options.xlab && !options.ylab) { margin = { left: 29, right: 8, top: 13, bottom: 60 }; } else if (!options.xlab && options.ylab) { margin = { left: 90, right: 8, top: 13, bottom: 24 }; } else if (options.xlab && options.ylab) { margin = { left: 90, right: 8, top: 13, bottom: 60 }; } const innerWidth = base - margin.left - margin.right; const innerHeight = base - margin.top - margin.bottom; // append CSS to stylesheet var style = document.createElement("style"); style.type = "text/css"; style.innerHTML = ` circle { fill: none; /*fill-opacity: .1;*/ stroke: #000; stroke-opacity: 1; } .axis line { stroke: #ddd; } .axis .baseline line { stroke: #555; } .axis .domain { display: none; } `; document.getElementsByTagName("head")[0].appendChild(style); // setup axis const xScale = d3.scaleLinear().domain([minX, maxX]).range([0, innerWidth]); const yScale = d3.scaleLinear().domain([minY, maxY]).range([innerHeight, 0]); const xAxisQuadratic = d3.axisBottom(xScale).tickSize(innerHeight + 10); const yAxisQuadratic = d3.axisLeft(yScale).tickSize(innerWidth + 10); // draw the plot const svg = d3.select( DOM.svg( innerWidth + margin.left + margin.right, innerHeight + margin.top + margin.bottom ) ); const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .attr("class", "axis") .call(xAxisQuadratic) .selectAll(".tick") .classed("baseline", (d) => d === 0); if (options.xlab) { g.append("text") .attr( "transform", "translate(" + innerWidth / 2 + " ," + (innerHeight + margin.top + 35) + ")" ) .style("text-anchor", "middle") .style("font-size", 12) .text(options.xlab); } g.append("g") .attr("class", "axis") .attr("transform", `translate(${innerWidth})`) .call(yAxisQuadratic) .selectAll(".tick") .classed("baseline", (d) => d === 0); if (options.ylab) { g.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - 65) .attr("x", 0 - innerHeight / 2) .attr("dy", "1em") .style("text-anchor", "middle") .style("font-size", 12) .text(options.ylab); } g.selectAll("circle") .data(dataframe) .enter() .append("circle") .attr("r", 3) .attr("cx", (d) => xScale(d.x)) .attr("cy", (d) => yScale(d.y)); if (options.main) { const h4 = html`

${options.main}`; div.append(h4); } div.append(svg.node()); return div; return svg.node(); }32:T713,function corrplot( correlationMatrix, options = { test: "Correlation", domain: [-1, 1] } ) { const test = options.test || "Correlation"; let domain = options.domain ? options.domain : test === "Correlation" ? [-1, 1] : [ d3.min(correlationMatrix.map(row => row[test.toLowerCase()])), d3.max(correlationMatrix.map(row => row[test.toLowerCase()])) ]; return embed( vl .markRect({ stroke: 'white', strokeWidth: 5 }) .data(correlationMatrix) .encode( vl .x() .fieldO('column_x') .sort(options.sort) .title(null) .axis({ orient: 'top', labelAlign: 'bottom', domain: false }), vl .y() .fieldO('column_y') .sort(options.sort) .title(null) .axis({ domain: false }), vl .color() .fieldQ(test.toLowerCase()) .scale({ //range: ['tomato', 'white', 'steelblue'], scheme: options.scheme || 'redblue', domain: domain }) .title(options.title || test), vl.tooltip([ { field: 'column_x', type: 'ordinal', title: 'X' }, { field: 'column_y', type: 'ordinal', title: 'Y' }, { field: test.toLowerCase(), type: 'quantitative', title: test } ]) ) .config({ axis: { grid: true, gridColor: "#FFFFFF" } }) .toSpec() ); //.render() // unfortuntately vega-lite fails to render the plot directly, // therefore we take a detour through vegas own embed function // which seems to work }33:T4cf,function cor(x, y, options = {}) { // Error handling if (!x) { throw new Error( "You must pass a dataframe (array of object) as the first argument." ); } else if (!Array.isArray(x)) { throw new Error("The first argument must be an array (of objects)."); } if (!y) { const cols = Object.keys(x[0]).filter( column => column && !isNaN(x[0][column]) ); const out = []; for (let i = 0; i < cols.length; i++) { for (let j = 0; j < cols.length; j++) { const colx = cols[i]; const coly = cols[j]; const xValues = x.map(row => row[colx]); const yValues = x.map(row => row[coly]); const obj = { column_x: colx, column_y: coly, correlation: pearson(xValues, yValues) }; out.push(obj); } } return out; } else if (options.test) { const r = pearson(x, y); //const t = r * Math.sqrt((x.length - 2) / (1 - Math.pow(r, 2))); const t = (r / Math.sqrt(1 - Math.pow(r, 2))) * Math.sqrt(x.length - 2); const df = x.length - 2; const pValue = calcTprobability(t, df) * 2; return { r, t, df, pValue }; } else { return pearson(x, y); } }34:Tc6f,function hist(arr, options = {}) { if (!Array.isArray(arr)) throw TypeError( "First argument (x) must be an array of value or objects (with a single key, x)." ); let data; if (arr.every((v) => typeof v === "object")) { // array of objects const keys = Object.keys(arr[0]); if (keys.length !== 1) throw new TypeError( "Array of objects in first argument needs to have exactly one key." ); data = Object.assign( arr.map((v) => v[keys[0]]), { x: options.xlab || keys[0], y: options.ylab || "Frequency" } ); } else if (arr.filter((v) => typeof v === "number").length === 0) { throw new TypeError( "First argument (x) neither contains just numeric values, nor just objects." ); } else { // array of values data = Object.assign(arr, { x: options.xlab, y: options.ylab || "Frequency" }); } const base = Math.min(width, 400); let margin = { left: 50, right: 8, top: 13, bottom: 24 }; if (data.x && !data.y) { margin = { left: 50, right: 8, top: 13, bottom: 60 }; } else if (!data.x && data.y) { margin = { left: 90, right: 8, top: 13, bottom: 24 }; } else if (data.x && data.y) { margin = { left: 90, right: 8, top: 13, bottom: 60 }; } const innerWidth = base - margin.left - margin.right; const innerHeight = base - margin.top - margin.bottom; const height = 400; const color = "black"; const thresholds = d3.thresholdSturges(data); const bins = d3.bin().thresholds(thresholds)(data); const svg = d3.select( DOM.svg( innerWidth + margin.left + margin.right, innerHeight + margin.top + margin.bottom ) ); const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const x = d3 .scaleLinear() .domain([bins[0].x0, bins[bins.length - 1].x1]) .range([0, innerWidth]); const y = d3 .scaleLinear() .domain([0, d3.max(bins, (d) => d.length)]) .nice() .range([innerHeight, 0]); g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call( d3 .axisBottom(x) .ticks(base / 80) .tickSizeOuter(0) ); if (data.x) { g.append("text") .attr( "transform", "translate(" + innerWidth / 2 + " ," + (innerHeight + margin.top + 35) + ")" ) .style("text-anchor", "middle") .style("font-size", 12) .text(data.x); } g.append("g") .call(d3.axisLeft(y).ticks(height / 40)) .call((g) => g.select(".domain").remove()); if (data.y) { g.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - 65) .attr("x", 0 - innerHeight / 2) .attr("dy", "1em") .style("text-anchor", "middle") .style("font-size", 12) .text(data.y); } g.append("g") .attr("fill", color) .selectAll("rect") .data(bins) .join("rect") .attr("x", (d) => x(d.x0) + 1) .attr("width", (d) => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", (d) => y(d.length)) .attr("height", (d) => y(0) - y(d.length)); return svg.node(); }35:T53e,// Source: https://memory.psych.mun.ca/tech/js/correlation.shtml // Takes two arrays of numbers function pearson(x, y) { let shortestArrayLength = 0; if (x.length == y.length) { shortestArrayLength = x.length; } else if (x.length > y.length) { shortestArrayLength = y.length; console.error( 'x has more items in it, the last ' + (x.length - shortestArrayLength) + ' item(s) will be ignored' ); } else { shortestArrayLength = x.length; console.error( 'y has more items in it, the last ' + (y.length - shortestArrayLength) + ' item(s) will be ignored' ); } let xy = []; let x2 = []; let y2 = []; for (let i = 0; i < shortestArrayLength; i++) { xy.push(x[i] * y[i]); x2.push(x[i] * x[i]); y2.push(y[i] * y[i]); } let sum_x = 0; let sum_y = 0; let sum_xy = 0; let sum_x2 = 0; let sum_y2 = 0; for (let i = 0; i < shortestArrayLength; i++) { sum_x += x[i]; sum_y += y[i]; sum_xy += xy[i]; sum_x2 += x2[i]; sum_y2 += y2[i]; } const step1 = shortestArrayLength * sum_xy - sum_x * sum_y; const step2 = shortestArrayLength * sum_x2 - sum_x * sum_x; const step3 = shortestArrayLength * sum_y2 - sum_y * sum_y; const step4 = Math.sqrt(step2 * step3); const answer = step1 / step4; return answer; }36:T71e,function View(data) { if (!data) throw Error('No dataframe/matrix passed as first argument'); if (!Array.isArray(data) && typeof data === 'object') data = [data] if ( Array.isArray(data) && !Array.isArray(data[0]) && typeof data[0] === 'object' ) { if (data[0].column_x && data[0].column_y) { // data is a matrix resulting from cor/cov/var analysis // re-shape the data to be in matrix form const columns = [...new Set(data.map(row => row.column_x))]; const matrix = columns.map(column => { const entries = data.filter(row => row.column_y === column); return { "": column, ...entries.reduce((obj, cur) => { obj[cur.column_x] = cur.correlation || cur.covariance; return obj; }, {}) }; }); return table(matrix); } else { // data is a dataframe return table(data); } } else { // data is an array, check if it's a nested array (matrix like) or single column array if (Array.isArray(data[0])) { if (Array.isArray(data[0][0])) { // higher order matrices will be displayed the same way as single column arrays return table( data.map((val, i) => ({ Index: i, Type: typeof val, Value: val })) ); } else { // it's a matrix like array! return table( data.map((row, i) => { return { "Rows \\ Columns": "Row " + i, ...row.reduce((obj, entry, j) => { obj['Column ' + j] = entry; return obj; }, {}) }; }) ); } } else { // it's a single column array! return table( data.map((val, i) => ({ Index: i, Type: typeof val, Value: val })) ); } } }37:[] 2f:{"title":"Correlation, Variance And Covariance (Matrices)","cells":[{"id":0,"value":"md`# Correlation, Variance And Covariance (Matrices)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":778,"value":"md`This notebook is work-in-progress!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"cars = require('@observablehq/cars')","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"summary(cars, { ignoreNonNumeric: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":696,"value":"corMatrix = cor(cars)","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"corrplot(corMatrix)","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"cor(cars.map(row => row.Miles_per_Gallon), cars.map(row => row.Horsepower), {\n test: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":518,"value":"vari(cars.map(row => row.Cylinders))","pinned":true,"hidden":false,"mode":"ojs"},{"id":464,"value":"viewof selectedDataset = Select(datasets.map(entry => entry.Title), {\n value: \"Motor Trend Car Road Tests\",\n label: \"Selected dataset\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"cov(cars.map(row => row.Miles_per_Gallon), cars.map(row => row.Horsepower))","pinned":true,"hidden":false,"mode":"ojs"},{"id":552,"value":"cov(\n cars.map((row) => row.Miles_per_Gallon),\n cars.map((row) => row.Cylinders)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":568,"value":"variancesAndCovariances = cov(cars)","pinned":true,"hidden":false,"mode":"ojs"},{"id":593,"value":"corrplot(variancesAndCovariances, { test: 'Covariance', domain: [-100, 100] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":775,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":623,"value":"View(variancesAndCovariances)","pinned":true,"hidden":false,"mode":"ojs"},{"id":631,"value":"View([[1, 2, 3], [3, 4, 5], [6, 7, 8, 9, 10]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"hist(cars.map((car) => car.Cylinders))","pinned":true,"hidden":false,"mode":"ojs"},{"id":754,"value":"import { data } from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":765,"value":"plot(dataset2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":767,"value":"plot([1, 2, 3])","pinned":true,"hidden":false,"mode":"ojs"},{"id":761,"value":"dataset2 = [\n { x: -3, y: 7.5 },\n { x: -2, y: 3 },\n { x: -1, y: 0.5 },\n { x: 0, y: 1 },\n { x: 1, y: 3 },\n { x: 2, y: 6 },\n { x: 3, y: 14 }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":758,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"function cov(x, y) {\n if (!x) throw Error('Vector (array) of values required as first argument');\n else if (!y && typeof x[0] === 'object') {\n const cols = Object.keys(x[0]).filter(\n column => column && !isNaN(x[0][column])\n );\n const out = [];\n for (let i = 0; i < cols.length; i++) {\n for (let j = 0; j < cols.length; j++) {\n const colx = cols[i];\n const coly = cols[j];\n const xValues = x.map(row => row[colx]);\n const yValues = x.map(row => row[coly]);\n const obj = {\n column_x: colx,\n column_y: coly,\n covariance:\n colx === coly\n ? d3.variance(xValues)\n : calcCovariance(xValues, yValues)\n };\n out.push(obj);\n }\n }\n return out;\n } else if (!y) {\n throw Error(\n 'Missing y vector (array) as second argument for covariance calculation'\n );\n } else {\n return calcCovariance(x, y);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"function vari(x, y) {\n if (!x) throw Error('Vector (array) of values required as first argument');\n else if (y) {\n return cov(x, y);\n } else if (typeof x[0] === 'object') {\n return cov(x);\n } else {\n return d3.variance(x);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"function calcCovariance(x, y) {\n const xMean = x.reduce((mean, cur, i, arr) => (mean += cur / arr.length), 0);\n const yMean = y.reduce((mean, cur, i, arr) => (mean += cur / arr.length), 0);\n const summedDifferences = x.reduce((sum, xCur, i) => {\n sum += (xCur - xMean) * (y[i] - yMean);\n return sum;\n }, 0);\n return (1 / (x.length - 1)) * summedDifferences;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"dataset = d3.csv(\n datasets.find(row => row.Title === selectedDataset).CSV,\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"function calcTprobability(X, df) {\n let betacdf, tcdf;\n if (df <= 0) {\n throw Error('Degrees of freedom must be positive');\n } else {\n const A = df / 2;\n const S = A + 0.5;\n const Z = df / (df + X * X);\n const BT = Math.exp(\n LogGamma(S) -\n LogGamma(0.5) -\n LogGamma(A) +\n A * Math.log(Z) +\n 0.5 * Math.log(1 - Z)\n );\n\n if (Z < (A + 1) / (S + 2)) {\n betacdf = BT * Betinc(Z, A, 0.5);\n } else {\n betacdf = 1 - BT * Betinc(1 - Z, 0.5, A);\n }\n if (X < 0) {\n tcdf = betacdf / 2;\n } else {\n tcdf = 1 - betacdf / 2;\n }\n }\n // tcdf = Math.round(tcdf * 100000) / 100000;\n return tcdf;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"function LogGamma(Z) {\n const S =\n 1 +\n 76.18009173 / Z -\n 86.50532033 / (Z + 1) +\n 24.01409822 / (Z + 2) -\n 1.231739516 / (Z + 3) +\n 0.00120858003 / (Z + 4) -\n 0.00000536382 / (Z + 5);\n const LG =\n (Z - 0.5) * Math.log(Z + 4.5) - (Z + 4.5) + Math.log(S * 2.50662827465);\n return LG;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"function Betinc(X, A, B) {\n let A0 = 0;\n let B0 = 1;\n let A1 = 1;\n let B1 = 1;\n let M9 = 0;\n let A2 = 0;\n let C9;\n while (Math.abs((A1 - A2) / A1) > 0.00001) {\n A2 = A1;\n C9 = (-(A + M9) * (A + B + M9) * X) / (A + 2 * M9) / (A + 2 * M9 + 1);\n A0 = A1 + C9 * A0;\n B0 = B1 + C9 * B0;\n M9 = M9 + 1;\n C9 = (M9 * (B - M9) * X) / (A + 2 * M9 - 1) / (A + 2 * M9);\n A1 = A0 + C9 * A1;\n B1 = B0 + C9 * B1;\n A0 = A0 / B1;\n B0 = B0 / B1;\n A1 = A1 / B1;\n B1 = 1;\n }\n return A1 / A;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"embed = require('vega-embed@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"datasets = d3\n .csv(\n \"https://raw.githubusercontent.com/vincentarelbundock/Rdatasets/master/datasets.csv\",\n d3.autoType\n )\n .then(res => {\n return res.filter(row => row.Package === 'datasets');\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"import { summary } from 'c3ef6d4e928e9ece'","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"import { Select } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"import { table } from '@tmcw/tables/2'","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"vega = require('vega-lite')","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"vl = require('vega-lite-api')","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}