mpmckenna8/amaR.geojson

## readme.md

      
    Raw
  

              readme.md
            
          
    This map shows the approximate location of the cities in which the games of the 2014 World Cup hosted by Brazil will be played.
To see the name of the city click on one of the icons on the map.
The map data is all from Natural Earth and the icons from the Noun Project.
It was made with the intent of showing and learning how to do a few different simple geo d3.js things I couldn't find good examples of like:
-adding icons in png and svg.
-adding another geojon layer on my topojson jam.
-Some other stuff I can't think of.. let me know if it helped you in some way
Add some attribution for noun project icons.
Creative Commons – Attribution (CC BY 3.0)
Soccer Ball designed by Hernan D. Schlosman from the Noun Project
World Cup trophy by Iain Hector from The Noun Project
http://thenounproject.com/term/trophy/51440/
http://thenounproject.com/term/soccer-ball/10684/ Designed by Mark Wehrhahn also might have been used
http://creativecommons.org/licenses/by/3.0/us/legalcode

  
## amaR.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              amaR.geojson
            
          
      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;
}

.texto{
  font-size:10px;
}

.pico{
  height:19;
  width:20;
}
        /* 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
  }

  .chams{
    height:100;
    width:100;
  }

  .rivs{
    stroke:#c6dbef;
  stroke-width:2.5;
  fill:none;
  //opacity:.5;
  }

  .keyer{
    position:absolute;
    background:#d9d9d9;
    height:120px;
  }

  .troph{
    position:absolute;
    margin-top:-20px;
  }

        </style>
    <body>

<div class='keyer'></div>

        <script src="http://d3js.org/d3.v3.js"></script>
        <script src="http://d3js.org/topojson.v1.js"></script>
        <script>
        //map data stored in gist fcb2c2306c2bf249b719
/*
our list of brazilian world cup cities
grounds:   # add 12 stadiums/grounds
- maracana            # Rio de Janeiro, RJ
- nacionaldebrasilia  # Brasília, DF
- corinthians         # São Paulo, SP
- castelao            # Fortaleza, CE
- mineirao            # Belo Horizonte, MG
- fontenova           # Salvador, BA
- pantanal            # Cuiabá, MT
- amazonia            # Manaus, AM
- dasdunas            # Natal, RN
- beirario            # Porto Alegre, RS
- pernambuco          # Recife, PE
- dabaixada           # Curitiba, PR

from futbolDB
OpenFutbol Github Org

*/


            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.select('path')        .append('g')

  var somewor = 'click on an icon';


d3.json('/mpmckenna8/raw/fcb2c2306c2bf249b719/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'})


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);
  })


d3.json('amaR.geojson',function(err,river){

  svg.append('path')
//  .append('g')
    .datum(river)
    .attr('d',path)
    .attr('class', function(d){
      return 'rivs'
    })


    var citi = topojson.feature(world,world.objects.brazilCit).features

    svg.selectAll('.shadows')
      .data(citi)
      .enter()
      .append('circle')
      .attr('d',path)
      .attr('class', 'shadows')
      .attr('r',4)
      .attr('cx',2)
      .attr('cy',2)
      .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
      .attr('opacity',.3)
      .attr('fill', '#fad959')
    //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('image')
      .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) + ")"; })


    //this is where the river was


    var bigCit = 0;

    d3.selectAll('.city')
    .filter(function(d,i){
      console.log(d.properties)
      var namer = d.properties.name;
      return namer == 'Fortaleza' || namer == 'Brasilia'|| namer =='Rio de Janeiro'
      || namer == 'Sao Paulo' || namer == 'Belo Horizonte' || namer == 'Salvador'
      || namer == 'Cuiaba'  || namer == 'Manaus' ||  (namer == 'Natal' && d.properties.pop > 1000000)  || namer == 'Porto Alegre'
      || namer == 'Recife' || namer == 'Curitiba'
    })
    .attr('xlink:href',function(d){

      console.log(d.properties.name)
      if (d.properties.name =='Rio de Janeiro'){return '/mpmckenna8/raw/b87df1c44243aa1575cb/icon_51440.svg'}
      else{
    return ('/mpmckenna8/raw/b87df1c44243aa1575cb/icon_10684.svg')}})

    .attr('height', function(d){
      return '19'
    })
    .attr('width', '29')

    // while adding an image to an svg these are the coordinates i think of the top left
    .attr('x', '-14.5')
    .attr('y', '-9.5')
    .on('click', function(d){
      console.log(d.properties.name)
      d3.selectAll('.texto')
        .text(d.properties.name);


    })
    .attr('class', function(d){
      if(d.properties.name == 'Rio de Janeiro'){
        return 'chams'
      }
      else{
      return 'pico'}
    })


d3.select('.chams')
.attr('height',40)
.attr('width', 40)
.attr('y',-20)

d3.selectAll('.outer')
  .append('circle')
  .attr('r',5)
  .attr('cx',0)
  .attr('cy',0)
  .attr('fill','yellow')

console.log(bigCit)


})


            })


// console.log(projection([-54,-8.4]))

d3.select('.keyer')
.style('margin-left', '415px')
.style('margin-top', '20px')

.append('html')
.html('<p>World Cup 2014</p><p>Brazil<img src=\'trophy.png\' class=\'troph\'/></p><p class=\'texto\'>'+somewor+'</p>')


// to add the image in the html element <img src=\'./WCtrophy\/trophy.png\' />

            </script>
    </body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## trophy.png

      
    Raw
  

              trophy.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	svg{
	background:#2379d5;
	}

	.texto{
	font-size:10px;
	}

	.pico{
	height:19;
	width:20;
	}
	/* 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
	}

	.chams{
	height:100;
	width:100;
	}

	.rivs{
	stroke:#c6dbef;
	stroke-width:2.5;
	fill:none;
	//opacity:.5;
	}

	.keyer{
	position:absolute;
	background:#d9d9d9;
	height:120px;
	}

	.troph{
	position:absolute;
	margin-top:-20px;
	}

	</style>
	<body>

	<div class='keyer'></div>

	<script src="http://d3js.org/d3.v3.js"></script>
	<script src="http://d3js.org/topojson.v1.js"></script>
	<script>
	//map data stored in gist fcb2c2306c2bf249b719
	/*
	our list of brazilian world cup cities
	grounds: # add 12 stadiums/grounds
	- maracana # Rio de Janeiro, RJ
	- nacionaldebrasilia # Brasília, DF
	- corinthians # São Paulo, SP
	- castelao # Fortaleza, CE
	- mineirao # Belo Horizonte, MG
	- fontenova # Salvador, BA
	- pantanal # Cuiabá, MT
	- amazonia # Manaus, AM
	- dasdunas # Natal, RN
	- beirario # Porto Alegre, RS
	- pernambuco # Recife, PE
	- dabaixada # Curitiba, PR

	from futbolDB
	OpenFutbol Github Org

	*/


	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.select('path') .append('g')

	var somewor = 'click on an icon';



	d3.json('/mpmckenna8/raw/fcb2c2306c2bf249b719/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'})




	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);
	})


	d3.json('amaR.geojson',function(err,river){

	svg.append('path')
	// .append('g')
	.datum(river)
	.attr('d',path)
	.attr('class', function(d){
	return 'rivs'
	})


	var citi = topojson.feature(world,world.objects.brazilCit).features

	svg.selectAll('.shadows')
	.data(citi)
	.enter()
	.append('circle')
	.attr('d',path)
	.attr('class', 'shadows')
	.attr('r',4)
	.attr('cx',2)
	.attr('cy',2)
	.attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
	.attr('opacity',.3)
	.attr('fill', '#fad959')
	//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('image')
	.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) + ")"; })


	//this is where the river was



	var bigCit = 0;

	d3.selectAll('.city')
	.filter(function(d,i){
	console.log(d.properties)
	var namer = d.properties.name;
	return namer == 'Fortaleza' \|\| namer == 'Brasilia'\|\| namer =='Rio de Janeiro'
	\|\| namer == 'Sao Paulo' \|\| namer == 'Belo Horizonte' \|\| namer == 'Salvador'
	\|\| namer == 'Cuiaba' \|\| namer == 'Manaus' \|\| (namer == 'Natal' && d.properties.pop > 1000000) \|\| namer == 'Porto Alegre'
	\|\| namer == 'Recife' \|\| namer == 'Curitiba'
	})
	.attr('xlink:href',function(d){

	console.log(d.properties.name)
	if (d.properties.name =='Rio de Janeiro'){return '/mpmckenna8/raw/b87df1c44243aa1575cb/icon_51440.svg'}
	else{
	return ('/mpmckenna8/raw/b87df1c44243aa1575cb/icon_10684.svg')}})

	.attr('height', function(d){
	return '19'
	})
	.attr('width', '29')

	// while adding an image to an svg these are the coordinates i think of the top left
	.attr('x', '-14.5')
	.attr('y', '-9.5')
	.on('click', function(d){
	console.log(d.properties.name)
	d3.selectAll('.texto')
	.text(d.properties.name);


	})
	.attr('class', function(d){
	if(d.properties.name == 'Rio de Janeiro'){
	return 'chams'
	}
	else{
	return 'pico'}
	})


	d3.select('.chams')
	.attr('height',40)
	.attr('width', 40)
	.attr('y',-20)

	d3.selectAll('.outer')
	.append('circle')
	.attr('r',5)
	.attr('cx',0)
	.attr('cy',0)
	.attr('fill','yellow')

	console.log(bigCit)


	})




	})





	// console.log(projection([-54,-8.4]))

	d3.select('.keyer')
	.style('margin-left', '415px')
	.style('margin-top', '20px')

	.append('html')
	.html('<p>World Cup 2014</p><p>Brazil<img src=\'trophy.png\' class=\'troph\'/></p><p class=\'texto\'>'+somewor+'</p>')


	// to add the image in the html element <img src=\'./WCtrophy\/trophy.png\' />

	</script>
	</body>