Public
Edited
Apr 22, 2023
chart = {
const width = 640;
const height = 400;
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);
svg
.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
svg
.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
svg
.append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr(
"d",
d3
.line()
.x((d) => x(d.Date))
.y((d) => y(d.Close))(aapl)
);
return svg.node();
}
chart2 = {
// Set up the canvas
const width = 500;
const height = 500;
const svg = d3.create("svg").attr("width", width).attr("height", height);
// Create the circle
var circleRadius = Math.min(width, height) / 2 - 20;
var circle = svg
.append("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", circleRadius)
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("fill", "none");
// Calculate the triangle vertices
var triangleSize = circleRadius * Math.sqrt(3);
var triangle = svg
.append("polygon")
.attr("points", [
[width / 2, height / 2 - circleRadius],
[width / 2 + triangleSize / 2, height / 2 + circleRadius / 2],
[width / 2 - triangleSize / 2, height / 2 + circleRadius / 2]
])
.attr("fill", "red")
.attr("stroke", "black")
.attr("stroke-width", 2);
// Define the rotation function
function rotate() {
triangle
.transition()
.duration(2000)
.attrTween("transform", function () {
return d3.interpolateString(
"rotate(0," + width / 2 + "," + height / 2 + ")",
"rotate(360," + width / 2 + "," + height / 2 + ")"
);
})
.on("end", rotate);
}
// Start the animation
rotate();
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.
