mpmckenna8/brazilWor.json

## readme.md

      
    Raw
  

              readme.md
            
          
    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.

  
## brazilWor.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              brazilWor.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## 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="http://d3js.org/d3.v3.js"></script>
        <script src="http://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>

## thumbnail.png

      
    Raw
  

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