Public
Edited
Feb 22, 2023
PIXI = import("https://cdn.jsdelivr.net/npm/pixi.js@6.5.9/+esm")
function color16(){//十六进制颜色随机
const r = Math.floor(Math.random()*256);
const g = Math.floor(Math.random()*256);
const b = Math.floor(Math.random()*256);
const color = `0x${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
return color;
}
{
const app = new PIXI.Application({
antialias: true,
transparent: true,
width,
height: 200,
resolution: devicePixelRatio || 1
});
invalidation.then(() => app.destroy(true, true));
const graphics = new PIXI.Graphics();
app.stage.addChild(graphics);
d3.range(100).forEach(x=>{
d3.range(100).forEach(y=>{
graphics.beginFill(`${color16()}`);
graphics.drawRect((x*10)%width, y%300, 2, 2);
graphics.endFill();
})
})
return Object.assign(app.view, { style: `width: ${width}px` });
}
{
let m = 3,n = 4;
let arr = Array(m).fill().map(() => Array(n));
return arr
}
{
let data=d3.range(1000).map(d=>({x:d,y:Math.random(),color:color16()}))
let plt=Plot.plot(
{
width,
marks: [
Plot.dot(data, {x: "x", y: "y",f:"y"})
]
})
return plt
}
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.
