2d:null 2e:["$","title",null,{"children":"wind turbine development since 1980 | Johannes Mainusch | Observable"}] 33:T23cf,windTurbines = ()=> { const title = "Wind turbine development in the past decades" const margin = ({top: 30, right: 30, bottom: 30, left: 30}) const data = wdata.data.map((e) => ({...e, 'actualRotation': Math.random()*360 })) let BeauFort = 4 const redColor = "green" const textColor = "dargGrey" const lineOffsetFromMouse = 3 const backgroudImageUrl = "https://ahojsenn.github.io/assets/img/Landschaft1.png" const boxWidth = d3.select("body").node().getBoundingClientRect().width * 0.9 const boxHeight = (boxWidth-margin.left)*9/16 const colonWidth = 6 const xid = "Jahr" const yid = "Bauhöhe" const rid = "Rotordurchmesser [m]" const description = "Firma" let xMin = 1980 const xMax = 2030 const yMax = d3.max(data, d => +d[yid]) + d3.max(data, d => +d[rid]/2)*1.2 // x-scale const x = d3.scaleLinear() .domain([xMin, xMax]) .range([margin.left, boxWidth-margin.right]) // y-scale const y = d3.scaleLinear() .domain([0, yMax] ) .range([boxHeight,0]) // radius scale const r = d3.scaleLinear() .domain([0, yMax] ) .range([0,boxHeight]) const drawredline = (evt, text="") => { const xpos = evt.offsetX - margin.left const ypos = boxHeight - evt.offsetY + margin.top svg.selectAll(".redLine").remove() d3.select("#xMouse-value").text(evt.offsetX) d3.select("#yMouse-value").text(evt.offsetY) svg.append ("path") .attr("class", "redLine") .attr("stroke", redColor) .attr("d", "M "+(evt.offsetX - lineOffsetFromMouse)+","+(boxHeight+margin.top)+",L "+(evt.offsetX - lineOffsetFromMouse)+","+margin.top+" Z") svg.append ("text") .attr("class", "redLine") .text( text ) .attr("x", evt.offsetX+5) .attr("y", margin.top + 10) .attr("dy", ".75em") .attr("fill", redColor) .attr("text-anchor", "left") .style("font", "12px sans-serif") .append("tspan") .attr("x", evt.offsetX+5) .attr("dy", "1em") .text( "year: "+Math.round(x.invert(xpos+margin.left)) ) .append("tspan") .attr("x", evt.offsetX+5) .attr("dy", "1em") .text( "height: "+Math.round(y.invert(boxHeight-ypos)) + "m" ) } const svg = d3.select(DOM.svg(boxWidth + margin.left + margin.right, boxHeight + margin.top + margin.bottom)) svg .on("mouseout", svg.selectAll(".redLine").remove() ) .on("mousemove", evt => drawredline(evt, "") ) // background svg.append("rect") .attr("class", "bar") .attr("fill", "ccf") .attr("fill-opacity", "0.1") .attr("x", 0) .attr("y", 0) .attr("width", boxWidth + margin.left + margin.right) .attr("height", boxHeight + margin.top + margin.bottom) svg.append("image") .attr("xlink:href", backgroudImageUrl) //.attr("width", "100%") .attr("height", "105%") .attr("opacity", "0.3") // x-Axis svg.append("g") .attr("class", "x-axis") .attr("transform", "translate(0," + (boxHeight +margin.top) + ")") .call(d3.axisBottom(x)) // y-Axis svg.append("g") .attr("class", "y-axis") .attr("transform", "translate("+margin.left+","+margin.top+")") .call(d3.axisRight(y).tickSize(boxWidth)) .call(g => g.selectAll(".tick:not(:first-of-type) line").attr("stroke", "#ddd").attr('opacity',0.1)) // the title svg.append("text") .attr("transform", "translate("+margin.left+",20)") .attr("font-size", "20px") .attr("y", 0) .attr("x", 0) .attr("font-family", "monospace") .text(title) // the masts const mast = (xpos, ypos) => { const center = {"x":xpos, "y":ypos+ margin.top} const topWidth = 8*(boxHeight-ypos)/boxHeight // in pixel const bottomWidth = 14*(boxHeight-ypos)/boxHeight // in pixel const poly = [ {"x":center.x-topWidth, "y":center.y}, {"x":center.x+topWidth, "y":center.y}, {"x":center.x+0.4*(topWidth+bottomWidth), "y":0.5*(center.y+boxHeight+margin.top-1)}, {"x":center.x+bottomWidth,"y":boxHeight+margin.top-1}, {"x":center.x-bottomWidth,"y":boxHeight+margin.top-1}, {"x":center.x-0.4*(topWidth+bottomWidth), "y":0.5*(center.y+boxHeight+margin.top-1)}, ] const ret = d3.create("svg") .selectAll() .data([poly]) .enter() .append("polygon") .attr("fill","lightgrey") .attr("stroke","darkgrey") .attr("stroke-width",1) .attr("points", d => d.map (e => [e.x,e.y].join(",") ).join(" ") ) return ret.node() } // the rotors const rotor = (x,y, r, firma) => d3.create("svg") .append('circle') .attr("class", firma.replace(/\s/g, "") + " circle") .attr('cx', x) .attr('cy', y+ margin.top) .attr('r', r) .attr('opacity',0.1) .style('fill', 'lightblue') .node() // the genrator house const generatorHouse = (x,y, r) => d3.create("svg") .append('circle') .attr('cx', x) .attr('cy', y+ margin.top) .attr('r', r) .style('fill', 'lightgrey') .style('stroke', 'grey') .node() // the windTurbine const windTurbines = svg.append("g") .selectAll('g') .data(d3.sort(data, d => -d[xid])) .join("g") .attr("class", d => d["Firma"].replace(/\s/g, "")) windTurbines.append(d => mast( x(d[xid]) , y(d[yid]))) const turbineDescription = d => { return "" +d["Firma"] + "
" +"year: "+d["Jahr"]+ "
" +"height: "+d["Bauhöhe"]+" m" + "
" +"⌀ rotor: "+d["Rotordurchmesser [m]"]+" m"+ "
" +"Leistung: "+d["Leistung [kW]"]+" kW"+ "
" +""+d["Kommentar"] + "
" } // a single blade 0 degrees with length of l meters and rotation const blade = (xpos,ypos,l, rotation) => { const center = {"x":xpos, "y":ypos+ margin.top} const length = l const poly = [{"x":center.x, "y":center.y}, {"x":center.x,"y":center.y+length}, {"x":center.x+length*0.07,"y":center.y+length*0.13}, ] const ret = d3.create("svg") .selectAll() .data([poly]) .enter() .append("polygon") .attr("fill","white") .attr("stroke","grey") .attr("stroke-width",1 ) .attr("transform", "rotate("+rotation+", "+center.x+", "+center.y+")") .attr("points", d => d.map (e => [e.x,e.y].join(",") ).join(" ") ) return ret.node() } // blades attaches n blades to a wind turbine const blades = (x,y,r,n, rotation, firma) => { const b = d3.create("svg:g") .selectAll("g") .data(d3.range(n)) .join("g") .attr("class","blades") for (let i=0; i<=n; i++) b.append(d => blade(x,y,r, rotation+i*360/n)) return b.node() } windTurbines .append(d => rotor( x(d[xid]) , y(d[yid]), 0.5*r(d[rid]), d["Firma"] )) .on("mouseover", (evt,d) => { d3.select(evt.target) .transition().duration(500) .attr("fill", d => d["Firma"] === "GROWIAN" ? "red": "steelblue") .style('fill', d => d["Firma"] === "GROWIAN" ? "red": "steelblue") .attr('opacity',0.8) .attr("stroke", "black") svg.append("foreignObject") .attr("class", "windmilltext") .attr("width", boxWidth/2) .attr("height", boxHeight) .attr("x", (x(d[xid])"+ turbineDescription(d)+"

") }) .on("mouseleave", evt => { d3.select(evt.target) .transition().duration(500) .style("fill","lightblue") .attr("fill", "grey") .attr("stroke", "") .attr('opacity',0.1) svg.selectAll(".windmilltext").remove() }) windTurbines.append(d => { return blades(x(d[xid]) , y(d[yid]), 0.5*r(d[rid]),d["Blades"], d["actualRotation"], d["Firma"]) }) // rotate the turbines const rotateTurbines = async (BeauFort) => { if (BeauFort <=2 ) return const DEF_DELAY = 50 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms || DEF_DELAY)) // rotate the windturbines in (BeauFort-2) steps for (let rot=1; rot<5000; rot++) { await sleep(DEF_DELAY) for (let i = 0; i < data.length; i++) { const firma = data[i]["Firma"] windTurbines.filter(d => d["Firma"] === firma).selectAll(".blades").remove() windTurbines.filter(d => d["Firma"] === firma).append(d => { const startRot = d["Bauhöhe"] const rotationSpeed = 10/d["Blades"]-d[rid]/100 data[i]["actualRotation"]+=rotationSpeed return blades(x(d[xid]) , y(d[yid]), 0.5*r(d[rid]),d["Blades"], data[i]["actualRotation"], d["Firma"].replace(/\s/g, "") ) }) } } } //windTurbines.selectAll('.rotors').rotate(1, d["Firma"]) windTurbines.append(d => generatorHouse( x(d[xid]) , y(d[yid]), 0.02*r(d[rid]))) rotateTurbines(4) return svg.node() } 34:[{"id":"9079cb2d2740bdc910edf8045c0428f2a89fd89899b2d4de09afa0c1f963723912365064e33d00e9d09329e8cb587c84143c5d8a029b3c6081f2a2d486440266","href":"https://static.observableusercontent.com/files/9079cb2d2740bdc910edf8045c0428f2a89fd89899b2d4de09afa0c1f963723912365064e33d00e9d09329e8cb587c84143c5d8a029b3c6081f2a2d486440266","name":"development of wind turbines.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1693476193166.546,"size":7459},{"id":"ffae3abca0e0b654e3f2573b89f2268f198a74e14f352bd53cefc73a5c7aea6921cc3fa8698595708d8527c0334ad9c00cbca0eb7dcd4f275ef6544c4778cdf3","href":"https://static.observableusercontent.com/files/ffae3abca0e0b654e3f2573b89f2268f198a74e14f352bd53cefc73a5c7aea6921cc3fa8698595708d8527c0334ad9c00cbca0eb7dcd4f275ef6544c4778cdf3","name":"CO2 und Energie.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1693481202962.369,"size":837872},{"id":"f109161e75d676241a6a32b40d21caabf05307be977d915abec8e97d6b4b6dc6e68ae9d46749a10b42befca6fb5d34ae6054674a1d4f78fa122be84e7e4637a3","href":"https://static.observableusercontent.com/files/f109161e75d676241a6a32b40d21caabf05307be977d915abec8e97d6b4b6dc6e68ae9d46749a10b42befca6fb5d34ae6054674a1d4f78fa122be84e7e4637a3","name":"Landschaft.png","type":"image/png","lastModified":1694531777864.682,"size":5632974}] 31:{"id":"b7376145da47a796","slug":"development-of-wind-turbines","title":"wind turbine development since 1980","thumbnail":"976bc64176c129406fc7d6c19635dc74ca19ddbba4041db98dd74181f27e8198","access_level":"public","create_time":"$D2023-08-31T09:38:07.956Z","update_time":"$D2026-01-25T19:42:24.619Z","view_time":null,"first_public_time":"$D2023-08-31T09:38:07.956Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ae5e0aa7324794cc","login":"ahojsenn","name":"Johannes Mainusch","avatar_url":"https://avatars-next.observableusercontent.com/e0207661263f514787582149fc224d289f2498ae5ad80bd02aaa3145c65b94d2","tier":"starter_2024"},"version":1793,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"277b45a6eb5af5e8","login":"ahojsenn","name":"Johannes Mainusch","avatar_url":"https://avatars-next.observableusercontent.com/e0207661263f514787582149fc224d289f2498ae5ad80bd02aaa3145c65b94d2","tier":null}],"members":[{"type":"individual","id":"277b45a6eb5af5e8","login":"ahojsenn","name":"Johannes Mainusch","avatar_url":"https://avatars-next.observableusercontent.com/e0207661263f514787582149fc224d289f2498ae5ad80bd02aaa3145c65b94d2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"wind turbine development since 1980","cells":[{"id":1786,"value":"# wind turbine development since 1980","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1759,"value":"windTurbines()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1761,"value":"### Development of wind turbines\nThis shows the stepwise development of wind turbines from 1980 until 2023. Move your mouse over the image to get additional information. The data is stored here: https://docs.google.com/spreadsheets/d/16vaDnVTbPttLPF3ZiP0KymtQYOh-Uc3joqhHv9wqvk8/edit?pli=1#gid=1132934807","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1724,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"ppp = require('papaparse@5.3.2/papaparse.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"wdata = {\n const GURL = 'https://docs.google.com/spreadsheets/d/'\n const GKEY = '16vaDnVTbPttLPF3ZiP0KymtQYOh-Uc3joqhHv9wqvk8'\n const GMAGIC = '/gviz/tq?tqx=out:csv'\n const GSN_sheet = '&sheet=Windenergieanlagen'\n const GdataUrl = GURL + GKEY + GMAGIC + GSN_sheet\n const getDataFromGoogle = (url) => {\n const ret = new Promise(function (resolve, reject) {\n ppp.parse(url, {\n download: true,\n header: true,\n skipEmptyLines: true,\n complete: resolve,\n error: reject,\n })\n })\n return ret\n }\n return getDataFromGoogle (GdataUrl)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"