25:["$","title",null,{"children":"Offshore Wind Development vs. Potential | Vekta Group | Observable"}] 49:T5e3,chart = { const svg = d3 .create("svg") .attr("width", width) .attr("height", height); const g = svg .append("g") .attr("transform", "translate(40, 60)"); draw(g, width - 220, height - 80, filteredData); // Add a legend at the top-left corner const legend = svg.append("g") .attr("transform", `translate(20, 20)`); // Position it at the top-left corner // Legend entry for 'Actual' (green) legend.append("circle") .attr("cx", 20) .attr("cy", 30) .attr("r", 10) .style("fill", "green"); // Green color for Actual legend.append("text") .attr("x", 40) .attr("y", 30) .style("font-size", "14px") .text("Actual") .style("alignment-baseline", "middle"); // Legend entry for 'Potential' (white) legend.append("circle") .attr("cx", 20) .attr("cy", 60) .attr("r", 10) .style("fill", "orange") .style("stroke", "black"); // White color for Potential with a black border legend.append("text") .attr("x", 40) .attr("y", 60) .style("font-size", "14px") .text("Potential") .style("alignment-baseline", "middle"); // Add "MW" label to the left of the x-axis svg.append("text") .attr("x", width -15) // Positioning to the left of the x-axis .attr("y", 45) // Vertically center it along the height of the chart .style("font-size", "12px") .text("GW") // Label text .style("text-anchor", "middle"); // Center the text vertically return svg.node(); } 4a:T956,chart2 = { const width = 500; const height = 300; const margin = { top: 40, right: 60, bottom: 40, left: 60 }; const svgContainer = d3.create("div"); actualpotential.forEach(d => { d.value = +d.normalized; // Use actualpotential instead of normalized }); // Define a color scale const colorScale = d3.scaleOrdinal(d3.schemeCategory10); const svg = svgContainer.append("svg") .attr("viewBox", [0, 0, width, height]); const gBars = svg.append("g"); 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.scaleBand() .domain(actualpotential.map(d => d.Country)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3.scaleLinear() .domain([-100, 100]) .range([height - margin.bottom, margin.top]); gBars.selectAll("rect") .data(actualpotential) .join("rect") .attr("x", d => x(d.Country)) .attr("y", d => d.value >= 0 ? y(d.value.toFixed(2)) : y(0)) .attr("height", d => Math.abs(y(d.value) - y(0))) .attr("width", x.bandwidth()) .attr("fill", "orange") // Assign color based on country instead .on("mouseover", (event, d) => { tooltip.style("visibility", "visible") .html(`Country: ${d.Country}
Value: ${d.value.toFixed(2)}`); }) .on("mousemove", event => { tooltip.style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseout", () => { tooltip.style("visibility", "hidden"); }); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)); // Add X-axis label on the far right svg.append("text") .attr("x", width - margin.right) .attr("y", margin.top - 20) .attr("text-anchor", "end") .attr("font-size", "12px") .attr("fill", "black") .text("More Fixed Potential 🡆"); // Add label at the bottom left svg.append("text") .attr("x", margin.left) .attr("y", height - margin.bottom + 20) .attr("text-anchor", "start") .attr("font-size", "12px") .attr("fill", "black") .text("🡄 More Floating Potential"); return svgContainer.node(); } 4b:T438,function updateChart(data, capacity, height) { // Sort the data based on the selected capacity (Actual, Potential, or difference) data.sort((a, b) => { const aValues = Object.values(a); const bValues = Object.values(b); if (capacity == 'Actual') { return aValues[1] - bValues[1]; // Sort by 2nd column } else if (capacity == 'Potential') { return aValues[2] - bValues[2]; // Sort by 3rd column } else { return (aValues[2] - aValues[1]) - (bValues[2] - bValues[1]); // Sort by difference } }); // Define the y-axis scale based on sorted data const y = d3.scaleBand() .domain(data.map(d => d.Country)) .range([0, height - 80]) .padding(0); // Update the y-axis d3.select('.axis--y') .transition() .duration(275) .call( d3.axisLeft() .scale(y) .tickSize(0) ); // Update the lollipop positions d3.select('g.lollipops') .selectAll('g.lollipop') .transition() .duration(175) .attr('transform', d => `translate(130, ${y(d.Country) + y.bandwidth() / 2})`); }4c:Td86,function draw(svg, width, height, data) { const min = d3.min(data.map(d => Object.values(d)[1])); // 2nd column (Actual) const max = Math.max(120, d3.max(data.map(d => Object.values(d)[2])) + 1); // 3rd column (Potential) const xOffset = 130; // Define y-scale based on 'Country' field const y = d3.scaleBand() .domain(data.map(d => d.Country)) // Use 'Country' as the category name .range([0, height - 20]) .padding(0); const x = d3.scaleLinear() .domain([min, max]) .range([xOffset, width]) .nice(); const yAxis = d3.axisLeft().scale(y).tickSize(0); svg.append("g") .attr("class", "axis--y") .attr("transform", "translate(" + (xOffset + 100) + ", 0)") .call(yAxis) .selectAll("text") .style("font-size", "14px"); // Use d3.format("d") to force integer values on the x-axis const xAxis = d3.axisTop().scale(x).tickFormat(d3.format("d")); svg.append("g") .attr("transform", "translate(" + xOffset + ", -5)") .call(xAxis) .selectAll("text") .style("font-size", "18px"); const lollipopsGroup = svg.append("g").attr("class", "lollipops"); const lollipops = lollipopsGroup.selectAll("g") .data(data) .enter() .append("g") .attr("class", "lollipop") .attr("transform", d => `translate(${xOffset}, ${y(d.Country) + y.bandwidth() / 2})`); // Add lines for lollipops (connecting Actual and Potential values) lollipops.append("path") .attr("class", "lollipop-line") .attr("d", d => { const actualX = x(Object.values(d)[1]) + xOffset - 130; const potentialX = x(Object.values(d)[2]) + xOffset - 130; return `M${actualX},0 L${potentialX},0`; }) .style("stroke", "black") .style("stroke-width", 1); // Create Tooltip const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "#fff") .style("color", "black") .style("border", "1px solid black") .style("padding", "5px") .style("border-radius", "5px") .style("font-size", "14px"); // Create Actual Value Circles (White) lollipops.append("circle") .attr("class", "lollipop-min") .attr("r", 5) .attr("cx", d => x(Object.values(d)[1]) + xOffset - 130) .attr("cy", 0) .style("fill", "green") .style("stroke", "black") // Black outline to make visible .on("mouseover", function(event, d) { tooltip.style("visibility", "visible") .text(`Actual: ${Math.round(Object.values(d)[1])}GW`); // Round to integer }) .on("mousemove", function(event) { tooltip.style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseout", function() { tooltip.style("visibility", "hidden"); }); // Create Potential Value Circles (Green) lollipops.append("circle") .attr("class", "lollipop-median") .attr("r", 5) .attr("cx", d => x(Object.values(d)[2]) + xOffset - 130) .attr("cy", 0) .style("fill", "orange") .on("mouseover", function(event, d) { tooltip.style("visibility", "visible") .text(`Potential: ${Math.round(Object.values(d)[2])}GW`); // Round to integer }) .on("mousemove", function(event) { tooltip.style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseout", function() { tooltip.style("visibility", "hidden"); }); } 4d:[{"id":"5cec86a0054750ba6240821c1880e5888a0f476203e487f709ff739b3541e42f725350f79f0d386fdad76aa30ee2f7a5dfcb42adea0050eab41774540b41c3d2","href":"https://static.observableusercontent.com/files/5cec86a0054750ba6240821c1880e5888a0f476203e487f709ff739b3541e42f725350f79f0d386fdad76aa30ee2f7a5dfcb42adea0050eab41774540b41c3d2","name":"ActualvsPotential_oppreconstconst@4.csv","type":"text/csv","lastModified":1739210144696.416,"size":4238},{"id":"540beffb7e82aa76dc542bfb2b59d55ec72e7e97132564e28bdf781f3135ca6144ccb7b27c0fefa98cb1d23162a5c44cff347545c17e2f0b04dfd4b8fd96cc79","href":"https://static.observableusercontent.com/files/540beffb7e82aa76dc542bfb2b59d55ec72e7e97132564e28bdf781f3135ca6144ccb7b27c0fefa98cb1d23162a5c44cff347545c17e2f0b04dfd4b8fd96cc79","name":"screenshot_potential.png","type":"image/png","lastModified":1739219246487.447,"size":980836},{"id":"e8138b73a5c630c9823ed06f4d51e6e774e5b88bc0e13e31f3ae32da2c2ec04639701a07527f7c8c0f91919e91b3e3cb55ca149bc5645f196f33759a07c31cf1","href":"https://static.observableusercontent.com/files/e8138b73a5c630c9823ed06f4d51e6e774e5b88bc0e13e31f3ae32da2c2ec04639701a07527f7c8c0f91919e91b3e3cb55ca149bc5645f196f33759a07c31cf1","name":"data (10).csv","type":"text/csv","lastModified":1739807732316.923,"size":5663},{"id":"c59e97b932f02a0cb2ca696f27e10d534f175f940f0b64e472d39621694ef8a51f3dbf0ea5bd978a02418bcbc411eff1f105910d12541133f07b7c868a7b0a7a","href":"https://static.observableusercontent.com/files/c59e97b932f02a0cb2ca696f27e10d534f175f940f0b64e472d39621694ef8a51f3dbf0ea5bd978a02418bcbc411eff1f105910d12541133f07b7c868a7b0a7a","name":"countries_with_continents.csv","type":"text/csv","lastModified":1738706167458.187,"size":2085}] 29:{"id":"cf4e6e0ab1eb937b","slug":null,"title":"Offshore Wind Development vs. Potential","thumbnail":"a301bd0968c4cb43be713feac5df59b610dd3d35f4093499dd69a8cfdb3b7601","access_level":"public","create_time":"$D2025-02-03T20:05:36.106Z","update_time":"$D2025-03-27T15:39:05.115Z","view_time":null,"first_public_time":"$D2025-02-03T20:05:36.106Z","has_unpublished_edits":null,"fork":true,"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":1068,"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":"viewer"}],"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":"Offshore Wind Development vs. Potential","cells":[{"id":1037,"value":"# Offshore Wind Development vs. Potential","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":927,"value":"
\nWe used the World Bank report on technical potential for each country in the world based on water depth and wind speed. The geographical extent of the potential zones for floating and fixed offshore wind are shown in the layer control in Vekta Digital.\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":942,"value":"screenshot_potential = FileAttachment(\"screenshot_potential.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"We used the data on capacity from the Global Energy Monitor (June 2024 release). We defined Actual capacity as sites that were in the \"pre-construction\", \"construction,\" or \"operating\" phase. \n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":953,"value":"Use the Dropdown selections below to filter the actual and potential values for each country. ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":483,"value":"viewof continent = Inputs.select(['Africa','Asia','Europe', 'Oceania','North America','South America'], {value: 'Europe', label: \"Continent\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"viewof installationType = Inputs.select(['Floating', 'Fixed'], {value: 'Fixed', label: \"Installation Type\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"viewof capacity = Inputs.select(['Actual', 'Potential'], {value: 'Actual', label: \"Sort by Capacity\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"Some countries are well on there way to achieving their potential. For example, Poland is on track to have 10GW fixed capacity from a potential of 19GW (53%). Some countries have vast potential, for example the United Kingdom with 512GW and 68GW on track to be realised; Sweden has less that half the potential but a similar amount soon to be realised 57GW. The differences between fixed and floating potential are not more evident that in South Africa. It has 852GW of floating potential compared to 49GW for fixed.\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1023,"value":"We took the ratio of fixed to floating potential and normalised the scores to between -100 and 100. South Africa is 12th from the left, showing that it has much higher potential floating capacity to fixed. It joins countries like Greece and Italy. Countries that have more equal potential for floating and fixed include Vietnam, Mexico and India. At the other end of the scale (relatively more fixed bottom potential) includes Indonesia, the Netherlands and Germany. ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":994,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"One limitation of the analysis above is that it is based on 'technical' potential, and does not consider location or economic-specific conditions that will utlimately determine suitability. It is an overestimate of the true potential of a country. The results are sensitive to the way we define 'Actual' Capacity, for example if 'Announced' projects were also included the figures would be inflated and some countries would overtake others, showing a different ranking overall. ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"
\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1050,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":409,"value":"data = await FileAttachment(\"ActualvsPotential_oppreconstconst@4.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data","database":"$undefined"},{"id":1043,"value":"### Plot 1: Actual vs Potential Lollipop Graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":482,"value":"countries_with_continents = await FileAttachment(\"countries_with_continents.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"countries_with_continents","database":"$undefined"},{"id":292,"value":"filteredData = {\n const continentData = countries_with_continents.filter(d => d.Continent === continent);\n\n return data\n .filter(d => continentData.some(cd => cd.Country === d.Country)) // Filter by continent\n .map(row => {\n let filteredRow = { Country: row.Country }; // Always keep the Country column\n Object.keys(row).forEach(key => {\n if (key.includes(installationType) || key === \"Country\") {\n filteredRow[key] = row[key];\n }\n });\n return filteredRow;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"### Plot 2: Fixed vs Floating Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":988,"value":"actualpotential = await FileAttachment(\"data (10).csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"actualpotential","database":"$undefined"},{"id":1066,"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