Data Visualization Consultant, and an enthusiastic generalist in building software systems
blocksColorsMap = new Map(blocksColors.map((b) => [b.id, b.colors]))
dataset = blocksMin.map((b) => {
const blockColors = blocksColorsMap.get(b.id) || {},
aColours = Object.keys(blockColors),
aColoursCount = Object.values(blockColors),
iMax = aColoursCount.indexOf(d3.max(aColoursCount)),
pColor = aColours[iMax];
aColoursCount.splice(iMax, 1);
aColours.splice(iMax, 1);
const iSecondMax = aColoursCount.indexOf(d3.max(aColoursCount));
return {
id: b.id,
userId: b.userId,
description: b.description,
createdAt: b.created_at,
updatedAt: b.updated_at,
primaryColor: pColor,
secondaryColor: iSecondMax >= 0 ? aColours[iSecondMax] : null
};
})
blocksWithLove = {
const aBlocks = await FileAttachment("all-blocks-gist.json").json();
return aBlocks.map(b => {
b.love = Number(b.forks) + Number(b.stars);
return b;
});
}
aMostLovedBlocks = blocksWithLove
.filter(b => b.love)
.sort((a, b) => d3.descending(a.love, b.love))
.slice(0, 2021)
yearSeries = {
function getYear(d) {
return `${new Date(d).getFullYear()}`;
}
function getMonth(d) {
return `${new Date(d).getMonth() + 1}`;
}
const years = d3
.groups(
blocksWithLove,
d => getYear(d.createdAt),
d => getMonth(d.createdAt)
)
.filter(d => d[0] >= 2010);
const oYears = {};
years.forEach(y => {
const oY = (oYears[y[0]] = {
year: y[0]
});
y[1].forEach(yData => {
yData[2] = yData[1].length;
});
const aMonths = [];
oY.values = y[1].map(ym => {
aMonths.push(+ym[0]);
return {
year: oY.year,
ym: +ym[0],
date: new Date(`${oY.year}-${ym[0]}-01`),
month: +ym[0],
count: ym[2],
blocks: ym[1]
};
});
// fill with empty months
d3.difference(d3.range(1, 13), aMonths).forEach(m => {
oY.values.push({
year: oY.year,
ym: m,
date: new Date(`${oY.year}-${m}-01`),
month: m,
count: 0
});
});
oY.values.sort((a, b) => {
return d3.ascending(+a.ym, +b.ym);
});
// calc max and total count
oY.maxCount = d3.max(y[1], m => m[1].length);
oY.sumCount = d3.sum(y[1], m => m[1].length);
});
return Object.values(oYears).sort((a, b) => d3.ascending(+a.year, +b.year));
}
yearSeriesWithMonthlyCount = d3.range(1, 13).map(month => {
const monthObj = {
month: month
};
yearSeries.forEach(ys => {
monthObj[ys.year] = ys.values[month - 1].count;
});
return monthObj;
})
d3 = require("d3@6.7.0/dist/d3.min.js")
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.
