Skip to content

Instantly share code, notes, and snippets.

@chriswhong chriswhong/sparklines.js
Last active Dec 3, 2018

Embed
What would you like to do?
Creating weekly commit sparklines using JQuery and D3.js
$.getJSON('https://home-api.planninglabs.nyc/github/repo-activity', (labsData) => {
const yMax = d3.max(labsData, d => d3.max(d.data, e => e.total));
labsData
.sort(function(a, b) {
if (a.name < b.name) {
return -1;
}
if (a.name > b.name) {
return 1;
}
return 0;
})
.forEach((repo) => {
// make a new item div
const itemDiv = $(`<div class="item"><div class='repo-label'>${repo.name}</div></div>`).appendTo('.container');
// render a chart in in it
renderChart(itemDiv, repo.data, yMax)
});
});
const renderChart = (container, data, yMax) => {
console.log(container, data);
const width = 350;
const height = 70;
const vis = d3.select(container[0])
.append("svg:svg")
.attr("width", width)
.attr("height", height);
const margin = {
top: 5,
right: 5,
bottom: 5,
left: 5,
};
const x = d3.scaleLinear()
.domain(d3.extent(data.map(d => d.week)))
.range([margin.left, width - margin.right])
const y = d3.scaleLinear()
.domain([0, yMax]).nice()
.range([height - margin.bottom, margin.top])
const line = d3.line()
// .defined(d => !isNaN(d))
.curve(d3.curveCatmullRomOpen)
.x((d, i) => x(d.week))
.y(d => y(d.total))
const path = vis.append("g")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.append("path")
.style("mix-blend-mode", "multiply")
.attr("d", line(data));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.