wheelChart = function(data, style) {
var pi = Math.PI,
rad = pi/180,
deg = 180/pi,
mins = d3.range(0, 1440);
var properties = { width: width, height: style.height, margin: style.margin, thickness: style.thickness },
center = { x: properties.width / 2, y: properties.height / 2 },
outerRadius = (properties.height - (2 * properties.margin)) / 2,
innerRadius = outerRadius - properties.thickness,
angle_domain = d3.extent(mins);
let angleScale = d3.scaleLinear()
.domain(angle_domain)
.range([0, 2*pi]);
let colorScale = function(n) {
var color;
data.map(function(d) {
if (n >= d.start.minute && n <= d.end.minute)
color = d3.interpolateRgb(d.start.color, d.end.color)
((n - d.start.minute) / (d.end.minute - d.start.minute));
}); return color;
}
let arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.startAngle(d => angleScale(d))
.endAngle(d => angleScale(d) + pi*2 / mins.length);
let remaining_arc = d3.arc()
.innerRadius(innerRadius - 20)
.outerRadius(innerRadius)
.startAngle(d => angleScale(currentDateTime))
.endAngle(d => angleScale(daylight_remaining.end));
let lineRadial = d3.lineRadial();
/* DRAW */
var svg = d3.create("svg")
.attr("viewBox", [0, 0, properties.width, properties.height]);
var container = svg.append("g")
.attr("class", "chart-container")
.attr("transform", `translate(${center.x}, ${center.y})`);
var wheel = container.append("g")
.attr("class", "wheel")
.selectAll("path")
.data(mins)
.enter()
.append("path")
.attr("d", arc)
.attr("fill", d => colorScale(d))
.attr("stroke", d => colorScale(d));
if (currentDateTime <= daylight_remaining.end && currentDateTime >= daylight_remaining.start) {
container.append("g")
.append("path")
.attr("d", remaining_arc)
.attr("fill", d => "#D00000")
.attr("opacity", 0.15);
container.append("g")
.attr("class", "light-left")
.selectAll("text")
.data([currentDateTime])
.enter()
.append("text")
.attr("transform", d =>`translate(
${(innerRadius - 30) * Math.sin(angleScale(daylight_remaining.half_angle))},
${-(innerRadius - 30) * Math.cos(angleScale(daylight_remaining.half_angle))})`)
.attr("dy", "0.35em")
.attr("font-weight", 700)
.attr("font-size", 24)
.text(daylight_remaining.left + '%');
}
container.append("g")
.attr("class", "needle")
.selectAll("path")
.data([currentDateTime])
.enter()
.append("path")
.attr("d", d => lineRadial([[0, 0], [angleScale(d), innerRadius]]))
.attr("stroke", "black")
.attr("stroke-width", 10)
.attr("stroke-linecap", "round");
container.select("g.needle")
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 20)
.attr("stroke", "black")
.attr("stroke-width", 10)
.style("fill", "white");
return svg.node();
}
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.
