45:["$","title",null,{"children":"Global Floating Offshore Wind Sites | Mark Cherrie | Observable"}] 4d:Te00,chart = { const width = 1200 const height = 800 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("fill", "none") .attr("stroke", "currentColor"); const outline = svg.append("path"); const feature = svg.append("path"); const points = svg.append("g"); // Group for all points, to keep them together const projection = d3.geoOrthographic() .scale(300) // Adjust the scale to fit your SVG dimensions .translate([width / 2, height / 2]) // Center the projection .clipAngle(90); // Clip to show only the front hemisphere const path = d3.geoPath(projection); // Use the elevation data directly const pointCoords = elevation; // Create a GeoJSON FeatureCollection for multiple points with a 'type' property const geoJsonPoints = { type: "FeatureCollection", features: pointCoords.map(coords => ({ type: "Feature", geometry: { type: "Point", coordinates: coords.coordinates }, properties: { type: coords.Status[0] // Extract the first element of the Status array } })) }; // Function to set the color based on the 'type' property function getColor(type) { switch (type) { case 'announced': return '#19647E'; // Announced points are green case 'pre-construction': return '#28AFB0'; // Pre-construction points are blue case 'construction': return '#F4D35E'; // Construction points are yellow case 'operating': return '#EE964B'; // Operating points are purple default: return '#1F271B'; // Default color } } function render() { outline.attr("d", path({ type: "Sphere" })); // Render the outline (e.g., sphere) feature.attr("d", path(land)); // Render the land // Render each point in the FeatureCollection, colored by type points.selectAll("path") .data(geoJsonPoints.features) .join("path") .attr("d", path) // Generate the path for each point .attr("fill", d => getColor(d.properties.type)) // Set color based on the 'type' property .attr("stroke", "none"); // Optional: remove stroke if not needed // Add legend to the top right const legend = svg.selectAll(".legend") .data([null]) .join("g") .attr("class", "legend") .attr("transform", `translate(${width - 150}, 20)`); // Adjust the position as needed const legendData = [ { type: 'Announced', color: '#19647E' }, { type: 'Pre-construction', color: '#28AFB0' }, { type: 'Construction', color: '#F4D35E' }, { type: 'Operating', color: '#EE964B' } ]; legend.selectAll("rect") .data(legendData) .join("rect") .attr("x", 0) .attr("y", (d, i) => i * 20) .attr("width", 18) .attr("height", 18) .attr("fill", d => d.color); legend.selectAll("text") .data(legendData) .join("text") .attr("x", 24) .attr("y", (d, i) => i * 20 + 9) .attr("dy", "0.35em") .style("font-size", "14px") // Ensure text is clearly legible .attr("fill", "black") // Set the text fill color explicitly .text(d => d.type); } // Add rotation let rotateSpeed = 0.1; // Rotation speed (degrees per tick) let rotationTimer = d3.timer(() => { if (viewof RotationControl.value) { // Check rotation state const rotate = projection.rotate(); projection.rotate([rotate[0] + rotateSpeed, rotate[1], rotate[2]]); render(); } }); return svg .call(zoom(projection).on("zoom.render end.render", render)) .call(render) .node(); };4e:[{"id":"b28b3f8a395dcffb2e9cd19c767ef9679c4090b394af63bd5518cb7415ad8fa1a6f3cdd1391ee04d987782a4d6bfab4e5525e17d4b6e421b68cf051df373f527","href":"https://static.observableusercontent.com/files/b28b3f8a395dcffb2e9cd19c767ef9679c4090b394af63bd5518cb7415ad8fa1a6f3cdd1391ee04d987782a4d6bfab4e5525e17d4b6e421b68cf051df373f527","name":"elevation.json","type":"application/json","lastModified":1732570037632.25,"size":24127},{"id":"bc383e0d4641976435f0ce6bfd76db305d50a20c18fae28c1f601f3262b66997658847ff167777696cbc6290057a9526c98ff6fa8dd4a1e6210511b6dba48344","href":"https://static.observableusercontent.com/files/bc383e0d4641976435f0ce6bfd76db305d50a20c18fae28c1f601f3262b66997658847ff167777696cbc6290057a9526c98ff6fa8dd4a1e6210511b6dba48344","name":"elevation@1.json","type":"application/json","lastModified":1732570177989.643,"size":23566},{"id":"eec657afeffb70691657f56f78ce546cc20861c628c4272d902fb7ff94d07a73737fd5356d255cef2a092de8322c56bbbc4f0f6a3c0c12864101f37ec6da9321","href":"https://static.observableusercontent.com/files/eec657afeffb70691657f56f78ce546cc20861c628c4272d902fb7ff94d07a73737fd5356d255cef2a092de8322c56bbbc4f0f6a3c0c12864101f37ec6da9321","name":"land-110m.json","type":"application/octet-stream","lastModified":1732284152226.071,"size":55207},{"id":"c4076eaeed234971b8403210cf89cc06d00ad9043a0e678f9319e8c8802bd804432899c89bf7ae4ea97eb9618ed841f4cbb7b533cb4af875c731f3f703fed0d2","href":"https://static.observableusercontent.com/files/c4076eaeed234971b8403210cf89cc06d00ad9043a0e678f9319e8c8802bd804432899c89bf7ae4ea97eb9618ed841f4cbb7b533cb4af875c731f3f703fed0d2","name":"Floating_VektaAnalysis.csv","type":"text/csv","lastModified":1732712841823.002,"size":46956},{"id":"3549e6370d876328a6276db17365c879d12b6718fc84201c2faabef93645b7c2524b318d2a83efe02f2c87bb3f6b6ea097aee5aa2462705a689104cd9cd34576","href":"https://static.observableusercontent.com/files/3549e6370d876328a6276db17365c879d12b6718fc84201c2faabef93645b7c2524b318d2a83efe02f2c87bb3f6b6ea097aee5aa2462705a689104cd9cd34576","name":"Centroids.geojson","type":"application/geo+json","lastModified":1732303994914.512,"size":10188},{"id":"4e0e9b038696fc6ff10eea4f441429bd16abb10ac1c49732c2333608980b015e7931668e388961963136149938eb9e1162ccbdf4869ba62b936ef6fe249fe382","href":"https://static.observableusercontent.com/files/4e0e9b038696fc6ff10eea4f441429bd16abb10ac1c49732c2333608980b015e7931668e388961963136149938eb9e1162ccbdf4869ba62b936ef6fe249fe382","name":"Centroids2.geojson","type":"application/geo+json","lastModified":1732305391669.869,"size":8199},{"id":"2ff58b0ab12d4a6538d251da45630992430b52bc41d8447452127dada52552dcb017127320bb7aaf71436847bc0d19c9e0f580f3f1e3edd3883e09c8bf5bce72","href":"https://static.observableusercontent.com/files/2ff58b0ab12d4a6538d251da45630992430b52bc41d8447452127dada52552dcb017127320bb7aaf71436847bc0d19c9e0f580f3f1e3edd3883e09c8bf5bce72","name":"Centroids3.geojson","type":"application/geo+json","lastModified":1732305990599.052,"size":8227},{"id":"35e635540c4d6405d3b4be4ab8c3d73089b32e58346bf3cdb6bb192bc9c0fa070e07532c2ab1d2b6546ebe4c99c48baaa0155065cc4719c933a900494733a82b","href":"https://static.observableusercontent.com/files/35e635540c4d6405d3b4be4ab8c3d73089b32e58346bf3cdb6bb192bc9c0fa070e07532c2ab1d2b6546ebe4c99c48baaa0155065cc4719c933a900494733a82b","name":"Centroids4.geojson","type":"application/geo+json","lastModified":1732306045187.699,"size":8227},{"id":"f72d4684299bbcdb8f6e917064ca603432f16a79040a129795a6e67f6e84eff6caecf2a3ade046a94093ce756e26be1dd83b70a22f553d70062248647eee0918","href":"https://static.observableusercontent.com/files/f72d4684299bbcdb8f6e917064ca603432f16a79040a129795a6e67f6e84eff6caecf2a3ade046a94093ce756e26be1dd83b70a22f553d70062248647eee0918","name":"Centroids5.geojson","type":"application/geo+json","lastModified":1732306227548.36,"size":8227},{"id":"9dd380c2d3398c03f09055ff8cb3e0a935f97e63f456f04c01ae29f6cca922479fb5b0e0cfe3e8e0ea5ce5be79fedc55966ffc4b81851bf01c3ebef17762e4a7","href":"https://static.observableusercontent.com/files/9dd380c2d3398c03f09055ff8cb3e0a935f97e63f456f04c01ae29f6cca922479fb5b0e0cfe3e8e0ea5ce5be79fedc55966ffc4b81851bf01c3ebef17762e4a7","name":"Centroids6.geojson","type":"application/geo+json","lastModified":1732306565447.513,"size":8111}] 49:{"id":"6244aa000d967828","slug":"global-floating-offshore-wind","title":"Global Floating Offshore Wind Sites","thumbnail":"7d30fcedbaa82b791559217a944b4c329f2d1f1dc4cad7266baf16c96edc92f5","access_level":"public","create_time":"$D2024-11-22T14:02:32.226Z","update_time":"$D2024-11-27T17:34:10.513Z","view_time":null,"first_public_time":"$D2024-11-22T14:04:47.258Z","has_unpublished_edits":null,"fork":{"id":"12de21535ed18022","slug":"sketchy-earth","title":"Sketchy Earth","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"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":1317,"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":"Global Floating Offshore Wind Sites","cells":[{"id":0,"value":"md`# Global Floating Offshore Wind Sites\n## \"Stronger Winds, Deeper Waters\"\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1011,"value":"We have used data from the Global Energy Monitor (June 2024 release) and the Vekta Digital API's to explore the characteristics of floating offshore wind sites around the world. \n\nThe first visualisation is a map of the sites in relation to their status: Announced, pre-construction, construction and operating. ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":719,"value":"\nviewof RotationControl = {\n\nconst form = html``;\n\n let isRotating = true; // Rotation state\n \n // Handle button click\n const button = form.querySelector(\"button\");\n button.onclick = () => {\n isRotating = !isRotating; // Toggle rotation\n button.textContent = isRotating ? \"Stop Rotation\" : \"Start Rotation\";\n form.value = isRotating; // Update the form's value\n form.dispatchEvent(new CustomEvent(\"input\")); // Dispatch an input event\n };\n\n // Initial value\n form.value = isRotating;\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"
\nNext, we have summarised the number of projects for each country by their project status.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":773,"value":"ExampleChart = Plot.plot({\n title: \"Project Status\",\n subtitle: \"by Country\",\n marginLeft: 120,\n width: width,\n height: 700,\ny: {\n grid: true\n },\n color: {\n legend: false\n },\n marks: [\n Plot.auto(floating_vektaanalysis, {x: \"Status\", y: \"Country/Area\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"ExampleChart","database":"$undefined"},{"id":1015,"value":"
\nFinally, we have used the Vekta API's to extract the water depth and average wind speed for each of the sites. ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":955,"value":"VektaAPI = Plot.plot({\n title: \"Elevation and Average Wind Speed\",\n subtitle: \"for each site by phase stage\",\n caption: \"N.b elevation has a log scale\",\n width: width,\n y: {\n type: \"log\"\n },\n color: {\n legend: false\n },\n marks: [\n Plot.auto(floating_vektaanalysis, {x: \"AvgWindSpeed\", y: \"Elevation\", fx: \"Status\", color: \"Projec Name Phase\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"VektaAPI","database":"$undefined"},{"id":1022,"value":"
\nOne significant caveat to the above analysis is the location accuracy. As the vast majority of the sites above are in very early stages (either announced or pre-construction) the location is approximate; some sites are probably closer to shore which will skew the data received from the APIs. \n
\n
\nThe data is shown below:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":764,"value":"floating_vektaanalysis = await FileAttachment(\"Floating_VektaAnalysis.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"floating_vektaanalysis","database":"$undefined"},{"id":1314,"value":"
\nSource: Global Wind Power Tracker, Global Energy Monitor, June 2024 release","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1244,"value":"Appendix\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":701,"value":"elevation = FileAttachment(\"elevation@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, sphere)).bounds(sphere);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"land = {\n let topology = world;\n topology = topojson.presimplify(topology);\n topology = topojson.simplify(topology, 0.1);\n return topojson.feature(topology, topology.objects.land);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"world = FileAttachment(\"land-110m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"topojson = require(\"topojson@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"import {zoom} from \"@d3/versor-zooming\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"import {geoCurvePath} from \"@d3/context-to-curve\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"viewof projection = {\n const form = html``;\n form.select.oninput = () => form.value = d3[form.select.value]().precision(0.1);\n form.select.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null