⚡ Data scientist, I enjoy telling stories with data. I'm currently learning D3.js and working on hobby projects, Mapbox visualizations, and fiddling with Juniper network data.
chart = {
const svg = d3.create("svg").attr("width", width).attr("height", height);
const center = [width / 2, height / 2];
const center_dark = [width * 0.25, height / 2];
const center_gold = [width * 0.75, height / 2];
const segment_width = width * 0.25;
const Tau = Math.PI * 2;
const fx = (i, N, radius, center_x) =>
Math.cos((Tau * i) / N) * radius + center_x;
const fy = (i, N, radius, center_y) =>
Math.sin((Tau * i) / N) * radius + center_y;
const colors = {
stroke: {
faded: "#73613f",
bright: "#b6a17a"
},
bg: {
dark: "",
gold: "#927a4e"
}
};
// TODO: Add circular/linear gradient for both bg rects
// Dark square
const dark_square = svg.append("g");
dark_square
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width / 2)
.attr("height", height)
.attr("fill", "#4f3e2c");
// Gold square
const gold_square = svg.append("g");
gold_square
.append("rect")
.attr("x", width / 2)
.attr("y", 0)
.attr("width", width / 2)
.attr("height", height)
.attr("fill", colors.bg.gold);
// OUTER CIRCLES
const outer_radius = segment_width * 1.1;
dark_square
.selectAll("line")
.data(d3.range(150))
.join("line")
.attr("x1", center_dark[0])
.attr("y1", center_dark[1])
.attr("x2", (_, i, N) => fx(i, N.length, outer_radius, center_dark[0]))
.attr("y2", (_, i, N) => fy(i, N.length, outer_radius, center_dark[1]))
.attr("stroke", colors.stroke.faded);
gold_square
.selectAll("line")
.data(d3.range(150))
.join("line")
.attr("x1", center_gold[0])
.attr("y1", center_gold[1])
.attr("x2", (_, i, N) => fx(i, N.length, outer_radius, center_gold[0]))
.attr("y2", (_, i, N) => fy(i, N.length, outer_radius, center_gold[1]))
.attr("stroke", colors.stroke.faded);
// OUTER ARC
// INFINITY SYMBOL
// INNER ARC
// SOLID CIRCLE
return svg.node();
}
height = 500
width = 1000
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.
