Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
Public
Edited
Mar 25, 2024
<svg width="200" height="200" viewBox="0 0 200 200">
<style>
.radCircle {fill: none; stroke: #ddd;}
.radLine {stroke: black; stroke-witdh: 1px;}
</style>
</svg>
center = ({"x":100,"y":100})
innerRadius = 50
data = ([
{datetime:"2023-03-11 12:00:00",value: 10},
{datetime:"2023-12-24 22:11:00",value: 5.6},
{datetime:"2023-12-24 16:06:00",value: 2.3},
{datetime:"2023-12-26 20:32:00",value: 8.3},
{datetime:"2023-03-12 17:10:00",value: 9.2},
{datetime:"2023-03-15 19:33:00",value: 1.4}
])
radChart = {
// group to hold the entire set, and then move it to the center location (see above)
let radChart = d3.select(radialSVG).selectAll("radGroup")
.data([1])
.join("g")
.classed("radGroup",true)
.attr("transform","translate(" + center.x + "," + center.y + ")")
// add a reference circle
radChart.append("circle")
.attr("r",innerRadius)
.classed("radCircle",true);
// the lines, calculated using polar coordinates
let radLines = radChart.selectAll("radLines")
.data(data)
.join("line")
.attr("x1", d => polarXY(innerRadius, angleDeg_HMS(d.datetime)).x)
.attr("y1", d => polarXY(innerRadius, angleDeg_HMS(d.datetime)).y)
.attr("x2", d => polarXY(innerRadius+scaleRadius(d.value), angleDeg_HMS(d.datetime)).x)
.attr("y2", d => polarXY(innerRadius+scaleRadius(d.value) ,angleDeg_HMS(d.datetime)).y)
.classed("radLine",true);
return radChart;
}
scaleRadius = d3.scaleLinear().domain([0,10]).range([0,50])
angleDeg_HMS = (datetimeString) => {
let HMS = datetimeString.split(" ")[1];
let hour = Number(HMS.split(":")[0]);
let minute = Number(HMS.split(":")[1]);
let second = Number(HMS.split(":")[2]);
let clockAngleDeg = 90 - (hour*30 + minute*0.5 + second*0.00833); // 12 hour clock format, amend for 24-hour or calendar year
return clockAngleDeg;
}
angleDeg_HMS(data[0].datetime) // testing
polarXY(1,angleDeg_HMS(data[0].datetime)) // testing
scaleTime = d3.scaleTime().domain([new Date("2023-01-01 00:00:00"),new Date("2023-01-01 12:00:00")]).range([0,360])
scaleTime(new Date("2023-03-12 12:00:00"))/360 // should be an even multiple of 360 degrees
scaleTime(new Date("2023-03-11 12:00:00"))/360
polarXY = (magnitude,angle) => {
magnitude = +magnitude;
angle = +angle;
let x = magnitude * Math.cos(radiansFromDeg(angle));
let y = - magnitude * Math.sin(radiansFromDeg(angle)); //negative because 0,0 is at the top
return {"x":x, "y":y};
}
radiansFromDeg = (deg) => {
deg = +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.
