Creating weekly commit sparklines using JQuery and D3.js

sparklines.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));
}