D3 Grid Experiments

by bekim

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/interactivethings/d3-grid/master/d3-grid.js"></script>
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="//rawgit.com/1wheel/d3-starterkit/master/d3-starterkit.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/paper/bootstrap.min.css">
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Pictogram</div>
    <div class="panel-body">
      <div id="buttons1"></div>
      <div id="buttons2"></div>
      <div id="grid"></div>
    </div>
    <div class="panel-footer">
      <small>This is a demo of a d3 plugin for isotypes</small>
    </div>
  </div>
</div>

CSS

svg text {
  text-anchor: middle;
  alignment-baseline: before-edge;
}

.container {
  margin-top: 20px;
}

.btn-group {
  margin-right: 20px;
}

.d3-tip {
  line-height: 1;
  font-weight: normal;
  font-size: 14px;
  padding: 8px;
  /* 12px */
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  pointer-events: none;
  z-index: 4;
}

.d3-tip.light {
  padding: 10px;
  background-color: white;
  color: black;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}

/* Creates a small triangle extender for the tooltip */

.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  pointer-events: none;
}

.d3-tip.light:after {
  color: #fff;
}

/* Northward tooltips */

.d3-tip.n:after {
  content: "\25BC";
  margin: -2px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}

/* Eastward tooltips */

.d3-tip.e:after {
  content: "\25C0";
  margin: -4px 0 0 0;
  top: 50%;
  left: -8px;
}

/* Southward tooltips */

.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -5px;
  left: 0;
  text-align: center;
}

/* Westward tooltips */

.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}

#annotation {
  margin: 50px;
  padding: 15px;
  min-width: 100px;
  min-height: 50px;
  background: whitesmoke;
}

.d3-tip text {
  font-family: "Helvetica";
  font-size: 12px;
  text-anchor: middle;
  alignment-baseline: middle;
  pointer-events: none;
}

.legend rect {
  stroke: none;
}

CoffeeScript

# Font awesome icons
icons = [{"name":"Glass","id":"glass","unicode":"f000","created":1,"filter":["martini","drink","bar","alcohol","liquor"],"categories":"Web Application Icons"},{"name":"Music","id":"music","unicode":"f001","created":1,"filter":["note","sound"],"categories":"Web Application Icons"},{"name":"Search","id":"search","unicode":"f002","created":1,"filter":["magnify","zoom","enlarge","bigger"],"categories":"Web Application Icons"},{"name":"Envelope Outlined","id":"envelope-o","unicode":"f003","created":1,"filter":["email","support","e-mail","letter","mail","notification"],"categories":"Web Application Icons"},{"name":"Heart","id":"heart","unicode":"f004","created":1,"filter":["love","like","favorite"],"categories":["Web Application Icons","Medical Icons"]},{"name":"Star","id":"star","unicode":"f005","created":1,"filter":["award","achievement","night","rating","score"],"categories":"Web Application Icons"},{"name":"Star Outlined","id":"star-o","unicode":"f006","created":1,"filter":["award","achievement","night","rating","score"],"categories":"Web Application Icons"},{"name":"User","id":"user","unicode":"f007","created":1,"filter":["person","man","head","profile"],"categories":"Web Application Icons"},{"name":"Film","id":"film","unicode":"f008","created":1,"filter":"movie","categories":"Web Application Icons"},{"name":"th-large","id":"th-large","unicode":"f009","created":1,"filter":["blocks","squares","boxes"],"categories":"Text Editor Icons"},{"name":"th","id":"th","unicode":"f00a","created":1,"filter":["blocks","squares","boxes"],"categories":"Text Editor Icons"},{"name":"th-list","id":"th-list","unicode":"f00b","created":1,"filter":["ul","ol","checklist","finished","completed","done","todo"],"categories":"Text Editor Icons"}]





icons2 = d3.nest()
  .key((d) -> d.id)
  .map(icons)

createAccessors = (visExport) ->
  for n of visExport.opts
    continue  unless visExport.opts.hasOwnProperty(n)
    visExport[n] = ((n) ->
      (v) ->
        (if...