31:T602,chart = { const svg = d3.select(DOM.svg(width, height)); svg.append("rect") .attr("id", "background") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.top - margin.right) .attr("height", height - margin.top - margin.bottom) .attr("fill", "white") .on("click", d => { d3.selectAll(".points, .keyRects").transition().attr("opacity", maxOpacity) }) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .style("isolation", "isolate") .selectAll("circle") .data(data) .enter().append("circle") .attr("class", "points") .attr("cx", d => x(d.pc1)) .attr("cy", d => y(d.pc2)) .attr("fill", d => color(d.group)) .style("mix-blend-mode", blendingMode) .attr("opacity", 0.7) .attr("r", 4); const key = svg.append("g") .selectAll("rect") .data(groups) key.enter().append("rect") .attr("class", "keyRects") .attr("x", width - margin.left - 70) .attr("y", (d, i) => i * 20) .attr("width", 12) .attr("height", 12) .attr("fill", d => color(d)) .on("click", d => { return selectGroup(this, d) }) key.enter().append("text") .attr("x", d => width - margin.left -50) .attr("y", (d, i) => i * 20) .attr("dy", "0.7em") .text(d => `${d}: 300 patients`) .style("font-size", "12px") .on("click", d => { return selectGroup(this, d) }); return svg.node(); }32:T4d9,function collapse(grid_points) { let collapsed = new Map(); // create a map x => y => group => count for (let pt of grid_points) { let x_coll = collapsed.get(pt.x_bin); if (x_coll === undefined) { x_coll = new Map(); collapsed.set(pt.x_bin, x_coll); } let y_coll = x_coll.get(pt.y_bin); if (y_coll === undefined) { y_coll = new Map(); x_coll.set(pt.y_bin, y_coll); } let count = y_coll.get(pt.group); if (count === undefined) { count = 1; y_coll.set(pt.group, count); } else { y_coll.set(pt.group, count + 1); } } console.log(collapsed); let arr = []; for (let x_map of collapsed) { console.log('x', x_map); let x = x_map[0]; for (let y_map of x_map[1]) { let y = y_map[0]; for (let gc of y_map[1]) { let group = gc[0]; let count = gc[1]; arr.push({ 'pc1': x, 'pc2': y, 'group': group, 'count': count }); } } } return arr; }33:T62d,Binnedchart = { const svg = d3.select(DOM.svg(width, height)); svg.append("rect") .attr("id", "background") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.top - margin.right) .attr("height", height - margin.top - margin.bottom) .attr("fill", "white") .on("click", d => { d3.selectAll(".points, .keyRects").transition().attr("opacity", maxOpacity) }) svg.append("g") .call(xAxisBinned); svg.append("g") .call(yAxisBinned); svg.append("g") .style("isolation", "isolate") .selectAll("circle") .data(binnedData) .enter().append("circle") .attr("class", "points") .attr("cx", d => xBinned(d.pc1)) .attr("cy", d => yBinned(d.pc2)) .attr("fill", d => color(d.group)) .attr("opacity", 0.7) .attr("r", d => countScale(d.count)) .style("mix-blend-mode", blendingMode) const key = svg.append("g") .selectAll("rect") .data(groups) key.enter().append("rect") .attr("class", "keyRects") .attr("x", width - margin.left - 20) .attr("y", (d, i) => i * 20) .attr("width", 12) .attr("height", 12) .attr("fill", d => color(d)) .on("click", d => { return selectGroup(this, d) }) key.enter().append("text") .attr("x", d => width - margin.left + 12) .attr("y", (d, i) => i * 20) .attr("dy", "0.7em") .text(d => d) .style("font-size", "12px") .on("click", d => { return selectGroup(this, d) }); // return svg.node(); }34:[] 2f:{"title":"PCA from Cluster v2","cells":[{"id":0,"value":"md`# PCA from Cluster v2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`### Current forms of interaction\n\n- Clicking on the *square or name/number* of a group will lower the opacity of all the other groups\n- Clicking anywhere on the white bacground will bring the opacity back for all the groups\n\n#### to be determined/created:\n\n- Kaplan-Meier Analysis chart\n- Dimensions table and/or heat map\n- Table for risk ratios (e.g. risk of Stroke) per group \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"md `
\n### PCA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"viewof blendingMode = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"function selectGroup(ctx, group) {\n const groupElements = d3.selectAll(\".points\")\n .filter(d => d.group !== group);\n \n const activeGroup = d3.selectAll(\".keyRects\")\n .filter(d => d === group);\n \n const otherElements = d3.selectAll(\".points\")\n .filter(d => d.group === group);\n \n const otherGroups = d3.selectAll(\".keyRects\")\n .filter(d => d !== group);\n \n groupElements.transition().attr(\"opacity\", 0.1);\n otherGroups.transition().attr(\"opacity\", 0.1);\n \n otherElements.transition().attr(\"opacity\", maxOpacity);\n activeGroup.transition().attr(\"opacity\", maxOpacity);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"color = d3.scaleOrdinal(colorsArray)\n .domain(groups)","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"colorsArray = [\n \"#8C236A\",\n \"#4477AA\",\n \"#AA7744\",\n \"#117777\",\n \"#DD7788\",\n \"#77AADD\",\n \"#777711\",\n \"#AA4488\",\n \"#44AA77\",\n \"#AA4455\",\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"paddedMin = d3.min(data, d => d.pc1) - d3.min(data, d => d.pc1)*-0.10","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"paddedMax = d3.max(data, d => d.pc1) + d3.max(data, d => d.pc1)*0.10","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"x = d3.scaleLinear()\n .domain([paddedMin, paddedMax])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.pc2))\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n // .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"PC1\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"PC2\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"data = d3.csv(\"https://gist.githubusercontent.com/jotasolano/0a48d0c5846b48ce239a52d48ae4df8e/raw/ef440312744b2bd06ca10f7b850d8aadf1c28a77/sample_pca.csv\", parsePCA)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"function parsePCA(d) {\n return {\n pc1: +d[\"PC1\"],\n pc2: +d[\"PC2\"],\n group: d.cluster\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"md `### Testing binned data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"function get_grid_point(x, y, x_min, y_min, x_bin_width, y_bin_width, group) {\n let i = 0;\n let x_left = x_min;\n\n let j = 0;\n let y_left = y_min;\n \n while (x_left + x_bin_width <= x) {\n x_left += x_bin_width;\n i += 1;\n }\n\n while (y_left + y_bin_width <= y) {\n y_left += y_bin_width;\n j += 1;\n }\n\n return {\n 'x_bin': i,\n 'y_bin': j,\n 'group': group\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"function bins(data, x_bins, y_bins) {\n const [x_min, x_max] = d3.extent(data, R.prop('pc1'));\n const [y_min, y_max] = d3.extent(data, R.prop('pc2'));\n\n const x_bin_width = (x_max - x_min) / x_bins;\n const y_bin_width = (y_max - y_min) / y_bins;\n\n const grid = data.map(v => get_grid_point(v.pc1, v.pc2, x_min, y_min, x_bin_width, y_bin_width, v.group));\n return collapse(grid);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"binnedData = bins(data, 50, 50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"viewof radiusSlider = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"radiusSlider","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"xBinned = d3.scaleLinear()\n .domain(d3.extent(binnedData, d => d.pc1))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"yBinned = d3.scaleLinear()\n .domain(d3.extent(binnedData, d => d.pc2))\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"countScale = d3.scaleLinear()\n .domain(d3.extent(binnedData, d => d.count))\n .range([3, radiusSlider])","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"xAxisBinned = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xBinned))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"PC1\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"yAxisBinned = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yBinned))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"PC2\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"md `### Visualizing dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"dimensionData = d3.csv(\"https://gist.githubusercontent.com/jotasolano/73cbc64bcaab8430af31f9c1ec56b107/raw/c4269125492b0ec76239c86d3e9ffd8bb4dc92b3/sample_dimensions.csv\", parseDimensions)","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"nestedDimensions = d3.nest()\n .key(d => d.dimension)\n .entries(dimensionData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"dimensions = d3.set(dimensionData, d => d.dimension).values()","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"xDim = d3.scaleLinear()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"padding = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"matrix = ({cols: 5, rows: 5})","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"xBand = {\n\treturn d3.scaleBand()\n \t\t.range([margin.left, width - margin.right])\n \t\t.domain(d3.range(matrix.cols))\n \t\t.padding(0.3);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"yBand = {\n\treturn d3.scaleBand()\n \t\t.range([margin.top, height - margin.bottom])\n \t\t.domain(d3.range(matrix.rows))\n \t\t.padding(0.3);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"function parseDimensions(d) {\n return {\n group: d.group,\n dimension: d.dimension,\n value: +d.value\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md `### Generic vars`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"groups = d3.set(data, d => d.group).values().sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"margin = ({top: 20, right: 200, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"maxOpacity = 0.7","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"md `### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"R = require(\"https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}