chart = {
const cx = width / 2;
const cy = height / 2;
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");
svg.append("path")
.attr("d", path(graticule))
.attr("fill", "none")
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.2);
svg.append("path")
.attr("d", path(outline))
.attr("fill", "none")
.attr("stroke", "currentColor");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
const sunPath = svg.append("path")
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 2);
const hour = svg.append("g")
.selectAll("g")
.data(d3.range(24))
.join("g");
hour.append("circle")
.attr("fill", "black")
.attr("r", 2);
hour.append("text")
.attr("dy", "-0.4em")
.attr("stroke", "white")
.attr("stroke-width", 4)
.attr("stroke-linejoin", "round")
.attr("fill", "none")
.clone(true)
.attr("stroke", null)
.attr("fill", "black");
function update(date) {
const start = d3.utcHour.offset(solar.noon(date), -12);
const end = d3.utcHour.offset(start, 24);
sunPath.attr("d", path({type: "LineString", coordinates: d3.utcMinutes(start, end).map(solar.position)}));
hour.data(d3.utcHours(start, end));
hour.attr("transform", d => `translate(${projection(solar.position(d))})`);
hour.select("text:first-of-type").text(formatHour);
hour.select("text:last-of-type").text(formatHour);
}
return Object.assign(svg.node(), {update});
}
update = chart.update(date)
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))
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([180, d]))
.attr("x", ([x]) => x)
.attr("y", ([, y]) => y))
path = d3.geoPath(projection)
projection = d3.geoStereographic()
.reflectY(true)
.scale((width - 120) * 0.5)
.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])()
width = 960 + 28
height = width
formatHour = d => d.toLocaleString("en", {hour: "numeric", timeZone: location.timeZone})
formatMonth = d => d.toLocaleString("en", {month: "long", timeZone: location.timeZone})
solar = (await require("solar-calculator@0.2"))(location)
d3 = require("d3@6")
import {Scrubber} from "@mbostock/scrubber"
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.
