d3 data() to load brazil w/ cities map

This map uses data() to load the data and so I also use enter(). I didn't, however, use exit(). Not sure if this is bad form or not really necessary, or could me necessary if I was doing some other kind of data loading....

Anyways if you click on a given city (the circles) the name should be printed to your javascript console. Also the bigger circles are cities in Brazil w/ more than 100,000 people. Looks like there are a lot more big cities in Brazil than I had thought.... 123 according to the population stats w/ Natural Earth's populated places dataset.

I think I also want the amazon in my next map so I have to get to making that dataset.

<!DOCTYPE html>
<meta charset="utf-8">
    <style>
svg{
  background:#2379d5;
}

/* CSS goes here. */
        .coun { fill: #27ae60;
        opacity:.6;
      stroke:black;
    stroke-width:.8; }

.grat{
          stroke:grey;
          stroke-width:1px
        }

.outside{

fill: grey;
    opacity:.6;
  stroke:black;
stroke-width:.8;

}

.city{
    fill:#fad959;
    r:10;
  }

.outer{
    fill:black
  }
  .city:hover{
    fill:blue
  }
        </style>
    <body>

var height = 475;
            var width = 600;

var projection = d3.geo.albers()
              .center([-54,-8.4])
              .parallels( [11.5,-38])
              .scale(550)
              //rotating is long lat and around the origin
              .rotate([55,-5,-5])
              .translate([width/2 - 450,height/2 -40])

var graticule = d3.geo.graticule();

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

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

svg.append('path')
              .datum(graticule)
              .attr('class', "grat")
              .attr('d',path)
              .attr('fill','none')

d3.json('./brazilWor.json', function(err, world){
              if(err){console.log(err)}

svg.selectAll('path')
                .data(topojson.feature(world,world.objects.countries110).features).enter().append('path')
                .attr('d',path)
                .on('hover',function(){
              //    console.log(this)
                  return this.style('fill','purple');
                })
                .attr('class',function(d,i){
              //    console.log(i + 'this is for the countries class');
                  return 'coun'});

var citi = topojson.feature(world,world.objects.brazilCit).features

//console.log(citi)
//adding stuff all at once w/ datum like w/ graticule everthing it going to be the same.
// So the anonymous function in .attr('class',funct) is worthless more or less because it's all just one big thing.
svg.selectAll('.city')
  .data(citi)
  .enter()
  .append('circle')
  .attr('d',path)
  .attr('class',function(d){

//  console.log(d.properties.coun)
    if(d.properties.coun ==="BRA"){

return 'city'
  }
  else{
    return 'outer'

}
  })
  .attr('r', 1)
            .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })

var bigCit = 0;

d3.selectAll('.city')
.attr('r',function(d){
//  console.log(d.properties)

if(d.properties.pop > 100000){
    bigCit++;
    console.log(d.properties)
  return 4}
  else{return 1.5}
})
.on('click', function(d){
  console.log(d.properties.name)
})

console.log(bigCit)

d3.selectAll('.coun')
.attr('class',function(d,i){
//  console.log(i);
// The country data doesn't have any properties so I used the index # for brazil since it's the only thing I was going to change.
if(i===21){
  return 'coun'
}
else{
  return 'outside'
}
})
  .on('click', function(d,i){
    console.log(i);
  })

})

// console.log(projection([-54,-8.4]))

</script>
    </body>

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://d3js.org/topojson.v1.js to a secure url

https://d3js.org/d3.v3.js

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