D3 Kit and Voronoi and Kodama

by dirtyd77

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/gka/d3-jetpack/master/d3-jetpack.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//darkmarmot.github.io/kodama/js/kodama.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
           <div class="panel panel-default">
               <div class="panel-body">
                   <div id="chart"></div>
               </div>
           </div>
            
        </div>
    </div>
</div>

CSS

.container-fluid{
  margin-top: 20px;
}
.voronoi {
  fill: none;
  stroke: gray;
  pointer-events: all;
}

.voronoi:hover{
  fill: yellow;
}

CoffeeScript

kill = [[10, 10], [10, 40], [40, 40], [40, 10], [25, 25]]
data = d3.range(5).map (i) ->
  x: kill[i][0], y: kill[i][1], r: 4

console.log JSON.stringify(data)
defaults = (width, height) ->
  margin: {top: 10, bottom: 10, left: 10, right: 10}
  initialHeight: height
  initialWidth: width
    
constructor = (skeleton) ->
  S = 
    x: d3.scale.linear()
    y: d3.scale.linear()
  A = 
    x: (d) -> d.x
    y: (d) -> d.y
    r: (d) -> d.r
  L = skeleton.getLayerOrganizer()
  L.create(['circles', 'polygons'])
  visualize = ->
    W_ = skeleton.getInnerWidth()
    H_ = skeleton.getInnerHeight()
    data = skeleton.data()
    S.x.range([0, W_]).domain d3.extent(data, A.x)
    S.y.range([H_, 0]).domain d3.extent(data, A.y)
    
    circles = L.get('circles').selectAll("circle").data(data)
    circles.enter().append("circle")
    circles.attr
      cx: (d) -> S.x A.x(d)
      cy: (d) -> S.y A.y(d)
      r : (d) -> A.r(d)
      fill: "steelblue"
        
    voronoi = d3.geom.voronoi()
      .x((d) -> S.x A.x(d))
      .y((d) -> S.y A.y(d))
      .clipExtent([[0, 0], [W_, H_]])
       
    console.log voronoi(data)
    polygons = L.get('polygons')
      .selectAll("path.voronoi")
      .data(voronoi(data))
    polygons.enter().append("path.voronoi")
    polygons.attr
      d: (d, i) -> "M" + d.join("L") + "Z"    
        
  skeleton
    .resizeToFitContainer("width")
    .autoResize("width")
    .on("data", visualize)
    .on("resize", visualize)
 
  
scatterPlot = d3Kit.factory.createChart(
 defaults(600, 300), [], constructor
)

new scatterPlot("#chart")
  .data(data)