margin = ({top: 60, right: 10, bottom: 20, left: 10})
x = d3.scaleLinear()
.domain([0, data[0].length - 1])
.range([-Math.PI/2, Math.PI/2])
z = d3.scaleLinear()
.domain([
d3.min(data, d => d3.min(d)),
d3.max(data, d => d3.max(d))
])
.range([0, overlap])
area = d3.areaRadial().angle((d,i)=>x(i))
data= data0.slice(0,10)
data0 = d3.text("https://gist.githubusercontent.com/borgar/31c1e476b8e92a11d7e9/raw/0fae97dab6830ecee185a63c1cee0008f6778ff6/pulsar.csv").then(data => d3.csvParseRows(data, row => row.map(Number)))
{
const [X, setX] = Plot.column("labelisSHIT")
X[0] = 100
X[1] = 200
setX(X)
return X
}
radial({
radius: (d) => 20 + d,
angle: (d, i) => ((i + 5) * 6.1) /* almost 2π */ / 10,
strokeOpacity: 0.5,
strokeWidth: 0.5,
curve: "natural"
})
function radial(options) {
const [X, setX] = Plot.column();
const [Y, setY] = Plot.column();
options = Plot.transform(options, (data, facets) => {
const R = Plot.valueof(data, options.radius);
const A = Plot.valueof(data, options.angle);
const X = new Float64Array(R.length);
const Y = new Float64Array(R.length);
setX(X);
setY(Y);
for (let i = 0; i < R.length; ++i) {
const [x, y] = d3.pointRadial(A[i], R[i]);
X[i] = x;
Y[i] = y;
}
return { data, facets };
});
return X;
}
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(industries, { x: "date", y: "unemployed", z: "industry" })
]
})
Plot.plot({
aspectRatio: true,
inset: 10,
y: { ticks: 7 },
color: { scheme: "Warm" },
marks: [
Plot.frame(),
Plot.gridX({ ticks: 20, strokeDasharray: 4 }),
Plot.gridY({ ticks: 20, strokeDasharray: 4 }),
data0.map((line, n) =>
Plot.line(
line,
radial({
radius: (d) => 20 + d,
angle: (d, i) => (i / (line.length - 1)) * 6.1 /* almost 2π */ + 0.08,
strokeOpacity: 0.5,
strokeWidth: 1,
stroke: n,
curve: "natural"
})
)
),
Plot.dot([[0, 0]])
]
})
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.
