phoorichet/tha_adm0.html

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

/* CSS goes here. */
.subunit { fill: #dcd; }

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

/* JavaScript goes here. */
var width = 780,
    height = 900;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);


d3.json("tha-adm0.json", function(error, tha) {
  if (error) return console.error(error);

  console.log(tha);

  // var projection = d3.geo.mercator()
  //     .center([103, 12])
  //     .scale(2500)
  //     .translate([width / 2, height / 2]);

  var projection = d3.geo.albers()
    .center([0, 13.7])
    .rotate([-100.52, 0])
    .parallels([5, 21])
    .scale(3000)
    .translate([width / 2, height / 2]);

  var path = d3.geo.path()
      .projection(projection);

  var subunits = topojson.feature(tha, tha.objects.THA_adm0)

  // svg.append("path")
  //     .datum(subunits)
  //     .attr("d", path);


  svg.selectAll(".subunit")
      .data(subunits.features)
    .enter().append("path")
      .attr("class", function(d) {console.log(d); return "subunit " + d.id; })
      .attr("d", path);

});

</script>


## tha_adm0.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              tha_adm0.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## tha_adm1.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

/* CSS goes here. */
.subunit.Province { fill: #dcd; }
.subunit.Lake { fill: #fff; }
.subunit.Province.id27 { fill: #E80C96; }
.subunit.Province.id7 { fill: #790CE8; }


.subunit-boundary {
  fill: none;
  stroke: #777;
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
}

.subunit-boundary.IRL {
  stroke: #aaa;
}

.place {
  fill: blue;
}

.province-border {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.subunit.Province.active { fill: black ;}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* 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);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>

/* JavaScript goes here. */
var width = 780,
    height = 900;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    // console.log("+++++");
    // console.log(d);
    // console.log("-----");
    // d3.selectAll("path")
    //   .classed("active", true);
    return "<strong>Province:</strong> <span style='color:red'>" +
            d.properties.NAME_1 +
            "</span>";
  })

svg.call(tip);

d3.json("tha_adm1.json", function(error, tha) {
  if (error) return console.error(error);

  console.log(tha);

  // var projection = d3.geo.mercator()
  //     .center([103, 12])
  //     .scale(2500)
  //     .translate([width / 2, height / 2]);

  var projection = d3.geo.albers()
    .center([0, 13.7])
    .rotate([-100.52, 0])
    .parallels([5, 21])
    .scale(3000)
    .translate([width / 2, height / 2]);

  var path = d3.geo.path()
      .projection(projection)
      .pointRadius(2);

  var subunits = topojson.feature(tha, tha.objects.subunit_adm1);
  var places = topojson.feature(tha, tha.objects.places);

  svg.selectAll(".subunit")
      .data(subunits.features)
    .enter().append("path")
      .attr("class", function(d) { return "subunit " + d.properties.ENGTYPE_1 + " id" + d.properties.ID_1})
      .attr("d", path)
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)
      .on('click', clicked);
      // .on("mouseover", fade(1));
      // .on("mouseout",  fade(1));

  svg.append("path")
    .datum(places)
    .attr("d", path)
    .attr("class", "place");


  // svg.selectAll(".place-label")
  //     .data(topojson.feature(tha, tha.objects.places).features)
  //   .enter().append("text")
  //     .attr("class", "place-label")
  //     .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
  //     .attr("dy", ".15em")
  //     .text(function(d) { return d.properties.ADM1NAME; });

  // svg.selectAll(".place-label")
  //     .attr("x", function(d) { console.log(d); return d.geometry.coordinates[0] > 100.2 ? 6 : -100; })
  //     .style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; });


  var mesh = topojson.mesh(tha, tha.objects.subunit_adm1, function(a, b) { return a!== b; });
  // console.log(mesh);
  svg.append("path")
      .datum(mesh)
      .attr("d", path)
      .attr("class", "province-border");


  // Returns an event handler for fading a given chord group.
  function fade(opacity) {
    return function() {
      // console.log(this);
      var div = d3.select(this);
      console.log(div);
      d3.select(this)
        // .transition().duration(200).style("opacity", 0);
        .transition().duration(200).attr("class", "active");
    };
  }
  function fadeout(opacity) {
    return function() {
      // console.log(this);
      var div = d3.select(this);
      console.log(div);
      d3.select(this)
        // .transition().duration(200).style("opacity", 0);
        .transition().duration(200).attr("active", "active");
    };
  }

  function clicked(d) {
    // console.log(d);
    var name = d.properties.NAME_1;
    var selected = d;
    console.log(name);
    console.log(d);
    svg.selectAll('.subunit')
      .classed('active', function(d) {  return selected === d; } );
  }

});

</script>


## tha_adm1.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              tha_adm1.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## tha_adm2.json

      
    Raw
  

              tha_adm2.json
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
        
    
## tha_adm3.json

      
    Raw
  

              tha_adm3.json
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	/* CSS goes here. */
	.subunit { fill: #dcd; }

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>

	/* JavaScript goes here. */
	var width = 780,
	height = 900;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);


	d3.json("tha-adm0.json", function(error, tha) {
	if (error) return console.error(error);

	console.log(tha);

	// var projection = d3.geo.mercator()
	// .center([103, 12])
	// .scale(2500)
	// .translate([width / 2, height / 2]);

	var projection = d3.geo.albers()
	.center([0, 13.7])
	.rotate([-100.52, 0])
	.parallels([5, 21])
	.scale(3000)
	.translate([width / 2, height / 2]);

	var path = d3.geo.path()
	.projection(projection);

	var subunits = topojson.feature(tha, tha.objects.THA_adm0)

	// svg.append("path")
	// .datum(subunits)
	// .attr("d", path);


	svg.selectAll(".subunit")
	.data(subunits.features)
	.enter().append("path")
	.attr("class", function(d) {console.log(d); return "subunit " + d.id; })
	.attr("d", path);

	});

	</script>