Add Detail on Click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

</style>	
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>	
</head>
<body>

var width = 960,
	height = 500;

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

var projection = d3.geoAlbers()
	.rotate([-36,0])
	.center([0,31.25])
	.scale(6500)
	.translate([width/2,height/2])
;

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

var g1 = svg.append("g");
var g2 = svg.append('g');

d3.json("world.json", function(error, world) {
	var land = g1.insert("path", ".land")
		.datum(topojson.feature(world, world.objects.land))
		.attr("class", "land")
		.attr("d", path);

g1.insert("path", ".boundary")
		.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
		.attr("class", "boundary")
		.attr("d", path);
	
 });   
	
		
 d3.json("jordan.json", function(error, jordan) {
      
	
	  
	var areas = g2.selectAll('.area')
		.data(jordan.features)
		.enter()
		.append('path')
		.attr('class','area')
		.attr('d',path)
		.on('click',click);
	
	// Draw primary city labels:
	g2.selectAll(".primary-city")
	  .data(jordan.features)
	  .enter()
	  .filter(function(d) { return d.properties.name_1 == d.properties.name_2 })
	  .append("text")
	  .attr("class", "primary-city")
	  .attr("transform", function(d) { return 'translate('+path.centroid(d)+')'; })
	  .attr('y',-10)
	  .attr('text-anchor', 'middle')
	  .text (function (d) { console.log(d); return d.properties.name_2; });   
	  
	g2.selectAll(".secondary-city")
	  .data(jordan.features)
	  .enter()
	  .filter(function(d) { return d.properties.name_1 != d.properties.name_2 })
	  .append("text")
	  .attr("class", "secondary-city")
	  .attr("transform", function(d) { return 'translate('+path.centroid(d)+')'; })
	  .attr('y',-10)
	  .attr('opacity',0)
	  .attr('pointer-events','none')
	  .attr('text-anchor', 'middle')
	  .text (function (d) { console.log(d); return d.properties.name_2; });   
	
 });

</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-geo-projection.v1.min.js

https://d3js.org/topojson.v1.min.js