index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Circular Grid Chart - jsFiddle demo by ramnathv</title>
  <script type="text/javascript" src="//coffeescript.org/extras/coffee-script.js"></script>
  <script type='text/javascript' src="//d3js.org/d3.v3.min.js"></script>
  <script type='text/javascript' src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
  <script type='text/javascript' src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.js"></script>
  <script type='text/javascript' src="//rawgit.com/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.js"></script>
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script type='text/javascript' src="//gka.github.io/chroma.js/vendor/chroma-js/chroma.min.js"></script>
  <script type='text/javascript' src="//rawgit.com/Caged/d3-tip/master/index.js"></script>
  <link rel="stylesheet" type="text/css" href="//rawgit.com/Caged/d3-tip/master/examples/example-styles.css">
  <style type='text/css'>
    #main{
     margin-top: 20px;
   }
  .x-axis-layer path,
  .x-axis-layer line{
    fill: none;
  }
  .y-axis-layer path,
  .y-axis-layer line{
    fill: none;
  }
  svg text{
    font-size: 10px;
  }
  </style>
</head>
<body>
  <div class="container-fluid" id="main">
    <div class="row">
        <div class="col-xs-12 col-md-4">
            <div id="chart"></div>
        </div>
        <div class="col-xs-12 col-md-4">
          <div class="col-xs-6 col-md-4">
          <div class="thumbnail">
            <img id='avatar1' src="https://randomuser.me/api/portraits/thumb/men/1.jpg" class="img-circle">
           </div>
              </div>
           <div class="col-xs-6 col-md-4">
           <div class="thumbnail">
             <img id='avatar2' src="https://randomuser.me/api/portraits/thumb/men/2.jpg" class="img-circle">
        </div>
               </div>
              </div>

    </div>
</div>
  <script type="text/coffeescript">


y = d3.range(20)
x = y

expand_grid = (x, y) ->
  d3.merge(x.map (x_) -> y.map (y_) -> {x: x_, y: y_})

data = expand_grid(x, y)
data.forEach (d) ->
  d.c = Math.random()

switch_avatar = (d) ->
  #d3.json "//randomuser.me/api/", (error, data) ->
  url = (x) ->
    "https://randomuser.me/api/portraits/thumb/men/#{x}.jpg"
  d3.select('#avatar1').attr('src', url(d.x))
  d3.select('#avatar2').attr('src', url(d.y))


circularGridConstructor = (skeleton) ->
  layers = skeleton.getLayerOrganizer()
  S =
    x: d3.scale.ordinal()
    y: d3.scale.ordinal()
    c: d3.scale.linear().range(["lightyellow", "orange"])
        .domain([0, 1])
        .interpolate(d3.interpolateHcl)
  A =
    x: (d) -> d.x
    y: (d) -> d.y
    c: (d) -> d.c
  layers.create(["hrect", "vrect", 'x-axis', 'y-axis', 'circles'])
  hrect = layers.get('hrect').append('rect.hrect')
  vrect = layers.get('vrect').append('rect.vrect')
  visualize = ->
    data = skeleton.data()
    opts = skeleton.options()
    H = skeleton.getInnerHeight()
    W = skeleton.getInnerWidth()
    W = d3.min([W, H])
    H = d3.min([W, H])
    S.x.rangeRoundBands([0, W]).domain(data.map(A.x), 0, 0.01)
    S.y.rangeRoundBands([0, H]).domain(data.map(A.y), 0, 0.01)

    circles = layers.get('circles').selectAll('circle').data(data)
    circles.enter().append('circle')
    circles.attr
      cx: (d) -> S.x(A.x(d)) - S.x.rangeBand()/2
      cy: (d) -> S.y(A.y(d)) - S.y.rangeBand()/2
      r: (d) -> S.x.rangeBand()/2
      fill: (d, i) -> S.c A.c(d)

    #circles.call attachTooltip, {html: (d) -> "(#{d.x}, #{d.y})"}
    highlight = (d) ->
      d3.select('.hrect').attr
        x: - S.x.rangeBand()/2
        y: S.y(A.y(d)) - S.y.rangeBand()
        height: S.y.rangeBand()
        width: S.x(A.x(d))
        fill: '#aaa'
        opacity: 0.9
      d3.select('.vrect').attr
        x: S.x(A.x(d)) - S.x.rangeBand()
        y: S.y(A.y(d)) - S.y.rangeBand()/2
        height: H - S.y(A.y(d)) - S.y.rangeBand()
        width: S.x.rangeBand()
        fill: '#ccc'
        opacity: 0.9

    tip = d3.tip().attr('class', 'd3-tip')
      .html (d) ->  "(#{d.x}, #{d.y})"
    #circles.call(tip)
    circles.on "mouseover", (d, i) ->
       #tip.show(d)
       switch_avatar(d)
       highlight(d)
       d3.select(@).attr
         stroke: "black"
         "stroke-width": 2

    circles.on "mouseout", (d, i) ->
      #tip.hide(d)
      circles.each -> d3.select(@).attr("stroke", "none")
      #d3.select('.hrect').attr('width', 0)
      #d3.select('.vrect').attr('width', 0)
    layers.get('circles').on "mouseout", ->
      d3.select('.hrect').attr('width', 0)
      d3.select('.vrect').attr('width', 0)

    xAxis = d3.svg.axis()
      .scale(S.x)
      .orient('bottom')
    H2 = H - S.y.rangeBand()
    layers.get('x-axis')
      .translate([-S.x.rangeBand(), H2])
      .call(xAxis)
    yAxis = d3.svg.axis()
      .scale(S.y)
      .orient('left')
    layers.get('y-axis')
      .translate([-S.x.rangeBand(), -S.y.rangeBand()])
      .call(yAxis)
  skeleton
    .resizeToFitContainer()
    .on("data", visualize)
    .on("resize", visualize)
    .autoResize(true)


renderCircularGrid= (el, x, width, height) ->
  circleGridChart = d3Kit.factory.createChart(
    x.defaults, [], circularGridConstructor
  )
  mychart = new circleGridChart('#' + el.id).data(x.data)

defaults =
  margin: {left: 50, right: 10, top: 30, bottom: 30}
  initialHeight: 400
  initialWidth: "auto"
  fontSize: 10

el = document.getElementById('chart')
x = {defaults: defaults, data: data}
renderCircularGrid(el, x)


</script>
</body>

</html>