25:["$","title",null,{"children":"Renewable Calendar Events | Vekta Group | Observable"}] 49:T15b5,chart = { const width = 500; const height = 150; const margin = { top: 40, right: 60, bottom: 40, left: 60 }; const categories = ["Wind", "General Energy Transition", "Grid & Networks", "Energy Storage", "Construction", "Solar", "Supply Chain", "Awards", "International Awareness Days"]; const colors = ["#003f5c", "#58508d", "#8a508f", "#bc5090", "#de5a79", "#ff6361", "#ff8531", "#ffa600", "#06801c"]; // Custom colors for each category const svgContainer = d3.create("div"); // Assume data is already loaded and called k const data = renewableeventscalendarHj1; // Parse the data const parseDate = d3.timeParse("%Y-%m-%d"); 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, 1]) // 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 - 65) // Position the link within the SVG .attr("y", 10) // Position the link within the SVG .attr("width", 20) .attr("height", 20) .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: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; }4b: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; }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":"26f43a5599abf5cd24c707b192a0e42ea5361ce814491de95e1d871665f58485bc79d1727a083dd95fa313799f097146a64b6bfe6f750685f4a7c77c2b121fa6","href":"https://static.observableusercontent.com/files/26f43a5599abf5cd24c707b192a0e42ea5361ce814491de95e1d871665f58485bc79d1727a083dd95fa313799f097146a64b6bfe6f750685f4a7c77c2b121fa6","name":"RenewableEventsCalendar HJ@1.csv","type":"text/csv","lastModified":1737036098167.408,"size":7880}] 29:{"id":"5089d1433bcccb2b","slug":null,"title":"Renewable Calendar Events","thumbnail":"058287220db5a4aac2b2a43f3fb20acf81af6204497ab390a0dda44b43731255","access_level":"public","create_time":"$D2025-01-08T20:58:51.384Z","update_time":"$D2025-03-27T15:39:20.416Z","view_time":null,"first_public_time":"$D2025-01-08T20:58:51.384Z","has_unpublished_edits":null,"fork":{"id":"ba1d65711abbeab6","slug":null,"title":"Renewable Calendar Events","owner":{"id":"5154b4f59e97f626","login":"mark-cherrie","name":"Mark Cherrie"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3594fe6877d14711","login":"vekta-group","name":"Vekta Group","avatar_url":"https://avatars-next.observableusercontent.com/13f6934c06a2c847905f92615bfe639e05a96b39badbe0036f3139b0c24ef101","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":612,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"353739170940576d","login":"vekta-group","name":"Vekta Group","avatar_url":"https://avatars-next.observableusercontent.com/13f6934c06a2c847905f92615bfe639e05a96b39badbe0036f3139b0c24ef101","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"353739170940576d","login":"vekta-group","name":"Vekta Group","avatar_url":"https://avatars-next.observableusercontent.com/13f6934c06a2c847905f92615bfe639e05a96b39badbe0036f3139b0c24ef101","tier":null,"role":"editor"},{"type":"team","id":"3594fe6877d14711","login":"vekta-group","name":"Vekta Group","avatar_url":"https://avatars-next.observableusercontent.com/13f6934c06a2c847905f92615bfe639e05a96b39badbe0036f3139b0c24ef101","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"a5603c9dcf7492ca","slug":"vekta-digital-insights","title":"Vekta Digital Insights ","owner":{"id":"3594fe6877d14711","login":"vekta-group","name":"Vekta Group"}},"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":601,"value":"This week's Insight is to provide the industry with a renewable events calendar. \n

\nEvents include conferences, expositions and trade shows, which have been broken down by topic for easier visualisation. The final topic shown is International awareness days (and weeks) supporting missions aligned with Vekta's interests and goals. Interact with the charts below for additional information and to add each event to your Google or Outlook calendar. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"$49","pinned":false,"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":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":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":582,"value":"
\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":591,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":574,"value":"renewableeventscalendarHj1 = await FileAttachment(\"RenewableEventsCalendar HJ@1.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"renewableeventscalendarHj1","database":"$undefined"},{"id":599,"value":"### Plot 1: Calendar","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":377,"value":"icon = ``;\n","pinned":false,"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":93,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"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":610,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null