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">
<script src="//rawgit.com/DarkMarmot/kodama/master/kodama.js"></script>
<div class="container-fluid" id="main">
    <div class="row">
        <div class="col-xs-10 col-md-4">
            <div class="panel panel-default">
                <div class="panel-body">
                  <div class="row">
                   <div class="col-xs-4">
                     <img src="http://api.randomuser.me/0.2/portraits/men/20.jpg" alt="" class="img-circle" width=100>
                   </div> 
                   <div class="col-xs-8">
                     <span class="statistic pull-right">
                         4444
                     </span>
                   </div>
                   </div>
                 
                  <div class="row">
                      <div class="col-xs-12">
                         <span class="measure">
                             Team Members
                         </span> 
                      </div>
                  </div>
                  </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-4">
            <div id="chart"></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;
}
span.statistic{
 font-size: 80px;
}
span.measure{
  text-transform: uppercase;
  font-size: 20px;
  opacity: 0.5;
}

.d3-tip {
   background: none;
   color: black;
   padding: 3px;
   font-weight: normal;
   font-size: 11px;
}
.d3-tip.n:after {
  content: "";
}

CoffeeScript

y = d3.range(10).map (i) -> String.fromCharCode(i + 65)
x = d3.range(1965, 2015, 1)

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()
    
if_else = (expr, if_, else_) ->
  if (expr) then if_ else else_
 
verticalBarsConstructor = (skeleton) ->
  layers = skeleton.getLayerOrganizer()
  S =
    x: d3.scale.ordinal()
    y: d3.scale.ordinal()
    c: d3.scale.category20()
  A =
    x: (d) -> d.x
    y: (d) -> d.y
    c: (d) -> d.c
  layers.create(['x-axis', 'y-axis', 'bars'])
  visualize = ->
    data = skeleton.data()
    opts = skeleton.options()
    H = skeleton.getInnerHeight()
    W = skeleton.getInnerWidth()
    S.x.rangeRoundBands([0, W]).domain(d3.uniq(data, A.x))
    S.y.rangeRoundBands([0, H], 0.4).domain(d3.uniq(data, A.y))
    
   

    bars = layers.get('bars').selectAll('rect.bar').data(data)
    bars.enter().append("rect.bar")
    bars.attr
      x: (d) -> S.x A.x(d)
      y: (d) -> S.y A.y(d)
      height: S.y.rangeBand()
      width: S.x.rangeBand()
      stroke: 'white' 
      fill: (d) -> if_else(A.c(d) < 0.7, 'white', S.c(d.y))
            
    tooltipFn = (d) -> 
      "(#{d.x}, #{d.y})"
    bars
      .filter((d) -> A.c(d) > 0.7)
      .call attachTooltip, {html: tooltipFn}
            
    backbars = layers.get('bars').selectAll('rect.back')
      .data(d3.uniq(data, A.y))
    backbars.enter().append("rect.back")
    backbars.attr
      x: 0
      y: (d) -> S.y(d)
      height: S.y.rangeBand()
      width: W
      fill: 'gray'
      opacity: 0.1
      "pointer-events": "none";

     xAxis = d3.svg.axis()
        .scale(S.x)
        .tickValues(S.x.domain().filter (d, i) -> !(i % 15))
        .orient('bottom')
        
     layers.get("x-axis")
        .translate([0, H])
        .call(xAxis)
        
     yAxis = d3.svg.axis()
        .scale(S.y)
        .orient('left')
        
     layers.get("y-axis")
        .call(yAxis)
   
  skeleton
   ...