Datamaps Experiments

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="//datamaps.github.io/scripts/datamaps.usa.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="//d3js.org/d3.hexbin.v0.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="//rawgit.com/DarkMarmot/kodama/master/kodama.js"></script>
 <div class="row">
        <div class="col s12 m12">
          <div class="card">
            <div class="card-image">
              <span class="card-title" style='color:black;'></span>
               <div id="container"></div> 
            </div>
            <div class="card-content">
              <p>This is a demo of a hexbin plugin for datamaps.</p>
            </div>
            <!-- <div class="card-action">
              <a href="#" id='update'>Update</a>
              <a href='#'>This is a link</a>
            </div> -->
          </div>
        </div>
 </div>

CSS

#container {
  width: 100%;
  height: 200px;
  margin: auto auto;
}

.container {
   margin-top: 40px;
}

.datamaps-subunit.active {
   fill: orange !important;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid black;
    margin-top: -35px;
    margin-left: 40px;
}
path.hexagon:hover{
  stroke: black;
  "stroke-width": 20px;
  z-index: 5;
}

CoffeeScript

###
d3.mui = d3.mui || {}
d3.mui.card = -> 
  exports = (selection) ->
    selection.each (data) ->
      card = d3.selectAll(".card").data([{}])
      cardEnter = card.enter().append("div.card")
      cardEnter.append("div.container").append("span.card-title")
      cardEnter.append("div.card-content")
      cardEnter.append("div.card-action")
        
      card.select("
###

defaultThemeConfig = 
  frame: 
    padding: "6px",
    #background: 'linear-gradient(to top, rgb(16, 74, 105) 0%, rgb(14, 96, 125) 90%)',
    background: "black",
    'font-family': '"Helvetica Neue", Helvetica, Arial, sans-serif',
    #'border': '1px solid rgb(57, 208, 204)',
    color: 'rgb(245,240,220)',
    'border-radius': '4px',
    'font-size': '12px',
    'box-shadow': '0px 1px 3px rgba(0,20,40,.5)'
    title: {'text-align': 'center', 'padding': '4px'},
    item_title: {'text-align': 'right', 'color': 'rgb(220,200,120)'},
    item_value: {'padding': '1px 2px 1px 10px', 'color': 'rgb(234, 224, 184)'}
    options: null

d3.kodama.themeRegistry('kodama1', defaultThemeConfig)

attachKodamaTip = (sel) ->
  makeTipData = (d) ->
    title: "No. of Stores #{d.length}"
    theme: "kodama1"
    distance: 20
  sel.call d3.kodama.tooltip().format(makeTipData)
  d3.select("div[name='kodamaTip']")
    .append("div.arrow-down")
    


attachTooltip = (sel) ->
  tip = d3.tip()
    .attr('class', 'd3-tip')
    .html (d) -> d.streetaddr || d.length
    
    d3.select(sel.node().parentNode).call(tip)
    sel.on "mouseover", tip.show
    sel.on "mouseout", tip.hide
    sel
    


  	
 
zoom_datamap = (datamap) ->
  datamap.svg.call d3.behavior.zoom().on "zoom", ->
    datamap.svg.selectAll("g").attr
       transform: "translate(#{d3.event.translate}) scale(#{d3.event.scale})"
    
map = new Datamap
  element: document.getElementById('container')
  responsive: true
  scope: 'usa'
  fills:
    defaultFill: "#ddd"
  geographyConfig:
    popupOnHover: false
    highlightOnHover: false
  done: (datamap)...