d3.conventions

README.md

Succinct graphing with d3-jetpack.

Compare to the original.

d3-jetpack.js

function ƒ(){
  var functions = arguments 

  //convert all string arguments into field accessors 
  var i = functions.length
  while (i--){
    if (typeof(functions[i]) === 'string'){
      functions[i] = (function(str){
        return function(d){ return d[str] } 
      })(functions[i])
    }
  }

  //return composition of functions
  return function(d){
    var j = functions.length
    while(j--) d = functions[j].call(this, d)
    return d
  }
}


(function() {
        
    function jetpack(d3) {
        d3.selection.prototype.translate = function(xy) {
            return this.attr('transform', function(d,i) {
                return 'translate('+[typeof xy == 'function' ? xy(d,i) : xy]+')';
            });
        };

        d3.transition.prototype.translate = function(xy) {
            return this.attr('transform', function(d,i) {
                return 'translate('+[typeof xy == 'function' ? xy(d,i) : xy]+')';
            });
        };

        d3.selection.prototype.tspans = function(lines, lh) {
            return this.selectAll('tspan')
                .data(lines)
                .enter()
                .append('tspan')
                .text(function(d) { return d; })
                .attr('x', 0)
                .attr('dy', lh || 15);
        };

        d3.selection.prototype.append = 
        d3.selection.enter.prototype.append = function(name) {
            var n = d3_parse_attributes(name), s;
            //console.log(name, n);
            name = n.attr ? n.tag : name;
            name = d3_selection_creator(name);
            s = this.select(function() {
                return this.appendChild(name.apply(this, arguments));
            });
            return n.attr ? s.attr(n.attr) : s;
        };

        d3.selection.prototype.insert = 
        d3.selection.enter.prototype.insert = function(name, before) {
            var n = d3_parse_attributes(name), s;
            name = n.attr ? n.tag : name;
            name = d3_selection_creator(name);
            before = d3_selection_selector(before);
            s = this.select(function() {
                return this.insertBefore(name.apply(this, arguments), before.apply(this, arguments) || null);
            });
            return n.attr ? s.attr(n.attr) : s;
        };

        d3.selection.prototype.appendData = function(name, data){
            return this.selectAll('#zzzzzz')
                    .data(data)
                    .enter()
                    .append(name)
        }


        var d3_parse_attributes_regex = /([\.#])/g;

        function d3_parse_attributes(name) {
            if (typeof name === "string") {
                var attr = {},
                    parts = name.split(d3_parse_attributes_regex), p;
                    name = parts.shift();
                while ((p = parts.shift())) {
                    if (p == '.') attr['class'] = attr['class'] ? attr['class'] + ' ' + parts.shift() : parts.shift();
                    else if (p == '#') attr.id = parts.shift();
                }
                return attr.id || attr['class'] ? { tag: name, attr: attr } : name;
            }
            return name;
        }

        function d3_selection_creator(name) {
            return typeof name === "function" ? name : (name = d3.ns.qualify(name)).local ? function() {
                return this.ownerDocument.createElementNS(name.space, name.local);
            } : function() {
                return this.ownerDocument.createElementNS(this.namespaceURI, name);
            };
        }

        function d3_selection_selector(selector) {
            return typeof selector === "function" ? selector : function() {
                return this.querySelector(selector);
            };
        }

        d3.wordwrap = function(line, maxCharactersPerLine) {
            var w = line.split(' '),
                lines = [],
                words = [],
                maxChars = maxCharactersPerLine || 40,
                l = 0;
            w.forEach(function(d) {
                if (l+d.length > maxChars) {
                    lines.push(words.join(' '));
                    words.length = 0;
                    l = 0;
                }
                l += d.length;
                words.push(d);
            });
            if (words.length) {
                lines.push(words.join(' '));
            }
            return lines;
        };
        
        d3.ascendingKey = function(key) {
            return typeof key == 'function' ? function (a, b) {
                  return key(a) < key(b) ? -1 : key(a) > key(b) ? 1 : key(a) >= key(b) ? 0 : NaN;
            } : function (a, b) {
                  return a[key] < b[key] ? -1 : a[key] > b[key] ? 1 : a[key] >= b[key] ? 0 : NaN;
            };
        };

        d3.descendingKey = function(key) {
            return typeof key == 'function' ? function (a, b) {
                return key(b) < key(a) ? -1 : key(b) > key(a) ? 1 : key(b) >= key(a) ? 0 : NaN;
            } : function (a, b) {
                return b[key] < a[key] ? -1 : b[key] > a[key] ? 1 : b[key] >= a[key] ? 0 : NaN;
            };
        };

        d3.conventions = function(c){
          c = c || {}

          c.margin = c.margin || {top: 30, right: 30, bottom: 30, left: 30}

          c.width  = c.width  || 960 - c.margin.left - c.margin.right
          c.height = c.height || 500 - c.margin.top  - c.margin.bottom

          c.parentSel = c.parentSel || d3.select('body')

          c.svg = c.svg || c.parentSel.append("svg")
              .attr("width", c.width + c.margin.left + c.margin.right)
              .attr("height", c.height + c.margin.top + c.margin.bottom)
            .append("g")
              .attr("transform", "translate(" + c.margin.left + "," + c.margin.top + ")")

          c.color   = c.color   || d3.scale.category10()
          c.x       = c.x       || d3.scale.linear().range([0, c.width])
          c.y       = c.y       || d3.scale.linear().range([c.height, 0])
          c.rScale  = c.rScale  || d3.scale.sqrt().range([5, 20])
          c.line    = c.line    || d3.svg.line()


          c.xAxis = c.xAxis || d3.svg.axis().scale(c.x).orient("bottom");
          c.yAxis = c.yAxis || d3.svg.axis().scale(c.y).orient("left")


          c.drawAxis = function(){
            c.svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + c.height + ")")
                .call(c.xAxis);

            c.svg.append("g")
                .attr("class", "y axis")
                .call(c.yAxis);
          }
          
          return c
        }

        d3.attachTooltip = function(sel, fieldFns){
          sel 
              .on('mouseover', ttDisplay)
              .on('mousemove', ttMove)
              .on('mouseout',  ttHide)


          fieldFns = fieldFns || d3.keys(sel.datum()).map(function(str){
            return function(d){ return str + ': <b>' + d[str] + '</b>'} })

          function ttDisplay(d){
            d3.select('.tooltip')
                .classed('tooltip-hidden', false)
                .html('')
              .appendData('div', fieldFns)
                .html(function(fn){ return fn(d) })

            d3.select(this).classed('tooltipped', true)
          }

          function ttMove(d){
            var tt = d3.select('.tooltip')
            if (!tt.size()) return
            var e = d3.event,
              x = e.clientX,
              y = e.clientY,
              doctop = (window.scrollY)? window.scrollY : (document.documentElement && document.documentElement.scrollTop)? document.documentElement.scrollTop : document.body.scrollTop;
              n = tt.node(),
              nBB = n.getBoundingClientRect()

            tt.style('top', (y+doctop-nBB.height-18)+"px");
            tt.style('left', Math.min(Math.max(0, (x-nBB.width/2)), window.innerWidth - nBB.width)+"px");
          }

          function ttHide(d){
            d3.select('.tooltip').classed('tooltip-hidden', true);

            d3.selectAll('.tooltipped').classed('tooltipped', false)
          }
        }

        d3.compose = function(){
          var functions = arguments 
          return function(d){
            var i = functions.length
            while(i--) d = functions[i].call(this, d)
            return d
          }
        }

    }

    if (typeof d3 === 'object' && d3.version) jetpack(d3);
    else if (typeof define === 'function' && define.amd) {
        define(['d3'], jetpack);
    }

})();

data.tsv

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}


div.tooltip {
  top: -1000px;
  position: absolute;
  padding: 15px;
  background: rgba(255, 255, 255, .90);
  border: 1px solid lightgray;
  pointer-events: none;
}
.tooltip-hidden{
  opacity: 0;
}

</style>

<body>
  <div id='graph'></div>
  <div class='tooltip'></div>
</body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src='d3-jetpack.js'></script>

<script>

d3.tsv('data.tsv', function(data){
  c = d3.conventions({parentSel: d3.select('#graph')})

  c.x.domain(d3.extent(data, ƒ('sepalWidth')) ).nice()
  c.y.domain(d3.extent(data, ƒ('sepalLength'))).nice()
  c.drawAxis()

  c.svg.appendData('circle', data)
      .attr('cx', ƒ(c.x,'sepalWidth'))
      .attr('cy', ƒ(c.y, 'sepalLength'))
      .attr('fill', ƒ(c.color, 'species'))
      .attr({r: 5, stroke: '#000'})
      .call(d3.attachTooltip)

  var legend = c.svg.appendData('g.legend', c.color.domain())
      .translate(function(d, i){ return [0, i*20] })

  legend.append('rect')
      .attr({x: c.width - 18, width: 18, height: 18})
      .style('fill', c.color)

  legend.append('text')
      .attr({x: c.width - 24, y: 9, dy: '.33em', 'text-anchor': 'end'})
      .text(ƒ())
})

</script>

preview.png

thumbnail.png