D3 Examples - D3Kit Test

xxxxxxxxxx
 
<!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="https://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>
​
    