D3 Examples - Add Detail on Click

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
​
    <style>
        svg {   
            background: #9ecae1;
            opacity: 0.5;
        }
        
        .boundary {
            fill:none;
            stroke: white;
            stroke-width: 0.5px;
        }
        
        .land {
            fill: #41ab5d;
            opacity: 0.5;
        }
                
        .area {
            fill: lightgreen;
            opacity: 1;
            stroke: darkgreen;
            stroke-width: 0.5px;
        }
        .primary-city{
            fill: black;
            stroke:black;
            opacity: 1;
            
        }
        .seconary-city{
            fill: black;
            stroke: black;
        }
​
​
        
    </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>
    
​
    <script type="text/javascript">
​
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; });   
    
 });   
​
 
 var clicked = false;
 
 function click() {
    clicked = !clicked;
    if (clicked == true) {
        g2.selectAll(".secondary-city")
            .transition()
            .attr('opacity',1)
            .duration(400); 
    }
    else {
        g2.selectAll(".secondary-city")
            .transition()
            .attr('opacity',0)
            .duration(400); 
    }
}
 
    
​
    
    </script>
</body>
    