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});
}