render.js

function sampleAndRender() {
    var tsers = sample()
    render(setupBandline(tsers), tsers)
}

function render(curriedBandLine, tsers) {

    var margin = {top: 5, right: 40, bottom: 20, left: 120}
    var width = 370 - margin.left - margin.right
    var height = 370 - margin.top - margin.bottom

    var rowPitch = 40
    var rowBandRange = rowPitch / 1.3

    // Column widths
    var nameColumnWidth = 160
    var bandLineWidth = 100
    var sparkStripWidth = 50
    var columnSeparation = 10

    // The bandline gets augmented with the View specific settings (screen widths etc.)
    var bandLine = curriedBandLine // fixme implement bandline .copy

    // Augment partially set up elements
    bandLine.xScaleOfBandLine().range([0, bandLineWidth])
    bandLine.xScaleOfSparkStrip().range([0, sparkStripWidth])
    bandLine.rScaleOfBandLine().range([2, 0, 2])

    // Add new elements
    bandLine
        .rScaleOfSparkStrip(constant(2))
        .yRange([rowBandRange / 2 , -rowBandRange  / 2])


    /**
     * Root
     */

    var svg = d3.selectAll('svg')

    svg
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)

    var dashboard = bind(svg, 'dashboard', 'g', [{key: 0}])


    /**
     * Headers
     */

    bind(dashboard, 'header', 'text', [{key: 'Name'}, {key: 'Time Series'}, {key: 'Spread'}])
        .entered
        .text(key)
        .attr('transform', translate(function(d, i) {
            return [0, nameColumnWidth, nameColumnWidth + bandLineWidth + 3 * columnSeparation][i]
        }, rowPitch))


    /**
     * Rows
     */

    var row = bind(dashboard, 'row', 'g', tsers)

    row.attr('transform', function rowTransform(d, i) {return translateY((i + 2) * rowPitch)()})

    bind(row, 'nameCellText', 'text')
        .text(key)
        .attr('y', '0.5em')

    bind(row, 'assignmentScoresCell')
        .attr('transform', translateX(nameColumnWidth + columnSeparation))
        .call(bandLine.renderBandLine)

    bind(row, 'assignmentScoresVerticalCell')
        .attr('transform', translateX(nameColumnWidth + bandLineWidth + 2 * columnSeparation))
        .call(bandLine.renderSparkStrip)
}