Public
Edited
Dec 10
// 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 <span style="color:goldenrod">golden ${
// plotLayout == "Grid" ? "block" : "curve"
// }</span> 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"
// }.`
// : ""
// 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**.`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.