30:T54c8,heatmap = { const margin = { top: 0, right: 50, bottom: 50, left: 50 }; const chartWidth = width - (margin.left + margin.right); const cellSize = chartWidth / 16; margin.top = cellSize * 3.5; const height = cellSize * 8 + margin.top + margin.bottom + margin.right; const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("text") .attr("x", width / 2) .attr("y", margin.top / 4) .text("Fall 2024 Semester Events") .attr("font-family", "Lexend") .attr("font-size", 16) .attr("text-anchor", "middle") .attr("pointer-events", "none"); const monthScale = d3 .scaleLinear() .domain([0, allDates.length]) .range([margin.left, width - margin.right]); const weekScale = d3 .scaleLinear() .domain([34, 50]) .range([margin.left, width - margin.right]); const dateScale = d3 .scaleLinear() .domain([0, 7]) .range([margin.top, cellSize * 7 + margin.top]); const legend = svg .append("g") .attr("transform", `translate(${(width - cellSize * 8) / 2})`); legend .selectAll(".legends") .data(d3.range(8).map((d) => d / 7)) .join("rect") .attr("x", (d, i) => cellSize * i) .attr("y", height - margin.bottom - cellSize) .attr("width", cellSize) .attr("height", cellSize / 2) .attr("fill", (d) => colorMap(d * 0.95)); legend .append("text") .attr("y", height - margin.bottom) .text("← Fewer Calendar Events") .attr("font-family", "Lexend") .attr("font-size", 12) .attr("pointer-events", "none"); legend .append("text") .attr("x", cellSize * 8) .attr("y", height - margin.bottom) .text("More Calendar Events →") .attr("font-family", "Lexend") .attr("font-size", 12) .attr("text-anchor", "end") .attr("pointer-events", "none"); const monthAvgScale = d3.scaleLinear().domain( d3.extent( allMonths.map((d) => d3.mean( d3.range(12).map((p) => d.events .map((e) => e.events) .flat() .filter((g) => g.participant == p) .flat() .reduce((a, v) => (a += v.duration), 0) ) ) ) ) ); svg .append("g") .selectAll(".monthSquares") .data(allMonths) .join("rect") .attr("width", (d) => monthScale(d.endOffset) - monthScale(d.startOffset)) .attr("height", cellSize / 2) .attr("x", (d) => monthScale(d.startOffset)) .attr("y", (d) => margin.top - cellSize * 2) .attr("fill", (d) => { if (group == "Comparative") { return colorMap( monthAvgScale( d3.mean( d3.range(1, 12).map((p) => d.events .map((e) => e.events) .flat() .filter((g) => g.participant == p) .flat() .reduce((a, v) => (a += v.duration), 0) ) ) * 0.9 ) ); } else { return colorMap( d3 .scaleLinear() .domain(d3.extent(allMonths, (w) => w.meetingDuration))( d.meetingDuration ) * 0.9 ); } }) .on("mouseover", (e, d) => { d3.select(e.currentTarget) .raise() .transition() .attr("stroke", "white") .attr("stroke-width", 2); tt.attr("opacity", 1); ttTitle.text(monthLabels.find((m, i) => i == d.month - 1)); ttValue.text(d.meetingDuration.toFixed(2) + " Total Event Hours"); if (group == "Comparative") { ttPersonCount.text( "You: " + d.events .map((e) => e.events) .flat() .filter((e) => e.participant == 0) .reduce((a, v) => (a += v.duration / 60), 0) + " | Avg Others: " + ( d.events .map((e) => e.events) .flat() .filter((e) => e.participant !== 0) .reduce((a, v) => (a += v.duration / 60), 0) / 11 ).toFixed(2) ); } ttAverage.text( (d.meetingDuration ? d.meetingDuration / d.eventCount : 0).toFixed(2) + " Average Event Length" ); tt.attr( "transform", `translate(${ monthScale(d.startOffset) + (monthScale(d.endOffset) - monthScale(d.startOffset)) / 2 - (d3.pointer(e)[0] > width / 2 ? 200 : 0) },${margin.top - cellSize * 1.75})` ); }) .on("mouseout", (e, d) => { d3.select(e.currentTarget) .lower() .transition() .attr("stroke", "none") .attr("stroke-width", 0); ttWeekComparison.text(""); tt.attr("opacity", 0); }); svg .append("g") .selectAll(".monthLabels") .data(allMonths) .join("text") .text((d) => monthLabels[d.month - 1].substring(0, 3)) .attr( "x", (d) => monthScale(d.startOffset) + monthScale(d.endOffset) - monthScale(d.startOffset) - 2 ) .attr("y", (d) => margin.top - cellSize * 2 + 2) .attr("text-anchor", "end") .attr("dominant-baseline", "hanging") .attr("font-family", "Lexend") .attr("fill", "white") .attr("pointer-events", "none"); const weekAvgScale = d3.scaleLinear().domain( d3.extent( allWeeks .map((d) => d3.range(12).map((p) => d.events .map((e) => e.events) .flat() .filter((g) => g.participant == p) .flat() .reduce((a, v) => (a += v.duration), 0) ) ) .flat() ) ); svg .append("g") .selectAll(".weekSquares") .data(allWeeks) .join("rect") .attr("width", cellSize) .attr("height", cellSize / 2) .attr("x", (d) => weekScale(d.week)) .attr("y", (d) => margin.top - cellSize) .attr("fill", (d) => { if (group == "Comparative") { return colorMap( weekAvgScale( d3.mean( d3.range(1, 12).map((p) => d.events .map((e) => e.events) .flat() .filter((g) => g.participant == p) .flat() .reduce((a, v) => (a += v.duration), 0) ) ) * 0.9 ) ); } else { return colorMap( d3 .scaleLinear() .domain(d3.extent(allDates, (w) => w.meetingDuration))( d.meetingDuration ) * 0.9 ); } }) .on("mouseover", (e, d) => { d3.select(e.currentTarget) .raise() .transition() .attr("stroke", "white") .attr("stroke-width", 2); tt.attr("opacity", 1); ttTitle.text("Week " + (d.week - 33)); ttValue.text(d.meetingDuration.toFixed(2) + " Total Event Hours"); ttAverage.text( (d.meetingDuration ? d.meetingDuration / d.eventCount : 0).toFixed(2) + " Average Event Length" ); if (group == "Comparative") { ttPersonCount.text( "You: " + d.events .map((e) => e.events) .flat() .filter((e) => e.participant == 0) .reduce((a, v) => (a += v.duration / 60), 0) + " | Avg Others: " + ( d.events .map((e) => e.events) .flat() .filter((e) => e.participant !== 0) .reduce((a, v) => (a += v.duration / 60), 0) / 11 ).toFixed(2) ); } tt.attr( "transform", `translate(${ weekScale(d.week) + cellSize / 2 - (d3.pointer(e)[0] > width / 2 ? 200 : 0) },${margin.top - cellSize + cellSize / 4})` ); }) .on("mouseout", (e, d) => { tt.attr("opacity", 0); ttWeekComparison.text(""); d3.select(e.currentTarget) .lower() .transition() .attr("stroke", "none") .attr("stroke-width", 0); }); svg .append("g") .selectAll(".weekLabels") .data(allWeeks) .join("text") .attr("x", (d) => weekScale(d.week) + cellSize - 2) .attr("y", (d) => margin.top - cellSize + 2) .text((d) => "W" + (d.week - 33)) .attr("text-anchor", "end") .attr("dominant-baseline", "hanging") .attr("font-family", "Lexend") .attr("fill", "white") .attr("pointer-events", "none") .attr("font-size", 12); const dayAvgScale = d3 .scaleLinear() .domain( d3.extent( allDates .map((d) => d3.mean( d3 .range(12) .map((p) => d.events .filter((g) => g.participant == p) .reduce((a, v) => (a += v.duration), 0) ) ) ) .flat() ) ); svg .append("g") .selectAll(".dateSquares") .data(allDates) .join("rect") .attr("width", cellSize) .attr("height", cellSize) .attr("x", (d) => weekScale(d.week)) .attr("y", (d) => dateScale(d.day)) .attr("opacity", 1) .attr("fill", (d) => { if (group == "Comparative") { return colorMap( dayAvgScale( d3.mean( d3 .range(12) .map((p) => d.events .filter((g) => g.participant == p) .reduce((a, v) => (a += v.duration), 0) ) ) * 0.9 ) ); } else { return colorMap( d3 .scaleLinear() .domain(d3.extent(allDates, (w) => w.meetingDuration))( d.meetingDuration ) * 0.9 ); } }) .on("mouseover", (e, d) => { d3.select(e.currentTarget) .raise() .transition() .attr("stroke", "white") .attr("stroke-width", 2); tt.attr("opacity", 1); ttTitle.text( new Date( new Date(d.dateString).getTime() + 21600000 ).toLocaleDateString(undefined, options) ); ttValue.text(d.meetingDuration.toFixed(2) + " Total Event Hours"); ttAverage.text( (d.meetingDuration ? d.meetingDuration / d.events.length : 0).toFixed( 2 ) + " Average Event Length" ); ttWeekComparison.text( (d.meetingDuration ? d.meetingDuration : 0) > allWeeks.find((w) => w.week == d.week).meetingDuration / allWeeks.find((w) => w.week == d.week).events.length ? "Above average for Week " + (d.week - 33) : "Below average for Week " + (d.week - 33) ); ttMonthComparison.text( (d.meetingDuration ? d.meetingDuration : 0) > allMonths.find((m) => m.month == d.month).meetingDuration / allMonths.find((m) => m.month == d.month).events.length ? "Above average for " + monthLabels[d.month - 1] : "Below average for " + monthLabels[d.month - 1] ); if (group == "Collective") { const personCount = Array.from( new Set(d.events.map((e) => e.participant)) ).length; ttPersonCount.text( personCount + (personCount == 1 ? " person has" : " people have") + " Events" ); } if (group == "Comparative") { ttPersonCount.text( "You: " + d.events .filter((e) => e.participant == 0) .reduce((a, v) => (a += v.duration / 60), 0) + " | Avg Others: " + ( d.events .filter((e) => e.participant !== 0) .reduce((a, v) => (a += v.duration / 60), 0) / 11 ).toFixed(2) ); } tt.attr( "transform", `translate(${ weekScale(d.week) + cellSize / 2 - (d3.pointer(e)[0] > width / 2 ? 200 : 0) },${dateScale(d.day) + cellSize / 2})` ); }) .on("mouseout", (e, d) => { d3.select(e.currentTarget) .lower() .transition() .attr("stroke", "none") .attr("stroke-width", 0); tt.attr("opacity", 0); ttWeekComparison.text(""); ttMonthComparison.text(""); ttPersonCount.text(""); }); if (group == "Comparative") { svg .append("g") .selectAll(".dateCircles") .data(allDates.filter((d) => d.events.some((e) => e.participant == 0))) .join("circle") .attr("r", cellSize / 6) .attr("stroke", "black") .attr("stroke-width", 3) .attr("cx", (d) => weekScale(d.week) + cellSize / 2) .attr("cy", (d) => dateScale(d.day) + cellSize / 2) .attr("pointer-events", "none") .attr("fill", (d) => colorMap( dayAvgScale( d.events .filter((e) => e.participant == 0) .reduce((a, v) => (a += v.duration), 0) ) * 0.9 ) ); svg .append("g") .selectAll(".weekCircles") .data(allWeeks) .join("circle") .attr("r", cellSize / 10) .attr("stroke", "black") .attr("stroke-width", 3) .attr("cx", (d) => weekScale(d.week) + cellSize / 2) .attr("cy", (d) => margin.top - cellSize + cellSize / 4) .attr("pointer-events", "none") .attr("fill", (d) => colorMap( weekAvgScale( d.events .map((e) => e.events) .flat() .filter((g) => g.participant == 0) .reduce((a, v) => (a += v.duration), 0) ) * 0.9 ) ); svg .append("g") .selectAll(".monthCircles") .data(allMonths) .join("circle") .attr("r", cellSize / 10) .attr("stroke", "black") .attr("stroke-width", 3) .attr( "cx", (d) => monthScale(d.startOffset) + (monthScale(d.endOffset) - monthScale(d.startOffset)) / 2 ) .attr("cy", (d) => margin.top - cellSize * 1.75) .attr("pointer-events", "none") .attr("fill", (d) => colorMap( monthAvgScale( d.events .map((e) => e.events) .flat() .filter((g) => g.participant == 0) .reduce((a, v) => (a += v.duration), 0) ) * 0.9 ) ); } svg .append("g") .selectAll(".dateLabels") .data(allDates) .join("text") .attr("x", (d) => weekScale(d.week) + cellSize - 2) .attr("y", (d) => dateScale(d.day) + 2) .text((d) => d.date) .attr("text-anchor", "end") .attr("dominant-baseline", "hanging") .attr("font-family", "Lexend") .attr("fill", "white") .attr("pointer-events", "none"); svg .append("g") .selectAll(".dayLabels") .data(["S", "M", "T", "W", "T", "F", "S"]) .join("text") .text((d) => d) .attr("x", margin.left * 0.75) .attr("y", (d, i) => margin.top + cellSize * (i + 0.5)) .attr("text-anchor", "end") .attr("alignment-baseline", "middle") .attr("font-family", "Lexend") .attr("fill", "black") .attr("pointer-events", "none"); const tt = svg.append("g").attr("pointer-events", "none").attr("opacity", 0); tt.append("rect") .attr("width", 200) .attr("height", 150) .attr("fill", "white") .attr("opacity", 0.8) .attr("stroke-width", 0.5) .attr("stroke", "black"); const ttTitle = tt .append("text") .attr("x", 10) .attr("y", 30) .attr("font-family", "Lexend") .attr("font-weight", 300) .attr("font-size", 16); const ttValue = tt .append("text") .attr("x", 10) .attr("y", 55) .attr("font-family", "Lexend") .attr("font-weight", 300) .attr("font-size", 12); const ttAverage = tt .append("text") .attr("x", 10) .attr("y", 75) .attr("font-family", "Lexend") .attr("font-weight", 300) .attr("font-size", 12); const ttWeekComparison = tt .append("text") .attr("x", 10) .attr("y", 95) .attr("font-family", "Lexend") .attr("font-weight", 300) .attr("font-size", 12); const ttMonthComparison = tt .append("text") .attr("x", 10) .attr("y", 115) .attr("font-family", "Lexend") .attr("font-weight", 300) .attr("font-size", 12); const ttPersonCount = tt .append("text") .attr("x", 10) .attr("y", 135) .attr("font-family", "Lexend") .attr("font-weight", 300) .attr("font-size", 12); return mode == "Visual" ? svg.node() : Inputs.form({ dates: Inputs.table( allDates.map((d) => ({ Day: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ][d.day], // Date: new Date(d.dateString + "T06:00:00").toLocaleString( // undefined, // options // ), Month: d.month, Date: d.date, "Week of Semester": d.week - 33, "Number of Events": d.eventCount, [[selfLabel] + " Events"]: d.events.filter( (e) => e.participant == 0 ).length, [[othersLabel] + " Events"]: d.events.filter( (e) => e.participant !== 0 ).length, [[selfLabel] + " Avg Duration"]: d.events .filter((e) => e.participant == 0) .reduce((a, v) => (a += v.duration), 0) / 60 / d.events.filter((e) => e.participant == 0).length, [[othersLabel] + " Avg Duration"]: d.events .filter((e) => e.participant !== 0) .reduce((a, v) => (a += v.duration), 0) / 60 / d.eventCount // "Average Duration": d.eventCount // ? d.meetingDuration / d.eventCount // : 0, //"Total Duration": d.meetingDuration // "Participant Count": Array.from( // new Set(d.events.map((e) => e.participant)) // ).length, // "Week Avg ⇅": // (d.eventCount ? d.meetingDuration / d.eventCount : 0) > // allWeeks.find((e) => e.week == d.week).meetingDuration / // allWeeks.find((e) => e.week == d.week).eventCount // ? "Above" // : "Below" })) ), a: md`---`, weeks: Inputs.table( allWeeks.map((d) => ({ "Week of Semester": String(d.week - 33), "Number of Events": d.eventCount, //"Total Duration": d.meetingDuration, [[selfLabel] + " Events"]: d.events .map((e) => e.events) .flat() .filter((e) => e.participant == 0).length, [[othersLabel] + " Events"]: d.events .map((e) => e.events) .flat() .filter((e) => e.participant !== 0).length, [[selfLabel] + " Daily Avg Duration"]: d3.mean( d.events.map((day) => { let selfEvents = day.events.filter((e) => e.participant == 0); let selfTime = selfEvents.reduce( (a, v) => (a += v.duration / 60), 0 ); return selfTime; }) ), [[othersLabel] + " Daily Avg Duration"]: d3.mean( d.events.map((day) => { let otherEvents = day.events.filter((e) => e.participant !== 0); let otherTime = otherEvents.reduce( (a, v) => (a += v.duration / 60), 0 ); return otherTime / 11 ? otherTime / 11 : 0; }) ) // "Average Duration": d.eventCount // ? d.meetingDuration / d.eventCount // : 0 })) ), b: md`---`, months: Inputs.table( allMonths.map((d) => ({ Month: monthLabels[d.month - 1], "Number of Events": d.eventCount, [[selfLabel] + " Events"]: d.events .map((e) => e.events) .flat() .filter((e) => e.participant == 0).length, [[othersLabel] + " Events"]: d.events .map((e) => e.events) .flat() .filter((e) => e.participant !== 0).length, [[selfLabel] + " Daily Avg Duration"]: d3.mean( d.events.map((day) => { let selfEvents = day.events.filter((e) => e.participant == 0); let selfTime = selfEvents.reduce( (a, v) => (a += v.duration / 60), 0 ); return selfTime; }) ), [[othersLabel] + " Daily Avg Duration"]: d3.mean( d.events.map((day) => { let otherEvents = day.events.filter((e) => e.participant !== 0); console.log(day.events); let otherTime = otherEvents.reduce( (a, v) => (a += v.duration / 60), 0 ); return otherTime / 11 ? otherTime / 11 : 0; }) ) //"Total Duration": d.meetingDuration, // "Average Duration": d.eventCount // ? d.meetingDuration / d.eventCount // : 0 })) ) }); }31:T178c,jitter = { const margin = { top: 100, right: 50, bottom: 100, left: 125 }; const height = width / 2; const xJitterScale = group == "Personal" ? 0.5 : 0.25; const yJitterScale = group == "Personal" ? 1 : 0.5; const radius = 6; const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("text") .attr("x", width / 2) .attr("y", margin.top / 4) .text("Fall 2024 Semester Event Engagement") .attr("font-family", "Lexend") .attr("font-size", 16) .attr("text-anchor", "middle") .attr("pointer-events", "none"); const teamScale = d3 .scalePoint() .domain(Object.keys(Object.values(types[0])[0])) .range([height - margin.bottom, margin.top]); types.forEach((tG, tI) => { const typeScale = d3 .scalePoint() .padding(0.5) .domain(Object.keys(tG)) .range([0, 300]); const colorScale = d3 .scalePoint() .domain(Object.keys(Object.values(tG)[0])); const typeHolder = svg .append("g") .attr("transform", `translate(${tI * (width / 3.25) + margin.left},0)`); typeHolder .append("g") .attr("transform", `translate(0,${height - margin.bottom / 2})`) .call( d3 .axisBottom(typeScale) .tickFormat((d, i) => d) .tickFormat((d) => d.replaceAll("Meetings", "")) ) .attr("font-family", "Lexend") .call((g) => g .selectAll(".tick text") .attr("x", 0) .attr("dy", 12) .attr("font-size", 14) ); //.call((g) => g.select(".domain").remove()); const yAxis = typeHolder .append("g") // .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(teamScale).tickSize(-width / 3.25 + margin.right)) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick line") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "2,2") ) .call((g) => g .selectAll(".tick text") .attr("x", 0) .attr("dy", 2) .attr("font-size", 14) .attr("display", tI == 0 ? true : "none") ) .attr("font-family", "Lexend"); Object.entries(tG).forEach((type) => { { Object.entries(type[1]).forEach((team) => { const typed = d3.range(team[1].events.length).map((d, i) => { const theta = Math.random() * 2 * Math.PI; return { ...team[1].events[i], type: type[0], team: team[0], count: team[1].events.length, theta, y: teamScale(team[0]) + Math.sin(theta) * Math.random() * team[1].events.length * yJitterScale, x: typeScale(type[0]) + Math.cos(theta) * Math.random() * team[1].events.length * xJitterScale }; }); typeHolder .selectAll(".scatters") .data(typed) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", radius) .attr("opacity", (d) => { if (group == "Comparative") { return d.participant == 0 ? 0.6 : 0.4; } else { return 0.5; } }) .attr("fill", (d) => { if (group == "Comparative") { return d.participant == 0 ? colorMap(0.9) : colorMap(0.125); } else { return colorMap(colorScale(d.team) * 0.9); } }) .on("mouseover", (e, d) => { const mouse = d3.pointer(e); ttText1.text( "You: " + typed.filter((e) => e.participant == 0).length + " " + d.type.split("Meetings")[0] + " " + d.team ); ttText2.text( "Avg Other: " + ( typed.filter((e) => e.participant !== 0).length / 11 ).toFixed(2) + " " + d.type.split("Meetings")[0] + " " + d.team ); tt.attr("opacity", 1); tt.attr( "transform", `translate(${ mouse[0] < width / 3.25 - margin.left ? mouse[0] + tI * (width / 3.25) + margin.left : mouse[0] - 300 + tI * (width / 3.25) + margin.left } ${mouse[1] - 25})` //`translate(${typeScale(d.type)},${teamScale(d.team)})` ); }) .on("mouseout", (e, d) => { tt.attr("opacity", 0); }); }); } }); }); const tt = svg.append("g").attr("pointer-events", "none").attr("opacity", 0); tt.append("rect") .attr("width", 300) .attr("height", 50) .attr("fill", "white") .attr("opacity", 0.8) .attr("stroke-width", 0.5) .attr("stroke", "black"); const ttText1 = tt .append("text") .text("") .attr("x", 10) .attr("y", 20) .attr("font-family", "Lexend") .attr("font-weight", 300) .attr("font-size", 12); const ttText2 = tt .append("text") .text("") .attr("x", 10) .attr("y", 40) .attr("font-family", "Lexend") .attr("font-weight", 300) .attr("font-size", 12); return mode == "Visual" ? svg.node() : Inputs.table( Object.entries( types.flat().reduce((a, v) => Object.assign(a, v), {}) ).map((d) => ({ "Meeting Type": d[0], ...Object.entries(d[1]).reduce((a, v) => { a[v[0]] = v[1].events.length; return a; }, {}) })) ); }32:T1889,network = { const height = width; const distance = group == "Personal" ? width / 5 : width; const strength = group == "Personal" ? width * 1.5 : width * 10; const linkColor = "#a0aeff"; const dragFixed = true; const textColor = "#fff"; const nodeOpacity = 1; const fontSize = 14; const linkOpacity = 0.5; const linkThicknessScale = 0.1; const bgRectOpacity = 0.7; const font = "Lexend"; const linkZoomed = ({ transform }) => { d3.select("#linkZoomableElements").attr("transform", transform); }; const linkZoomBehavior = d3 .zoom() .extent([ [-width / 2, width / 2], [-width / 2, width / 2] ]) .scaleExtent([0.001, 3]) .on("zoom", linkZoomed); const links = data.links.map((d) => ({ ...d })); const nodes = data.nodes.map((d) => { let copy = { ...d }; if (d.fixed) { copy.fx = 0; copy.fy = 0; } return copy; }); // Create a simulation with several forces. const simulation = d3 .forceSimulation(nodes) .force( "link", d3 .forceLink(links) .id((d) => d.id) .distance(distance) ) .force("charge", d3.forceManyBody().strength(-strength)) .force("x", d3.forceX()) .force("y", d3.forceY()); // Create the SVG container. const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]); svg .append("rect") .attr("width", width) .attr("height", width) .attr("x", -width / 2) .attr("y", -width / 2) .attr("fill", "#FFF"); //zoom and pan const g = svg .append("g") .attr("id", "linkZoomableElements") .attr("transform", "translate(0, 0)"); svg.call(linkZoomBehavior); svg.on("dblclick.zoom", null); // Add a line for each link, and a circle for each node. const link = g .append("g") .selectAll("line") .data(links) .join("path") .attr("stroke", linkColor) .attr("fill", "none") .attr("stroke-opacity", linkOpacity) .attr("stroke-width", (d) => Math.pow(d.value, 0.25)); const node = g .append("g") .selectAll("circle") .data(nodes) .join("circle") .attr("r", (d) => { if (group == "Comparative") { return d.id == calendarID ? d.count / 5 + 50 : d.count / 5 + 5; } else { return d.count / 5 + 5; } }) .style("cursor", "crosshair") .attr("fill", (d) => { if (group == "Comparative") { return d.id == calendarID ? "#E71D36" : colorMap(networkScale(d.count) * 0.9); } else { return colorMap(networkScale(d.count) * 0.9); } }) .attr("opacity", nodeOpacity); const bgRects = g .append("g") .selectAll("rect.label") .data(nodes) .join("rect") .attr("fill", (d) => { if (group == "Comparative") { return d.id == calendarID ? "#E71D36" : colorMap(networkScale(d.count) * 0.9); } else { return colorMap(networkScale(d.count) * 0.9); } }) .attr("width", (d) => { if (group == "Comparative") { return d.id == calendarID ? d.id.length * (fontSize / 1) : d.id.length * (fontSize / 1.5); } else { return d.id.length * (fontSize / 1.5); } }) .attr("height", (d) => fontSize * 2) .attr("opacity", bgRectOpacity); const text = g .append("g") .selectAll("text") .data(nodes) .join("text") .attr("pointer-events", "none") .attr("font-family", font) .attr("font-size", (d) => { if (group == "Comparative") { return d.id == calendarID ? fontSize * 1.6 : fontSize; } else { return fontSize; } }) .attr("fill", textColor) .attr("dominant-baseline", "middle"); //.text((d) => d.id); node.append("title").text((d) => d.id); // Add a drag behavior. node.call( d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended) ); bgRects.call( d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended) ); // Set the position attributes of links and nodes each time the simulation ticks. simulation.on("tick", () => { link.attr("d", (d) => { return `M ${d.source.x} ${d.source.y} C ${ (d.source.x + d.target.x) / 1.75 } ${d.source.y} ${(d.source.x + d.target.x) / 1.75} ${d.target.y} ${ d.target.x } ${d.target.y}`; }); node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); text .attr("x", (d) => { if (group == "Comparative") { return d.id == calendarID ? d.x + d.count / 5 + 55 : d.x + d.count / 5 + 10; } else { return d.x + d.count / 5 + 10; } }) .attr("y", (d) => d.y); bgRects .attr("x", (d) => { if (group == "Comparative") { return d.id == calendarID ? d.x + d.count / 5 + 50 : d.x + d.count / 5 + 5; } else { return d.x + d.count / 5 + 5; } }) .attr("y", (d) => d.y - fontSize); }); // Reheat the simulation when drag starts, and fix the subject position. function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } // Update the subject (dragged node) position during drag. function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } // Restore the target alpha so the simulation cools after dragging ends. // Unfix the subject position now that it’s no longer being dragged. function dragended(event) { if (!event.active) simulation.alphaTarget(0); if (!dragFixed) { event.subject.fx = null; event.subject.fy = null; } } invalidation.then(() => simulation.stop()); if (mode == "Visual") { return svg.node(); } else { return Inputs.table(graphMatrix, { columns: [ "Source", "Total Connections", ...graphMatrix.map((d) => d.Source) ], format: { Source: (x) => x == calendarID ? html`${x}` : x } }); } }33:T1922,mode == "Visual" ? plotLayout == "Single" ? expression.node() : expressionGrid.node() : plotChoice == "Events" ? md`The Fall 2024 ID semester had a total of **${ allDates.length }** days, and ${ group == "Personal" ? "you" : "ID Students" } had events on **${ allDates.filter((d) => d.events.some((e) => e.participant == 0)).length }** of them, which represents **${( (allDates.filter((d) => d.events.some((e) => e.participant == 0)).length / allDates.length) * 100 ).toFixed(2)}%** of this semester. ${ group == "Personal" ? "Your" : "ID Students'" } longest scheduled day was **${new Date( allDates[d3.maxIndex(allDates, (d) => d.meetingDuration)].dateString + "T00:00:00" ).toLocaleString(undefined, options)}** which had **${d3.max( allDates, (d) => d.meetingDuration )} hours** of events. ${ group == "Personal" ? "Your" : "ID Students'" } busiest period of the day was the **${ Object.entries(types[2]) .sort((a, b) => d3.descending( Object.values(a[1]).reduce( (acc, val) => (acc += val.events.length), 0 ), Object.values(b[1]).reduce( (acc, val) => (acc += val.events.length), 0 ) ) )[0][0] .split(" ")[0] }**, and ${ group == "Personal" ? "your" : "ID students'" } most open period was the **${ Object.entries(types[2]) .sort((a, b) => d3.ascending( Object.values(a[1]).reduce( (acc, val) => (acc += val.events.length), 0 ), Object.values(b[1]).reduce( (acc, val) => (acc += val.events.length), 0 ) ) )[0][0] .split(" ")[0] }**.` : plotChoice == "Engagement" ? md`The Fall 2024 ID semester had a total of **${ allDates.length }** days, and ${ group == "Personal" ? "you" : "ID Students" } had events on **${ allDates.filter((d) => d.events.some((e) => e.participant == 0)).length }** of them, which represents **${( (allDates.filter((d) => d.events.some((e) => e.participant == 0)).length / allDates.length) * 100 ).toFixed(2)}%** of this semester. **${new Date( allDates[ d3.maxIndex( allDates.map((d) => d.events.reduce((a, v) => (a += v["Physical Meetings"]), 0) ) ) ].dateString + "T00:00:00" ).toLocaleString( undefined, options )}** was the highest engagement day for physical events (**${d3.max( allDates.map((d) => d.events.reduce((a, v) => (a += v["Physical Meetings"]), 0) ) )}**), **${new Date( allDates[ d3.maxIndex( allDates.map((d) => d.events.reduce((a, v) => (a += v["Online Meetings"]), 0) ) ) ].dateString + "T00:00:00" ).toLocaleString( undefined, options )}** had the most online events (**${d3.max( allDates.map((d) => d.events.reduce((a, v) => (a += v["Online Meetings"]), 0) ) )}**), and **${new Date( allDates[ d3.maxIndex( allDates.map((d) => d.events.reduce((a, v) => (a += v["No Location"]), 0) ) ) ].dateString + "T00:00:00" ).toLocaleString( undefined, options )}** had the most events with no location specified (**${d3.max( allDates.map((d) => d.events.reduce((a, v) => (a += v["No Location"]), 0)) )}**). ${ group == "Personal" ? "Your" : "ID Students'" } busiest period of the day was the **${ Object.entries(types[2]) .sort((a, b) => d3.descending( Object.values(a[1]).reduce( (acc, val) => (acc += val.events.length), 0 ), Object.values(b[1]).reduce( (acc, val) => (acc += val.events.length), 0 ) ) )[0][0] .split(" ")[0] }**, and the most open period was the **${ Object.entries(types[2]) .sort((a, b) => d3.ascending( Object.values(a[1]).reduce( (acc, val) => (acc += val.events.length), 0 ), Object.values(b[1]).reduce( (acc, val) => (acc += val.events.length), 0 ) ) )[0][0] .split(" ")[0] }**.` : md`The Fall 2024 ID semester had a total of **${ allDates.length }** days, and ${ group == "Personal" ? "you" : "ID Students" } had events on **${ allDates.filter((d) => d.events.some((e) => e.participant == 0)).length }** of them, which represents **${( (allDates.filter((d) => d.events.some((e) => e.participant == 0)).length / allDates.length) * 100 ).toFixed(2)}%** of this semester. **${new Date( allDates[ d3.maxIndex( allDates.map((d) => d.events.reduce((acc, val) => (acc += val.attendees?.length), 0) ) ) ].dateString + "T00:00:00" ).toLocaleString(undefined, options)}** is the day ${ group == "Personal" ? "you" : "ID Students" } met the most people during events, totaling **${d3.max( allDates.map((d) => d.events.reduce((acc, val) => (acc += val.attendees?.length), 0) ) )}** people. ${ group == "Personal" ? "Your" : "ID Students'" } most social period of the day was the **${ Object.entries(types[2]) .sort((a, b) => d3.descending( Object.values(a[1]).reduce( (acc, val) => (acc += val.events.length), 0 ), Object.values(b[1]).reduce( (acc, val) => (acc += val.events.length), 0 ) ) )[0][0] .split(" ")[0] }**, and the least social period was the **${ Object.entries(types[2]) .sort((a, b) => d3.ascending( Object.values(a[1]).reduce( (acc, val) => (acc += val.events.length), 0 ), Object.values(b[1]).reduce( (acc, val) => (acc += val.events.length), 0 ) ) )[0][0] .split(" ")[0] }**.` 34:Ta3c,eventData = ( await Promise.all( d3.range(6).map(async (d) => { const start = new Date(); start.setMonth(start.getMonth() - d); start.setDate(1); const timeMin = start.toISOString(); const end = new Date(start.getFullYear(), start.getMonth() + 1, 0); const timeMax = end.toISOString(); const response = await fetch( `https://www.googleapis.com/calendar/v3/calendars/` + calendarID + `/events?` + `orderBy=startTime&singleEvents=true&timeMin=${timeMin}&timeMax=${timeMax}&eventTypes=default`, { headers: { Authorization: `Bearer ${accessToken}` } } ); return (await response.json()).items.map((e) => ({ ...e, duration: (new Date(e.end.dateTime) - new Date(e.start.dateTime)) / 1000 / 60, attendeeCount: e.hasOwnProperty("attendees") ? e.attendees.length : 1, self: e.creator.email == calendarID, recurring: e.hasOwnProperty("recurringEventId"), "Online Meetings": (e.hasOwnProperty("description") ? e.description.includes("zoom") : false) || e.hasOwnProperty("conferenceData"), "Physical Meetings": e.hasOwnProperty("location") ? !e.location.includes("http") : false, "No Location": !e.hasOwnProperty("location") && !e.hasOwnProperty("conferenceData"), Updated: new Date(e.updated).getTime() - new Date(e.created).getTime() >= 86400000, Accepted: e.hasOwnProperty("attendees") ? e.attendees.find((f) => f.email == calendarID)?.responseStatus == "accepted" : true, Declined: e.hasOwnProperty("attendees") ? e.attendees.find((f) => f.email == calendarID)?.responseStatus == "declined" : false, "Needs Action": e.hasOwnProperty("attendees") ? e.attendees.find((f) => f.email == calendarID)?.responseStatus == "needsAction" : false, "Night Meetings": new Date(e.start.dateTime).getHours() <= 6, "Morning Meetings": new Date(e.start.dateTime).getHours() > 6 && new Date(e.start.dateTime).getHours() <= 12, "Afternoon Meetings": new Date(e.start.dateTime).getHours() > 12 && new Date(e.start.dateTime).getHours() <= 18, "Evening Meetings": new Date(e.start.dateTime).getHours() > 18 })); }) ) ) .flat() .filter((e) => e.attendees) // .map((d) => d.attendees.map((d) => d.email)) // .findIndex((g) => !g.includes(calendarID))35:T432,dateData = Object.entries( eventData.reduce((acc, event) => { const date = new Date(event.start.dateTime || event.start.date) .toISOString() .split("T")[0]; if (!acc[date]) { acc[date] = []; } acc[date].push(event); return acc; }, {}) ) .map((d) => ({ dateString: d[0], year: 2024, month: parseInt(d[0].split("-")[1]), date: parseInt(d[0].split("-")[2]), day: new Date( 2024, parseInt(d[0].split("-")[1]) - 1, parseInt(d[0].split("-")[2]) ).getDay(), dateObj: new Date( Date.UTC( 2024, parseInt(d[0].split("-")[1]) - 1, parseInt(d[0].split("-")[2]) ) ), eventCount: d[1].length, events: d[1].map((e) => ({ ...e, participant: 0 })) })) .map((e) => ({ ...e, meetingDuration: e.events.reduce((a, v) => (a += v.duration), 0) / 60 })) .filter((d) => d.meetingDuration) .sort((a, b) => d3.ascending(a.month * 30 + a.date, b.month * 30 + b.date)) .filter((e) => e.month * 30 + e.date >= 258 && e.month * 30 + e.date <= 367)36:T81f,personalAllDates = { // Create a Set of existing dates for lookup const existingDates = new Set(dateData.map((day) => day.dateString)); // Find the range of dates const startDate = new Date(`2024-08-18T00:00:00Z`); const endDate = new Date(`2024-12-07T00:00:00Z`).getTime(); const filledData = []; const dayInMs = 24 * 60 * 60 * 1000; // Milliseconds in a day const calculateWeekOfYear = (date) => { const startOfYear = new Date(Date.UTC(date.getUTCFullYear(), 0, 1)); // Jan 1 in UTC const dayOfYear = Math.floor((date - startOfYear) / (1000 * 60 * 60 * 24)) + 1; const startDay = startOfYear.getUTCDay(); // Day of week for Jan 1 (0 = Sunday) const adjustedDayOfYear = dayOfYear + (startDay ? startDay : 6); // Adjust if not Sunday return Math.ceil(adjustedDayOfYear / 7); }; // Iterate through all dates in the range for ( let date = new Date(startDate); date <= endDate; date = new Date(date.getTime() + dayInMs) // Increment date by 1 day in UTC ) { const dateString = date.toISOString().split("T")[0]; // Format as YYYY-MM-DD if (existingDates.has(dateString)) { // Add existing day const existingDay = dateData.find((day) => day.dateString === dateString); filledData.push({ ...existingDay, week: calculateWeekOfYear(new Date(`${dateString}T00:00:00Z`)) }); } else { // Add missing day with default values filledData.push({ dateString, year: date.getUTCFullYear(), month: date.getUTCMonth() + 1, // Month is 0-indexed date: date.getUTCDate(), day: date.getUTCDay(), // 0 = Sunday, 1 = Monday, etc. week: calculateWeekOfYear(new Date(`${dateString}T00:00:00Z`)), eventCount: 0, events: [], meetingDuration: 0, dateObj: new Date( Date.UTC( date.getUTCFullYear(), date.getUTCMonth() + 1, date.getUTCDay() ) ) }); } } return filledData.map((g, u) => ({ ...g, index: u })); }37:T934,types = [ ["Online Meetings", "Physical Meetings", "No Location"], ["Accepted", "Declined", "Needs Action"], ["Morning Meetings", "Afternoon Meetings", "Evening Meetings"] ].map((arr) => arr.reduce((a, bool) => { a[bool] = { Individual: { duration: allDates .map((e) => e.events) .flat() .filter((e) => e[bool] && e.attendeeCount == 1) .reduce((acc, val) => (acc += val.duration), 0) / 60, events: allDates .map((e) => e.events) .flat() .filter((e) => e[bool] && e.attendeeCount == 1) }, "One on Ones": { duration: allDates .map((e) => e.events) .flat() .filter((e) => e[bool] && e.attendeeCount == 2) .reduce((acc, val) => (acc += val.duration), 0) / 60, events: allDates .map((e) => e.events) .flat() .filter((e) => e[bool] && e.attendeeCount == 2) }, "Team Meetings": { duration: allDates .map((e) => e.events) .flat() .filter( (e) => e[bool] && e.attendeeCount > 2 && e.attendeeCount <= 9 ) .reduce((acc, val) => (acc += val.duration), 0) / 60, events: allDates .map((e) => e.events) .flat() .filter((e) => e[bool] && e.attendeeCount > 2 && e.attendeeCount <= 9) }, "Class Events": { duration: allDates .map((e) => e.events) .flat() .filter( (e) => e[bool] && e.attendeeCount > 9 && e.attendeeCount <= 20 ) .reduce((acc, val) => (acc += val.duration), 0) / 60, events: allDates .map((e) => e.events) .flat() .filter( (e) => e[bool] && e.attendeeCount > 9 && e.attendeeCount <= 20 ) }, "Large Groups": { duration: allDates .map((e) => e.events) .flat() .filter((e) => e[bool] && e.attendeeCount > 20) .reduce((acc, val) => (acc += val.duration), 0) / 60, events: allDates .map((e) => e.events) .flat() .filter((e) => e[bool] && e.attendeeCount > 20) } }; return a; }, {}) )38:T7be,graphMatrix = { const network = Object.values( allDates .map((d) => d.events) .flat() .filter((d) => d.attendees && d.attendees.length > 1) .map((d) => d.attendees) .map((g) => g .map((p) => g .map((f) => ({ source: p.email, target: f.email })) .filter((e) => e.source !== e.target) ) .flat() ) .flat() .reduce((acc, { source, target }) => { const key = [source, target].sort().join("-"); if (!acc[key]) { acc[key] = { source: source < target ? source : target, target: source < target ? target : source, value: 0 }; } acc[key].value += 1; return acc; }, {}) ) .map((d) => [d, { source: d.target, target: d.source, value: d.value }]) .flat() .sort((a, b) => d3.ascending(a.source, b.source)); const uniqueNodes = Array.from( new Set(network.flatMap(({ source, target }) => [source, target])) ); // Step 2: Group by source and fill allTargets return uniqueNodes .map((source) => { // Initialize allTargets with 0 for every target const allTargets = Object.fromEntries( uniqueNodes.map((target) => [target, 0]) ); network .filter((entry) => entry.source === source) .forEach(({ target, value }) => { allTargets[target] = value; }); return { source, allTargets }; }) .sort((a, b) => d3.descending( Object.values(a.allTargets).reduce((acc, v) => (a += v), 0), Object.values(b.allTargets).reduce((acc, v) => (a += v), 0) ) ) .map((d) => ({ Source: d.source, "Total Connections": Object.values(d.allTargets).reduce( (a, v) => (a += v), 0 ), ...d.allTargets })) .sort((a, b) => d3.descending(a["Total Connections"], b["Total Connections"]) ); }39:T91b,curves = allDates.map((day) => { const output = []; const startTime = new Date(day.dateString + "T06:00:00").getTime(); const interval = 15 * 60 * 1000; // 15 minutes in milliseconds const quarterHourCount = 84; // 24 hours * 4 (15-minute increments) const xScale = d3.scaleLinear().domain([0, 96]).range([0, 1]); const eventScale = d3 .scaleLinear() .domain([ 0, d3.max( allDates .map((f) => f.events) .flat() .map((g) => g.duration) ) ]) .range([0, 1]); const attendeeScale = d3 .scaleLinear() .domain([ 1, d3.max( allDates .map((f) => f.events) .flat() .map((g) => (g.attendees ? g.attendees.length : 1)) ) ]) .range([0, 1]); const typeScale = d3.scaleLinear().domain([0, 21]).range([0, 1]); for (let i = 0; i < quarterHourCount; i++) { const time = startTime + i * interval; const matchingEvent = day.events.find((event) => { const eventStart = new Date( event.start.dateTime || event.start.date ).getTime(); const eventEnd = new Date(event.end.dateTime || event.end.date).getTime(); return time >= eventStart && time < eventEnd; }); const x = i; // 15-minute intervals from start of day let event = 0; let attendees = 1; let types = 0; if (matchingEvent) { const eventEnd = new Date( matchingEvent.end.dateTime || matchingEvent.end.date ).getTime(); event = Math.max(0, (eventEnd - time) / (60 * 1000)); // Remaining duration in minutes attendees = matchingEvent.attendees ? matchingEvent.attendees.length : 1; types = matchingEvent["Physical Meetings"] * 3 + matchingEvent["Online Meetings"] * 2 + matchingEvent["No Location"] * 1 + matchingEvent["Night Meetings"] * 4 + matchingEvent["Evening Meetings"] * 3 + matchingEvent["Afternoon Meetings"] * 2 + matchingEvent["Morning Meetings"] * 1 + matchingEvent["Accepted"] * 3 + matchingEvent["Declined"] * 2 + matchingEvent["Needs Action"] * 1; } output.push({ x: xScale(x), events: eventScale(event), attendees: attendeeScale(attendees), types: typeScale(types) }); } return output; })3a:Tb22,curvesGrid = Object.values( allDates .map((day) => { const output = []; const startTime = new Date(day.dateString + "T06:00:00").getTime(); const interval = 15 * 60 * 1000; // 15 minutes in milliseconds const quarterHourCount = 84; // 24 hours * 4 (15-minute increments) const xScale = d3.scaleLinear().domain([0, 96]).range([0, 1]); const eventScale = d3 .scaleLinear() .domain([ 0, d3.max( allDates .map((f) => f.events) .flat() .map((g) => g.duration) ) ]) .range([0, 1]); const attendeeScale = d3 .scaleLinear() .domain([ 1, d3.max( allDates .map((f) => f.events) .flat() .map((g) => (g.attendees ? g.attendees.length : 1)) ) ]) .range([0, 1]); const typeScale = d3.scaleLinear().domain([0, 21]).range([0, 1]); for (let i = 0; i < quarterHourCount; i++) { const time = startTime + i * interval; const matchingEvent = day.events.find((event) => { const eventStart = new Date( event.start.dateTime || event.start.date ).getTime(); const eventEnd = new Date( event.end.dateTime || event.end.date ).getTime(); return time >= eventStart && time < eventEnd; }); // Calculate x and y const x = i; // 15-minute intervals from start of day let event = 0; let attendees = 1; let types = 0; if (matchingEvent) { const eventEnd = new Date( matchingEvent.end.dateTime || matchingEvent.end.date ).getTime(); event = Math.max(0, (eventEnd - time) / (60 * 1000)); // Remaining duration in minutes attendees = matchingEvent.attendees ? matchingEvent.attendees.length : 1; types = matchingEvent["Physical Meetings"] * 3 + matchingEvent["Online Meetings"] * 2 + matchingEvent["No Location"] * 1 + matchingEvent["Night Meetings"] * 4 + matchingEvent["Evening Meetings"] * 3 + matchingEvent["Afternoon Meetings"] * 2 + matchingEvent["Morning Meetings"] * 1 + matchingEvent["Accepted"] * 3 + matchingEvent["Declined"] * 2 + matchingEvent["Needs Action"] * 1; } output.push({ x: xScale(x), events: eventScale(event), attendees: attendeeScale(attendees), types: typeScale(types), week: day.week }); } return output; }) .reduce((a, v) => { (a[v[0]["week"]] = a[v[0]["week"]] || []).push(v); return a; }, {}) )3b:T46c,debug = { const height = width / 4; const svg = d3.create("svg").attr("width", width).attr("height", height); const margin = 100; svg.append("rect").attr("width", width).attr("height", height); const lineGen = d3 .line() .x((d) => d.x * width) .y((d) => height - d.y * height) .curve(d3.curveBasis); svg .selectAll(".curves") .data(curves.map((e) => e.map((d) => ({ x: d.x, y: d.events })))) .join("path") .attr("d", (d) => lineGen(d)) .attr("fill", "none") .attr("stroke", "#f00") .attr("stroke-width", 1) .attr("transform"); svg .selectAll(".curves") .data(curves.map((e) => e.map((d) => ({ x: d.x, y: d.attendees })))) .join("path") .attr("d", (d) => lineGen(d)) .attr("fill", "none") .attr("stroke", "#0F0") .attr("stroke-width", 1) .attr("transform"); svg .selectAll(".curves") .data(curves.map((e) => e.map((d) => ({ x: d.x, y: d.types })))) .join("path") .attr("d", (d) => lineGen(d)) .attr("fill", "none") .attr("stroke", "#00F") .attr("stroke-width", 1) .attr("transform"); return svg; }3c:T419,// mode == "Visual" // ? md`Each 3D curve represents one day of calendar data. ${ // plotLayout == "Grid" ? "Each block represents one week of data." : "" // } The changing heights of the curves indicate ${ // plotChoice == "Events" // ? "the duration of each calendar event" // : plotChoice == "People" // ? "the number of attendees to each calendar event" // : " the amount of engagement required to attend including in-person versus remote participation, if the event had updates or changes made, and if the attendees confirmed their attendance." // } // The golden ${ // plotLayout == "Grid" ? "block" : "curve" // } highlights the ${ // plotChoice == "Events" // ? "day with the longest cumulative event duration" // : plotChoice == "People" // ? "day with the greatest number of cumulative attendees to events" // : "day with the events requiring the highest cumulative engagement" // }.` // : "" 3d:T34d9,// textExpression = plotChoice == "Events" // ? md`The Fall 2024 ID semester had a total of **${ // allDates.length // }** days, and you had events on **${ // allDates.filter((d) => d.events.some((e) => e.participant == 0)).length // }** of them, which represents **${( // (allDates.filter((d) => d.events.some((e) => e.participant == 0)).length / // allDates.length) * // 100 // ).toFixed( // 2 // )}%** of this semester compared to the average of other participants, which was **${d3 // .mean( // d3 // .range(1, 12) // .map( // (p) => // allDates.filter((d) => d.events.some((e) => e.participant == p)) // .length // ) // ) // .toFixed(2)} events**, **${( // (d3.mean( // d3 // .range(1, 12) // .map( // (p) => // allDates.filter((d) => d.events.some((e) => e.participant == p)) // .length // ) // ) / // 112) * // 100 // ).toFixed(2)}%** of the semester. // Your longest scheduled day was **${new Date( // allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant == 0) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].dateString + "T00:00:00" // ).toLocaleString(undefined, options)}** which had **${( // allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant == 0) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].events // .filter((g) => g.participant == 0) // .reduce((a, v) => (a += v.duration), 0) / 60 // ).toFixed(2)} hours** of events. // Other participants' longest average scheduled day was **${new Date( // allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant !== 0) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].dateString + "T00:00:00" // ).toLocaleString(undefined, options)}** which had **${( // allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant !== 0) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].events // .filter((g) => g.participant !== 0) // .reduce((a, v) => (a += v.duration), 0) / // 60 / // 11 // ).toFixed(2)} hours** of events. // Your busiest period of the day was the **${ // Object.entries(types[2]) // .sort((a, b) => // d3.descending( // Object.values(a[1]).reduce( // (acc, val) => (acc += val.events.length), // 0 // ), // Object.values(b[1]).reduce( // (acc, val) => (acc += val.events.length), // 0 // ) // ) // )[0][0] // .split(" ")[0] // }**, and in comparison other participants' // most busy period was the **Morning**.` // : ////// // plotChoice == "Engagement" // ? md`The Fall 2024 ID semester had a total of **${ // allDates.length // }** days, and you had events on **${ // allDates.filter((d) => d.events.some((e) => e.participant == 0)).length // }** of them, which represents **${( // (allDates.filter((d) => d.events.some((e) => e.participant == 0)).length / // allDates.length) * // 100 // ).toFixed( // 2 // )}%** of this semester compared to the average of other participants, which was **${d3 // .mean( // d3 // .range(1, 12) // .map( // (p) => // allDates.filter((d) => d.events.some((e) => e.participant == p)) // .length // ) // ) // .toFixed(2)} events**, **${( // (d3.mean( // d3 // .range(1, 12) // .map( // (p) => // allDates.filter((d) => d.events.some((e) => e.participant == p)) // .length // ) // ) / // 112) * // 100 // ).toFixed(2)}%** of the semester. // **${new Date( // allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant == 0 && g["Physical Meetings"]) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].dateString + "T00:00:00" // ).toLocaleString( // undefined, // options // )}** was the highest engagement day for physical events for you, with **${allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant == 0 && g["Physical Meetings"]) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].events // .filter((e) => e.participant == 0) // .reduce((a, v) => (a += v.duration / 60), 0) // .toFixed( // 2 // )} hours** of events. For the average other participant **${new Date( // allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant !== 0 && g["Physical Meetings"]) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].dateString + "T00:00:00" // ).toLocaleString( // undefined, // options // )}** was the highest engagement day for physical events, with **${allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant !== 0 && g["Physical Meetings"]) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].events // .filter((e) => e.participant !== 0) // .reduce((a, v) => (a += v.duration / 60 / 11), 0) // .toFixed(2)} hours** of events. // **${new Date( // allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant == 0 && g["Online Meetings"]) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].dateString + "T00:00:00" // ).toLocaleString( // undefined, // options // )}** was the highest engagement day for online events for you, with **${allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant == 0 && g["Online Meetings"]) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].events // .filter((e) => e.participant == 0) // .reduce((a, v) => (a += v.duration / 60), 0) // .toFixed( // 2 // )} hours** of events. For the average other participant **${new Date( // allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant !== 0 && g["Online Meetings"]) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].dateString + "T00:00:00" // ).toLocaleString( // undefined, // options // )}** was the highest engagement day for online events, with **${allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant !== 0 && g["Online Meetings"]) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].events // .filter((e) => e.participant !== 0) // .reduce((a, v) => (a += v.duration / 60 / 11), 0) // .toFixed(2)} hours** of events. // **${new Date( // allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant == 0 && g["No Location"]) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].dateString + "T00:00:00" // ).toLocaleString( // undefined, // options // )}** was the highest engagement day for unspecified location events for you, with **${allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant == 0 && g["No Location"]) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].events // .filter((e) => e.participant == 0) // .reduce((a, v) => (a += v.duration / 60), 0) // .toFixed( // 2 // )} hours** of events. For the average other participant **${new Date( // allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant !== 0 && g["No Location"]) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].dateString + "T00:00:00" // ).toLocaleString( // undefined, // options // )}** was the highest engagement day for unspecified location events, with **${allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant !== 0 && g["No Location"]) // .reduce((a, v) => (a += v.duration), 0) // ) // ) // ].events // .filter((e) => e.participant !== 0) // .reduce((a, v) => (a += v.duration / 60 / 11), -2.5) // .toFixed(2)} hours** of events. // Your busiest period of the day was the **${ // Object.entries(types[2]) // .sort((a, b) => // d3.descending( // Object.values(a[1]).reduce( // (acc, val) => (acc += val.events.length), // 0 // ), // Object.values(b[1]).reduce( // (acc, val) => (acc += val.events.length), // 0 // ) // ) // )[0][0] // .split(" ")[0] // }**, and in comparison other participants' // most busy period was the **Morning**.` // : //// // md`The Fall 2024 ID semester had a total of **${ // allDates.length // }** days, and you had events on **${ // allDates.filter((d) => d.events.some((e) => e.participant == 0)).length // }** of them, which represents **${( // (allDates.filter((d) => d.events.some((e) => e.participant == 0)).length / // allDates.length) * // 100 // ).toFixed( // 2 // )}%** of this semester compared to the average of other participants, which was **${d3 // .mean( // d3 // .range(1, 12) // .map( // (p) => // allDates.filter((d) => d.events.some((e) => e.participant == p)) // .length // ) // ) // .toFixed(2)} events**, **${( // (d3.mean( // d3 // .range(1, 12) // .map( // (p) => // allDates.filter((d) => d.events.some((e) => e.participant == p)) // .length // ) // ) / // 112) * // 100 // ).toFixed(2)}%** of the semester. // **${new Date( // allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant == 0) // .reduce((a, v) => (a += v.attendees?.length), 0) // ) // ) // ].dateString + "T00:00:00" // ).toLocaleString( // undefined, // options // )}** was the day you met the most people, with **${allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant == 0) // .reduce((a, v) => (a += v.attendees?.length), 0) // ) // ) // ].events // .filter((e) => e.participant == 0) // .reduce((a, v) => (a += v?.attendees.length), 0)} event attendees**. // **${new Date( // allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant == 0) // .reduce((a, v) => (a += v.attendees?.length), 0) // ) // ) // ].dateString + "T00:00:00" // ).toLocaleString( // undefined, // options // )}** was the day other participants met the most people, with **${allDates[ // d3.maxIndex( // allDates.map((e) => // e.events // .filter((g) => g.participant !== 0) // .reduce((a, v) => (a += v.attendees?.length), 0) // ) // ) // ].events // .filter((e) => e.participant == 0) // .reduce((a, v) => (a += v?.attendees.length), 0)} event attendees**. // Your busiest period of the day was the **${ // Object.entries(types[2]) // .sort((a, b) => // d3.descending( // Object.values(a[1]).reduce( // (acc, val) => (acc += val.events.length), // 0 // ), // Object.values(b[1]).reduce( // (acc, val) => (acc += val.events.length), // 0 // ) // ) // )[0][0] // .split(" ")[0] // }**, and in comparison other participants' // most busy period was the **Morning**.`3e:[{"id":"c4b34d7d05714398cbe1e7e306a261d66024db620c64882b422636d84f2a01dad67fdeb022444cf5459f29d3e837e93c0381d9595b54a079109d62da08e66cb5","href":"https://static.observableusercontent.com/files/c4b34d7d05714398cbe1e7e306a261d66024db620c64882b422636d84f2a01dad67fdeb022444cf5459f29d3e837e93c0381d9595b54a079109d62da08e66cb5","name":"VA55.json","type":"application/json","lastModified":1733580927364.861,"size":2925950},{"id":"d0a15e2f38ae4ab4a0b7b533d85d4b47d4bc0aea4484732b37b9155623e32f9317d9886d015f3c37ce6b3b834d6dc6a363cd96871d7d21ee700beb56cca96c18","href":"https://static.observableusercontent.com/files/d0a15e2f38ae4ab4a0b7b533d85d4b47d4bc0aea4484732b37b9155623e32f9317d9886d015f3c37ce6b3b834d6dc6a363cd96871d7d21ee700beb56cca96c18","name":"va23.json","type":"application/json","lastModified":1733580927747.415,"size":2946459},{"id":"f8dce5dfaa6b8b7233e9aacc7b16a2927e1493aca76ade9cdb2ddbae58c745c9d218e41cb85bafbb6cce885f9428992a9428f875a230ce044be7846b2d1cfa9c","href":"https://static.observableusercontent.com/files/f8dce5dfaa6b8b7233e9aacc7b16a2927e1493aca76ade9cdb2ddbae58c745c9d218e41cb85bafbb6cce885f9428992a9428f875a230ce044be7846b2d1cfa9c","name":"VA43.json","type":"application/json","lastModified":1733580927845.38,"size":4058828},{"id":"7be2f95298b642b402084c6b28a7d609c9cdf924d21155bca3e82bd91e26f7ad7f58a07783ceb476daa3fcd8d0175c9b1d51bf9b100ff98f62fa069fe9a478e4","href":"https://static.observableusercontent.com/files/7be2f95298b642b402084c6b28a7d609c9cdf924d21155bca3e82bd91e26f7ad7f58a07783ceb476daa3fcd8d0175c9b1d51bf9b100ff98f62fa069fe9a478e4","name":"va30.json","type":"application/json","lastModified":1733580928140.345,"size":4984559},{"id":"ff2293ca91522c3634f161cd0ecb16db8d59a94ef59188e085c5b2e836a63109160d09afe6dad06698151b799e60baf5084334b1749100c43d6ac622e9688a16","href":"https://static.observableusercontent.com/files/ff2293ca91522c3634f161cd0ecb16db8d59a94ef59188e085c5b2e836a63109160d09afe6dad06698151b799e60baf5084334b1749100c43d6ac622e9688a16","name":"v805.json","type":"application/json","lastModified":1733580927932.551,"size":4430779},{"id":"0563f6a609bebacf13712c7636a3b5e836504c3f680656594dea16c257c0588aa22f702d8367b5170e6e71c7826e2ecc09368fc515aea13540689ac4e4de888e","href":"https://static.observableusercontent.com/files/0563f6a609bebacf13712c7636a3b5e836504c3f680656594dea16c257c0588aa22f702d8367b5170e6e71c7826e2ecc09368fc515aea13540689ac4e4de888e","name":"V998@4.json","type":"application/json","lastModified":1733604289353.234,"size":4744068},{"id":"880e2c413855447ff991cb2022af85ce5b5573252ec2b921e23b2e5f786a912749e950666e7b7214cdfdcaf8467e386108035cd77882107ad5fc00217488a6af","href":"https://static.observableusercontent.com/files/880e2c413855447ff991cb2022af85ce5b5573252ec2b921e23b2e5f786a912749e950666e7b7214cdfdcaf8467e386108035cd77882107ad5fc00217488a6af","name":"vc39.json","type":"application/json","lastModified":1733603375870.677,"size":21602900},{"id":"c2dca011c6868968bad999edb07d224076d97a30ab939bcfe2511e2b4bdd42f61830b8e6600e1ff8084b5958355646110fdd7c1467eea8b00b4aa9cf1c758dfe","href":"https://static.observableusercontent.com/files/c2dca011c6868968bad999edb07d224076d97a30ab939bcfe2511e2b4bdd42f61830b8e6600e1ff8084b5958355646110fdd7c1467eea8b00b4aa9cf1c758dfe","name":"VA36.json","type":"application/json","lastModified":1733580927797.737,"size":3074480},{"id":"f0aadacc9fd0574a689b7bbaa52e17cdb2ef8ccfde2d3e7368ae4b34c4d9ea2cbded8fa25bd8b56a8d70f35a46334ad3307fb4265b68701a8e78905a33eef97b","href":"https://static.observableusercontent.com/files/f0aadacc9fd0574a689b7bbaa52e17cdb2ef8ccfde2d3e7368ae4b34c4d9ea2cbded8fa25bd8b56a8d70f35a46334ad3307fb4265b68701a8e78905a33eef97b","name":"VA46.json","type":"application/json","lastModified":1733580928046.56,"size":3926195},{"id":"9e6668d7e0f8213fa25c44d596dd608d119b2f42d1f99b46905fc7eb7f587bb98ac6d40a8e8b800512af3ed7ec8cd7be5d77119d3774e2ef7c1bbf25778ff51f","href":"https://static.observableusercontent.com/files/9e6668d7e0f8213fa25c44d596dd608d119b2f42d1f99b46905fc7eb7f587bb98ac6d40a8e8b800512af3ed7ec8cd7be5d77119d3774e2ef7c1bbf25778ff51f","name":"va22.json","type":"application/json","lastModified":1733580927830.269,"size":4068051},{"id":"753939d28520f6e1247fc62a3e29b0ca21ca16f8ffa27b9ae84f856b6552bfb7946bd13e81caff22ca4be4ae7e61cecd9160b701fd0e135593d44558f7fbd527","href":"https://static.observableusercontent.com/files/753939d28520f6e1247fc62a3e29b0ca21ca16f8ffa27b9ae84f856b6552bfb7946bd13e81caff22ca4be4ae7e61cecd9160b701fd0e135593d44558f7fbd527","name":"VA17.json","type":"application/json","lastModified":1733580927761.395,"size":3155604},{"id":"cd66a2f45fb8a769afb62377a5952e6a2d3bc3d5948cf97ff7a342c7d3eea25bcd9969a66252f5bdcc0441c95022d8aa2b950c7bdecdb52a6ba804c70aac0fbd","href":"https://static.observableusercontent.com/files/cd66a2f45fb8a769afb62377a5952e6a2d3bc3d5948cf97ff7a342c7d3eea25bcd9969a66252f5bdcc0441c95022d8aa2b950c7bdecdb52a6ba804c70aac0fbd","name":"vb11.json","type":"application/json","lastModified":1744267997725.334,"size":23796061}] 2e:{"title":"Data Donation Experiment","cells":[{"id":0,"value":"# Data Donation Experiment","pinned":false,"hidden":false,"mode":"md"},{"id":5995,"value":"demo = FileAttachment(\"v999.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"---\n## Step 1: Connect Data\nPlease sign into your ID Google account","pinned":false,"hidden":false,"mode":"md"},{"id":138,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":146,"value":"accessToken = {\n if (window.location.href.includes(\"access_token\"))\n return window.location.href.split(\"access_token=\")[1].split(\"&\")[0];\n else return \"Please Login\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"---\n## Step 2: Choose Data Source\nPlease select your ID calendar","pinned":false,"hidden":false,"mode":"md"},{"id":192,"value":"calendars = {\n const response = await fetch(\n `https://www.googleapis.com/calendar/v3/users/me/calendarList`,\n {\n headers: { Authorization: `Bearer ${accessToken}` }\n }\n );\n\n const data = await response.json();\n\n if (!response.ok) {\n console.error(\"Error fetching calendar list:\", data);\n return [];\n }\n\n return data.items;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"viewof calendar = Inputs.radio(\n calendars\n .map((d) => d.summary)\n .filter(\n (e) =>\n ![\n \"Birthdays\",\n \"ID Community\",\n \"ID Career Services \",\n \"Holidays in United States\"\n ].includes(e)\n ),\n {\n label: \"Choose Your Calendar\",\n value: calendars.map((d) => d.summary)[\n calendars.map((d) => d.summary).findIndex((d) => d.includes(\"@id\")) >= 0\n ? calendars.map((d) => d.summary).findIndex((d) => d.includes(\"@id\"))\n : 0\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"calendarID = calendars.length > 0\n ? calendars.find((c) => c.summary == calendar).id\n : \"Please login to Google and then select your calendar.\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3460,"value":"---\n## Step 3: Personalize Session \nEnter the experiment ID received from the experiment facilitator, which is used for anonymization and to customize your experience.","pinned":false,"hidden":false,"mode":"md"},{"id":3448,"value":"viewof experimentID = Inputs.text({\n label: \"Experiment ID\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3252,"value":"viewof colorVision = Inputs.radio([\"Full Color\", \"Reduced Color\"], {\n label: \"Do you prefer visualizations with a reduced color palette?\",\n value: \"Full Color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4711,"value":"This experiment is an exploration of **${group.toLowerCase()} data** through **${mode==\"Visual\" ? \"visual\" : \"textual\"} communication**.","pinned":false,"hidden":false,"mode":"md"},{"id":1554,"value":"

\n \n

\n","pinned":false,"hidden":false,"mode":"md"},{"id":4144,"value":"## Step 4: Data Exploration ","pinned":false,"hidden":false,"mode":"md"},{"id":4148,"value":"----\n### 4.1 Calendar Events\n*Exploring how aspects of time are contained in calendar data.*\n\n${mode==\"Visual\" ? md`In the interactive chart below, each block is a period of time colored by the duration of the calendar events taking place in that period.` : md`Browse the table below to explore how calendar events are distributed over different time periods.`}\n\nAll event lengths are measured in **hours**.","pinned":false,"hidden":false,"mode":"md"},{"id":1556,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2512,"value":"---\n### 4.2 Event Counts by Engagement\n*Exploring the characteristics of calendar events.*\n\n${mode == \"Visual\" ? md`Each dot indicates one calendar event, clustered by the different kinds of engagement required of participants.` : md`Browse the table below to explore how the engagement requirements of calendar events related to the number of participants.`}\n\n- Individual: 1 Attendee\n- One on Ones: 2 Attendees\n- Team Meetings: 3-9 Attendees\n- Class Events: 10–20 Attendees\n- Large Groups: >20 Attendees","pinned":false,"hidden":false,"mode":"md"},{"id":5200,"value":"group == \"Collective\" && mode == \"Text\"\n ? md`The table below indicates **how many participants** had meetings of each engagement type.`\n : group == \"Comparative\" && mode == \"Visual\"\n ? md`Lighter dots are your events, darker dots represent the events of other participants.`\n : \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1967,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5189,"value":"group == \"Collective\"\n ? Inputs.table(\n Object.entries(\n types.flat().reduce((a, v) => Object.assign(a, v), {})\n ).map((d) => ({\n \"Meeting Type\": d[0],\n ...Object.entries(d[1]).reduce((a, v) => {\n a[v[0]] = Array.from(\n new Set(v[1].events.map((e) => e.participant))\n ).length;\n return a;\n }, {})\n }))\n )\n : \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5457,"value":"group == \"Comparative\" && mode == \"Text\"\n ? md`The tables below compares **how many meetings** you had compared to the average meeting count of other participants.`\n : \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5371,"value":"group == \"Comparative\" && mode == \"Text\"\n ? Inputs.table(\n Object.entries(\n types.flat().reduce((a, v) => Object.assign(a, v), {})\n ).map((t) =>\n Object.entries(t[1]).reduce(\n (a, e) => {\n a[e[0] + \" \" + selfLabel] = e[1].events.filter(\n (g) => g.participant == 0\n ).length;\n\n // a[e[0] + \" \" + othersLabel] = Math.round(\n // e[1].events.filter((g) => g.participant !== 0).length / 11\n // );\n\n return a;\n },\n { \"Meeting Type\": t[0] }\n )\n )\n )\n : \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5409,"value":"group == \"Comparative\" && mode == \"Text\"\n ? Inputs.table(\n Object.entries(\n types.flat().reduce((a, v) => Object.assign(a, v), {})\n ).map((t) =>\n Object.entries(t[1]).reduce(\n (a, e) => {\n // a[e[0] + \" \" + selfLabel] = e[1].events.filter(\n // (g) => g.participant == 0\n // ).length;\n\n a[e[0] + \" Avg \" + othersLabel] =\n e[1].events.filter((g) => g.participant !== 0).length / 11;\n\n return a;\n },\n { \"Meeting Type\": t[0] }\n )\n )\n )\n : \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"---\n### 4.3 Social Connectivity Graph\n*Exploring the social dimension of calendar data.*\n\n${mode == \"Visual\" ? md`In the interactive chart below, each circle represents one individual present in the calendar data, and the size of the circle indicates the number of events that that individual was listed as an attendee. ${group == \"Comparative\" ? `You are indicated by a large, red circle` :\"\"}\n\nEach connecting link reflects the number of shared meetings between two individuals, with their thickness scaled to the total number of shared events.` : \nmd`Browse the table below to explore how you are interconnected with others in the calendar data.`\n}","pinned":false,"hidden":false,"mode":"md"},{"id":2348,"value":"viewof cutoff = Inputs.range([0, 1000], {\n label: \"How many meetings creates a link?\",\n step: 1,\n value: group == \"Personal\" ? 15 : 150\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2972,"value":"---\n### 4.4 Data Expression\n*Exploring your calendar data by building a unique data creation.*","pinned":false,"hidden":false,"mode":"md"},{"id":3221,"value":"viewof plotChoice = Inputs.radio([\"Events\", \"Engagement\", \"People\"], {\n value: \"Events\",\n label: \"On what topic would you like to focus your data expression?\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3557,"value":"viewof plotLayout = Inputs.radio([\"Single\", \"Grid\"], {\n value: \"Single\",\n label: \"How would you like to layout your data expression?\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3689,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3397,"value":"---\n## Step 5: Data Donation","pinned":false,"hidden":false,"mode":"md"},{"id":3770,"value":"viewof donate = Inputs.button(\"Donate\", {\n reduce: (a, v) => {\n const downloadData = new Blob([JSON.stringify(dataDonation, null, 2)], {\n type: \"application/json\"\n });\n\n const link = document.createElement(\"a\");\n link.href = URL.createObjectURL(downloadData);\n link.download = experimentID + \".json\";\n\n // Append link to the DOM (hidden)\n document.body.appendChild(link);\n\n // Trigger the click programmatically\n link.click();\n\n // Clean up\n document.body.removeChild(link);\n URL.revokeObjectURL(link.href);\n a++;\n return a;\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3734,"value":"viewof noDonate = Inputs.button(\"Do Not Donate\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3787,"value":"donate\n ? html`

Thank you for your donation!

Please make sure you log out of Google and refresh this page.

`\n : \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3807,"value":"noDonate\n ? html`

Though you did not donate, we appreciate your participation!

Please make sure you log out of Google and refresh this page.

`\n : \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3950,"value":"----\n\n

\n\n----\n","pinned":false,"hidden":false,"mode":"md"},{"id":4587,"value":"----\n#### Data Visiblity","pinned":false,"hidden":false,"mode":"md"},{"id":3942,"value":"dataDonation","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"----\n\n

\n\n----\n# Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":4425,"value":"---\n#### Calendar Events","pinned":false,"hidden":false,"mode":"md"},{"id":5986,"value":"vb11 = await FileAttachment(\"vb11.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":713,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1507,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1592,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":4616,"value":"allDates = vb11.allDates","pinned":false,"hidden":false,"mode":"ojs"},{"id":1707,"value":"allWeeks = vb11.allWeeks","pinned":false,"hidden":false,"mode":"ojs"},{"id":1771,"value":"allMonths = vb11.allMonths","pinned":false,"hidden":false,"mode":"ojs"},{"id":2395,"value":"monthLabels = [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4330,"value":"options = ({\n weekday: \"short\",\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3430,"value":"----\n#### Event Counts by Engagement","pinned":false,"hidden":false,"mode":"md"},{"id":1643,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":3328,"value":"---\n#### Social Connectivity Graph","pinned":false,"hidden":false,"mode":"md"},{"id":425,"value":"nodeData = [\n ...new Set(\n allDates\n .map((d) => d.events)\n .flat()\n .filter((d) => d.attendees && d.attendees.length > 1)\n .map((d) => d.attendees)\n .flat()\n .map((d) => d.email)\n )\n].map((d) => ({ id: d }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"links = Object.values(\n allDates\n .map((d) => d.events)\n .flat()\n .filter((d) => d.attendees && d.attendees.length > 1)\n .map((d) => d.attendees)\n .map((g) =>\n g\n .map((p) =>\n g\n .map((f) => ({ source: p.email, target: f.email }))\n .filter((e) => e.source !== e.target)\n )\n .flat()\n )\n .flat()\n\n .reduce((acc, { source, target }) => {\n const key = [source, target].sort().join(\"-\");\n\n if (!acc[key]) {\n acc[key] = {\n source: source < target ? source : target,\n target: source < target ? target : source,\n value: 0\n };\n }\n\n acc[key].value += 1;\n\n return acc;\n }, {})\n)\n .sort((a, b) => d3.descending(a.value, b.value))\n .filter((d) => d.value > cutoff)","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"nodes = nodeData\n .map((d) => ({\n id: d.id,\n group: 0,\n count:\n links.filter((e) => e.source == d.id).length +\n links.filter((e) => e.target == d.id).length\n }))\n .sort((a, b) => d3.descending(a.count, b.count))","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"data = vb11.data","pinned":false,"hidden":false,"mode":"ojs"},{"id":4080,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":4828,"value":"networkScale = d3\n .scaleLinear()\n .domain(d3.extent(data.nodes, (e) => e.count))\n .range([0, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3427,"value":"----\n#### Data Expression","pinned":false,"hidden":false,"mode":"md"},{"id":2974,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":3053,"value":"isos = {\n const zScale = d3.scaleLinear().domain([0, curves.length]).range([0, 1]);\n\n return curves.map((day, i) => {\n return day.map((e) => {\n const z = zScale(i);\n\n const xProjected = e.x - z;\n const yProjected =\n (e.x + z) / 2 -\n e[plotDataChoice] *\n b *\n { events: 1.5, attendees: 2, types: 1.5 }[plotDataChoice] +\n e[plotDataChoice] * Math.random() * a;\n\n return {\n x: xProjected,\n y: yProjected\n };\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3563,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":3576,"value":"isosGrid = {\n const zScale = d3.scaleLinear().domain([0, curves[0].length]).range([0, 1]);\n\n return curvesGrid.map((week) =>\n week.map((day, i) => {\n return day.map((e) => {\n const x = e.x * 0.25;\n const y = e.y * 0.05;\n const z = zScale(i) * 3;\n\n const xProjected = x - z;\n const yProjected =\n (x + z) / 2 -\n e[plotDataChoice] *\n b *\n { events: 1, attendees: 1, types: 1 }[plotDataChoice] +\n e[plotDataChoice] * Math.random() * a;\n\n return {\n x: xProjected,\n y: yProjected\n };\n });\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2993,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":3164,"value":"a = 0.19","pinned":false,"hidden":false,"mode":"ojs"},{"id":3173,"value":"b = 0.25","pinned":false,"hidden":false,"mode":"ojs"},{"id":3357,"value":"plotDataChoice = ({\n Events: \"events\",\n People: \"attendees\",\n Engagement: \"types\"\n}[plotChoice])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3060,"value":"expression = {\n const height = width / 1.5;\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n svg.append(\"rect\").attr(\"width\", width).attr(\"height\", height);\n const gold = d3.maxIndex(\n curves.map((d) => d.reduce((a, v) => (a += v[plotDataChoice]), 0))\n );\n\n const lineGen = d3\n .line()\n .x((d) => (d.x * width) / 2)\n .y((d) => (d.y * width) / 2)\n .curve(d3.curveBasis);\n\n svg\n .selectAll(\".curves\")\n .data(isos)\n .join(\"path\")\n .attr(\"d\", (d) => lineGen(d))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", (d, i) => (i == gold ? \"gold\" : \"white\"))\n .attr(\"stroke-width\", (d, i) => (i == gold ? 2 : 1))\n .attr(\"transform\", `translate(${width / 1.9},${width / 8})`);\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3591,"value":"expressionGrid = {\n const height = width;\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n svg.append(\"rect\").attr(\"width\", width).attr(\"height\", height);\n\n const lineGen = d3\n .line()\n .x((d) => (d.x * width) / 2)\n .y((d) => (d.y * width) / 2)\n .curve(d3.curveBasis);\n\n const gold = d3.maxIndex(\n curvesGrid.map((d) =>\n d.flat().reduce((a, v) => (a += v[plotDataChoice]), 0)\n )\n );\n\n isosGrid.forEach((cell, i) => {\n svg\n .selectAll(\".curves\")\n .data(cell)\n .join(\"path\")\n .attr(\"d\", (d) => lineGen(d))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", i == gold ? \"gold\" : \"white\")\n .attr(\"stroke-width\", 1)\n .attr(\n \"transform\",\n `translate(${width / 8 + (i % 4) * (width / 4)},${\n width / 8 + Math.floor(i / 4) * (width / 4)\n })`\n );\n });\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3322,"value":"---\n#### API","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"clientId = \"677700003795-lhcvbet3c5taue01g3f7ctenhroukr5t.apps.googleusercontent.com\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"clientSecret = \"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\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"scope = \"https://www.googleapis.com/auth/calendar.calendars.readonly https://www.googleapis.com/auth/calendar.readonly https://www.googleapis.com/auth/calendar.calendarlist.readonly\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"oauthURL = `https://accounts.google.com/o/oauth2/v2/auth?` +\n `client_id=` +\n clientId +\n `&` +\n `redirect_uri=${\"https://observablehq.com/@zachpino/zz-experiment\"}&` +\n `response_type=token&` +\n `scope=` +\n scope","pinned":false,"hidden":false,"mode":"ojs"},{"id":2240,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5007,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":4573,"value":"---\n#### Collective Aggregation","pinned":false,"hidden":false,"mode":"md"},{"id":4486,"value":"collectiveData = [\n { allDates: personalAllDates },\n await FileAttachment(\"VA17.json\").json(),\n await FileAttachment(\"VA36.json\").json(),\n await FileAttachment(\"VA46.json\").json(),\n await FileAttachment(\"VA43.json\").json(),\n await FileAttachment(\"VA55.json\").json(),\n await FileAttachment(\"v805.json\").json(),\n await FileAttachment(\"va22.json\").json(),\n await FileAttachment(\"va23.json\").json(),\n await FileAttachment(\"va30.json\").json(),\n await FileAttachment(\"vc39.json\").json(),\n await FileAttachment(\"V998@4.json\").json()\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4506,"value":"collectiveAllDates = {\n let col = collectiveData.map((d) => d.allDates);\n\n let colFlip = col[0].map((_, colIndex) => col.map((row) => row[colIndex]));\n return colFlip.map((d) =>\n d.reduce(\n (a, v, i) => {\n a.events = a.events.concat(\n v.events.map((g) => ({ ...g, participant: i }))\n );\n a.eventCount = a.events.length;\n a.meetingDuration += v.meetingDuration;\n a.dateObj = v.dateObj ? v.dateObj : a.dateObj;\n return a;\n },\n { ...d[0], events: [] }\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4500,"value":"----\n#### Data and Experience Management","pinned":false,"hidden":false,"mode":"md"},{"id":3726,"value":"dataDonation = ({\n submissionTime: Date.now(),\n experimentID,\n mode,\n group,\n colorVision,\n allDates: personalAllDates,\n allWeeks,\n allMonths,\n types,\n data,\n isos,\n isosGrid,\n plotChoice,\n plotLayout,\n cutoff,\n textExpression\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3258,"value":"colorMap = colorVision == \"Full Color\"\n ? d3.interpolatePlasma\n : d3.interpolateCividis","pinned":false,"hidden":false,"mode":"ojs"},{"id":4197,"value":"---\n#### Facilitator Controls","pinned":false,"hidden":false,"mode":"md"},{"id":4191,"value":"viewof mode = Inputs.radio([\"Visual\", \"Text\"], {\n label: \"Mode\",\n value: \"Visual\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4555,"value":"viewof group = Inputs.radio([\"Personal\", \"Collective\", \"Comparative\"], {\n label: \"Group\",\n value: \"Comparative\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5398,"value":"viewof othersLabel = Inputs.text({ value: \"Other\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5387,"value":"viewof selfLabel = Inputs.text({ value: \"Self\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3947,"value":"Inputs.table(eventData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3915,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs"},{"id":5642,"value":"textExpression = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5464,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}