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> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script src="http://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> |
