D3 Kit Experiments

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.js"></script>
<script src="//rawgit.com/Caged/d3-tip/master/index.js"></script>
<link rel="stylesheet" href="//rawgit.com/Caged/d3-tip/master/examples/example-styles.css">
<div id="chart"></div>

CSS

body {
  font: 10px sans-serif;
}

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

JavaScript

// Generate random data
bubbles = d3.range(100).map(function(i){return {
    x: Math.random()*100,
    y: Math.random()*100,
    r: Math.random()*5 + 3
}})



// Create visualization
var skeleton = new d3Kit.Skeleton('#chart',
  {
    margin: {top: 60, right: 60, bottom: 60, left: 60},
    initialWidth: 800,
    initialHeight: 460
  },
  ['bubbleClick']
);

var layers = skeleton.getLayerOrganizer();
var dispatch = skeleton.getDispatcher();

layers.create(['content', 'x-axis', 'y-axis']);

// Create Scales
var color = d3.scale.category10();

var x = d3.scale.linear()
  //.range([0, skeleton.getInnerWidth()]);

var y = d3.scale.linear()
  //.range([0, skeleton.getInnerHeight()]);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient('bottom');

var yAxis = d3.svg.axis()
  .scale(y)
  .orient('left');

var visualize = d3Kit.helper.debounce(function(){
  if(!skeleton.hasData()){
    d3Kit.helper.removeAllChildren(layers.get('content'));
    return;
  }
  var data = skeleton.data();

  x.domain(d3.extent(data, function(d){return d.x;}))
    .range([0, skeleton.getInnerWidth()]);
  y.domain(d3.extent(data, function(d){return d.y;}))
    .range([skeleton.getInnerHeight(), 0]);

  layers.get('x-axis')
    .attr('transform', 'translate(0,' + skeleton.getInnerHeight() + ')')
    .call(xAxis);

  layers.get('y-axis')
    .call(yAxis);

  var selection = layers.get('content').selectAll('circle')
    .data(data);

  selection.exit().remove();

  selection.enter().append('circle')
    .attr('cx', function(d){return x(d.x);})
    .attr('cy', function(d){return y(d.y);})
    .on('click', dispatch.bubbleClick);

  selection
    .attr('cx', function(d){return x(d.x);})
    .attr('cy', function(d){return y(d.y);})
    .attr('r', function(d){return d.r;})
    .style('fill', function(d, i){return color(i);});

}, 10);

skeleton
  .autoResize('width')
  .on('resize', visualize)
  .on('data', visualize);

skeleton
  // handle bubbleClick event
  .on('bubbleClick', function(d){...