Published
Edited
Nov 13, 2020
chart = {
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
svg
.append("path")
.attr("fill", "pink")
.attr("stroke", "none")
// .attr("stroke-width", 1.5)
.attr("d", line.radius(d => y(d.avg))(data));
return svg.node();
}
width = 954
height = width
margin = 100
innerRadius = width / 10
outerRadius = width / 2 - margin
x = d3.scaleLinear()
.domain([1900,2020])
.range([0, 2 * Math.PI])
y = d3.scaleLinear()
.domain([0,360])
.range([innerRadius, outerRadius])
line = d3
.lineRadial()
.curve(d3.curveBasisClosed)
.angle(d => x(d.year))
area = d3.areaRadial()
.curve(d3.curveLinearClosed)
.angle(d => x(d.date))
rawdata = d3.csvParse(await FileAttachment("sfo-temperature.csv").text(), d3.autoType)
data = {
let dataset = [];
let dataPt;
let span = 120;
let petals = 6;
for (let i = 1900; i < 1900 + span; i++) {
if (i % (span / petals) == 0) {
dataPt = 0;
} else {
dataPt = Math.floor(Math.random() * 180) + 180;
}
dataset.push({
year: i,
//date:new Date(Date.UTC(i, Math.floor(Math.random()*12), Math.floor(Math.random()*30)))
avg: dataPt
});
}
return dataset;
}
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.
