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

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

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