Public
Edited
May 7, 2024
arcAreasLayer = d3.select(svgContainer).select("#layer1");
UTCIArcs = {
let arcs = arcAreasLayer.select("#utci").selectAll(".UTCIArc")
.data(orlando4)
.join("path")
.classed("UTCIArc",true)
.attr("d", d => arcPath(scaleUTCI(calcUTCI(d.TairAd, d.MRTAd, d.VaAd, d.RHAd)), calcstartangle(d), calcendangle(d)));
return arcs;
}
tempLines = arcAreasLayer.select("#components").selectAll(".tempLines")
.data(orlando4)
.join("line")
.attr("x1", d => polarXY(scaleRadius(innerRadiusTemp(d)), (d.month-1)*30 + 6).x)
.attr("y1", d => polarXY(scaleRadius(innerRadiusTemp(d)), (d.month-1)*30 + 6).y)
.attr("x2", d => polarXY(scaleRadius(outerRadiusTemp(d)), (d.month-1)*30 + 6).x)
.attr("y2", d => polarXY(scaleRadius(outerRadiusTemp(d)),(d.month-1)*30 + 6).y)
.classed("tempLines",true);
innerRadiusTemp = (d) => (calcUTCI(d.TairAd, d.MRTAd, d.VaAd, d.RHAd) - (d.TairAd/2));
outerRadiusTemp = (d) => (calcUTCI(d.TairAd, d.MRTAd, d.VaAd, d.RHAd) + (d.TairAd/2));
MRTLines = arcAreasLayer.select("#components").selectAll(".MRTLines")
.data(orlando4)
.join("line")
.attr("x1", d => polarXY(scaleRadius(innerRadiusMRT(d)), (d.month-1)*30 + 12).x)
.attr("y1", d => polarXY(scaleRadius(innerRadiusMRT(d)), (d.month-1)*30 + 12).y)
.attr("x2", d => polarXY(scaleRadius(outerRadiusMRT(d)), (d.month-1)*30 + 12).x)
.attr("y2", d => polarXY(scaleRadius(outerRadiusMRT(d)), (d.month-1)*30 + 12).y)
.classed("MRTLines",true);
innerRadiusMRT = (d) => (calcUTCI(d.TairAd, d.MRTAd, d.VaAd, d.RHAd) - (d.MRTAd/2));
outerRadiusMRT = (d) => (calcUTCI(d.TairAd, d.MRTAd, d.VaAd, d.RHAd) + (d.MRTAd/2));
VaLines = arcAreasLayer.select("#components").selectAll(".VaLines")
.data(orlando4)
.join("line")
.attr("x1", d => polarXY(scaleRadius(innerRadiusVa(d)), (d.month-1)*30 + 18).x)
.attr("y1", d => polarXY(scaleRadius(innerRadiusVa(d)), (d.month-1)*30 + 18).y)
.attr("x2", d => polarXY(scaleRadius(outerRadiusVa(d)), (d.month-1)*30 + 18).x)
.attr("y2", d => polarXY(scaleRadius(outerRadiusVa(d)), (d.month-1)*30 + 18).y)
.classed("VaLines",true);
innerRadiusVa = (d) => (calcUTCI(d.TairAd, d.MRTAd, d.VaAd, d.RHAd) - (d.VaAd/2));
outerRadiusVa = (d) => (calcUTCI(d.TairAd, d.MRTAd, d.VaAd, d.RHAd) + (d.VaAd/2));
RHLines = arcAreasLayer.select("#components").selectAll(".RHLines")
.data(orlando4)
.join("line")
.attr("x1", d => polarXY(scaleRadius(innerRadiusRH(d)), (d.month-1)*30 + 24).x)
.attr("y1", d => polarXY(scaleRadius(innerRadiusRH(d)), (d.month-1)*30 + 24).y)
.attr("x2", d => polarXY(scaleRadius(outerRadiusRH(d)), (d.month-1)*30 + 24).x)
.attr("y2", d => polarXY(scaleRadius(outerRadiusRH(d)), (d.month-1)*30 + 24).y)
.classed("RHLines",true);
innerRadiusRH = (d) => (calcUTCI(d.TairAd, d.MRTAd, d.VaAd, d.RHAd) - (d.RHAd/2));
outerRadiusRH = (d) => (calcUTCI(d.TairAd, d.MRTAd, d.VaAd, d.RHAd) + (d.RHAd/2));
calcstartangle = d=> (d.month-1) * 30
calcendangle = d=> (d.month) * 30
scaleUTCI = d3.scaleLinear().domain([-50,50]).range([78,250])
scaleRadius = d3.scaleLinear().domain([-50,50]).range([78,250])
//scaleUTCI = d3.scaleLinear().domain([-50,50]).range([0,500])
lineslayer = d3.select(svgContainer).select("#layer1");
arcPoint = (radius,angle) => {return polarXY(radius,90-angle)} // example shows starting at 90deg going clockwise (90-angle)
arcPath = (inR,startAng,endAng) => {
let largeArcFlag = (startAngle,endAngle) => {if (endAngle - startAngle > 180) {return 1} else {return 0}} // largearc calc
let pathString =
"M " + arcPoint(inR,startAng).x + " " + arcPoint(inR,startAng).y + // move to start point
" A " + inR + " " + inR + // draw Arc with x and y radii
" 0" + // rotation of the whole thing, assuming 0
" " + largeArcFlag(startAng,endAng) + // calculate Large Arc Flag (> 180 deg)
" 1 " + // clockwise drawing for the arc (0 or 1)
arcPoint(inR,endAng).x + " " + arcPoint(inR,endAng).y // finish at the end point x,y
// close the polygon back to start (line to start)
return pathString;
}
function AdjustData(adjust){
orlando4.Tair = orlando4.Tair + adjust
}
polarXY = (magnitude,angle) => {
magnitude = Number(magnitude);
angle = Number(angle);
let x = magnitude * Math.cos(radiansFromDeg(angle));
let y = -magnitude * Math.sin(radiansFromDeg(angle)); // negative because 0 is at the top
return {"x":x, "y":y};
}
radiansFromDeg = (deg) => {
deg = Number(deg);
return deg * Math.PI / 180;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
