Albers for Brazil d3 Proj by mpmckenna8

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….

index.html

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

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

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


        </style>
    <body>

        <script src="//d3js.org/d3.v3.js"></script>
        <script src="//d3js.org/topojson.v1.js"></script>
        <script>

            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>