Published
Edited
Oct 4, 2022
1 fork
2 stars
// Create a plot
Plot.plot({
height: 600,
width: 1000,
y: {
grid: true,
label: "↑ Share of all commits"
},
marks: [
// Create a line mark
Plot.areaY(dataDecoratedAndOthers, {
x: "date", // feature for the x channel
y: "rollingAvgShare", // feature for the y channel
fill: "ecosystem", // feature for the stroke,
order: ['Ethereum', 'Polkadot', 'Cosmos', 'NEAR', 'Solana', 'others'],
reverse: true
//sort: (a,b) => a.rollingAvgShare - b.rollingAvgShare
}),
],
// Include a legend for the color channel
color: {
legend: true,
domain: ['Ethereum', 'Polkadot', 'Cosmos', 'NEAR', 'Solana', 'others',],
range: ["#37367b", "#E6007A", "#66a1ff",'black', "#00FFA3", "lightgray" ]
}
})
function decorateWithRollingAverage(rows) {
const indices = 14
return rows.map((x, i) => {
return {
...x,
rollingAvgShare: rows.slice(i-(indices-1), i+1).reduce((sum, z) => z.shareOfTotalCommits + sum, 0) / indices
}
})
}
dataDecoratedAndOthers = dataDecorated.concat(others).filter(x=>x.rollingAvgShare)
others = decorateWithRollingAverage(Object.entries(dataDecorated.reduce((sums, x) => ({
...sums,
[x.date.toISOString().substring(0, 10)]: (sums[x.date.toISOString().substring(0, 10)] || 0) + x.commits
}),{})).map(([date, commits]) => {
return {
date: new Date(date),
commits: allCommitsMap[date] - commits,
shareOfTotalCommits: (allCommitsMap[date] - commits) / allCommitsMap[date],
ecosystem: 'others'
}
}))
dataDecorated = [
...decorateWithRollingAverage(await getThreeYearsOfDevelopment('Polkadot')),
...decorateWithRollingAverage(await getThreeYearsOfDevelopment('Solana')),
...decorateWithRollingAverage(await getThreeYearsOfDevelopment('Ethereum')),
...decorateWithRollingAverage(await getThreeYearsOfDevelopment('NEAR')),
...decorateWithRollingAverage(await getThreeYearsOfDevelopment('Cosmos')),
//...await getThreeYearsOfDevelopment('Bitcoin'),
]
function getThreeYearsOfDevelopment(ecosystem) {
return fetch(`https://api.gokustats.xyz/weekly-commits/?daysBack=1095&ecosystem=${ecosystem}`).then((response) => response.json()).then(makeDecorateArtemisResponse(ecosystem))
}
function makeDecorateArtemisResponse(ecosystem) {
return function decorateArtemisResponse(response) {
return response.map(x => {
const commits = parseInt(x[ecosystem + ' Core']) + parseInt(x['Sub-Ecosystems'])
const shareOfTotalCommits = commits / allCommitsMap[x.date]
return {
//...x,
commits,
shareOfTotalCommits,
date: new Date(x.date),
ecosystem
}
})
}
}
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.
