In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
Published
Edited
May 23, 2022
2 forks
12 stars
rr = 40
ss = 5
stpz = (rr/ss) // steps to 100%
(stpz*100)/rr // 20 % stpz is 20% of radius
ss*100/rr
ss/rr
rectInfo = []
gridSize = ~~(w*0.025)
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
}
w = 800
gridPad = 2 // boarder between grid elements
padding = w*0.05 // size of the padding around the outside.
gridDivsX = gridSize // number of rows and columns of the grid
gridDivsY = gridSize // number of rows and columns of the grid
gridSpacingY = (w - padding*2)/gridDivsY // actual spacing between grid points
gridSpacingX = (w - padding*2)/gridDivsX; // actual spacing between grid points
rndim = (min,max) => d3.randomInt(min,max+1)() // random number for where to put the circle center in a grid element
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??.
}
}
}
}
chroma = require('chroma-js@2.4.2/chroma.js') // https://www.npmjs.com/package/chroma-js
colorbrewer = FileAttachment("colorbrewer.json").json()
brews = _.keys(colorbrewer)
colours = (revcp%2)?chroma.scale(brewColour).colors(numColurs):chroma.scale(brewColour).colors(numColurs).reverse() //chroma.brewer[brewColour]
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()
}
${csvg(colours)}
${csvg(chroma.scale('OrRd').colors(35))}
${csvg(chroma.scale(['white', 'black']).colors(36))}
chroma.scale(['white', 'black']).colors(12);
chroma.scale('OrRd').colors(12);
f =chroma.scale(['red','goldenrod'])
rnd = (c) => d3.randomInt(0,c)()
r =d3.randomUniform(0, 1)
function dist(x0,y0,x1,y1) {
return Math.sqrt( (x0 - x1) * (x0 - x1) + (y0 - y1) * (y0 - y1) );
}
import {lerp} from "@makio135/utilities"
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.
