Published
Edited
May 23, 2022
2 forks
12 stars
Insert cell
Insert cell
Insert cell
Insert cell
rr = 40
Insert cell
ss = 5
Insert cell
stpz = (rr/ss) // steps to 100%
Insert cell
(stpz*100)/rr // 20 % stpz is 20% of radius
Insert cell
ss*100/rr
Insert cell
ss/rr
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
rectInfo = []
Insert cell
gridSize = ~~(w*0.025)
Insert cell
bools = {
boop // if we click the the reset button
rectInfo.length=0 // delete past data
return _.chunk(_.fill(d3.range(gridSize*gridSize),true),gridSize) // make new array of trues
}
Insert cell
w = 800
Insert cell
gridPad = 2 // boarder between grid elements
Insert cell
padding = w*0.05 // size of the padding around the outside.
Insert cell
gridDivsX = gridSize // number of rows and columns of the grid
Insert cell
gridDivsY = gridSize // number of rows and columns of the grid
Insert cell
gridSpacingY = (w - padding*2)/gridDivsY // actual spacing between grid points
Insert cell
gridSpacingX = (w - padding*2)/gridDivsX; // actual spacing between grid points
Insert cell
Insert cell
rndim = (min,max) => d3.randomInt(min,max+1)() // random number for where to put the circle center in a grid element
Insert cell
Insert cell
function constructGrid(sizesArr){
for(let x = 0; x<gridDivsX-sizesArr[0]+1; x++){
for(let y = 0; y<gridDivsY-sizesArr[1]+1; y++){

let xdim = (rndim(1,sizesArr[0]))
let ydim = (rndim(1,sizesArr[1]))
let fits = (x + xdim > gridDivsX || y + ydim > gridDivsY)? false : true // check if within bounds
if(fits){ // check if rectangle overlaps with any other rectangle
for(let xc = x; xc < x + xdim; xc++){
for(let yc = y; yc < y + ydim; yc++){
if(bools[xc][yc] == false){
fits = false
}}}}

if(fits){ // mark area as occupied
for(let xc = x; xc < x + xdim; xc++){
for(let yc = y; yc < y + ydim; yc++){
bools[xc][yc] = false
}
}
rectInfo.push({posX:x, posY:y, dimX:xdim, dimY:ydim}) // todo change this structure to be in pixel cords x0,y0, y0,y1 to reduce math in drawing??.
}
}
}
}
Insert cell
Insert cell
chroma = require('chroma-js@2.4.2/chroma.js') // https://www.npmjs.com/package/chroma-js
Insert cell
Insert cell
colorbrewer = FileAttachment("colorbrewer.json").json()
Insert cell
brews = _.keys(colorbrewer)
Insert cell
colours = (revcp%2)?chroma.scale(brewColour).colors(numColurs):chroma.scale(brewColour).colors(numColurs).reverse() //chroma.brewer[brewColour]
Insert cell
Insert cell
csvg = (p) => {

let ch = 40
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, ch])
.style('background', '#fff')
.attr('width',width)
.attr('height',ch);

const out = svg.append('g')
for(let i = 0; i < p.length; i++){
out.append('rect')
.attr('x', i*ch)
.attr('y', 0)
.attr('width', ch)
.attr('height', ch)
.attr('fill',p[i])
}
return svg.node()
}
Insert cell
${csvg(colours)}

${csvg(chroma.scale('OrRd').colors(35))}

${csvg(chroma.scale(['white', 'black']).colors(36))}

Insert cell
chroma.scale(['white', 'black']).colors(12);
Insert cell
chroma.scale('OrRd').colors(12);
Insert cell
Insert cell
f =chroma.scale(['red','goldenrod'])
Insert cell
Insert cell
rnd = (c) => d3.randomInt(0,c)()
Insert cell
r =d3.randomUniform(0, 1)
Insert cell
Insert cell
function dist(x0,y0,x1,y1) {
return Math.sqrt( (x0 - x1) * (x0 - x1) + (y0 - y1) * (y0 - y1) );
}
Insert cell
import {lerp} from "@makio135/utilities"
Insert cell

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.
Learn more