data viz
// Generates an array of dot objects in a stacked brick layout with their position and a fake value
function generateBrickLayoutData(count, radius, isHexGrid, isHexShape, isBrickGrid, ratio, sorted) {
let w = isHexShape ? vHexDist * radius * 2 : radius * 2
let cols;
if (isNaN(ratio)) {
const colCountStr = ratio.substr(0, ratio.indexOf('-'));
const colCount = parseInt(colCountStr);
if (!isNaN(colCount)) cols = colCount;
else cols = 1;
}
else {
cols = Math.ceil(Math.sqrt(count) * ratio);
}
const rows = Math.ceil(count / cols)
let arr = []
const distType = d3.randomInt(0, 5)();
for (let i = 0; i < count; i++) {
const col = i % cols
const row = Math.floor(i / cols)
const mult = isHexGrid ? vHexDist : 1
let x = col * w
if (isBrickGrid && row % 2 !== 0) x = (col * w) + (w / 2)
let y = row * (w * mult)
x = x - (((cols - 1) * w) / 2) - (w / 4)
y = y - ((rows - 1) * (w * mult)) / 2
let v = 0
if (distType === 0) v = d3.randomLogNormal(-2.5, 2.3)() // log normal distribution low -2.5, 2.3
else if (distType === 1) v = d3.randomNormal(0.1, 0.1)() // normal distribution mid 0.5, 0.1
else if (distType === 2) v = d3.randomNormal(0.7, 0.15)() // normal distribution high
else if (distType === 3) v = d3.randomUniform(0, 1)() // uniform distribution
else if (distType === 4) v = d3.randomNormal(0.25, 0.12)() // normal distribution low
const entry = {
"x": x,
"y": y,
"value": v
}
arr.push(entry)
}
if (!sorted) {
return arr;
}
else {
let arrSorted = arr.sort((a, b) => b.value - a.value);
let arrSortedAndRepositioned = [];
// Repositioning shapes to sort by value
arrSorted.map((d, i) => {
const col = i % cols
const row = Math.floor(i / cols)
const mult = isHexGrid ? vHexDist : 1
let x = col * w
if (isBrickGrid && row % 2 !== 0) x = (col * w) + (w / 2)
let y = row * (w * mult)
x = x - (((cols - 1) * w) / 2) - (w / 4)
y = y - ((rows - 1) * (w * mult)) / 2
const entry = {
"x": x,
"y": y,
"value": d.value
}
arrSortedAndRepositioned.push(entry);
})
return arrSortedAndRepositioned;
}
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.