d3 data() to load brazil w/ cities map by mpmckenna8

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.

index.html

<!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>

        <script src="//d3js.org/d3.v3.js"></script>
        <script src="//d3js.org/topojson.v1.js"></script>
        <script>
/*
our list of brazilian world cup cities

*/


            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>