phoorichet/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A map of Thailand displayed by ampher.

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

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

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

.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) {
    return "<strong>Province:</strong> <span style='color:red'>" +
            d.properties.NAME_1 +
            "</span>";
  })

svg.call(tip);

d3.json("/phoorichet/raw/2abc96398d72fcf54ba7/tha_amphers.json", function(error, tha) {
  if (error) return console.error(error);

  console.log(tha);

  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.subunits);
  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);

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

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

  function clicked(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>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

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

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

	.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) {
	return "<strong>Province:</strong> <span style='color:red'>" +
	d.properties.NAME_1 +
	"</span>";
	})

	svg.call(tip);

	d3.json("/phoorichet/raw/2abc96398d72fcf54ba7/tha_amphers.json", function(error, tha) {
	if (error) return console.error(error);

	console.log(tha);

	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.subunits);
	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);

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

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

	function clicked(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>