Data viz & art. Likes beautiful and fun things 🌸
movements = {
const rects = genRects.querySelectorAll('.rect')
const grid = [numRows, numCols] //[rows, columns]
const xVals = data.map(d => 20*(Math.random() - 0.5))
const yVals = data.map(d => 20*(Math.random() - 0.5))
const scaleVals = data.map(d => 2*(Math.random()))
const fadeIn = gsap.timeline({paused:false})
.to(rects, {
attr: {
transform: (i) => {
return`translate(${data[i].x + xVals[i]}, ${data[i].y + yVals[i]}) scale(${scaleVals[i]})`
}
},
ease: 'bounce',
duration: 2,
delay: 0,
yoyo: true,
repeat: -1,
stagger: {
amount: 3,
grid: grid,
from: 'random',
axis: null
}
})
}
data = {
const entriesByCol = []
_.range(0, numCols).map(j => {
const heights = distributeRandomly(maxSizeHeight, numRows, 0.01)
_.range(0, numRows).map(i => {
const entry = { id:`${i}${j}`, row: i, col: j, height: heights[i] }
entriesByCol.push(entry)
})
})
const entriesByRow = []
_.range(0, numRows).map(i => {
const widths = distributeRandomly(maxSizeWidth, numCols, 0.1)
_.range(0, numCols).map(j => {
const entry = { id:`${i}${j}`, row: i, col: j, width: widths[j] }
entriesByRow.push(entry)
})
})
//const entries = _.merge(entriesByCol, entriesByRow)
let entries = _({}) // Start with an empty object
.merge(
_(entriesByCol).groupBy("id").value(),
_(entriesByRow).groupBy("id").value()
)
.values()
.flatten()
.value();
entries = _.sortBy(entries, d => d.col)
// Add the starting x and y positions
entries.forEach((entry, i) => {
const row = entry.row
const col = entry.col
const fill = chromaColScale[i]
entry.fill = fill
if (col > 0) {
const x = _.sumBy(_.filter(entries, d => d.row === row && d.col < col), d => d.width)
entry.x = x
} else {
entry.x = 0
}
if (row > 0) {
const y = _.sumBy(_.filter(entries, d => d.col === col && d.row < row), d => d.height)
entry.y = y
} else {
entry.y = 0
}
})
return entries
}
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.
