Freelancing Data Visualization Designer & Artist
Public
Edited
Sep 20, 2023
2 stars
canvas = {
const context = DOM.context2d(width, width)
// Run over a grid and color each item depending on the digit of π
let counter = 0
for(let i = 0; i < width/RECT_SIZE; i++) {
for(let j = 0; j < width/RECT_SIZE; j++) {
if(counter > PI_DIGIT.length) break
context.fillStyle = SCALE_COLOR(PI_DIGIT[counter])
context.fillRect(j * RECT_SIZE, i * RECT_SIZE, RECT_SIZE, RECT_SIZE)
counter++
}// for j
}//for i
return context.canvas;
}
COLORS_RAINBOW = ["#EFB605","#E69201","#E3301C","#CE003D","#AC0C5E","#852F87","#4F56A6","#148097","#17AA69","#7EB852"]
COLORS_LINEAR = ["#FFFFDD","#AAF191","#80D385","#61B385","#3E9583","#217681","#285285","#1F2D86","#000086"]
PI_DIGIT = {
let digits = pi_digits_1e5.split("") // Split per digits
digits.splice(1, 1) // Remove the "."
digits = digits.map(Number) // Turn into numbers
return digits
}
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.
