Albers for Brazil d3 Proj

This is a world map in Albers projection w/ the center of the parallels at 11.5,-38 I think that means the cone like projection thing intersects the earth at these lats.

One thing I couldn't figure out was how to fill the background of just the projected data blue. Oh well I think I want to hightlight some of the cities where they'll be playing the world cup now....

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

/* CSS goes here. */
        .coun { fill: purple;
        opacity:.6 }

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

</style>
    <body>

d3.select('body').append('text').text('this ws gonna done be a brazil map ')

var height = 500;
            var width = 600;

var projection = d3.geo.albers()
              .center([-54,-8.4])
              .parallels( [11.5,-38])
              .scale(70)
              .rotate([0,0,-9])
              .translate([width/2-160,150])

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.append('path')
                .datum(topojson.feature(world,world.objects.countries110))
                .attr('d',path)
                .attr('class','coun');

svg.append('circle')
          .attr('cx',function(){
            //need to give both coordinates w/ the projeciton method cause it needs 2 to work.
            return projection([-54,-8.4])[0]
          })
          .attr('cy',function(){
            return projection([-54,-8.4])[1]
          })
          .attr('r', 5)
          .style('fill', 'red')
          .style('opacity',1)

d3.selectAll('path')
  .on('click', function(d){
    console.log(projection([d.lon,d.lat])[0]);
  })

})

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