Designer and developer.
seedsToMintForCurrentInterval = _.mean(seedPerInterval.slice(currentInterval, -1))
currentInterval =
credGraph.intervals().findIndex(i => i.startTimeMs > ledger._lastDistributionTimestamp)
import {
loadLedger,
loadCredGraph,
sc,
repoAndBranchInput
} from "@hammadj/quick-imports"
ledger =
repoAndBranch ? loadLedger(repoAndBranch) : null;
credGraph = loadCredGraph(repoAndBranch)
MIN_ACTIVE_CONTRIB_XP = 20
SEED_PER_WEEK_PER_CONTRIB = 20
players = Array.from(credGraph.participants())
activeContributors = credGraph.intervals().map((interval, i) => {
const contribs = players.reduce(
(acc, user) => user.credPerInterval[i] >= MIN_ACTIVE_CONTRIB_XP ? acc.concat(user.id) : acc,
[],
);
return contribs;
}
)
seedPerInterval = activeContributors.map(contribs => SEED_PER_WEEK_PER_CONTRIB * (contribs.length + 1))
data = activeContributors.map((contribs, week) => ({ name: week, value: contribs.length })).slice(-50)
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("fill", color)
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d.value))
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth());
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
x = d3.scaleBand()
.domain(d3.range(data.length))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(i => data[i].name).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, data.format))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(data.y))
margin = ({top: 30, right: 0, bottom: 30, left: 40})
color = "purple"
height = 300
repoAndBranch = {
if (branchUrl && branchUrl.length > 0) {
const match = branchUrl.match(/.*github\.com\/(.*)tree\/(.*)(\/?)/);
if (match) return match[1] + match[2];
}
if (location.search.includes("?branchUrl=")) {
const match = location.search.match(/.*github\.com\/(.*)tree\/(.*)(\/?)/);
if (match) return match[1] + match[2];
}
if (location.search.includes("?repoAndBranch=")) {
const match = location.search.match(/\\?repoAndBranch=(.*)/);
if (match) return match[1];
}
return null;
}
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.
