2f:T8b1,data = { const n = 100; function normalize(key) { const [min, max] = d3.extent(data, (d) => d[key]); const mag = max - min; data.forEach((d) => { d[key] -= min; d[key] /= mag; }); } const rngSource = d3.randomLcg(seed); const genAge = d3.randomUniform.source(rngSource)(0, 1); const genLng = d3.randomUniform.source(rngSource)(0, 1); const genLat = d3.randomUniform.source(rngSource)(0, 1); const genScore = d3.randomNormal.source(rngSource)(0, 0.5); const genUniform = d3.randomUniform.source(rngSource)(0, 1); const genIncome = d3.randomNormal.source(rngSource)(50000, 50000); const genHeight = d3.randomNormal.source(rngSource)(170, 7); const data = Array.from({ length: n }, () => { const age = genAge(); const lng = genLng(); const lat = genLat(); let lngBias = 2 * (lng - 0.5); lngBias *= 3 * Math.abs(lngBias); let ageBias = 2 * (age - 0.5); ageBias = 3 / (1 + Math.exp(-15 * ageBias)); // const ehh = 2 * (lng - 0.5) * const ehh = hhFactor * genScore() + lngBias - ageBias; const whh = hhFactor * genScore() - lngBias - ageBias; let inc = -1; while (inc <= 0) { inc = genIncome(); } inc = inc + (genUniform() < 0.075 ? 5e5 : 0); const height = genHeight(); return { age, height, lng, lat, // lngBias, ehh, whh, inc // cl, }; }); ["ehh", "whh"].forEach(normalize); data.forEach((d) => { const hhScore = (d.ehh + d.whh) / 2; d.cl = 1 - hhScore + clFactor * genScore(); }); normalize("cl"); const scoreScale = d3.scaleLinear().rangeRound([0, maxScore]); const scales = { age: d3.scaleLinear().rangeRound([15, 50]), lng: d3.scaleLinear().rangeRound([-124, -65]), lat: d3.scaleLinear().rangeRound([24, 48]), ehh: scoreScale, whh: scoreScale, cl: scoreScale }; const keys = Object.keys(data[0]).filter((key) => scales.hasOwnProperty(key)); data.forEach((d) => { keys.forEach((key) => { d[key] = scales[key](d[key]); }); // if (d.age > 40 && genUniform() < 0.2) { // d.age *= 1.8; // d.whh /= 2; // d.egg /= 2; // } }); return data; }30:[] 2d:{"title":"Synthetic demo data - music preferences","cells":[{"id":0,"value":"# Synthetic demo data - music preferences","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"viewof seed = Inputs.range([0, 1], {\n label: \"Seed\",\n width: \"100%\",\n value: 0.122343360042033\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"viewof clFactor = Inputs.range([0.1, 10], {\n label: \"clFactor\",\n width: \"100%\",\n value: 0.1,\n transform: Math.log\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"viewof maxScore = Inputs.range([5, 100], {\n step: 1,\n transform: Math.log,\n label: \"maxScore\",\n width: \"100%\",\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"// data.map((d) => ({ ...d, age: d.age + Math.random() * 0.1 }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":169,"value":"viewof fontSizePixels = Inputs.range([10, 40], { step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"function plot(options) {\n const p = Plot.plot({\n // marginLeft: fontSizePixels * 2 + 10,\n // marginRight: fontSizePixels * 2 + 10,\n // marginTop: fontSizePixels + 30,\n // marginBottom: fontSizePixels * 2 + 10,\n // width,\n // height: width / 1.6,\n ...options,\n x: {\n ticks: Math.round(width / 100),\n nice: true,\n ...options.x\n },\n y: {\n ticks: Math.round(width / 1.6 / 100),\n nice: true,\n ...options.y\n }\n });\n\n // d3.select(p).classed(\"plot\", true);\n\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"colorLegend([\n { label: \"Median\", color: \"blue\" },\n { label: \"Mean\", color: \"red\" }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"plot({\n x: {\n tickFormat: \"s\",\n label: \"Income →\"\n },\n marks: [\n Plot.rectY(\n data,\n Plot.binX({ y: \"count\", thresholds: 30 }, { x: \"inc\", fill: \"#ccc\" })\n ),\n Plot.ruleX([d3.mean(data, (d) => d.inc)], {\n stroke: \"red\",\n strokeWidth: 3\n }),\n Plot.ruleX([d3.median(data, (d) => d.inc)], {\n stroke: \"blue\",\n strokeWidth: 3\n }),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"Plot.plot({\n y: {\n label: \"Hip hop scores\"\n },\n marks: [\n Plot.dot(data, { x: \"lng\", y: \"ehh\", stroke: \"blue\" }),\n Plot.dot(data, { x: \"lng\", y: \"whh\", stroke: \"orange\" })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"sampleCorrelation(\"lng\", \"whh\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"plot({\n // width: width * 0.8,\n // height: width * 0.8,\n marks: [Plot.dot(data, { x: \"lng\", y: \"whh\", r: 7, fill: \"orange\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"sampleCorrelation(\"lng\", \"ehh\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"plot({\n // width: width * 0.8,\n // height: width * 0.8,\n marks: [Plot.dot(data, { x: \"lng\", y: \"ehh\", r: 7, fill: \"blue\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"plot({\n // width: width * 0.8,\n // height: width * 0.8,\n marks: [\n Plot.dot(data, { x: \"lng\", y: \"whh\", r: 7, fill: \"orange\" }),\n\n Plot.dot(data, { x: \"lng\", y: \"ehh\", r: 7, fill: \"blue\" })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"sampleCorrelation(\"cl\", \"whh\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"sampleCorrelation(\"cl\", \"ehh\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"colorLegend([\n { label: \"West Coast\", color: \"orange\" },\n { label: \"East Coast\", color: \"blue\" }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"plot({\n // width: width * 0.8,\n // height: width * 0.8,\n y: {\n label: \"↑ Hip hop\"\n },\n marks: [\n Plot.dot(data, { x: \"cl\", y: \"whh\", r: 7, fill: \"orange\" }),\n Plot.dot(data, { x: \"cl\", y: \"ehh\", r: 7, fill: \"blue\" })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"sampleCorrelation(\"lng\", \"cl\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"plot({\n // width: width * 0.8,\n // height: width * 0.8,\n marks: [Plot.dot(data, { x: \"lng\", y: \"cl\", r: 7, fill: \"blue\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"viewof hhFactor = Inputs.range([0.1, 10], {\n label: \"hhFactor\",\n width: \"100%\",\n value: 2,\n transform: Math.log\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"function sampleCorrelation(key1, key2) {\n return ss.sampleCorrelation(\n data.map((d) => d[key1]),\n data.map((d) => d[key2])\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"sampleCorrelation(\"age\", \"cl\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"{\n const { fit, plot: line } = trend_age_cl;\n const node = plot({\n // x: {\n // domain: [0, 50]\n // },\n // width: width * 0.8,\n // height: width * 0.8,\n marks: [Plot.dot(data, { x: \"age\", y: \"cl\", r: 7, fill: \"blue\" }), line]\n });\n\n const getSignSymbol = (x) => (x > 0 ? \"+\" : \"-\");\n const format = d3.format(\".2f\");\n d3.select(node)\n .append(\"text\")\n .attr(\"x\", 200)\n .attr(\"y\", 100)\n .attr(\"fill\", \"orange\")\n .text(\n `cl = ${format(fit.m)}·age ${fit.b > 0 ? \"+\" : \"−\"} ${format(\n Math.abs(fit.b)\n )}`\n );\n\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"viewof age = {\n const node = Inputs.range([0, 100], {\n step: \"1\",\n label: \"Age\",\n value: 30,\n width: \"100%\"\n });\n // node.style.fontSize = \"30px\";\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"{\n const format = d3.format(\".2f\");\n const { m, b } = trend_age_cl.fit;\n const cl = m * age + b;\n const node = md`cl = ${format(m)}·${age} ${b > 0 ? \"+\" : \"−\"} ${format(\n Math.abs(b)\n )} = ${format(cl)}`;\n\n // node.style.fontSize = \"30px\";\n\n return node;\n // md`cl = ${d3.format(\".1f\")(ss.linearRegressionLine(trend_age_cl.fit)(age))}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":388,"value":"trend_age_cl = trendLine(data, d => d.age, d => d.cl, {stroke: \"orange\", strokeWidth: 3})","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"function trendLine(data, getX, getY, options) {\n const points = data.map((d) => [getX(d), getY(d)]);\n const [x1, x2] = d3.extent(points, (d) => d[0]);\n\n const fit = ss.linearRegression(points);\n const f = ss.linearRegressionLine(fit);\n const [y1, y2] = [x1, x2].map(f);\n return {\n fit,\n plot: Plot.line(\n [\n [x1, y1],\n [x2, y2]\n ],\n options\n )\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"ss = import(\"simple-statistics@7.8.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"\"cl ehh whh age\".split(\" \").map((key) => d3.deviation(data, (d) => d[key]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"\"cl ehh whh age\".split(\" \").map((key) => d3.mean(data, (d) => d[key]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"Plot.plot({\n marks: [Plot.dot(data, { x: \"age\", y: (d) => d.ehh + d.whh })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"md`## s = ${d3.format(\".1f\")(d3.mean(data, (d) => d.height))}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"md`## s = ${d3.format(\".1f\")(d3.deviation(data, (d) => d.height))}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"hist(\"height\", { sigmaCount: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"hist(\"height\", { sigmaCount: 2 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"function hist(key, { sigmaCount } = {}) {\n const µ = d3.mean(data, (d) => d[key]);\n const s = d3.deviation(data, (d) => d[key]);\n return plot({\n x: {\n label: \"Height [cm] →\"\n },\n marks: [\n Plot.rectY(\n data,\n Plot.binX({ y: \"count\", thresholds: 20 }, { x: key, fill: \"#ccc\" })\n ),\n Plot.ruleX([µ], { stroke: \"red\", strokeWidth: 3 }),\n sigmaCount\n ? Plot.ruleX(\n [-sigmaCount, sigmaCount].map((d) => µ + d * s),\n { stroke: \"orange\", strokeWidth: 3 }\n )\n : null,\n Plot.ruleY([0])\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"function colorLegend(entries, options) {\n return html`

${entries.map(\n ({ label, color }) =>\n html`

${label}

`\n )}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"vmdata = {\n const seed = 1;\n const rand = d3.randomUniform.source(d3.randomLcg(seed))(1, 11);\n const data = Array.from({ length: 6 }, rand).map((d, i) => [\n i + 1,\n Math.round(d)\n ]);\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"plot({\n x: {\n ticks: 0,\n domain: [0.5, vmdata.length + 0.5]\n },\n y: {\n domain: [-10, 10]\n },\n marks: [\n Plot.dot(vmdata, { fill: \"blue\", r: 10 }),\n // Plot.ruleY([d3.mean(vmdata, (d) => d[1])], {\n // stroke: \"red\",\n // strokeWidth: 3\n // }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"plot({\n x: {\n ticks: 0,\n domain: [0.5, vmdata.length + 0.5]\n },\n y: {\n domain: [-10, 10]\n },\n marks: [\n Plot.dot(vmdata, { fill: \"blue\", r: 10 }),\n Plot.ruleY([d3.mean(vmdata, (d) => d[1])], {\n stroke: \"red\",\n strokeWidth: 3\n }),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"{\n const µ = d3.mean(vmdata, (d) => d[1]);\n return plot({\n x: {\n ticks: 0,\n domain: [0.5, vmdata.length + 0.5]\n },\n y: {\n domain: [-10, 10]\n },\n marks: [\n Plot.dot(vmdata, {\n fill: \"blue\",\n r: 10,\n x: (d) => d[0],\n y: (d) => d[1] - µ\n }),\n Plot.ruleY([], {\n stroke: \"red\",\n strokeWidth: 3\n }),\n Plot.ruleY([0])\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"{\n const µ = d3.mean(vmdata, (d) => d[1]);\n return plot({\n x: {\n ticks: 0,\n domain: [0.5, vmdata.length + 0.5]\n },\n y: {\n domain: [-10, 10]\n },\n marks: [\n Plot.dot(vmdata, {\n fill: \"blue\",\n r: 10,\n x: (d) => d[0],\n y: (d) => (d[1] - µ) ** 2\n }),\n Plot.ruleY([], {\n stroke: \"red\",\n strokeWidth: 3\n }),\n Plot.ruleY([0])\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"{\n const µ = d3.mean(vmdata, (d) => d[1]);\n const v = d3.variance(vmdata, (d) => d[1]);\n return plot({\n y: {\n domain: [-10, 10]\n },\n x: {\n ticks: 0,\n domain: [0.5, vmdata.length + 0.5]\n },\n marks: [\n Plot.dot(vmdata, {\n fill: \"blue\",\n r: 10,\n x: (d) => d[0],\n y: (d) => (d[1] - µ) ** 2\n }),\n Plot.ruleY([v], {\n stroke: \"red\",\n strokeWidth: 3\n }),\n Plot.ruleY([0])\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}