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("f0nt-family","sans-serif") .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() }