bandline.css

/**
 *  Bandline styling
 *
 * Implementation of Stephen Few's bandlines
 *
 * Copyright Robert Monfera
 * Design: Stephen Few
 * Design documentation: https://www.perceptualedge.com/articles/visual_business_intelligence/introducing_bandlines.pdf
 */

g.bandLine .band,
g.sparkStrip .band {
    fill: black
}

g.bands .band.s0 {fill-opacity: 0.06}
g.bands .band.s1 {fill-opacity: 0.1}
g.bands .band.s2 {fill-opacity: 0.16}
g.bands .band.s3 {fill-opacity: 0.22}
g.bands .band.s4 {fill-opacity: 0.3}
g.bands .band.s5 {stroke: white; stroke-width: 1px; fill: none;} /* for more prominent color: hsl(120, 100%, 38%) */

g.bandLine .valueLine,
g.sparkStrip .valueBox,
g.sparkStrip .valuePoints {
    stroke: rgb(226, 60, 180)
}

g.bandLine .valueLine {
    stroke-width: 2;
}
g.sparkStrip .valueBox,
g.sparkStrip .valuePoints {
    stroke-width: 1;
}

g.sparkStrip .valueBox {
    fill: white;
}

g.sparkStrip .valuePoints {
    fill: none;
}

g.bandLine .valuePoints {
    fill: rgb(226, 60, 180);
}

g.bandLine .valuePoints .point.highOutlier {
    fill: white;
    stroke: rgb(226, 60, 180);
}