D3Kit Test

README.md

A tweak of the D3Kit Circles example to fix some transition bugs it had, and to add, well, a ton of circles.

d3kit.min.js

!function(a,b){"function"==typeof define&&define.amd?define(["d3"],b):"object"==typeof exports?module.exports=b(require("d3")):a.d3Kit=b(a.d3)}(this,function(a){var b;b=function(){var a=function(){function a(a,b,c){return a.on("click",b[c+"Click"]).on("mouseover",b[c+"MouseOver"]).on("mousemove",b[c+"MouseMove"]).on("mouseout",b[c+"MouseOut"])}function b(a,b){return b?a.selectAll("*").remove():a.selectAll("*").transition().style("opacity",0).remove()}function c(a){return"object"==typeof HTMLElement?a instanceof HTMLElement:a&&"object"==typeof a&&null!==a&&1===a.nodeType&&"string"==typeof a.nodeName}function d(a){return c(a)?a:document.querySelector(a)}function e(a){return Array.isArray(a)?a:[].slice.call(document.querySelectorAll(a))}function f(a){a=a||{};for(var b=1;b<arguments.length;b++){var c=arguments[b];if(c)for(var d in c)if(c.hasOwnProperty(d)){var e=c[d];!k(e)||Array.isArray(e)||m(e)?a[d]=e:a[d]=f(a[d],e)}}return a}function g(a){a=a||{};for(var b=1;b<arguments.length;b++)if(arguments[b])for(var c in arguments[b])arguments[b].hasOwnProperty(c)&&(a[c]=arguments[b][c]);return a}function h(a,b,c){a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent&&a.attachEvent("on"+b,c)}function i(a,b,c){a.removeEventListener(b,c,!1)}function j(a,b,c){var d,e=function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;return clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f),e};return e.isDebounced=!0,e.now=function(){return clearTimeout(d),a.apply(this,arguments)},e}function k(a){return!(!a||!r[typeof a])}function l(a){return"number"==typeof a||a&&"object"==typeof a&&u.call(a)==s||!1}function m(a){var b={};return!!a&&"[object Function]"===b.toString.call(a)}function n(a){return null==a?"":String(a).replace(/([.*+?^=!:${}()|[\]\/\\])/g,"\\$1")}function o(a,b){return null==a?"":!b&&v?v.call(a):(b=w(b),String(a).replace(new RegExp("^"+b+"+|"+b+"+$","g"),""))}function p(a){return o(a).replace(/([A-Z])/g,"-$1").replace(/[-_\s]+/g,"-").toLowerCase()}var q=Number.isNaN?Number.isNaN:window.isNaN,r={"boolean":!1,"function":!0,object:!0,number:!1,string:!1,undefined:!1},s="[object Number]",t=Object.prototype,u=t.toString,v=String.prototype.trim,w=function(a){return null==a?"\\s":a.source?a.source:"["+n(a)+"]"};return{$:d,$$:e,dasherize:p,debounce:j,deepExtend:f,extend:g,isElement:c,isFunction:m,isNaN:q,isNumber:l,isObject:k,on:h,off:i,trim:o,removeAllChildren:b,bindMouseEventsToDispatcher:a}}();return a}();var c;c=function(a){return function(b){function c(b,c,d){var e=d?d+"."+c:c;if(i.hasOwnProperty(e))throw"invalid or duplicate layer id: "+e;var f=b.append("g").classed(a.dasherize(c)+"-layer",!0);return i[e]=f,f}function d(b,e,f){if(Array.isArray(e))return e.map(function(a){d(b,a,f)});if(a.isObject(e)){var g=Object.keys(e)[0],h=c(b,g,f);return d(h,e[g],f?f+"."+g:g),h}return c(b,e,f)}function e(a){return d(b,a)}function f(a){return Array.isArray(a)?a.map(e):e(a)}function g(a){return i[a]}function h(a){return!!i[a]}var i={};return{create:f,get:g,has:h}}}(b);var d;d=function(a,b,c){function d(d,g,h){function i(a,b){return 0===arguments.length?E:(E=a,b||S.data(a),D)}function j(a,b){return 0===arguments.length?F:(F=c.deepExtend(F,a),a&&(a.margin?l(b):a.offset&&k()),b||S.options(a),D)}function k(){P.attr("transform","translate("+(F.margin.left+F.offset[0])+","+(F.margin.top+F.offset[1])+")")}function l(a){k(),I=G-F.margin.left-F.margin.right,J=H-F.margin.top-F.margin.bottom,a||S.resize([G,H,I,J])}function m(a,b){return 0===arguments.length?F.margin:(F.margin=c.extend(F.margin,a),l(b),D)}function n(a){return 0===arguments.length?F.offset:(F.offset=a,k(),D)}function o(a,b){if(0===arguments.length||null===a||void 0===a)return G;if(G=c.isNumber(a)?+a:"auto"==a.trim().toLowerCase()?d.clientWidth:+(a+"").replace(/px/gi,"").trim(),c.isNaN(G))throw Error("invalid width: "+G);return G=Math.floor(G),I=G-F.margin.left-F.margin.right,O.attr("width",G),b||S.resize([G,H,I,J]),D}function p(a,b){if(0===arguments.length||null===a||void 0===a)return H;if(H=c.isNumber(a)?+a:"auto"==a.trim().toLowerCase()?d.clientHeight:+(a+"").replace(/px/gi,"").trim(),c.isNaN(H))throw Error("invalid height: "+H);return H=Math.floor(H),J=H-F.margin.top-F.margin.bottom,O.attr("height",H),b||S.resize([G,H,I,J]),D}function q(a,b){return 0===arguments.length?[G,H]:(o(a[0],!0),p(a[1],b),D)}function r(a){return 0===arguments.length?L:L!=a?w(a,K):D}function s(a){return 0===arguments.length?K:K!=a?w(L,a):D}function t(a){return 0===arguments.length?N:(N=null===a||void 0===a||""===a||a===!1||"false"===(a+"").toLowerCase()?!1:c.isNumber(a)?0===+a?!1:+a:!1,D)}function u(){if(M)switch(K){case"dom":c.off(d,"resize",M);break;default:case"window":c.off(window,"resize",M)}return M=null,D}function v(a){if(a)switch(K){case"dom":c.on(d,"resize",a);break;default:case"window":c.on(window,"resize",a)}return M=a,D}function w(a,b){if(a=a&&"false"==(a+"").toLowerCase()?!1:a,b=b||K,a!=L)u(),L=a,K=b,a&&(M=c.debounce(function(){N?(z(L,!0),A(N)):z(L)},100),v(M));else if(b!=K){var d=M;u(),K=b,v(d)}return M&&M(),D}function x(){return Object.keys(S).filter(function(a){return f.indexOf(a)<0})}function y(a){var b=D;return c.isObject(a)&&Object.keys(a).forEach(function(c){b[c]=a[c]}),b}function z(a,b){switch(a){case"all":case"full":case"both":q(["auto","auto"],b);break;case"height":p("auto",b);break;default:case"width":o("auto",b)}return D}function A(a,b){var d=G,e=H;if(!c.isNumber(a))throw"Invalid ratio: must be a Number";if(a=+a,(d/e).toFixed(4)==a.toFixed(4))return D;var f=Math.floor(d/a);return f>e?o(Math.floor(e*a),b):p(f,b),D}function B(){return null!==E&&void 0!==E}function C(){return I>0&&J>0}var D={};d=c.$(d);var E=null,F=c.deepExtend({},e,g),G=0,H=0,I=0,J=0,K="window",L=!1,M=null,N=!1,O=a.select(d).append("svg"),P=O.append("g");k();var Q=new b(P),R=h?h.concat(f):f,S=a.dispatch.apply(a,R);return q([F.initialWidth,F.initialHeight]),c.extend(D,{getCustomEventNames:x,getDispatcher:function(){return S},getInnerWidth:function(){return I},getInnerHeight:function(){return J},getLayerOrganizer:function(){return Q},getRootG:function(){return P},getSvg:function(){return O},data:i,options:j,margin:m,offset:n,width:o,height:p,dimension:q,autoResize:r,autoResizeDetection:s,autoResizeToAspectRatio:t,hasData:B,hasNonZeroArea:C,mixin:y,resizeToFitContainer:z,resizeToAspectRatio:A}),a.rebind(D,S,"on"),D}var e={margin:{top:30,right:30,bottom:30,left:30},offset:[.5,.5],initialWidth:720,initialHeight:500},f=["data","options","resize"];return d}(a,c,b);var e;e=function(a,b){var c=function(){function c(c,d,e){var f=function(f,g){var h=new a(f,b.deepExtend({},c,g),d);return e&&e(h),h};return d=d?d:[],f.getCustomEvents=function(){return d},f}return{createChart:c}}();return c}(d,b);var f;f=function(a,b){function c(a,b){b()}function d(d,e,f,g){function h(b,c){return arguments.length>1?(o[b]=a.functor(c),this):a.functor(o[b])}function i(a,b,c){return h(a)(b,c)}function j(a,c){return function(d){a(d,b.debounce(function(a,b){var e=p[c];e&&e(d)}),5)}}function k(a,b,c){return o[c||b]=function(c,d){return a.property(b)(c,d)},this}function l(a,b,c){return b.forEach(function(b,d){k(a,b,c&&d<c.length?c[d]:void 0)}),this}function m(a){return g.forEach(function(b){p.on(b,a[b])}),this}function n(){return g}e=e||c,f=f||c,g=g||[];var o={},p=a.dispatch.apply(a,["enterDone","updateDone","exitDone"].concat(g)),q={getDispatcher:function(){return p},getPropertyValue:i,inheritPropertyFrom:k,inheritPropertiesFrom:l,publishEventsTo:m,getCustomEventNames:n,property:h,enter:j(d,"enterDone"),update:j(e,"updateDone"),exit:j(f,"exitDone")};return a.rebind(q,p,"on"),q}return d}(a,b);var g;return g=function(a,b,c,d,e){return{factory:a,helper:b,Skeleton:c,LayerOrganizer:d,Chartlet:e}}(e,b,d,c,f)});

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Circles Test</title>
  <style media="screen">
  html {
    color: #444;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
  }
  body {
    background: white;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
  }
  .chart {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  circle {
    opacity: 0.5;
  }
  </style>
  <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
  <script src="d3kit.min.js" charset="utf-8"></script>
</head>
<body>
<div class="chart"></div>
<script type="text/javascript">
var MIN_RADIUS = 10;
var MAX_RADIUS = 50;
var DEFAULT_OPTIONS = {
  margin: {top: 50, right: 50, bottom: 50, left: 50}
};

var xScale = d3.scale.linear();
var yScale = d3.scale.linear();
var radiusScale = d3.scale.linear()
  .range([MIN_RADIUS, MAX_RADIUS]);
var colorScale = d3.scale.category20();

var onClicked = function(d) {
  d.customColor = d.customColor ? null : 'black';
  chart.getRootG().selectAll('.node').call(circles.update);
}

var onResize = function() {
  xScale.range([0, chart.getInnerWidth()]);
  yScale.range([0, chart.getInnerHeight()]);

  chart.getRootG().selectAll('.node')
    .transition()
    .delay(function(d, i) {return i;})
    .attr("transform", function(d) {
      return 'translate(' + [xScale(d.x), yScale(d.y)] + ')';
    })
    .call(circles.update);
};

var onData = function(data) {
  if (chart.hasData()) {
    radiusScale.domain(d3.extent(data, function(d) {return d.size;}));

    var nodes = chart.getRootG().selectAll('g.node')
      .data(data);

    nodes.enter()
      .append('g')
      .classed('node', true)
      .call(circles.enter);

    nodes.exit()
      .call(circles.exit);

    onResize();
  }
};

var CircleChartlet = function() {
  var events = ['circleClicked'];
  var chartlet = d3Kit.Chartlet(enter, update, exit, events);

  function enter(selection, done) {
    selection.append('circle')
      .attr('r', 0)
      .attr('fill', 'white')
      .on('click', chartlet.getDispatcher().circleClicked);

    done(selection);
  }

  function update(selection, done) {
    selection.select('circle')
      .transition()
      .attr('fill', chartlet.property('color'))
      .attr('r', chartlet.property('radius'))
      .each('end', done);
  }

  function exit(selection, done) {
    selection.select('circle')
      .transition()
      .attr('r', 0)
      .remove()
      .each('end', done);
  }

  return chartlet;
};

// Create circle chartlet
var circles = CircleChartlet()
  .property('radius', function(d, i) {
    return radiusScale(500 * Math.random());
  })
  .property('color', function(d, i) {
    return d.customColor || colorScale(i);
  })
  .on('circleClicked', onClicked);

var chart = new d3Kit.Skeleton('.chart', DEFAULT_OPTIONS)
  .autoResize('both')
  .on('resize', onResize)
  .on('data', onData);

var dataGen = function() {
  return d3.range(1000).map(function(i) {
    return {
      size: i,
      x: Math.random(),
      y: Math.random()
    }
  });
};

chart.resizeToFitContainer();
chart.data(dataGen());
window.setInterval(function() {chart.data(dataGen());}, 1000);
</script>
</body>
</html>

thumbnail.png