Circular Grid Chart

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.js"></script>
<script src="//rawgit.com/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//gka.github.io/chroma.js/vendor/chroma-js/chroma.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 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>

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;
}

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()
       ...