2f:T7c7,{ const width = 960; const height = 500; const textPadding = 100; const marginGrid = {left: 350, top: 100, right: 200, bottom: 60}; const svg = d3.create("svg").attr('id', 'svg').attr("viewBox", [0, 0, width, height]); // Determine how long (i.e., wide / high) the grid dimensions should be const dummyXGrid = d3.scaleBand() .domain(d3.range(sMax)) .range([marginGrid.left, width-marginGrid.right]) .padding(padding); const dummyYGrid = d3.scaleBand() .domain(d3.range(tMax)) .range([marginGrid.top, height-marginGrid.bottom]) .padding(padding); let xGridLength, yGridLength; if (dummyXGrid.bandwidth() < dummyYGrid.bandwidth()) { xGridLength = width - marginGrid.right - marginGrid.left; yGridLength = (tLength + padding) * dummyXGrid.step(); } else { yGridLength = height - marginGrid.bottom - marginGrid.top; xGridLength = (sLength + padding) * dummyYGrid.step(); } const xGrid = d3.scaleBand() .domain(d3.range(sMax)) .range([(marginGrid.left + width - marginGrid.right)/2 - xGridLength/2, (marginGrid.left + width - marginGrid.right)/2 + xGridLength/2]) .padding(padding); marginGrid.right = width - xGrid.range()[1]; const yGrid = d3.scaleBand() .domain(d3.range(tMax).reverse()) .range([height/2 - yGridLength/2, height/2 + yGridLength/2]) .padding(padding); const update = () => { updateRects(svg, xGrid, yGrid); svg.selectAll('.rect-frame') .on('click', (e, d) => { //d3.select(e.target) if (d.pval.pre <= 0.05) d.pval.pre = 0.06; else if (d.pval.pre <= 0.1) d.pval.pre = 0.11; else d.pval.pre = 0.01; updateRects(svg, xGrid, yGrid); }) } update(); createAxes(svg, xGrid, yGrid); createAxisLabels(svg, xGrid, yGrid, marginGrid); appendLegend(svg, xGrid, yGrid, marginGrid); console.log(effect_update_ping); lorem_ipsum(svg, marginGrid.left - textPadding, height); return svg.node(); }30:T4f3,updatePreRects = function (svg, xGrid, yGrid) { svg.selectAll('.pre-rect') .data(data) .join( enter => enter.append('rect') .attr('class', 'pre-rect') .attr('fill', d => d3.interpolateBlues(d.effect.pre)) //.attr('stroke', 'rgb(200,200,200)') ) .attr('x', d => { if (d.pval.pre <= 0.05) return xGrid(d.s); else if (d.pval.pre <= 0.1) return xGrid(d.s) + xGrid.bandwidth() * (1 - (1 + minRectLength) / 2) / 2; else return xGrid(d.s) + xGrid.bandwidth() * (1 - minRectLength) / 2; }) .attr('y', d => { if (d.pval.pre <= 0.05) return yGrid(d.t); else if (d.pval.pre <= 0.1) return yGrid(d.t) + yGrid.bandwidth() * (1 - (1 + minRectLength) / 2) / 2; else return yGrid(d.t) + yGrid.bandwidth() * (1 - minRectLength) / 2; }) .attr('width', d => { if (d.pval.pre <= 0.05) return xGrid.bandwidth(); else if (d.pval.pre <= 0.1) return xGrid.bandwidth() * (1 + minRectLength) / 2; else return xGrid.bandwidth() * minRectLength; }) .attr('height', d => { if (d.pval.pre <= 0.05) return yGrid.bandwidth(); else if (d.pval.pre <= 0.1) return yGrid.bandwidth() * (1 + minRectLength) / 2; else return yGrid.bandwidth() * minRectLength; }) }31:T430,updatePostRects = function (svg, xGrid, yGrid) { svg.selectAll('.post-rect') .data(data) .join( enter => enter.append('rect') .attr('class', 'post-rect') .attr('fill', d => d3.interpolateBlues(d.effect.post)) //.attr('stroke', 'rgb(200,200,200)') ) .attr('x', d => xGrid(d.s) + xGrid.bandwidth() / 2) .attr('y', d => { if (d.pval.pre <= 0.05) return yGrid(d.t); else if (d.pval.pre <= 0.1) return yGrid(d.t) + yGrid.bandwidth() * (1 - (1 + minRectLength) / 2) / 2; else return yGrid(d.t) + yGrid.bandwidth() * (1 - minRectLength) / 2; }) .attr('width', d => { if (d.pval.pre <= 0.05) return xGrid.bandwidth() / 2; else if (d.pval.pre <= 0.1) return xGrid.bandwidth() * (1 + minRectLength) / 4; else return xGrid.bandwidth() * minRectLength / 2; }) .attr('height', d => { if (d.pval.pre <= 0.05) return yGrid.bandwidth(); else if (d.pval.pre <= 0.1) return yGrid.bandwidth() * (1 + minRectLength) / 2; else return yGrid.bandwidth() * minRectLength; }) }32:T4e0,updateRectFrames = function (svg, xGrid, yGrid) { svg.selectAll('.rect-frame') .data(data) .join( enter => enter.append('rect') .attr('class', 'rect-frame') .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'rgb(200,200,200)') ) .attr('x', d => { if (d.pval.pre <= 0.05) return xGrid(d.s); else if (d.pval.pre <= 0.1) return xGrid(d.s) + xGrid.bandwidth() * (1 - (1 + minRectLength) / 2) / 2; else return xGrid(d.s) + xGrid.bandwidth() * (1 - minRectLength) / 2; }) .attr('y', d => { if (d.pval.pre <= 0.05) return yGrid(d.t); else if (d.pval.pre <= 0.1) return yGrid(d.t) + yGrid.bandwidth() * (1 - (1 + minRectLength) / 2) / 2; else return yGrid(d.t) + yGrid.bandwidth() * (1 - minRectLength) / 2; }) .attr('width', d => { if (d.pval.pre <= 0.05) return xGrid.bandwidth(); else if (d.pval.pre <= 0.1) return xGrid.bandwidth() * (1 + minRectLength) / 2; else return xGrid.bandwidth() * minRectLength; }) .attr('height', d => { if (d.pval.pre <= 0.05) return yGrid.bandwidth(); else if (d.pval.pre <= 0.1) return yGrid.bandwidth() * (1 + minRectLength) / 2; else return yGrid.bandwidth() * minRectLength; }) }33:Tf79,appendLegend = function(svg, xGrid, yGrid, marginGrid) { const marginPadding = {left: 0.15, right: 0.15}; const elementPadding = 0.05; const fontSize = 10; const titleBoxPadding = 4; const xScale = d3.scaleLinear() .domain([0, 1]) .range([xGrid.range()[1] + marginGrid.right * marginPadding.left, xGrid.range()[1] + marginGrid.right * (1 - marginPadding.right)]); const yScale = d3.scaleLinear() .domain([0, 1]) .range(yGrid.range()); const headerInfo = [ { name: 'color', titleText: '', yPos: 0 }, { name: 'size', titleText: 'p-value', yPos: 0.3 }, { name: 'side', titleText: 'Before/after matching', yPos: 0.8 }, ]; const g = {}; headerInfo.forEach(({name, titleText, yPos}) => { // Create group g[name] = svg.append('g').attr('id', `${name}-legend`).attr('class', 'legend-g'); // Append header text g[name].append('text') .attr('class', 'legend-title') .attr('x', xScale(0.5)) .attr('y', yScale(yPos)) .attr('text-anchor', 'middle') .attr('fill', 'grey') .text(titleText); // Append frame around header text g[name].append('rect') .attr('class', 'legend-title-rect') .attr('x', xScale(0)) .attr('y', yScale(yPos) - fontSize - titleBoxPadding) .attr('width', xScale(1) - xScale(0)) .attr('height', fontSize + 2 * titleBoxPadding) .attr('fill', 'none') .attr('stroke', 'grey') .attr('stroke-width', 1); }) // COLOR -------------------------------------------------------------------------------------------------------------------------- svg.append('defs') .append('linearGradient') .attr('id', 'colorscale-gradient') .selectAll('stop') .data(d3.range(0, 1.1, 0.1)) .enter().append('stop') .attr('offset', d => d) .attr('stop-color', d3.interpolateBlues); g.color.append('rect') .attr('id', 'legend-colorscale-rect') .attr('x', xScale(0.1)) .attr('y', yScale(headerInfo[0].yPos + elementPadding)) .attr('width', xScale(0.9) - xScale(0.1)) .attr('height', yScale(0.04) - yScale(0)) .attr('fill', 'url(#colorscale-gradient)') .attr('stroke', 'grey'); // SIZE -------------------------------------------------------------------------------------------------------------------------- // Would actually solve with translatable bounding boxes const baseSideLengthP = yScale(0.1) - yScale(0); g.size.selectAll('.legend-size-rect') .data([{idx: 0, label: 'p < 0.05'}, {idx: 1, label: '0.05 <= p < 0.1'}, {idx: 2, label: '0.1 <= p'}]) .enter() .append('rect') .attr('class', 'legend-size-rect') .attr('x', d => xScale(0.2) - baseSideLengthP / Math.pow(2, d.idx) / 2) .attr('y', d => { const basicPositioning = yScale(headerInfo[1].yPos + elementPadding); const paddingOffsetFromPrevious = d.idx * (yScale(elementPadding) - yScale(0)); const rectOffsetFromPrevious = d.idx == 0 ? 0 : d.idx == 1 ? baseSideLengthP : 3 * baseSideLengthP / 2; return paddingOffsetFromPrevious + rectOffsetFromPrevious + basicPositioning; }) .attr('width', d => baseSideLengthP / Math.pow(2, d.idx)) .attr('height', d => baseSideLengthP / Math.pow(2, d.idx)) .attr('fill', 'none') .attr('stroke', 'grey'); // SIDE -------------------------------------------------------------------------------------------------------------------------- // Would actually solve with translatable bounding boxes g.side.selectAll('.legend-side-rect') .data([0, 1]) .enter() .append('rect') .attr('class', 'legend-side-rect') .attr('x', d => xScale(0.5) - d * baseSideLengthP / 2) .attr('y', yScale(headerInfo[2].yPos + elementPadding)) .attr('width', baseSideLengthP / 2) .attr('height', baseSideLengthP) .attr('fill', 'none') .attr('stroke', 'grey'); }34:T4c5,lorem_ipsum = function(svg, textWidth, textHeight) { svg.append('foreignObject') .attr('id', 'lorem-ipsum') .attr('x', 0) .attr('y', 0) .attr('width', textWidth) .attr('height', textHeight) .append('xhtml:div') .append('p') .html('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum, ex quis tempus convallis, dolor velit accumsan nulla, a sollicitudin nisi nibh ac metus. Nulla interdum tristique imperdiet. Suspendisse faucibus, lorem nec eleifend consequat, justo massa dictum urna, quis blandit neque mi sed lorem. Sed pulvinar ligula non efficitur feugiat. Etiam venenatis gravida sapien sed semper.') /* Aliquam luctus condimentum libero, at interdum ipsum posuere non. Etiam vel augue vitae leo faucibus commodo a in ex. Ut vel dignissim lorem, eget mollis risus. Pellentesque pretium rutrum tortor. Sed hendrerit neque consectetur urna elementum, non consequat lectus faucibus. Nunc nisl felis, commodo ac mi eu, hendrerit convallis metus. Integer euismod nisl id diam aliquam, nec dictum magna bibendum. Nunc luctus pulvinar nisi ac accumsan. Donec quis ultrices diam. Aenean ullamcorper nibh vel enim tempor, id scelerisque odio efficitur. */ }35:[] 2d:{"title":"Result view","cells":[{"id":0,"value":"# Result view","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"viewof sMax = Inputs.range([1, 20], {step: 1, value: 9, label: \"Max. size of spatial window\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof tMax = Inputs.range([1, 20], {step: 1, value: 6, label: \"Max. size of temporal window\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"viewof xShift = Inputs.range([0, 2 * Math.PI], {step: Math.PI/10, value: Math.PI * 5/4, label: \"Shift of value distribution in x direction\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"viewof yShift = Inputs.range([0, 2 * Math.PI], {step: Math.PI/10, value: Math.PI * 5/4, label: \"Shift of value distribution in y direction\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"viewof padding = Inputs.range([0, 1], {step: 1/10, value: 0.1, label: \"Padding\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"viewof minRectLength = Inputs.range([0, 1], {step: 1/20, value: 0.1, label: \"Relative length of smallest rectangle\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"viewof showPost = Inputs.toggle({label: \"Show post rectangles\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"viewof freq = Inputs.range([0.5, 50], {step: 0.5, value: 1, label: \"Frequency of pre values\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"updateRects = function(svg, xGrid, yGrid) {\n updatePreRects(svg, xGrid, yGrid);\n if (showPost) updatePostRects(svg, xGrid, yGrid);\n updateRectFrames(svg, xGrid, yGrid);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"createAxes = {\n return function(svg, xGrid, yGrid) {\n const xAxis = d3.axisBottom().scale(xGrid);\n const yAxis = d3.axisLeft().scale(yGrid);\n \n const xAxisG = svg.append('g').attr('class', 'x-axis axis-g')\n .call(xAxis)\n .attr('transform', `translate(0, ${yGrid.range()[1]})`);\n const yAxisG = svg.append('g').attr('class', 'y-axis axis-g')\n .call(yAxis)\n .attr('transform', `translate(${xGrid.range()[0]}, 0)`);\n \n svg.selectAll('.axis-g').selectAll('text').attr('fill', 'grey');\n svg.selectAll('.axis-g').selectAll('line').attr('stroke', 'grey');\n svg.selectAll('.axis-g').selectAll('path').attr('stroke', 'grey');\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"createAxisLabels = function (svg, xGrid, yGrid, marginGrid) {\n const labelG = svg.append('g').attr('class', 'axis-labels-g');\n labelG.append('text')\n .attr('class', 'x-axis-label axis-label')\n .attr('x', xGrid.range()[1])\n .attr('y', yGrid.range()[1] + marginGrid.bottom * 0.7)\n .attr('text-anchor', 'end')\n .attr('fill', 'grey')\n .html('Size of spatial window [km] →');\n \n labelG.append('text')\n .attr('class', 'y-axis-label axis-label')\n //.attr('x', xGrid.range()[0] - 12)\n .attr('x', xGrid.range()[0])\n .attr('y', yGrid.range()[0] - 30)\n .attr('text-anchor', 'middle')\n .attr('fill', 'grey')\n .html('Size of temporal');\n \n labelG.append('text')\n .attr('class', 'y-axis-label axis-label')\n //.attr('x', xGrid.range()[0] + 3)\n .attr('x', xGrid.range()[0])\n .attr('y', yGrid.range()[0] - 10)\n .attr('text-anchor', 'middle')\n .attr('fill', 'grey')\n .html('window [d] ↑');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"effect_update_ping = {\n d3.range(sMax).forEach(s => {\n d3.range(tMax).forEach(t => {\n data[s * tMax + t].effect.pre = Math.sin(s/sMax * freq * (Math.random() + 1) / 2 * Math.PI + xShift) * Math.sin(t/tMax * freq * (Math.random() + 0.5) / 1.5 * Math.PI + yShift); \n data[s * tMax + t].effect.post = Math.sin(s/sMax * freq * (Math.random() + 0.5) / 1.5 * Math.PI + xShift) * Math.sin(t/tMax * freq * (Math.random() + 1) / 2 * Math.PI + yShift); \n })\n })\n return Math.random();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = {\n const data = [];\n d3.range(sMax).forEach(s => {\n d3.range(tMax).forEach(t => {\n data.push({\n s, \n t, \n pval: {\n pre: Math.abs(s/sMax * t/tMax - 0.4), \n post: Math.abs(s/sMax * t/tMax - 0.4)\n },\n effect: {\n /*\n pre: Math.random(),//s/sMax * t/tMax * 1.5, \n post: Math.random()//s/sMax * t/tMax * 1.5\n */\n pre: 0,\n post: Math.random()\n }, \n support: {\n pre: 0, \n post: 0\n }, \n l1: {\n pre: 0, \n post: 0\n }, \n })\n })\n })\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"sLength = sMax","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"tLength = tMax","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}