Published
Edited
Nov 24, 2020
chart = {
const cx = width / 2;
const cy = height / 2;
const tooltip = d3.select("body").append("div").call(createTooltip)
const tipContent = d => {
return `Azimuth: ${d.plane[0]}<br>
Angle: ${d.plane[1]}<br>
Radiation: ${d.rad}`;
}
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "middle")
.attr("fill", "currentColor")
.style("margin", "0 -14px")
.style("display", "block");
const defs = svg.append("g").append("defs")
defs.append("clipPath")
.attr("id", "horizonClip")
.append("path")
.attr("d", path(outline));
const insolation = svg.append("g");
svg.append("path")
.attr("d", path(graticule))
.attr("fill", "none")
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.2)
.attr("clip-path", "url(#horizonClip)");
svg.append("path")
.attr("d", path(outline))
.attr("fill", "none")
.attr("stroke", "currentColor");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
function update(radmap) {
insolation.selectAll("path")
.data(radmap, d => d)
.join(
enter => enter.append("path")
.attr("fill", d => color(d.rad))
.attr("d", d => path(d3.geoGraticule().extent(d.extent).outline()))
.on("mouseover", function(d) {
tooltip.style("display", null);
d3.select(this)
.attr("fill", "#333333");
tooltip.html(tipContent(d))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mousemove", function(d) {
tooltip
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
d3.select(this)
.attr("fill", color(d.rad));
tooltip.style("display", "none");
}),
update => update
.attr("fill", d => color(d.rad))
.attr("d", d => path(d3.geoGraticule().extent(d.extent).outline()))
.on("mouseover", function(d) {
tooltip.style("display", null);
d3.select(this)
.attr("fill", "#333333");
tooltip.html(tipContent(d))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mousemove", function(d) {
tooltip
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
d3.select(this)
.attr("fill", color(d.rad));
tooltip.style("display", "none");
}),
exit => exit
.remove());
}
return Object.assign(svg.node(), {update});
}
color = d3.scaleSequential([50, 1200], d3.interpolateRdPu)
scale = (width - 120) * 0.5
projection = d3.geoProjection((x, y) => d3.geoStereographicRaw(x, -y))
.scale(scale)
.clipExtent([[0, 0], [width, height]])
.rotate([0, -90])
.translate([width / 2, height / 2])
.precision(0.1)
outline = d3.geoCircle().radius(90).center([0, 90])()
graticule = d3.geoGraticule().stepMinor([15, 10])()
path = d3.geoPath(projection)
yAxis = g => g
.call(g => g.append("g")
.selectAll("text")
.data(d3.range(10, 91, 10)) // every 10°
.join("text")
.attr("dy", "0.35em")
.text(d => `${d}°`)
.datum(d => projection([0, d]))
.attr("x", ([x]) => x)
.attr("y", ([, y]) => y))
xAxis = g => g
.call(g => g.append("g")
.attr("stroke", "currentColor")
.selectAll("line")
.data(d3.range(360))
.join("line")
.datum(d => [
projection([d, 0]),
projection([d, d % 10 ? -1 : -2])
])
.attr("x1", ([[x1]]) => x1)
.attr("x2", ([, [x2]]) => x2)
.attr("y1", ([[, y1]]) => y1)
.attr("y2", ([, [, y2]]) => y2))
.call(g => g.append("g")
.selectAll("text")
.data(d3.range(0, 360, 10))
.join("text")
.attr("dy", "0.35em")
.text(d => d === 0 ? "N" : d === 90 ? "E" : d === 180 ? "S" : d === 270 ? "W" : `${d}°`)
.attr("font-size", d => d % 90 ? null : 14)
.attr("font-weight", d => d % 90 ? null : "bold")
.datum(d => projection([d, -4]))
.attr("x", ([x]) => x)
.attr("y", ([, y]) => y))
_=require('lodash')
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.
