25:["$","title",null,{"children":"Renewable Calendar Events | Mark Cherrie | Observable"}] 49:T156d,chart = { const width = 500; const height = 150; const margin = { top: 20, right: 40, bottom: 30, left: 40 }; const categories = ["Wind", "General Energy Transition", "Grid & Networks", "Energy Storage", "Construction", "Solar", "Supply Chain", "Awards"]; const colors = ["#003f5c", "#58508d", "#8a508f", "#bc5090", "#de5a79", "#ff6361", "#ff8531", "#ffa600"]; // Custom colors for each category const svgContainer = d3.create("div"); // Assume data is already loaded and called k const data = k; // Parse the data const parseDate = d3.timeParse("%d/%m/%y"); data.forEach(d => { d.datefrom = parseDate(d.datefrom); d.dateto = parseDate(d.dateto) || d.datefrom; // Handle single-day dates d.value = + d.value; }); categories.forEach((category, i) => { const svg = svgContainer.append("svg") .attr("viewBox", [0, 0, width, height]) .call(d3.zoom() .scaleExtent([1, 2]) // Set maximum zoom level to 2 .on("zoom", zoomed)) .on("dblclick.zoom", null); // Disable double-click zoom // Add a group for the title const header = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top - 30})`); // Add category name to the top left-hand side header.append("text") .attr("x", 0) .attr("y", 20) .attr("font-size", "12px") .attr("font-weight", "bold") .text(category); const gBars = svg.append("g") .attr("fill", colors[i]); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background", "#fff") .style("border", "1px solid black") .style("padding", "5px") .style("border-radius", "3px"); const x = d3.scaleTime() .domain(d3.extent(data.flatMap(d => [d.datefrom, d.dateto]))) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, 1]) .range([height - margin.bottom, margin.top]); const barWidth = (width - margin.left - margin.right) / data.length * 0.5; // Adjust bar width to fill available space gBars.selectAll("rect") .data(data.filter(d => d.category === category)) .join("rect") .attr("x", d => x(d.datefrom)) .attr("y", d => y(d.value)) .attr("width", d => Math.max(1, x(d.dateto) - x(d.datefrom))) // Ensure minimum width for single-day events .attr("height", d => height - margin.bottom - y(d.value) -0.4) .attr("fill", colors[i]) // Color bars based on category .style("pointer-events", "all") // Enable pointer events on bars .on("mouseover", (event, d) => { tooltip.style("visibility", "visible") .html(`From: ${d.datefrom.toDateString()}
To: ${d.dateto.toDateString()}
Name: ${d.name}
Location: ${d.Location}
Source: ${d.source}` ); }) .on("mousemove", event => { tooltip.style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseout", () => { tooltip.style("visibility", "hidden"); }) .on("click", (event, d) => { const start = d.datefrom.toISOString().split('T')[0]; const end = d.dateto.toISOString().split('T')[0]; const link = calendarLink({ start, end, allDay: true, title: `${d.name}`, location: `${d.Location}`, filename: `${d.name}-event.ics`, label: "Download Event", attributes: { class: "download-event-link" } }); // Remove any existing link d3.select(".download-event-link").remove(); // Append the new link const downloadLink = svg.append("a") .attr("href", link) .attr("download", `${d.name}-event.ics`) .attr("class", "download-event-link") .attr("xlink:href", link) // Required for SVG links .append("foreignObject") .attr("x", width - 25) // Position the link within the SVG .attr("y", 10) // Position the link within the SVG .attr("width", 24) .attr("height", 24) .html(icon); // Use the provided SVG icon // Add the pulsing border class downloadLink.classed("pulse-border", true); // Remove the pulsing border class after 0.5 seconds setTimeout(() => { downloadLink.classed("pulse-border", false); }, 500); // Add click event to remove the link after download downloadLink.on("click", () => { d3.select(".download-event-link").remove(); }); }); const gx = svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%b"))); // Format months as three-letter abbreviations function zoomed({ transform }) { const zx = transform.rescaleX(x).interpolate(d3.interpolateRound); gBars.selectAll("rect") .attr("x", d => zx(d.datefrom)) .attr("width", d => Math.max(1, zx(d.dateto) - zx(d.datefrom))); // Ensure minimum width for single-day events gx.call(d3.axisBottom(zx).tickFormat(d3.timeFormat("%b"))); // Format months as three-letter abbreviations } }); return svgContainer.node(); }4a:T854,calendarLink = function({ title, start, end, allDay, timezone, description, location, url, filename, lastModified, label, attributes = {} }) { // Copying so that the original values aren't modified const startDt = new Date(start); const endDt = new Date(end); const tzId = timezone || "UTC"; const zeroPad = i => i.toString().padStart(2, "0"); // Use local time (whatever it is) for all day to avoid UTC issues const formatDateTime = dt => (tzId === "UTC" && !allDay ? [ ...[dt.getUTCFullYear(), dt.getUTCMonth() + 1, dt.getUTCDate()].map( zeroPad ), "T", ...[dt.getUTCHours(), dt.getUTCMinutes(), dt.getUTCSeconds()].map( zeroPad ) ] : [ dt.getFullYear(), ...[dt.getMonth() + 1, dt.getDate()].map(zeroPad), "T", ...[dt.getHours(), dt.getMinutes(), dt.getSeconds()].map(zeroPad) ] ).join(""); // Increment to the next day if all day specified if (allDay) { endDt.setDate(endDt.getDate() + 1); } const startDtStr = allDay ? formatDateTime(startDt).slice(0, 8) : formatDateTime(startDt); const endDtStr = allDay ? formatDateTime(endDt).slice(0, 8) : formatDateTime(endDt); const event = [ `BEGIN:VCALENDAR`, `VERSION:2.0`, `CALSCALE:GREGORIAN`, `BEGIN:VEVENT`, `SUMMARY:${title || `Event`}`, `DTSTART;TZID=${tzId};VALUE=DATE-TIME:${startDtStr}`, `DTEND;TZID=${tzId};VALUE=DATE-TIME:${endDtStr}`, `DESCRIPTION:${description || ``}`, `LAST-MODIFIED;VALUE=DATE-TIME:${formatDateTime(new Date())}Z`, `LOCATION:${location || ``}`, `URL:${url || ``}`, `END:VEVENT`, `END:VCALENDAR` ].join("\n"); const linkEl = html`${label || "Download Event"}`; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) linkEl.setAttribute(key, val); }); return linkEl; }4b:T650,googleCalendarLink = function({ title, start, end, allDay, description, location, url, label, attributes = {} }) { // Copying so that the original values aren't modified const startDt = new Date(start); const endDt = new Date(end); const zeroPad = i => i.toString().padStart(2, "0"); const formatDateTime = dt => allDay ? [dt.getFullYear(), dt.getMonth() + 1, dt.getDate()] .map(zeroPad) .join("") : [ ...[dt.getUTCFullYear(), dt.getUTCMonth() + 1, dt.getUTCDate()].map( zeroPad ), "T", ...[dt.getUTCHours(), dt.getUTCMinutes(), dt.getUTCSeconds()].map( zeroPad ), "Z" ].join(""); // For all-day events to work, we need to add a day to whatever the end date is if (allDay) { endDt.setUTCDate(endDt.getUTCDate() + 1); } const queryParams = { action: "TEMPLATE", dates: [startDt, endDt].map(formatDateTime).join("/"), text: title, location, details: url, trp: false, sprop: "mame:" }; const googleCalendarURL = `https://www.google.com/calendar/event?${Object.keys( queryParams ) .filter(key => ![null, undefined].includes(queryParams[key])) .map(key => `${key}=${window.encodeURIComponent(queryParams[key])}`) .join("&")}`; const linkEl = html`${label || "Add to Google Calendar"}`; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) linkEl.setAttribute(key, val); }); return linkEl; }4c:T6e1,outlookLink = function({ title, start, end, allDay, description, location, label, attributes = {} }) { // Copying so that the original values aren't modified const startDt = new Date(start); const endDt = new Date(end); const zeroPad = i => i.toString().padStart(2, "0"); const formatDateTime = dt => allDay ? [dt.getFullYear(), dt.getMonth() + 1, dt.getDate()] .map(zeroPad) .join("-") : [ [dt.getUTCFullYear(), dt.getUTCMonth() + 1, dt.getUTCDate()] .map(zeroPad) .join("-"), "T", [dt.getUTCHours(), dt.getUTCMinutes(), dt.getUTCSeconds()] .map(zeroPad) .join(":"), "Z" ].join(""); // For all-day events to work, we need to add a day to whatever the end date is if (allDay) { endDt.setUTCDate(endDt.getUTCDate() + 1); } const queryParams = { path: "/calendar/action/compose", rru: "addevent", startdt: formatDateTime(startDt), enddt: formatDateTime(endDt), allday: !!allDay, subject: title, body: description, location }; // Right now using a base for a separate Outlook account, is it safer to default to Office? const outlookURL = `https://outlook.office.com/calendar/0/deeplink/compose?${Object.keys( queryParams ) .filter(key => ![null, undefined].includes(queryParams[key])) .map(key => `${key}=${window.encodeURIComponent(queryParams[key])}`) .join("&")}`; const linkEl = html`${label || "Add to Outlook Calendar"}`; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) linkEl.setAttribute(key, val); }); return linkEl; }4d:[{"id":"6cba23b6b3e1c764f169e93a202b86169149f5444091dcf34473083a33720e6f896ca8b2ec60a07c8182d6455c73c7a33491c799faa334eef4e0e087bf49f508","href":"https://static.observableusercontent.com/files/6cba23b6b3e1c764f169e93a202b86169149f5444091dcf34473083a33720e6f896ca8b2ec60a07c8182d6455c73c7a33491c799faa334eef4e0e087bf49f508","name":"RenewableEventsCalendar (1)@5.csv","type":"text/csv","lastModified":1736368113719.592,"size":5535}] 29:{"id":"ba1d65711abbeab6","slug":null,"title":"Renewable Calendar Events","thumbnail":"6d1de7fe75fecba44ac2a8946e930b3b63583f515586a31a2a4234894691a053","access_level":"public","create_time":"$D2025-01-04T13:42:53.216Z","update_time":"$D2025-01-08T20:55:10.228Z","view_time":null,"first_public_time":"$D2025-01-08T20:52:08.455Z","has_unpublished_edits":null,"fork":{"id":"558d498c4f3c7f76","slug":"add-to-calendar-links","title":"Add to Calendar Links","owner":{"id":"131ebbed378efb4e","login":"pjsier","name":"Patrick Sier"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5154b4f59e97f626","login":"mark-cherrie","name":"Mark Cherrie","avatar_url":"https://avatars-next.observableusercontent.com/f59eb718a14e6bb65f38b96bae0873e10fcc8ff2d44e2dbe9b2dbd0ebf3fac3e","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":551,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"23b261fd112616a1","login":"mark-cherrie","name":"Mark Cherrie","avatar_url":"https://avatars-next.observableusercontent.com/e445292ea8bb0720ffa50670358e264a696df04c61b58f4f07eb543388b7de29","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"23b261fd112616a1","login":"mark-cherrie","name":"Mark Cherrie","avatar_url":"https://avatars-next.observableusercontent.com/e445292ea8bb0720ffa50670358e264a696df04c61b58f4f07eb543388b7de29","tier":null,"role":"editor"},{"type":"team","id":"5154b4f59e97f626","login":"mark-cherrie","name":"Mark Cherrie","avatar_url":"https://avatars-next.observableusercontent.com/f59eb718a14e6bb65f38b96bae0873e10fcc8ff2d44e2dbe9b2dbd0ebf3fac3e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Renewable Calendar Events","cells":[{"id":0,"value":"md`# Renewable Calendar Events`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"icon = ``;\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`## Download .ics file\n\nCreates a download link for an .ics event file that can be imported into Google Calendar, Outlook, iCal, or other programs\n\n~~~js\nimport {calendarLink} from \"@pjsier/add-to-calendar-links\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"calendarLink({\n start,\n end,\n allDay: false,\n title: \"Test Calendar Event\",\n description: \"Hello, world!\",\n url: \"https://observablehq.com/\",\n location: \"Online\",\n filename: \"hello-world.ics\",\n label: \"Download a Test Event\",\n attributes: {\n class: \"hello-world\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`## Google Calendar\n\nOpens Google Calendar directly with relevant fields pre-populated\n\n~~~js\nimport {googleCalendarLink} from \"@pjsier/add-to-calendar-links\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"googleCalendarLink({\n start,\n end,\n allDay: true,\n title: \"Test Calendar Event\",\n description: \"Hello, world!\",\n location: \"Online\",\n label: \"Add a Test Event to Google Calendar\",\n url: \"https://observablehq.com/\",\n attributes: {\n class: \"testing\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`## Outlook\n\nOpens Outlook calendar event creation page with relevant fields pre-populated\n\n~~~js\nimport {outlookLink} from \"@pjsier/add-to-calendar-links\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"outlookLink({\n start,\n end,\n allDay: false,\n title: \"Test Calendar Event\",\n description: \"Hello, world!\",\n location: \"Online\",\n label: \"Add a Test Event to Outlook\",\n attributes: {\n class: \"outlook\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"start = new Date()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"end = {\n const dt = new Date();\n dt.setHours(dt.getHours() + 1);\n return dt;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"j = await FileAttachment(\"RenewableEventsCalendar (1)@5.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"j","database":"$undefined"},{"id":494,"value":"k = await FileAttachment(\"RenewableEventsCalendar (1)@5.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"k","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null