Public
Edited
May 14, 2024
container = html `<div style="height:450px;"></div>`
deckgl = {
return new deck.DeckGL({
container,
views: new deck.OrthographicView({controller: true}),
initialViewState: {target: [0, 0, 0], zoom: 8},
});
}
aspectRatio = width / 450;
defaultProps = {
return {
// Center of each circle, in [longitude, latitude, (z)]
getPosition: {type: 'accessor', value: d => [...d.position, 0]},
// Radius of each circle, in meters
getRadius: {type: 'accessor', value: 1},
// Color of each circle, in [R, G, B, (A)]
getColor: {type: 'accessor', value: [0, 0, 0, 255]},
// Amount to soften the edges
smoothRadius: {type: 'number', min: 0, value: 0},
}
}
layer0 = {
const {Layer} = deck;
// Our custom layer class
class ScatterplotLayer extends Layer {
initializeState() {
// TODO
}
updateState() {
// TODO
}
}
ScatterplotLayer.layerName = 'ScatterplotLayer';
ScatterplotLayer.defaultProps = defaultProps;
return new ScatterplotLayer({
id: `scatterplot-${Date.now()}`,
data: finalDps,
coordinateSystem: deck.COORDINATE_SYSTEM.IDENTITY,
getPosition: d => d.position,
getRadius: d => d.size,
getColor: d => d.color,
});
}
getModel = {
const {Model, Geometry} = luma;
return (gl, aspectRatio) => { // Accept aspect ratio as a parameter
// Four corners of the quad
const positions = new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]);
const geometry = new Geometry({
drawMode: gl.TRIANGLE_FAN,
vertexCount: 4,
attributes: {
positions: {size: 2, value: positions}
}
});
return new Model(gl, {
vs: vertexShader,
fs: fragmentShader,
geometry,
isInstanced: true,
uniforms: {
uAspectRatio: aspectRatio // Pass the aspect ratio as a uniform
}
});
}
}
layer2 = {
const {Layer} = deck;
class ScatterplotLayer extends Layer {
initializeState() {
const {gl} = this.context;
// Register attributes
this.getAttributeManager().addInstanced({
instancePositions: {
size: 3,
type: gl.DOUBLE,
accessor: 'getPosition'
},
instanceRadius: {
size: 1,
accessor: 'getRadius',
defaultValue: 1
},
instanceColors: {
size: 4,
normalized: true,
type: gl.UNSIGNED_BYTE,
accessor: 'getColor',
defaultValue: [0, 0, 0, 255]
}
});
// Save the model in layer state
this.setState({
model: getModel(gl)
});
}
updateState() {
// Retrieve the model from layer state
this.state.model.setUniforms({
smoothRadius: this.props.smoothRadius
});
}
}
ScatterplotLayer.layerName = 'ScatterplotLayer';
ScatterplotLayer.defaultProps = defaultProps;
// ScatterplotLayer.COORDINATE_SYSTEM = deck.COORDINATE_SYSTEM.CARTESIAN
const layer = new ScatterplotLayer({
id: `scatterplot-${Date.now()}`,
data: finalDps,
coordinateSystem: deck.COORDINATE_SYSTEM.IDENTITY,
getPosition: d => d.position,
getRadius: d => d.size,
getColor: d => d.color,
});
deckgl.setProps({layers: [layer]});
return layer;
}
client = DuckDBClient.of({ dps: FileAttachment("data.parquet") })
rows = Promise.all(await client.sql`SELECT * FROM dps`).then(results => results.map((row) => row.roots))
finalDps = {
const dps = [];
rows.forEach((row, ind) => {
if (ind%1 == 0) {
const cRoot = rootAngles.findIndex((root) => Math.abs(root-row.root)<10e-5);
if (cRoot > -1) {
/*let y = 0;
const rho = Math.sqrt(row.x**2+row.y**2)
if (row.x >= 0) {
y = Math.asin(row.y/rho);
} else {
y = -math.asin(row.y/rho)+math.pi;
}*/
dps.push({
position: [row.x, row.y],
root: row.root,
color: colorsRGB[cRoot],
size: pointsize
})
}
}
})
return dps
}
rootAngles = [-1.68935892, -0.6917275 , 0.6917275, 1.68935892]
newtonsMethod = (initialGuess, epsilon = 1e-7, maxIterations = 100) => {
let x = initialGuess;
for (let i = 0; i < maxIterations; i++) {
let y = f1(x);
let dy = fp1(x);
// Compute the next guess
let xNext = math.subtract(x, math.divide(y, dy));
// Check if the guess has converged
if (math.abs(math.subtract(xNext, x)) < epsilon) {
const cRoot = complexRoots.findIndex((root) => Math.abs(xNext.re-root.x)<10e-5 && Math.abs(xNext.im-root.y)<10e-5)
if (cRoot>-1) {
return [xNext, cRoot];
}
}
x = xNext;
}
return 0
}
f1 = (z) => {
return math.add(math.subtract(math.add(math.pow(z, 5), math.pow(z, 2)), z), 1)
}
fp1 = (z) => {
return math.subtract(math.add(math.multiply(5, math.pow(z, 4)), math.multiply(2, z)), 1)
}
colors = ['#4f7aa7', '#f28f2c', '#e15759', '#76b7b3']
colorsRGB = [[79, 122, 167], [242, 143, 44], [225, 87, 89], [118, 183, 179]]
math = require('mathjs');
deck = require.alias({
// optional dependencies
h3: {}
})('deck.gl@latest/dist.min.js')
luma = deck && window.luma
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.
