Public
Edited
Jan 25
chart = {
const width = 640;
const height = 300;
const margin = { top: 20, right: 30, bottom: 30, left: 40 };
const x = d3
.scaleUtc()
.domain(d3.extent(aapl, (d) => d.Date))
.range([margin.left, width - margin.right]);
const y = d3
.scaleLinear()
.domain([0, d3.max(aapl, (d) => d.Close)])
.range([height - margin.bottom, margin.top]);
const svg = d3.create("svg").attr("width", width).attr("height", height);
let data = d3.range(0, 2 * Math.PI, (2 * Math.PI) / 9);
let data2 = d3.range(0, 2 * Math.PI, (2 * Math.PI) / 18);
//return data;
svg
.selectAll("path.o")
.data(data)
.join("path")
.attr("class", "o")
.attr("fill", "#445599")
.attr("stroke", "#334488")
.attr("stroke-width", 1.5)
.attr("opacity", 0.5)
.attr("d", (d) => petal(d, 100, 100))
.attr("transform", `translate(${width / 2}, ${height / 2})`);
svg
.selectAll("path.i")
.data(data2)
.join("path")
.attr("class", "i")
.attr("fill", "#b660cd")
.attr("stroke", "#334488")
.attr("stroke-width", 1.5)
.attr("opacity", 0.4)
.attr("d", (d) => petal(d, 75, 50))
.attr("transform", `translate(${width / 2}, ${height / 2})`);
svg
.append("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 20)
.attr("opacity", 0.6)
.attr("fill", "#8B8000")
.attr("stroke", "#4B4000");
return svg.node();
}
s = 0.2
petal = function (angle, length, width) {
let [dx, dy] = [Math.cos(angle), Math.sin(angle)];
let [nx, ny] = [-Math.sin(angle), Math.cos(angle)];
return `M 0 0
Q ${dx * length * s + (nx * width) / 2} ${
dy * length * s + (ny * width) / 2
} ${dx * length} ${dy * length}
Q ${dx * length * s - (nx * width) / 2} ${
dy * length * s - (ny * width) / 2
} 0 0 Z`;
}
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.
