d3.slopegraph() | reusable slopegraph v3

readme.md

Reusable Slopegraph

Forked from Sundar's slopegraph

Feeding it with open data from Spain gender-based violence studies

Slopegraph: It's a chart that connects the same data point in two different data sets making it very easy to visualize the differences between those two sets.

---

Following Mike Bostocks' advice, this graphic adds code integrity plus enhanced reusability: thus, if drawing a big dataset with lots of lines, you can add a 'category' to classify and review in groups each datapoint, providing an uncluttered overview.

For the sake of simplicity, my fed data is previously structured using d3.nest() function, which allows for a tree key-value structure.

[
	{
		key: "iPad",
		values: {
			category: "Apple",
			count: {
				2013: 200000,
				2014: 250000,
				2015: 179560
			}
		}
	},
	{
		key: "iCloud",
		values: {
			category: "Apple",
			count: {
				2013: 35000,
				2014: 57500,
				2015: 87020
			}
		}
	},
	{
		key: "Nexus 5",
		values: {
			category: "Google",
			count: {
				2013: 120000,
				2014: 172000,
				2015: 48000
			}
		}
	}
]
 */

If you like this graphic, I encourage you to share it, modify it and publish it.

If you need any help you may find me here.

---

Things to do:

1. Normalize object structure (by d3.nest() function)
2. Add group interaction (if there's a category)
3. Enable the ES6 "exports" way
4. Fix width for long numeric values
5. Only apply focus to single datapoints instead of category (if any) on hovering Is it really useful?
6. Fix slopegraph height depending on the number of datapoints (perhaps height = data.length > 15 ? 80 : 60; then height = height * data.length)
7. Update to last version, d3.v4

community-reports-0916.csv

draw.js

"use strict";

// Using pre-loaded d3.v3 and lodash.js
// Feeding slopegraph.js

(function () {

    // data & chart
    var slopegraph;
    var data;
    // keys values from data to be applied
    var keyValues = d3.range(2009, 2017).map(function (y) {
        return y.toString();
    });
    // category to be applied - "key" if none
    var category = "community";
    // track any user interactions
    var state = {
        // have an array to mutate
        keys: keyValues,
        // toggle highlights
        navToggle: [],
        // track line selection
        highlight: null
    };
    var formatNum = d3.format(".1f");

    function type(d) {
        d["reports"] = +d["reports"];
        return d;
    }

    d3.csv("community-reports-0916.csv", type, function (error, csv) {
        if (error) throw error;

        var tree = d3.nest().key(function (dp) {
            return dp["province"];
        }).rollup(function (leaves) {
            var count = {};
            leaves.map(function (dp) {
                return count[dp["year"]] = dp["reports"];
            });
            return {
                // as every leaf is the same province over the years
                "community": leaves[0]["community"],
                "count": count
            };
        }).entries(csv);

        // access data outside this callback
        //      data = tree;
        // initial render chart
        render(tree, keyValues, category);
        // alternative navigation     
        navAlt(tree);
    });

    // Interactive filtering via category
    function navAlt(data) {

        var cat = _.uniq(data.map(function (d) {
            return d.values[category];
        }));
        // checks if no category has been selected
        cat = cat.length == 1 ? _.uniq(data.map(function (d) {
            return d.key;
        })) : cat;

        // create array values
        _.times(cat.length, function (n) {
            return state.navToggle.push(true);
        });

        // Aqui tengo 19 comunidades autonomas - 19 indices
        d3.select('#nav-alt').attr('margin', '-1px').append('ul').selectAll('li').data(cat).enter().append('li').attr('class', function (d, i) {
            return "navAlt li-" + i;
        }).on('click', function (d, i) {
            if (!state.navToggle[i]) {
                // update toggle state
                state.navToggle[i] = true;
                resetSelection();
                state.highlight = null;
            } else if (state.navToggle[i]) {
                state.navToggle[i] = false;
                // hover to highlight line category
                highlightCat(i);
                // highlight nav in relation to line
                highlightNav(i);
                // update state
                state.highlight = i;
            }
        }).text(function (d) {
            return d.toUpperCase();
        });
    }

    // Render slopegraph chart 
    function render(data, keys) {
        var category = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "key";

        resetSelection();
        // create chart
        slopegraph = d3.slopegraph().margin({ top: 20, bottom: 20, left: 100, right: 100 }).gutter(25).keyValues(keys).category(category).on('_hover', function (d, i) {
            // hover to highlight line
            highlightLine(i);
            // update state of selected highlight line
            state.highlight = i;
        });

        // apply chart
        d3.select('#slopegraph').datum(data).call(slopegraph);

        // ensure highlight is maintained on update    
        if (!_.isNull(state.highlight)) {
            d3.selectAll('.elm').style('opacity', 0.2);
            d3.selectAll(".sel-" + state.highlight).style('opacity', 1);
            highlightNav(state.highlight);
        }
    }

    function highlightLine(i) {
        d3.selectAll('.elm').transition().style('opacity', 0.15);
        d3.selectAll(".sel-ind-" + i).transition().style('opacity', 1);
    }

    function highlightCat(cat) {
        d3.selectAll('.elm').transition().style('opacity', 0.15);
        d3.selectAll(".sel-" + cat).transition().style('opacity', 1);
    }

    function highlightNav(i) {
        d3.selectAll('.navAlt').transition().style('opacity', 0.5);
        d3.select(".li-" + i).transition().style('opacity', 1);
    }

    function resetSelection() {
        d3.selectAll('.elm').transition().style('opacity', 1);
        d3.selectAll('.navAlt').transition().style('opacity', 1);
    }

    // EXTRA: Config for bl.ocks viewer size    
    d3.select(self.frameElement).style('height', '800px');
})();

index.html

<!DOCTYPE html>

<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <title>A glimpse to gender-based violence</title> 
    <meta name="author" content="Sundar Singh | eesur.com">
    <meta name="author" content="Quino Terrasa | espetro.github.io/blog">

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600">
    <link rel="stylesheet" href="main.css">
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js" charset="utf-8"></script>
</head>

<body>
    <header>
        <h1>Gender-based violence in Spain</h1> 
        <p>Total reports per region from 2009 to 2016.</p>

        <nav id='filter'></nav>
        <nav id='nav-alt'></nav>
    </header>

    <section id="slopegraph" class="slope"></section>

<!-- *************** start js/d3 code ***************** -->
<!-- reusable slopegraph -->
<script src="slopegraph.js"></script>
<!-- render slopegraph chart -->
<script src="draw.js"></script>
</body>
</html>

LICENSE.md

Released under the The MIT License.

main.css

body {
  position: relative;
  color: #130C0E;
  background-color: #fefefe;
  padding: 5px 20px;
  font-family: "Source Code Pro", Consolas, monaco, monospace;
  line-height: 1.5;
  font-weight: 400;
}
p {
  padding-top: 0;
  margin-top: 0;
  font-size: 13px;
  max-width: 600px;
}
h1 {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 0;
}
#slopegraph {
  min-height: 400px;
  /*padding: 20px 0;*/
}
.slope {
    display: inline-block;
    width: 400px;
}
.labels {
    font-size: 11px;
}
#nav-alt ul, #filter ul {
    color: #130C0E;
    font-size: 11px;
    letter-spacing: 1px;
    list-style: none;
    padding: 0;
    margin: 10px 0 10px 0;
}
#nav-alt ul li, #filter ul li {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 1px;
    background: #A4CD39;
    cursor: pointer;
}
#filter ul li {
  display: table-cell;
}
#nav-alt ul li:hover, #filter ul li:hover {
    background: #7AC143;
}
text.s-title {
    fill: #7AC143;
    letter-spacing: 2px;
    font-size: 11px;
}

main.js

// Using pre-loaded d3.v3 and lodash.js
// Feeding slopegraph.js

(() => {

  // data & chart
  var slopegraph;
  var data;
	// keys values from data to be applied
	const keyValues = d3.range(2009,2017).map(y => y.toString());
  // category to be applied - "key" if none
  const category = "community";
	// track any user interactions
  let state = {
	// have an array to mutate
        keys: keyValues,
	// track filtered sets
        filter: [],
	// toggle highlights
        navToggle: [],
	// track line selection
        highlight: null
  };
  const formatNum = d3.format(".1f");

  function type(d) {
    d["reports"] = +d["reports"];
    return d;
  }

  d3.csv("community-reports-0916.csv", type, (error, csv) => {
  	if(error) throw error;

    let tree = d3.nest()
        .key(dp => dp["province"])
        .rollup(leaves => {
          let count = {};
          leaves.map(dp => count[dp["year"]] = dp["reports"]);
          return {
              // as every leaf is the same province over the years
              "community": leaves[0]["community"],
              "count": count
            };
          })
          .entries(csv);
   
      // access data outside this callback
//      data = tree;
      // initial render chart
      render(tree, keyValues, category);
      // alternative navigation     
      navAlt(tree);
  });

  // Interactive filtering via category
  function navAlt(data) {

    let cat = _.uniq(data.map(d => d.values[category]));
    // checks if no category has been selected
    cat = cat.length == 1 ? _.uniq(data.map(d => d.key)) : cat;

    // create array values
    _.times(cat.length, n => state.navToggle.push(true));

    // Aqui tengo 19 comunidades autonomas - 19 indices
    d3.select('#nav-alt')
    .attr('margin', '-1px')
    .append('ul')
        .selectAll('li')
        .data(cat)
      .enter()
      .append('li')
        .attr('class', (d, i) => `navAlt li-${i}`)
        .on('click', (d, i) => {
            if (!state.navToggle[i]) {
			          // update toggle state
                state.navToggle[i] = true;
                resetSelection();
                state.highlight = null;
            } else if (state.navToggle[i]) {
                state.navToggle[i] = false;
			          // hover to highlight line category
                highlightCat(i);
			          // highlight nav in relation to line
                highlightNav(i);
			          // update state
                state.highlight = i;
            }
        })
        .text(d => d.toUpperCase());
  }

  // Render slopegraph chart 
  function render(data, keys, category = "key") {
      resetSelection();
      // create chart
      slopegraph = d3.slopegraph()
          .margin({top: 20, bottom: 20, left: 100, right: 100})
          .gutter(25)
          .keyValues(keys)
          .category(category)
          .on('_hover', (d, i) => {
              // hover to highlight line
              highlightLine(i);
              // update state of selected highlight line
              state.highlight = i;
          });


      // apply chart
      d3.select('#slopegraph')
          .datum(data)
          .call(slopegraph);

      // ensure highlight is maintained on update    
      if (!_.isNull(state.highlight)) {
          d3.selectAll('.elm').style('opacity', 0.2);
          d3.selectAll(`.sel-${state.highlight}`).style('opacity', 1);
          highlightNav(state.highlight);
      }
  }

  function highlightLine(i) {
      d3.selectAll('.elm').transition().style('opacity', 0.2);
      d3.selectAll(`.sel-ind-${i}`).transition().style('opacity', 1);
  }

  function highlightCat(cat) {
      d3.selectAll('.elm').transition().style('opacity', 0.2);
      d3.selectAll(`.sel-${cat}`).transition().style('opacity', 1);
  }

  function highlightNav(i) {
      d3.selectAll('.navAlt').transition().style('opacity', 0.5);
      d3.select(`.li-${i}`).transition().style('opacity', 1);
  }

  function resetSelection() {
      d3.selectAll('.elm').transition().style('opacity', 1);
      d3.selectAll('.navAlt').transition().style('opacity', 1);
  }

  // EXTRA: Config for bl.ocks viewer size    
  d3.select(self.frameElement).style('height', '800px');

})();

slopegraph-v3.js

// *****************************************
//  reusable multiple slopegraph chart
// *****************************************

(() => {

    d3.slopegraph = function module() {

        // default variables
        let w = 150, 
            h = 70,
            margin = {top: 40, bottom: 40, left: 80, right: 80},
            gutter = 50,
            strokeColour = 'black',
            // key data values (in order)
            keyValues = [],
            // category (default for key)
            type = "key",
            // array with total number of categories
            categories = [],
            format = d3.format(''),
            sets = 0;

        var dispatch = d3.dispatch('_hover');
        var svg, yScale;

        function exports(_selection) {
            _selection.each(data => {

                let allValues = [];

                // get number of categories
                categories = _.uniq(data.map(d => d.values[type]));
                // checks if no category has been selected
                categories = categories.length == 1 ? _.uniq(data.map(d => d.key)) : categories;

                // get dataset lengths
                data.forEach(d => {
                    _.times(keyValues.length, n => {
                        let year = keyValues[n];
                        allValues.push(d.values.count[year]);
                    });
                }); 

                // create max value so scale is consistent
                let maxValue = _.max(allValues);
                // adapt the size against number of sets
                w = w * keyValues.length;
                h = h * categories.length;
                // have reference for number of sets
                sets = keyValues.length -1;
                // use same scale for both sides
                yScale = d3.scale.linear()
                    .domain([0, maxValue])
                    .range([h - margin.top, margin.bottom]);

                // clean start
                // WARN: es2015 babel wrongly transpiles 'this'
                d3.select(this).select('svg').remove();

                svg = d3.select(this).append('svg')
                    .attr("width", w)
                    .attr("height", h);

                render(data, 0);
            });
        }

        // recursive function to apply each set
        // then the start and end labels (as only needed once)
        function render (data, n) {
            if (n < keyValues.length-1 ) {
                lines(data, n);
                middleLabels(data, n);
                return render(data, n+1);
            } else {
                startLabels(data);
                endLabels(data);
                return n;
            }
        }

        // render connecting lines
        function lines(data, n) {
            /*
                s-line-{n} toggles column values (1st column, 2nd column, ...)
                sel-${cat.indexOf(d)} toggles category values (cat1, cat2, ...)
                sel-ind-${i} toggles line values (obj1, obj2, ...) 
             */
            
            let lines = svg.selectAll(`.s-line-${n}`)
                .data(data)
                .enter().append('line');

            lines.attr({
                x1: () => {
                    if (n === 0) {
                        return margin.left;
                    } else {
                        return ((w / sets) * n) + margin.left/2;
                    }
                }, 
                y1: d => yScale(d.values.count[keyValues[n]]),
                x2: () => {
                    if (n === sets-1) {
                         return w - margin.right;
                    } else {
                        return ((w / sets) * (n+1)) - gutter;
                    }
                },  
                y2: d => yScale(d.values.count[keyValues[n+1]]),
                stroke: strokeColour,
                'stroke-width': 1,
// fix: IF NO CATEGORY IS USED, 'categories.indexOf()' WILL CRASH
                class: (d,i) => `elm s-line-${n} sel-${categories.indexOf(d.values[type])} sel-ind-${i}`
            })
            .on('mouseover', dispatch._hover);
            
        }

        // middle labels in-between sets
        function middleLabels(data, n) {

            if (n !== sets-1) {
                var middleLabels = svg.selectAll(`.m-labels-${n}`)
                    .data(data);

                middleLabels.enter().append('text')
                    .attr({
// fix: IF NO CATEGORY IS USED, 'categories.indexOf()' WILL CRASH
                        class: (d,i) => `labels m-labels-${n} elm sel-${categories.indexOf(d.values[type])} sel-ind-${i}`,
                        x: ((w / sets) * (n+1)) + 15,
                        y: d => yScale(d.values.count[keyValues[n+1]]) + 4,
                    })
                    .text(d => format(d.values.count[keyValues[n+1]]))
                    .style('text-anchor','end')
                    .on('mouseover', dispatch._hover);

                // title
                svg.append('text')
                    .attr({
                        class: 's-title',
                        x: ((w / sets) * (n+1)),
                        y: margin.top/2
                    })
                    .text(`${keyValues[n+1]} ↓`)
                    .style('text-anchor','end');
            }
        }

        // start labels applied left of chart sets
        function startLabels(data) {

            var startLabels = svg.selectAll('.l-labels')
                .data(data);

            startLabels.enter().append('text')
                .attr({
// fix: IF NO CATEGORY IS USED, 'categories.indexOf()' WILL CRASH
                    class: (d,i) => `labels l-labels elm sel-${categories.indexOf(d.values[type])} sel-ind-${i}`,
                    x: margin.left - 3,
                    y: d => yScale(d.values.count[keyValues[0]]) + 4
                })
                .text(d => `${d.key} ${format(d.values.count[keyValues[0]])}`)
                .style('text-anchor','end')
                .on('mouseover', dispatch._hover);

            // title
            svg.append('text')
                .attr({
                    class: 's-title',
                    x: margin.left - 3,
                    y: margin.top/2
                })
                .text(`${keyValues[0]} ↓`)
                .style('text-anchor','end');
        }

        // end labels applied right of chart sets
        function endLabels(data) {
 //           let cat = _.uniq(data.map(d => d.values["comunidad"]));

            var end = keyValues.length-1;

            var endLabels = svg.selectAll('r.labels')
                    .data(data);

            endLabels.enter().append('text')
                .attr({
// fix: IF NO CATEGORY IS USED, 'categories.indexOf()' WILL CRASH
                    class: (d,i) => `labels r-labels elm sel-${categories.indexOf(d.values[type])} sel-ind-${i}`,
                    x: w - margin.right + 3,
                    y: d => yScale(d.values.count[keyValues[end]]) + 4
                })
                .text(d => `${d.key} ${format(d.values.count[keyValues[end]])}`)
                .style('text-anchor','start')
                .on('mouseover', dispatch._hover);

            // title
            svg.append('text')
                .attr({
                    class: 's-title',
                    x: w - margin.right + 3,
                    y: margin.top/2
                })
                .text(`↓ ${keyValues[end]}`)
                .style('text-anchor','start');
        }

        // getter/setters for overrides 
        exports.w = function(value) {
            if (!arguments.length) return w;
            w = value;
            return this;
        };
        exports.h = function(value) {
            if (!arguments.length) return h;
            h = value;
            return this;
        };
        exports.margin = function(value) {
            if (!arguments.length) return margin;
            margin = value;
            return this;
        };
        exports.gutter = function(value) {
            if (!arguments.length) return gutter;
            gutter = value;
            return this;
        };
        exports.format = function(value) {
            if (!arguments.length) return format;
            format = value;
            return this;
        };
        exports.strokeColour = function(value) {
            if (!arguments.length) return strokeColour;
            strokeColour = value;
            return this;
        };
        exports.keyValues = function(value) {
            if (!arguments.length) return keyValues;
            keyValues = value;
            return this;
        };
        exports.category = function(value) {
            if(!arguments.length) return category;
            type = value;
            return this;
        }

        d3.rebind(exports, dispatch, 'on');
        return exports;
    };

})();

slopegraph.js

'use strict';

// *****************************************
//  reusable multiple slopegraph chart
// *****************************************

(function () {

    d3.slopegraph = function module() {

        // default variables
        var w = 150,
            h = 70,
            margin = { top: 40, bottom: 40, left: 80, right: 80 },
            gutter = 50,
            strokeColour = 'black',

        // key data values (in order)
        keyValues = [],

        // category (default for key)
        type = "key",

        // array with total number of categories
        categories = [],
            format = d3.format(''),
            sets = 0;

        var dispatch = d3.dispatch('_hover');
        var svg, yScale;

        function exports(_selection) {
            var _this = this;

            _selection.each(function (data) {

                var allValues = [];

                // get number of categories
                categories = _.uniq(data.map(function (d) {
                    return d.values[type];
                }));
                // checks if no category has been selected
                categories = categories.length == 1 ? _.uniq(data.map(function (d) {
                    return d.key;
                })) : categories;

                // get dataset lengths
                data.forEach(function (d) {
                    _.times(keyValues.length, function (n) {
                        var year = keyValues[n];
                        allValues.push(d.values.count[year]);
                    });
                });

                // create max value so scale is consistent
                var maxValue = _.max(allValues);
                // adapt the size against number of sets
                w = w * keyValues.length;
                h = h * categories.length;
                // have reference for number of sets
                sets = keyValues.length - 1;
                // use same scale for both sides
                yScale = d3.scale.linear().domain([0, maxValue]).range([h - margin.top, margin.bottom]);

                // clean start
                // WARN: es2015 babel wrongly transpiles 'this'
                d3.select(this).select('svg').remove();

                svg = d3.select(this).append('svg').attr("width", w).attr("height", h);

                render(data, 0);
            });
        }

        // recursive function to apply each set
        // then the start and end labels (as only needed once)
        function render(data, n) {
            if (n < keyValues.length - 1) {
                lines(data, n);
                middleLabels(data, n);
                return render(data, n + 1);
            } else {
                startLabels(data);
                endLabels(data);
                return n;
            }
        }

        // render connecting lines
        function lines(data, n) {
            /*
                s-line-{n} toggles column values (1st column, 2nd column, ...)
                sel-${cat.indexOf(d)} toggles category values (cat1, cat2, ...)
                sel-ind-${i} toggles line values (obj1, obj2, ...) 
             */

            var lines = svg.selectAll('.s-line-' + n).data(data).enter().append('line');

            lines.attr({
                x1: function x1() {
                    if (n === 0) {
                        return margin.left;
                    } else {
                        return w / sets * n + margin.left / 2;
                    }
                },
                y1: function y1(d) {
                    return yScale(d.values.count[keyValues[n]]);
                },
                x2: function x2() {
                    if (n === sets - 1) {
                        return w - margin.right;
                    } else {
                        return w / sets * (n + 1) - gutter;
                    }
                },
                y2: function y2(d) {
                    return yScale(d.values.count[keyValues[n + 1]]);
                },
                stroke: strokeColour,
                'stroke-width': 1,
                class: function _class(d, i) {
// fix: IF NO CATEGORY IS USED, 'categories.indexOf()' WILL CRASH                    
                    return 'elm s-line-' + n + ' sel-' + categories.indexOf(d.values[type]) + ' sel-ind-' + i;
                }
            }).on('mouseover', dispatch._hover);
        }

        // middle labels in-between sets
        function middleLabels(data, n) {

            if (n !== sets - 1) {
                var middleLabels = svg.selectAll('.m-labels-' + n).data(data);

                middleLabels.enter().append('text').attr({
                    class: function _class(d, i) {
// fix: IF NO CATEGORY IS USED, 'categories.indexOf()' WILL CRASH
                        return 'labels m-labels-' + n + ' elm sel-' + categories.indexOf(d.values[type]) + ' sel-ind-' + i;
                    },
                    x: w / sets * (n + 1) + 15,
                    y: function y(d) {
                        return yScale(d.values.count[keyValues[n + 1]]) + 4;
                    }
                }).text(function (d) {
                    return format(d.values.count[keyValues[n + 1]]);
                }).style('text-anchor', 'middle').on('mouseover', dispatch._hover);

                // title
                svg.append('text').attr({
                    class: 's-title',
                    x: w / sets * (n + 1),
                    y: margin.top / 2
                }).text(keyValues[n + 1] + ' \u2193').style('text-anchor', 'middle');
            }
        }

        // start labels applied left of chart sets
        function startLabels(data) {

            var startLabels = svg.selectAll('.l-labels').data(data);

            startLabels.enter().append('text').attr({
                class: function _class(d, i) {
// fix: IF NO CATEGORY IS USED, 'categories.indexOf()' WILL CRASH
                    return 'labels l-labels elm sel-' + categories.indexOf(d.values[type]) + ' sel-ind-' + i;
                },
                x: margin.left - 3,
                y: function y(d) {
                    return yScale(d.values.count[keyValues[0]]) + 4;
                }
            }).text(function (d) {
                return d.key + ' ' + format(d.values.count[keyValues[0]]);
            }).style('text-anchor', 'end').on('mouseover', dispatch._hover);

            // title
            svg.append('text').attr({
                class: 's-title',
                x: margin.left - 3,
                y: margin.top / 2
            }).text(keyValues[0] + ' \u2193').style('text-anchor', 'end');
        }

        // end labels applied right of chart sets
        function endLabels(data) {

            var end = keyValues.length - 1;

            var endLabels = svg.selectAll('r.labels').data(data);

            endLabels.enter().append('text').attr({
                class: function _class(d, i) {
// fix: IF NO CATEGORY IS USED, 'categories.indexOf()' WILL CRASH
                    return 'labels r-labels elm sel-' + categories.indexOf(d.values[type]) + ' sel-ind-' + i;
                },
                x: w - margin.right + 3,
                y: function y(d) {
                    return yScale(d.values.count[keyValues[end]]) + 4;
                }
            }).text(function (d) {
                return d.key + ' ' + format(d.values.count[keyValues[end]]);
            }).style('text-anchor', 'start').on('mouseover', dispatch._hover);

            // title
            svg.append('text').attr({
                class: 's-title',
                x: w - margin.right + 3,
                y: margin.top / 2
            }).text('\u2193 ' + keyValues[end]).style('text-anchor', 'start');
        }

        // getter/setters for overrides 
        exports.w = function (value) {
            if (!arguments.length) return w;
            w = value;
            return this;
        };
        exports.h = function (value) {
            if (!arguments.length) return h;
            h = value;
            return this;
        };
        exports.margin = function (value) {
            if (!arguments.length) return margin;
            margin = value;
            return this;
        };
        exports.gutter = function (value) {
            if (!arguments.length) return gutter;
            gutter = value;
            return this;
        };
        exports.format = function (value) {
            if (!arguments.length) return format;
            format = value;
            return this;
        };
        exports.strokeColour = function (value) {
            if (!arguments.length) return strokeColour;
            strokeColour = value;
            return this;
        };
        exports.keyValues = function (value) {
            if (!arguments.length) return keyValues;
            keyValues = value;
            return this;
        };
        exports.category = function (value) {
            if (!arguments.length) return category;
            type = value;
            return this;
        };

        d3.rebind(exports, dispatch, 'on');
        return exports;
    };
})();