Senior Data Scientist, MassMutual
Lecturer, UC Berkeley MIDS
--
PhD Applied Math, Computational Story Lab, UVM
MS Applied Math, UVM
BS Math, Virginia Tech
Published
Edited
Sep 28, 2021
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleLinear().range([-Math.PI/2,-Math.PI/2+2*Math.PI]);
// by x and y
g.selectAll(".points")
.data(digits)
.join("circle")
.attr("cx", (d, i) => sublocation[i] * iwidth)
.attr("cy", d => (d + Math.random()) * iwidth/10)
.attr("r", 3);
g.selectAll(".circlepoints")
.data(digits)
.join("circle")
.attr("cx", (d, i) => Math.cos(x(d/10 + sublocation[i]/10)) * iwidth/2 + iwidth/2)
.attr("cy", (d, i) => Math.sin(x(d/10 + sublocation[i]/10)) * iheight/2 + iheight/2)
.attr("r", 10);
g.selectAll(".paths")
.data(digits.slice(0, digits.length-1))
.join("path")
.attr("d", (d, i) => circlearc(Math.cos(x(d/10 + sublocation[i]/10)) * iwidth/2 + iwidth/2, Math.sin(x(d/10 + sublocation[i]/10)) * iheight/2 + iheight/2, Math.sin(x(digits[i+1]/10 + sublocation[i+1]/10)) * iheight/2 + iheight/2, Math.sin(x(digits[i+1]/10 + sublocation[i+1]/10)) * iheight/2 + iheight/2))
.attr("stroke", d => "#aaa")
.attr("fill", "none")
return svg.node();
}
function circlearc(x1, y1, x2, y2) {
const r = Math.abs(y2 - y1) * 10;
return `M${x1},${y1} A${r},${r} 0,0,${y1 < y2 ? 1 : 0} ${x2},${y2}`;
}
import { arc } from "@d3/arc-diagram"
sublocation = Array(n_digits).fill(0).map((element, index, array) => chop(pi, index + 1) / 10)
digits = Array(n_digits).fill(0).map((element, index, array) => Math.round(chop(pi, index) - chop(pi, index + 1) / 10))
chop = (d, n) => d * Math.pow(10, n) % 10
pi = Math.PI
n_digits = 1000
outerRadius = Math.min(width, height) * 0.5 - 60
innerRadius = outerRadius - 10
height = width
iheight = height - margin.top - margin.bottom
iwidth = width - margin.left - margin.right
margin = ({ left: 10, top: 10, right: 10, bottom: 10 })
d3 = require("d3@6")
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.
