d3 .append('image') w/ some svg's from the Noun Project

Here's a map with the cities where the World Cup 2014 in Brazil are represented by icons from the noun project.

As of now no popups or labels b/c I'm too lazy (maybe soon once I decide what I want) but if you open up your javascript console and click on a icon it should print the city name.

Hope to see some good futbol.

Some of the stuff I hope to be using has the license and is from:

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

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

.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;
  }
        </style>
    <body>

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

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

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' || 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 'icon_51440.svg'}
  else{
return ('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)
})
.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)

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

//an example of just appending a random image into an svg element
// this helped me figure out when you use image or img https://jsfiddle.net/chrisJamesC/wnwfn/
/*
  d3.selectAll('svg')
  .append('image')
//  .attr('d',path)
  .attr('xlink:href','WCtrophy/trophy.png')
  .attr('class', 'pico')
  .attr('height', '100')
  .attr('width', '100')

// while adding an image to an svg these are the coordinates i think of the top left
  .attr('x', '59')
  .attr('y', '50')
  .attr('background', 'red')

this is just if to show how to append a png to a given svg element*/

})

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

</script>
    </body>

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://d3js.org/topojson.v1.js to a secure url

https://d3js.org/d3.v3.js

https://d3js.org/topojson.v1.js