31:T6c5,chart = { redraw; if (drawMap) { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //const svg = d3.select(DOM.svg(width, height)); const mapHeight = xGrid.bandwidth(); categories.forEach((category, c) => { const g = svg.append('g').attr('class', category+'-content-g'); steps.forEach((step, i) => { mapContainers[category][step] = { step: step, container: createMapContainer(g, xGrid(step), yGrid(paddingY + (category === 'control' ? 0.5 : 0)), mapHeight) }; maps[category][step] = {step: step, map: createMap(mapContainers[category][step].container, category)}; if (i > 0) { syncMaps(maps[category][steps[i-1]].map, maps[category][step].map); } }) steps.forEach(step => { svgOverlays[category][step] = {step: step, svg: getOverlaySvg(mapContainers[category][step].container, mapHeight)}; appendDots(maps[category][step].map, svgOverlays[category][step].svg, eventData[category].stepData[step].data, step, category); }); const histHeight = 20; const yPosLine = yGrid(0.5 - paddingY + (category === 'control' ? 0.5 : 0)); //createTimelineDistributed(g, xGrid, height, category, histHeight, yPosLine); createTimelineSharp(g, xGrid, height, category, histHeight, yPosLine); }); // Wait until the map loads, then yield the container again. yield new Promise(resolve => { const map = maps['control'].post.map; if (map.loaded()) resolve(map); else map.on('load', () => resolve(map)); }); lorem_ipsum(svg, marginLeft - 50, height); yield svg.node() } }32:T4c6,{ const histHeight = 20; const axisLabelOffset = 80; const annotationOffsetRight = 70; const xGridPadded = d3.scaleBand() .domain(xGrid.domain()) .range([marginLeft + axisLabelOffset, xGrid.range()[1] - annotationOffsetRight]) .padding(xGrid.padding()) const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //const svg = d3.select(DOM.svg(width, height)); const tScale = d3.scaleTime() .domain([shiftHours(dateStart, -12), shiftHours(dateEnd, 12)]) .range([xGridPadded('pre'), xGridPadded('post') + xGridPadded.bandwidth()]); categories.forEach((category, c) => { const gContent = svg.append('g').attr('class', category+'-content-g'); // Separated const yPosChart = c*yGrid(0.5); // Separated const yPosTimeline = yPosChart + yGrid(0.4) + histHeight; // NEW STUFF drawRegressionPlot(gContent, category, c, tScale, yPosTimeline, yPosChart); // TIME LINE createTimelineSharp(gContent, xGridPadded, height, category, histHeight, yPosTimeline); //createTimelineSqueezedLeft(gContent, xGrid, height, category, histHeight, yPosTimeline); }); lorem_ipsum(svg, marginLeft - 50, height); return svg.node() }33:T694,{ temporalWindowSizeUpdated; const histHeight = 20; const axisLabelOffset = 80; const annotationOffsetRight = 70; const xGridPadded = d3.scaleBand() .domain(xGrid.domain()) .range([marginLeft + axisLabelOffset, xGrid.range()[1] - annotationOffsetRight]) .padding(xGrid.padding()) const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //const svg = d3.select(DOM.svg(width, height)); const tScale = d3.scaleTime() .domain([shiftHours(dateStart, -12), shiftHours(dateEnd, 12)]) .range([xGridPadded('pre'), xGridPadded('post') + xGridPadded.bandwidth()]); const gContent = svg.append('g').attr('class', 'content-g'); categories.forEach((category, c) => { //const gContent = svg.append('g').attr('class', category+'-content-g'); // Separated //const yPosChart = c*yGrid(0.5); const yPosChart = yGrid(0.1); // Separated // ? const yPosTimeline = yPosChart + yGrid(0.5) + c * 4 * histHeight; // NEW STUFF drawRegressionPlot(gContent, category, c, tScale, yPosTimeline, yPosChart); // TIME LINE createTimelineSharp(gContent, xGridPadded, height, category, histHeight, yPosTimeline); //createTimelineSqueezedLeft(gContent, xGrid, height, category, histHeight, yPosTimeline); appendTrendInfo(gContent, tScale, category, yPosTimeline - 1.5 * histHeight) // addEffectOverlay // addTrendOverlay // wobei spätestens für interaktion das ganze wahrscheinlich gründlicher bearbeitet werde muss. aber vllt geht das ja auch in der existierenden Regressionplot Funktion :) }); lorem_ipsum(svg, marginLeft - 50, height); return svg.node() }34:Tb21,createValueAnnotations = function(selection, countData, tScale, yScale, category) { // Get the number of events const nrEvents = getNrEvents(); countData.forEach(d => { const textBaseFirstLine = selection.append('text') .attr('class', 'annotation-text ' + d.interval); selection.selectAll('.annotation-text.' + d.interval) .attr('x', 1 / 2 * (tScale(d.dateRange[0]) + tScale(d.dateRange[1]))) .attr('y', yScale(d.count)) .attr('font-size', 11) .attr('text-anchor', 'middle'); // Nr of dependent events textBaseFirstLine.append('tspan') .attr('fill', colorDependent) .style('font-weight', 'bold') .text(d.count + ' dependent ') // Events text textBaseFirstLine.append('tspan') .attr('fill', annotationColor) .text('events '); // Before/after text textBaseFirstLine.append('tspan') .attr('fill', annotationColor) //.attr('dy', '1.2em') .style('text-decoration', 'underline') .text(d.interval === 'pre' ? 'before' : 'after'); // Category text textBaseFirstLine.append('tspan') .attr('fill', color[category]) .style('font-weight', 'bold') .text(' ' + category); // Adjust the y position of the annotation if the count is the lower one out of treatment and control for each interval // Initially, only determine if the annotation needs to be shifted let shiftDown; if (d.interval === 'post') { // The count for the category in the post interval is higher than for the other category if (d.count > d3.min(Object.values(getNrEvents), e => e['post'])) shiftDown = false; // The count for the category in the post interval is lower than for the other category else if (d.count < d3.max(Object.values(getNrEvents), e => e['post'])) shiftDown = true; // The counts are the same -> keep treatment on top else if (category === 'treatment') shiftDown = false; else shiftDown = true; } else { // Count preA and preB together d3.max(Object.values(getNrEvents), d => d.post) // The count for the category in the pre interval is higher than for the other category if (nrEvents[category]['preA'] > d3.min(Object.values(getNrEvents), e => (e['preA'] + e['preB']))) shiftDown = false; // The count for the category in the pre interval is lower than for the other category else if (nrEvents[category]['pre'] < d3.max(Object.values(getNrEvents), e => (e['preA'] + e['preB']))) shiftDown = true; // The counts are the same -> keep treatment on top else if (category === 'treatment') shiftDown = false; else shiftDown = true; } // Shift down annotation if necessary selection.selectAll('.annotation-text.' + d.interval) .attr('dy', shiftDown ? '1.4em' : '-.7em') }) }35:T9ac,createValueAnnotationsSide = function(selection, countData, tScale, yScale, category) { countData.forEach(d => { const textBaseFirstLine = selection.append('text') .attr('class', 'annotation-text ' + d.interval); const textBaseSecondLine = selection.append('text') .attr('class', 'annotation-text ' + d.interval); selection.selectAll('.annotation-text.' + d.interval) .attr('x', d.interval === 'pre' ? tScale(d.dateRange[0]) : tScale(d.dateRange[1])) .attr('dx', d.interval === 'pre' ? '-2.4em' : '2.4em') .attr('y', yScale(d.count)) .attr('font-size', 11) .attr('text-anchor', d.interval === 'pre' ? 'end' : 'beginning'); if (d.count == 0) { // Move the text up a little if it is written too low textBaseFirstLine.attr('dy', '-1.2em'); textBaseSecondLine.attr('dy', '0em'); } else { // Else just take care that the second line is below the first one textBaseSecondLine.attr('dy', '1.2em'); } // Ending/Initial pointer line for pre/post interval if (d.interval === 'pre') { selection.append('line') .attr('class', 'tick-line') .attr('x1', tScale(d.dateRange[0]) - 20) .attr('x2', tScale(d.dateRange[0]) - 10) .attr('y1', yScale(d.count)) .attr('y2', yScale(d.count)) .attr('stroke', annotationColor); } else if (d.interval === 'post') { selection.append('line') .attr('class', 'tick-line') .attr('x1', tScale(d.dateRange[1]) + 20) .attr('x2', tScale(d.dateRange[1]) + 10) .attr('y1', yScale(d.count)) .attr('y2', yScale(d.count)) .attr('stroke', annotationColor); } else { console.log('Odd interval name: ' + d.interval); } // Nr of dependent events textBaseFirstLine.append('tspan') .attr('fill', colorDependent) .style('font-weight', 'bold') .text(d.count + ' dependent ') // Events text textBaseFirstLine.append('tspan') .attr('fill', annotationColor) .text('events '); // Before/after text textBaseSecondLine.append('tspan') .attr('fill', annotationColor) //.attr('dy', '1.2em') .style('text-decoration', 'underline') .text(d.interval === 'pre' ? 'before' : 'after'); // Category text textBaseSecondLine.append('tspan') .attr('fill', color[category]) .style('font-weight', 'bold') .text(' ' + category); }) }36:Taca,appendTrendInfo = function(selection, tScale, category, y) { const fontsize = 10; const nrEvents = getNrEvents(); // Calculate the x-positions of the intervals const xLeft = tScale(shiftHours(dateBase, - temporalWindowSizeUpdated * 24 + 12)); const xRight = tScale(shiftHours(dateBase, + 12)); const xMid = (xLeft + xRight) / 2; // Append Trend text selection.append('text') .attr('class', category + '-trend-text annotation-text') .attr('x', xMid - 3 * fontsize) .attr('y', y) .text('Trend before ' + category + ':') .attr('fill', color[category]) .style('text-anchor', 'end') .style('font-size', 12); // Append trend counts and brackets const intervals = ['A', 'B']; intervals.forEach((interval, i) => { // Append trend counts //const x = (xLeft + xMid) / 2 + i * (xRight - xLeft) / 2; const x = xMid - 2 * fontsize + i * 4 * fontsize; selection.append('text') .attr('class', category + '-trend-count-interval-' + interval + ' annotation-text') .attr('x', x) .attr('y', y) .attr('fill', color['dependent']) .text(nrEvents[category]['pre'+interval]) .style('text-anchor', 'middle') .style('font-size', 16); // Append brackets const x1 = i == 0 ? xLeft : xMid + 3; const x2 = i == 0 ? xMid - 3 : xRight; const bracketHeight = 9; appendTrendBrackets(selection, x, x1, x2, y + 2, bracketHeight) }) // Append arrow representing trend // Length of the arrow const arrowSize = fontsize; // Append a refernce to the arrrow head to the svg const arrowHeadSize = arrowSize / 3; defineArrowHead(selection, arrowHeadSize, category) // x-coordinate of the arrow's center of rotation const xr = xMid; const yr = y - fontsize/2; // A place holder for what the maximum trend could theoretically be const assumedMaxAbsTrend = nrDependentTreatmentPre; // Define a scale to calculate the arrow rotation const rotationScale = d3.scaleLinear() .domain([-assumedMaxAbsTrend, assumedMaxAbsTrend]) .range([Math.PI * 0.5, Math.PI * 1.5]); // Calculate the sin and cos first const rotationAngle = rotationScale(nrEvents[category]['preA'] - nrEvents[category]['preB']) const xOffset = arrowSize * Math.cos(rotationAngle) const yOffset = arrowSize * Math.sin(rotationAngle) selection.append('line') .attr('class', category + '-trend-arrow-line') .attr('x1', xr + xOffset) .attr('x2', xr - xOffset) .attr('y1', yr + yOffset) .attr('y2', yr - yOffset) //.attr('stroke', color[category]) .attr('stroke', color['dependent']) .attr('stroke', 'grey') .attr('stroke-width', 2) .attr('marker-end', `url(#${category}-arrow)`); }37:Te42,drawRegressionPlot = function(selection, category, c, tScale, yPosTimeline, yPosChart) { // Get the number of events const nrEvents = getNrEvents(); // Get the overall max number of events per interval const maxEvents = getMaxEvents(nrEvents); const nrEventsPreA = nrEvents[category]['preA']; const nrEventsPreB = nrEvents[category]['preB']; const nrEventsPost = nrEvents[category]['post']; const yScale = d3.scaleLinear() .domain([maxEvents, 0]) .range([yPosChart + yGrid(0.1), yPosChart + yGrid(0.39)]); const g = selection.append('g').attr('class', 'regression-chart-' + category); const countData = [ { count: nrEventsPreA + nrEventsPreB, dateRange: [shiftHours(dateBase, - temporalWindowSizeUpdated * 24 + 12), shiftHours(dateBase, 12)], fill: colorDependent, interval: 'pre' }, { count: nrEventsPost, dateRange: [shiftHours(dateBase, 12), shiftHours(dateBase, temporalWindowSizeUpdated * 24 + 12)], fill: color[category], interval: 'post' }]; // Continue with setting the fill color of the circles // then lines // then background // Vertical line marks [ shiftHours(dateBase, - temporalWindowSizeUpdated * 24 + 12), // Beginning line shiftHours(dateBase, - temporalWindowSizeUpdated / 2 * 24 + 12), // Trend interval split line shiftHours(dateBase, 12), // Intervention line shiftHours(dateBase, temporalWindowSizeUpdated * 24 + 12) // End line ].forEach((d, i) => { g.append('line') .attr('class', 'count-line-'+category) .attr('x1', tScale(d)) .attr('x2', tScale(d)) .attr('y1', yPosTimeline) .attr('y2', i == 1 ? yScale(0) : yScale(maxEvents)) // / d3.max(countData, d => d.count) // Hier müsste eigentlich das Max. des intervalls verwendet werden -- ah, auch nicht .attr('stroke', 'rgb(200,200,200)') .attr('stroke-dasharray', 3); }) // Horizontal min/max axis lines const minData = [{extremum: 'min', val: 0}]//, {extremum: 'max', val: maxEvents}]; minData.forEach(d => { g.append('line') .attr('class', 'horizontal-'+d.extremum+'-line-'+category) .attr('x1', tScale.range()[0]) .attr('x2', tScale.range()[1]) .attr('y1', yScale(d.val)) .attr('y2', yScale(d.val)) .attr('stroke', 'rgb(200,200,200)') //.attr('stroke-dasharray', 6); }) // Line marks countData.forEach(d => { g.append('line') .attr('class', 'count-circle-'+category) .attr('x1', tScale(d.dateRange[0])) .attr('x2', tScale(d.dateRange[1])) .attr('y1', yScale(d.count)) .attr('y2', yScale(d.count)) .attr('stroke', color[category]) .attr('stroke-width', 3) .attr('opacity', 0.7) .attr('stroke-dasharray', d.interval === 'pre' ? 5 : 0) .attr('stroke-dashoffset', category === 'control' ? 5 : 0) //.attr('fill-opacity', 0.7) //.attr('stroke', d.fill) //.attr('stroke-width', 3); }) // Value annotations if (labelPlacement === 'side') createValueAnnotationsSide(g, countData, tScale, yScale, category, nrEvents); else createValueAnnotations(g, countData, tScale, yScale, category); // Create y-axis-treatment function const yAxis = d3.axisLeft().scale(yScale) .tickValues([0, maxEvents])//.ticks(2); g.append('g') .attr('class', 'y-axis-'+category) .call(yAxis) .attr('transform', `translate(${tScale.range()[0]}, 0)`); const gAxisLabel = g.append('g').attr('class', category+'-axis-label-g') .attr('transform', `translate(${tScale.range()[0]}, ${yScale.range()[0]})`); createAxisLabel(gAxisLabel); }38:Tb80,drawRegressionPlotDots = function(selection, category, c, nrEvents, tScale, yPosTimeline) { // Get the overall max number of events per interval const maxEvents = getMaxEvents(nrEvents); const nrEventsPreA = nrEvents[category]['preA']; const nrEventsPreB = nrEvents[category]['preB']; const nrEventsPost = nrEvents[category]['post']; const yScale = d3.scaleLinear() .domain([maxEvents, 0]) .range([c*yGrid(0.5) + yGrid(0.1), c*yGrid(0.5) + yGrid(0.39)]); const g = selection.append('g').attr('class', 'regression-chart-' + category); const countData = [{count: nrEventsPreA + nrEventsPreB, date: shiftHours(dateBase, 12), fill: colorDependent, interval: 'pre'}, {count: nrEventsPost, date: shiftHours(dateEnd, 12), fill: color[category], interval: 'post'}] // Continue with setting the fill color of the circles // then lines // then background // Vertical line marks countData.forEach(d => { g.append('line') .attr('class', 'count-line-'+category) .attr('x1', tScale(d.date)) .attr('x2', tScale(d.date)) .attr('y1', yPosTimeline) .attr('y2', yScale(d.count)) .attr('stroke', 'rgb(200,200,200)') .attr('stroke-dasharray', 3); }) // Horizontal min/max axis lines const extremumData = [{extremum: 'min', val: 0}, {extremum: 'max', val: maxEvents}]; extremumData.forEach(d => { g.append('line') .attr('class', 'horizontal-'+d.extremum+'-line-'+category) .attr('x1', tScale.range()[0]) .attr('x2', tScale.range()[1]) .attr('y1', yScale(d.val)) .attr('y2', yScale(d.val)) .attr('stroke', 'rgb(200,200,200)') //.attr('stroke-dasharray', 6); }) // Regression lines g.append('line') .datum(countData) .attr('class', 'regression-line-'+category) .attr('x1', d => tScale(d[0].date)) .attr('x2', d => tScale(d[1].date)) .attr('y1', d => yScale(d[0].count)) .attr('y2', d => yScale(d[1].count)) .attr('stroke', color[category]) .attr('stroke-width', 2) .attr('opacity', 0.7); // Circle marks countData.forEach(d => { g.append('circle') .attr('class', 'count-circle-'+category) .attr('cx', tScale(d.date)) .attr('cy', yScale(d.count)) .attr('r', 6) .attr('fill', colorDependent) //.attr('fill-opacity', 0.7) //.attr('stroke', d.fill) //.attr('stroke-width', 3); }) // Value annotations createValueAnnotations(g, countData, tScale, yScale, category); // Create y-axis-treatment function const yAxis = d3.axisLeft().scale(yScale) .tickValues([0, maxEvents])//.ticks(2); g.append('g') .attr('class', 'y-axis-'+category) .call(yAxis) .attr('transform', `translate(${tScale.range()[0]}, 0)`); const gAxisLabel = g.append('g').attr('class', category+'-axis-label-g') .attr('transform', `translate(${tScale.range()[0]}, ${yScale.range()[0]})`); createAxisLabel(gAxisLabel); }39:T49c,appendDots = function(map, svgOverlay, data, step, category) { //Project any point to map's current state function projectPoint({ lon, lat }) { const point = map.project(new mapboxgl.LngLat(lon, lat)); return point; } const dots = svgOverlay.selectAll('circle') .data(data) .join('circle') .attr('class', 'event-circle') .attr('cx', d => projectPoint(d.pos).x) .attr('cy', d => projectPoint(d.pos).y) .attr('r', 9) .attr('fill', d => { if (step !== 'peri' && d.type === category) return 'none'; else return fillScale(d.type); }) .attr('stroke', d => strokeScale(d.type)) .attr('stroke-width', 2) .attr('stroke-dasharray', d => { if (step !== 'peri' && d.type === category) return 2; else return 0; }) .attr('fill-opacity', 0.5) .style("pointer-events", "all") const update = () => { dots .attr('cx', d => projectPoint(d.pos).x) .attr('cy', d => projectPoint(d.pos).y); } // Every time the map changes, update the dots map.on("viewreset", update); map.on("move", update); map.on("moveend", update); update(); }3a:T14ab,createTimelineSqueezedLeft = function(selection, xGrid, height, category, histHeight, yPosLine) { const rectHeight = 20; const rectWidth = 10; // Determine the first and list dates in the data set //var monthExtent = d3.extent(data, function(d) { return d.created_date; }); // Create one bin per day (do i need to use an offset to include the first and last day?) const dayThresholds = d3.timeDay.every(1).range(dateStart, dateEnd) const dependentDates = ['pre', 'post'] .map(step => eventData[category].stepData[step].data.filter(d => d.type === category ? false : true)) .flat().map(d => d.date); console.log(dependentDates.map(d => dateToString(d))) const binData = d3.histogram() .domain([dateStart, dateEnd]) .thresholds(dayThresholds) .value(d => d) (dependentDates); // Shift the beginning and the end of the scale to be able to centralize the bins const tScale = d3.scaleTime() .domain([shiftHours(dateStart, -12), shiftHours(dateEnd, 12)]) .range([xGrid('pre'), xGrid('post') + xGrid.bandwidth()]); // Offset to centralize the bars around their date const binWidth = (tScale.range()[1] - tScale.range()[0]) / (2 * temporalWindowSize); // Create an array that contains all the information for the stripes const stripeData = []; binData.forEach((binArray, binNr) => { // Calculate the actual x-position where the bin will start -> shifted to the left by half the bin width const binStartX = tScale(binArray.x0) - binWidth/2; const nrBinEvents = binArray.length; if (nrBinEvents > 0) { // How large the step is between each stripe let step; if (binNr == (temporalWindowSize - 1)) { // Treat intervention bin differently: Distribute dependent event stripes only across first half of the bin, in front of the intervention event step = binWidth / ((nrBinEvents + 1) * 2); } else { // Distribute dependent event stripes across entire bin step = binWidth / (nrBinEvents + 1); } // Push the x-position for each stripe to the data array binArray.forEach((d, j) => stripeData.push({ // Move the first stripe in by one step x: binStartX + j * step + step })); }; }); const stripeWidth = 3; const g = selection.append('g').attr('class', 'timeline-g'); const gStripeDep = selection.append('g').attr('class', 'dependent-stripe-g'); const gStripeInt = selection.append('g').attr('class', 'intervention-stripe-g'); gStripeDep.selectAll('.dependent-stripe') .data(stripeData) .join('line') .attr('class', 'dependent-stripe') .attr('x1', d => d.x) .attr('x2', d => d.x) .attr('y1', yPosLine - histHeight) .attr('y2', yPosLine) .attr('stroke', fillScale('dependent')) .attr('stroke-width', stripeWidth); // Intervention event (placed first in actual code) gStripeInt.selectAll('.intervention-stripe-' + category) .data([{x: tScale(dateBase)}]) .join('line') .attr('class', 'intervention-stripe-' + category) .attr('x1', d => d.x) .attr('x2', d => d.x) .attr('y1', yPosLine - histHeight) // * 1.3) .attr('y2', yPosLine) .attr('stroke', fillScale(category)) .attr('stroke-width', stripeWidth); // Create ticks for the beginning/end of each day const gTick = g.append('g').attr('class', 'tick-g'); const tickHeight = 3; // Get all days that should be ticked const dayTickData = [...dayThresholds, dateEnd, shiftHours(dateEnd, 24)]; gTick.selectAll('.day-tick') .data(dayTickData) .join('line') .attr('class', 'day-tick') .attr('x1', d => tScale(d) - binWidth/2) .attr('x2', d => tScale(d) - binWidth/2) .attr('y1', yPosLine - tickHeight) .attr('y2', yPosLine) .attr('stroke', 'grey') .attr('stroke-width', 1); // Create brackets for the labelled day bins const gBracket = g.append('g').attr('class', 'bracket-g'); const bracketHeight = 5; gBracket.selectAll('.bracket') .data([dateStart, dateBase, dateEnd]) .join('path') .attr('class', 'bracket') .attr('d', d => { const cx = tScale(d); const path = d3.path(); path.moveTo(cx - binWidth/2, yPosLine + tickHeight) path.lineTo(cx - binWidth/2, yPosLine + tickHeight + bracketHeight) path.lineTo(cx - binWidth/8, yPosLine + tickHeight + bracketHeight) path.lineTo(cx, yPosLine + tickHeight + bracketHeight + tickHeight) path.lineTo(cx + binWidth/8, yPosLine + tickHeight + bracketHeight) path.lineTo(cx + binWidth/2, yPosLine + tickHeight + bracketHeight) path.lineTo(cx + binWidth/2, yPosLine + tickHeight) return path; }) .attr('fill', 'none') .attr('stroke', 'grey'); // Create x-axis function const xAxis = d3.axisBottom().scale(tScale) .tickValues([dateStart, dateBase, dateEnd]) .tickSize(0) .tickFormat(d3.timeFormat("%d %b %Y")); g.selectAll(`#${category}-x-axis-g`) .data([0]) .join( enter => enter.append('g') .attr('class', `${category}-x-axis-g`) .call(xAxis) .attr('transform', `translate(0, ${yPosLine})`) ) .selectAll("text") .attr("dy", "2em"); //appendAxisTicks(g, tScale, category); return dayTickData; }3b:T155d,createTimelineDistributed = function(selection, xGrid, height, category, histHeight, yPosLine) { const rectHeight = 20; //const histHeight = 20; const rectWidth = 10; //const yPosLine = yGrid(0.5 - paddingY + (category === 'control' ? 0.5 : 0)); // Determine the first and list dates in the data set //var monthExtent = d3.extent(data, function(d) { return d.created_date; }); // Create one bin per day (do i need to use an offset to include the first and last day?) const dayThresholds = d3.timeDay.every(1).range(dateStart, dateEnd) const dependentDates = ['pre', 'post'] .map(step => eventData[category].stepData[step].data.filter(d => d.type === category ? false : true)) .flat().map(d => d.date); console.log(dependentDates.map(d => dateToString(d))) const binData = d3.histogram() .domain([dateStart, dateEnd]) .thresholds(dayThresholds) .value(d => d) (dependentDates); // Shift the beginning and the end of the scale to be able to centralize the bins const tScale = d3.scaleTime() .domain([shiftHours(dateStart, -12), shiftHours(dateEnd, 12)]) .range([xGrid('pre'), xGrid('post') + xGrid.bandwidth()]); // Offset to centralize the bars around their date const binWidth = (tScale.range()[1] - tScale.range()[0]) / (2 * temporalWindowSize); // Create an array that contains all the information for the stripes const stripeData = []; let xInterventionOffset; binData.forEach((binArray, binNr) => { // Calculate the actual x-position where the bin will start -> shifted to the left by half the bin width const binStartX = tScale(binArray.x0) - binWidth/2; const nrBinEvents = binArray.length; if (nrBinEvents > 0) { // How large the step is between each stripe let step; if (binNr == (temporalWindowSize - 1)) { // Treat intervention bin differently: Distribute dependent event stripes only across first half of the bin, in front of the intervention event step = binWidth / (nrBinEvents + 2); xInterventionOffset = binWidth / 2 - step; } else { // Distribute dependent event stripes across entire bin step = binWidth / (nrBinEvents + 1); } // Push the x-position for each stripe to the data array binArray.forEach((d, j) => stripeData.push({ // Move the first stripe in by one step x: binStartX + j * step + step })); }; }); const stripeWidth = 3; const g = selection.append('g').attr('class', 'timeline-g'); const gStripeDep = selection.append('g').attr('class', 'dependent-stripe-g'); const gStripeInt = selection.append('g').attr('class', 'intervention-stripe-g'); gStripeDep.selectAll('.dependent-stripe') .data(stripeData) .join('line') .attr('class', 'dependent-stripe') .attr('x1', d => d.x) .attr('x2', d => d.x) .attr('y1', yPosLine - histHeight) .attr('y2', yPosLine) .attr('stroke', fillScale('dependent')) .attr('stroke-width', stripeWidth); // Intervention event (placed first in actual code) gStripeInt.selectAll('.intervention-stripe-' + category) .data([{x: tScale(dateBase) + xInterventionOffset}]) .join('line') .attr('class', 'intervention-stripe-' + category) .attr('x1', d => d.x) .attr('x2', d => d.x) .attr('y1', yPosLine - histHeight) // * 1.3) .attr('y2', yPosLine) .attr('stroke', fillScale(category)) .attr('stroke-width', stripeWidth); // Create ticks for the beginning/end of each day const gTick = g.append('g').attr('class', 'tick-g'); const tickHeight = 3; // Get all days that should be ticked const dayTickData = [...dayThresholds, dateEnd, shiftHours(dateEnd, 24)]; gTick.selectAll('.day-tick') .data(dayTickData) .join('line') .attr('class', 'day-tick') .attr('x1', d => tScale(d) - binWidth/2) .attr('x2', d => tScale(d) - binWidth/2) .attr('y1', yPosLine - tickHeight) .attr('y2', yPosLine) .attr('stroke', 'grey') .attr('stroke-width', 1); // Create brackets for the labelled day bins const gBracket = g.append('g').attr('class', 'bracket-g'); const bracketHeight = 5; gBracket.selectAll('.bracket') .data([dateStart, dateBase, dateEnd]) .join('path') .attr('class', 'bracket') .attr('d', d => { const cx = tScale(d); const path = d3.path(); path.moveTo(cx - binWidth/2, yPosLine + tickHeight) path.lineTo(cx - binWidth/2, yPosLine + tickHeight + bracketHeight) path.lineTo(cx - binWidth/8, yPosLine + tickHeight + bracketHeight) path.lineTo(cx, yPosLine + tickHeight + bracketHeight + tickHeight) path.lineTo(cx + binWidth/8, yPosLine + tickHeight + bracketHeight) path.lineTo(cx + binWidth/2, yPosLine + tickHeight + bracketHeight) path.lineTo(cx + binWidth/2, yPosLine + tickHeight) return path; }) .attr('fill', 'none') .attr('stroke', 'grey'); // Create x-axis function const xAxis = d3.axisBottom().scale(tScale) .tickValues([dateStart, dateBase, dateEnd]) .tickSize(0) .tickFormat(d3.timeFormat("%d %b %Y")); g.selectAll(`#${category}-x-axis-g`) .data([0]) .join( enter => enter.append('g') .attr('class', `${category}-x-axis-g`) .call(xAxis) .attr('transform', `translate(0, ${yPosLine})`) ) .selectAll("text") .attr("dy", "2em"); //appendAxisTicks(g, tScale, category); }3c:T1670,createTimelineSharp = function(selection, xGrid, height, category, histHeight, yPosLine) { const rectHeight = 20; //const histHeight = 20; const rectWidth = 10; //const yPosLine = yGrid(0.5 - paddingY + (category === 'control' ? 0.5 : 0)); const stripeWidth = 3; // Determine the first and list dates in the data set //var monthExtent = d3.extent(data, function(d) { return d.created_date; }); // Create one bin per day (do i need to use an offset to include the first and last day?) const dayThresholds = d3.timeDay.every(1).range(dateStart, dateEnd) const dependentDates = ['pre', 'post'] .map(step => eventData[category].stepData[step].data.filter(d => d.type === category ? false : true)) .flat().map(d => d.date); console.log(dependentDates.map(d => dateToString(d))) const binData = d3.histogram() .domain([dateStart, dateEnd]) .thresholds(dayThresholds) .value(d => d) (dependentDates); // Shift the beginning and the end of the scale to be able to centralize the bins const tScale = d3.scaleTime() .domain([shiftHours(dateStart, -12), shiftHours(dateEnd, 12)]) .range([xGrid('pre'), xGrid('post') + xGrid.bandwidth()]); // Offset to centralize the bars around their date const binWidth = (tScale.range()[1] - tScale.range()[0]) / (2 * temporalWindowSize); // Create an array that contains all the information for the stripes const stripeData = []; binData.forEach((binArray, binNr) => { // Calculate the actual x-position where the bin will start -> shifted to the left by half the bin width const binStartX = tScale(binArray.x0) - binWidth/2; const nrBinEvents = binArray.length; if (nrBinEvents > 0) { // How large the step is between each stripe let step; if (binNr == (temporalWindowSize - 1)) { // Treat intervention bin differently: Distribute dependent event stripes only across first half of the bin, in front of the intervention event step = (binWidth - stripeWidth) / (nrBinEvents + 1); } else { // Distribute dependent event stripes across entire bin step = binWidth / (nrBinEvents + 1); } // Push the x-position for each stripe to the data array binArray.forEach((d, j) => stripeData.push({ // Move the first stripe in by one step x: binStartX + j * step + step })); }; }); const g = selection.append('g').attr('class', 'timeline-g'); const gStripeDep = selection.append('g').attr('class', 'dependent-stripe-g'); const gStripeInt = selection.append('g').attr('class', 'intervention-stripe-g'); gStripeDep.selectAll('.dependent-stripe') .data(stripeData) .join('line') .attr('class', 'dependent-stripe') .attr('x1', d => d.x) .attr('x2', d => d.x) .attr('y1', yPosLine - histHeight) .attr('y2', yPosLine) .attr('stroke', d => { // If the stripe lies outside of the updated temporal window, color it light grey if(d.x >= tScale(shiftHours(dateBase, - temporalWindowSizeUpdated * 24 + 12)) && d.x <= tScale(shiftHours(dateBase, temporalWindowSizeUpdated * 24 + 12))) { return fillScale('dependent'); } else return 'lightgrey'; }) .attr('stroke-width', stripeWidth); // Intervention event (placed first in actual code) gStripeInt.selectAll('.intervention-stripe-' + category) .data([{x: tScale(dateBase) + binWidth/2 - stripeWidth/2}]) .join('line') .attr('class', 'intervention-stripe-' + category) .attr('x1', d => d.x) .attr('x2', d => d.x) .attr('y1', yPosLine - histHeight) // * 1.3) .attr('y2', yPosLine) .attr('stroke', fillScale(category)) .attr('stroke-width', stripeWidth); // Create ticks for the beginning/end of each day const gTick = g.append('g').attr('class', 'tick-g'); const tickHeight = 3; // Get all days that should be ticked const dayTickData = [...dayThresholds, dateEnd, shiftHours(dateEnd, 24)]; gTick.selectAll('.day-tick') .data(dayTickData) .join('line') .attr('class', 'day-tick') .attr('x1', d => tScale(d) - binWidth/2) .attr('x2', d => tScale(d) - binWidth/2) .attr('y1', yPosLine - tickHeight) .attr('y2', yPosLine) .attr('stroke', 'grey') .attr('stroke-width', 1); // Create brackets for the labelled day bins const gBracket = g.append('g').attr('class', 'bracket-g'); const bracketHeight = 5; gBracket.selectAll('.bracket') .data([dateStart, dateBase, dateEnd]) .join('path') .attr('class', 'bracket') .attr('d', d => { const cx = tScale(d); const path = d3.path(); path.moveTo(cx - binWidth/2, yPosLine + tickHeight) path.lineTo(cx - binWidth/2, yPosLine + tickHeight + bracketHeight) path.lineTo(cx - binWidth/8, yPosLine + tickHeight + bracketHeight) path.lineTo(cx, yPosLine + tickHeight + bracketHeight + tickHeight) path.lineTo(cx + binWidth/8, yPosLine + tickHeight + bracketHeight) path.lineTo(cx + binWidth/2, yPosLine + tickHeight + bracketHeight) path.lineTo(cx + binWidth/2, yPosLine + tickHeight) return path; }) .attr('fill', 'none') .attr('stroke', 'grey'); // Create x-axis function const xAxis = d3.axisBottom().scale(tScale) .tickValues([dateStart, dateBase, dateEnd]) .tickSize(0) .tickFormat(d3.timeFormat("%d %b %Y")); g.selectAll(`#${category}-x-axis-g`) .data([0]) .join( enter => enter.append('g') .attr('class', `${category}-x-axis-g`) .call(xAxis) .attr('transform', `translate(0, ${yPosLine})`) ) .selectAll("text") .attr("dy", "2em"); //appendAxisTicks(g, tScale, category); }3d:T612,appendLines = function(map, selection, data, step, tScale, y2, category) { //Project any point to map's current state function projectPoint({ lon, lat }) { const point = map.project(new mapboxgl.LngLat(lon, lat)); return point; } const lines = selection.selectAll('.event-line-'+step) .data(data) .join('line') .attr('class', 'event-line-'+step) .attr('x1', d => xGrid(step) + projectPoint(d.pos).x) .attr('y1', d => yGrid(paddingY + (category === 'control' ? 0.5 : 0)) + projectPoint(d.pos).y) .attr('x2', d => tScale(d.date)) .attr('y2', y2) .attr('stroke', d => strokeScale(d.type)) .attr('stroke-width', 1) .attr('opacity', d => { const x = projectPoint(d.pos).x; const y = projectPoint(d.pos).y; if ( x >= 0 && x <= xGrid.bandwidth() && y >= 0 && y <= xGrid.bandwidth() ) return 0.3; else return 0; }) .style("pointer-events", "none") const update = () => { lines .attr('x1', d => xGrid(step) + projectPoint(d.pos).x) .attr('y1', d => yGrid(paddingY + (category === 'control' ? 0.5 : 0)) + projectPoint(d.pos).y) .attr('opacity', d => { const x = projectPoint(d.pos).x; const y = projectPoint(d.pos).y; if ( x >= 0 && x <= xGrid.bandwidth() && y >= 0 && y <= xGrid.bandwidth() ) return 0.3; else return 0; }); } // Every time the map changes, update the dots map.on("viewreset", update); map.on("move", update); map.on("moveend", update); update(); }3e: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. */ }3f:T5d5,eventData = { rerandomize; const eventData = {}; categories.forEach(category => { const stepData = { pre: { step: 'pre', data: [...d3.range(nrDependentTreatmentPre).map(d => { return { pos: {lat: latBase[category] + (Math.random() * 0.18 - 0.09), lon: lonBase[category] + (Math.random() * 0.18 - 0.09)}, type: 'dependent', date: randomDate(dateStart, shiftHours(dateBase, 23)) }; }), {pos: {lat: latBase[category], lon: lonBase[category]}, type: category, date: dateBase}] }, peri: { step: 'peri', data: [ {pos: {lat: latBase[category], lon: lonBase[category]}, type: category, date: dateBase} ] }, post: { step: 'post', data: [...d3.range(category == 'control' ? nrDependentTreatmentPost + deltaControlPost : nrDependentTreatmentPost).map(d => { return { pos: {lat: latBase[category] + (Math.random() * 0.18 - 0.09), lon: lonBase[category] + (Math.random() * 0.18 - 0.09)}, type: 'dependent', date: randomDate(shiftHours(dateBase, 24), dateEnd) // Das bringt seltsamerweise nichts: shiftHours(dateEnd, 23) -> für mock aber nicht essentiell }; }), {pos: {lat: latBase[category], lon: lonBase[category]}, type: category, date: dateBase}] } } eventData[category] = { category, stepData } }); return eventData; }40:[] 2f:{"title":"Map (Stripe Plot) & Regression","cells":[{"id":0,"value":"# Map (Stripe Plot) & Regression","pinned":false,"hidden":false,"mode":"md"},{"id":212,"value":"viewof temporalWindowSize = Inputs.select(d3.range(31), {value: 8, label: \"Size of temporal window\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"viewof nrDependentTreatmentPre = Inputs.select(d3.range(21), {value: 5, label: \"Nr. of dependent events before treatment\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"viewof nrDependentTreatmentPost = Inputs.select(d3.range(21), {value: 8, label: \"Nr. of dependent events after treatment\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"viewof deltaControlPost = Inputs.range([-nrDependentTreatmentPost, nrDependentTreatmentPost], {step: 1, value: -4, label: \"Difference of dependent events after control in comparison to after treatment\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"viewof displayLines = Inputs.toggle({label: \"Display Lines\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"viewof redraw = Inputs.button(\"Redraw\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"viewof rerandomize = Inputs.button(\"Rerandomize\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1350,"value":"viewof drawMap = Inputs.toggle({label: \"Draw the map?\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"thoughts = {\n/*\nQuick notes\n- I could transition from first having the intervention stripe centered (when there are no dependents yet) to it moving to the right once stripes are added to its bin\n- The question remains how to use a stripe plot when displaying all events?\n*/\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"viewof colorTreatment = Inputs.color({label: \"Treatment color\", value: \"#ca6b58\"}) //#F24726","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"viewof colorControl = Inputs.color({label: \"Control color\", value: \"#808080\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"viewof colorDependent = Inputs.color({label: \"Dependent color\", value: \"#2D9BF0\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"viewof annotationColor = Inputs.color({label: \"Annotation text color\", value: \"#828282\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1003,"value":"viewof checkboxes = Inputs.checkbox([\"Trend bracket 1\", \"Trend bracket 2\"], {label: \"Select some\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1101,"value":"viewof labelPlacement = Inputs.radio([\"ontop\", \"side\"], {label: \"Label placement\", value: 'side'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1125,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1317,"value":"viewof temporalWindowSizeUpdated = Inputs.range([temporalWindowSize, 2], {label: \"Adjusted temporal window size\", step: 2, value: temporalWindowSize})","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"## Helper functions Regression Chart","pinned":false,"hidden":false,"mode":"md"},{"id":1072,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"createAxisLabel = function(selection) {\n const textBase = selection.append('text')\n .attr('class', 'annotation-text')\n .attr('fill', annotationColor)\n .attr('font-size', 11)\n .attr('y', '-1.2em')\n .attr('text-anchor', 'end');\n\n textBase.append('tspan')\n .text('Number of dependent');\n \n textBase.append('tspan')\n .html('events in the interval ↑');\n\n textBase.selectAll('tspan')\n .attr('x', 0)\n .attr('dx', '-2.4em')\n .attr('dy', '1.2em');\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"appendTrendBrackets = function(selection, x, x1, x2, y, bracketHeight) {\n // Create brackets for the trend intervals\n const g = selection.append('g').attr('class', 'trend-bracket-g');\n\n // Calculate the path\n const path = d3.path();\n path.moveTo(x1, y + bracketHeight);\n path.lineTo(x1 + 2, y + bracketHeight/2);\n path.lineTo(d3.max([x - bracketHeight/2, x1]), y + bracketHeight/2);\n path.lineTo(x, y);\n path.lineTo(d3.min([x + bracketHeight/2, x2]), y + bracketHeight/2);\n path.lineTo(x2 - 2, y + bracketHeight/2);\n path.lineTo(x2, y + bracketHeight);\n \n g.append('path')\n .attr('class', 'trend-bracket')\n .attr('d', path)\n .attr('fill', 'none')\n .attr('stroke', 'grey');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1260,"value":"defineArrowHead = function(selection, size, category) {\n const arrowPoints = [[0, 0], [0, size], [size, size/2]];\n const refX = size / 2;\n const refY = size / 2;\n \n selection\n .append('defs')\n .append('marker')\n .attr('id', category + '-arrow')\n .attr('viewBox', [0, 0, size, size])\n .attr('refX', refX)\n .attr('refY', refY)\n .attr('markerWidth', size)\n .attr('markerHeight', size)\n .attr('orient', 'auto-start-reverse')\n .append('path')\n .attr('d', d3.line()(arrowPoints))\n .attr('fill', 'grey')\n //.attr('fill', color['dependent']);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":1046,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"getNrEvents = function() {\n const nrEvents = {};\n \n // Get the max count across all categories\n categories.forEach((category, c) => {\n nrEvents[category] = {};\n \n nrEvents[category]['preA'] = eventData[category].stepData['pre'].data\n .filter(d => d.type === 'dependent')\n .filter(d => (d.date >= shiftHours(dateBase, -24 * temporalWindowSizeUpdated + 24)) && \n (d.date <= shiftHours(dateBase, -24 * temporalWindowSizeUpdated / 2))).length;\n nrEvents[category]['preB'] = eventData[category].stepData['pre'].data\n .filter(d => d.type === 'dependent')\n .filter(d => d.date > shiftHours(dateBase, -24 * temporalWindowSizeUpdated / 2)).length;\n nrEvents[category]['post'] = eventData[category].stepData['post'].data\n .filter(d => d.type === 'dependent')\n .filter(d => d.date <= shiftHours(dateBase, 24 * temporalWindowSizeUpdated)).length;\n });\n\n return nrEvents;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"value":"getMaxEvents = function() {\n return d3.max([\n eventData['treatment'].stepData['pre'].data.filter(d => d.type === 'dependent').length,\n eventData['treatment'].stepData['post'].data.filter(d => d.type === 'dependent').length,\n eventData['control'].stepData['pre'].data.filter(d => d.type === 'dependent').length,\n eventData['control'].stepData['post'].data.filter(d => d.type === 'dependent').length\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"### Old","pinned":false,"hidden":false,"mode":"md"},{"id":829,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"## Helper functions Stripe Plot","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"createMapContainer = function(selection, x, y, mapHeight) {\n return selection.append('foreignObject')\n .attr('x', x)\n .attr('y', y)\n .attr('width', mapHeight)\n .attr('height', mapHeight)\n .append('xhtml:div')\n .attr('id', 'map1')\n .style('width', mapHeight+'px')\n .style('height', mapHeight+'px');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"createMap = function(container, category) {\n return new mapboxgl.Map({\n container: container.node(),\n center: [lonBase[category], latBase[category]],\n zoom,\n style: \"mapbox://styles/mapbox/light-v9\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"fillScale = function(type) {\n if (type === 'treatment') return colorTreatment;\n else if (type === 'dependent') return colorDependent;\n else if (type === 'control') return colorControl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"strokeScale = function(type) {\n if (type === 'treatment') return colorTreatment;\n else if (type === 'dependent') return colorDependent;\n else if (type === 'control') return colorControl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"getOverlaySvg = function(container, mapHeight) {\n return container.append(\"svg\")\n .style(\"position\", \"absolute\")\n .style(\"top\", 0)\n .style(\"left\", 0) \n .attr(\"width\", mapHeight)\n .attr(\"height\", mapHeight)\n .style(\"pointer-events\", \"none\"); // the svg shouldn't capture mouse events, so we can have pan and zoom from mapbox\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"shiftHours = function(date, hours) {\n const dateClone = new Date(date);\n dateClone.setHours(hours);\n return dateClone;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"## Data generation","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"## Parameters Regression Chart","pinned":false,"hidden":false,"mode":"md"},{"id":832,"value":"color = {\n return {\n treatment: colorTreatment,\n control: colorControl,\n dependent: colorDependent,\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"## Parameters extracted from the code, not really meant to be changed","pinned":false,"hidden":false,"mode":"md"},{"id":106,"value":"zoom = 8.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"latBase = {\n return {\n 'treatment': 34.599755,\n 'control': 33.599755\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"lonBase = {\n return {\n 'treatment': 69.199180,\n 'control': 68.199180\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"paddingX = 0.15","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"paddingY = 0.05","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"categories = ['treatment', 'control']","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"steps = ['pre', 'post', 'peri']","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"marginLeft = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"xGrid = d3.scaleBand()\n .domain(['pre', 'peri', 'post'])\n .range([marginLeft, width * 0.95])\n .padding(paddingX)","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"yGrid = d3.scaleLinear()\n .domain([0, 1])\n .range([0, height])","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"mapContainers = {\n const outObj = {}; \n categories.forEach(category => { outObj[category] = {}; }); \n return outObj; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"maps = {\n const outObj = {}; \n categories.forEach(category => { outObj[category] = {}; }); \n return outObj; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"svgOverlays = {\n const outObj = {}; \n categories.forEach(category => { outObj[category] = {}; }); \n return outObj; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoidG1jdyIsImEiOiJja3FmbGJoNXMxNmx5Mm9uejIxcmpiNjh2In0.2F8HR-8J859J7frYE6DG9g\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"syncMaps = await require('https://bundle.run/mapbox-gl-sync-move@0.1.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"## Style","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"## Some date scribbling","pinned":false,"hidden":false,"mode":"md"},{"id":217,"value":"function randomDate(start, end) {\n console.log(end.getTime())\n console.log()\n const date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));\n date.setHours(0,0,0,0);\n return date;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"dateStart = {\n let dateStart = new Date(dateBase);\n dateStart.setDate(dateStart.getDate() - +temporalWindowSize + 1)\n return dateStart;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"dateBase = {\n rerandomize;\n return randomDate(baseDateStart, baseDateEnd);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"dateEnd = {\n let dateEnd = new Date(dateBase);\n dateEnd.setDate(dateEnd.getDate() + +temporalWindowSize)\n return dateEnd;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"dateToString(dateStart)","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"dateToString(dateBase)","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"dateToString(dateEnd)","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"baseDateEnd = new Date('December 31, 2009') // the month would be 0-indexed","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"baseDateStart = new Date('January 01, 2008')","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"dateToString = date => date.toLocaleString(undefined, {\n day: \"numeric\",\n month: \"short\",\n year: \"numeric\"\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W40","stdlib":"1","titling":"auto"}