index.html

## readme.md

      
        

          Raw
        
        
          
            
          
          
            
              readme.md
            
          
        
      
    
  
    Refer to gridmap-layout-thailand for more information, or read this article for the design process.

  

  

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body{
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
}

svg{
  margin-top: 5px;
  /*border: 1px solid #ccc;*/
}

text{
  font-weight: 300;
}

</style>
<body>

<p align="center">
  <svg></svg>
</div>

<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<!-- When import this way, the data is available as global variable "gridmapLayoutThailand" -->
<script src="https://rawgit.com/kristw/gridmap-layout-thailand/master/dist/gridmap-layout-thailand.min.js"></script>
<script>

var options = {
  rectWidth: 25,
  rectHeight: 25
};

// Define color scale
var color = d3.scale.quantize()
  .domain([1, 20])
  .range(['#b2ddf0', '#92bcd8', '#769cbf', '#5d7da7', '#46608f', '#334577', '#232d5f']);

var svg = d3.select('svg')
  .attr('width', 250)
  .attr('height', 450);

var sEnter = svg.append('g')
  .selectAll('g')
    .data(gridmapLayoutThailand)
  .enter().append('g')
    .attr('transform', function(d){return 'translate('+(d.x*options.rectWidth)+','+(d.y*options.rectHeight)+')';});

sEnter.append('rect')
  .attr('width', options.rectWidth)
  .attr('height', options.rectHeight)
  .attr('vector-effect', 'non-scaling-stroke')
  .style('opacity', 0.5)
  .style('stroke', '#aaa')
  .style('fill', function(d){return color(d.enName.length);});

sEnter.append('text')
  .attr('x', options.rectWidth/2)
  .attr('y', options.rectHeight/2 + 2)
  .style('text-anchor', 'middle')
  .text(function(d){return d.thAbbr;});

</script>