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
<!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="//d3js.org/d3.v3.js"></script>
<script src="//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 //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>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="Captions">
</g>
<g id="Your_Icon">
<g>
<path d="M17.283,87.978c10.134,8.712,23.055,12.955,36.382,11.949c13.325-1.008,25.463-7.143,34.175-17.278 c8.712-10.135,12.955-23.057,11.948-36.383c-1.007-13.326-7.143-25.463-17.277-34.174C72.376,3.378,59.455-0.865,46.128,0.142 C32.801,1.148,20.664,7.285,11.953,17.419C3.241,27.554-1.002,40.475,0.003,53.802C1.01,67.129,7.146,79.266,17.283,87.978z M77.856,79.318c-2.666,2.723-5.328,4.644-6.967,5.709c-0.407,0.114-3.503,0.869-10.042-0.377 c-4.569-0.871-7.344-2.037-8.699-2.727L48.889,67l14.904-16.394l14.879,2.821c0.816,1.912,2.266,5.51,3.033,8.641 c0.874,3.565,1.421,8.596,1.614,10.576C82.285,74.183,80.46,76.659,77.856,79.318z M47.068,65.489 c-1.623-0.188-4.525-0.604-8.629-1.478c-4.001-0.853-6.89-1.823-8.555-2.462c-0.638-1.358-2.748-6.028-4.05-11.02 c-1.086-4.166-1.759-8.849-2.063-11.286c1.089-1.533,3.002-4.029,5.632-6.716c2.828-2.888,4.999-4.771,6.15-5.721 c-0.422-0.016-1.23,0.306-0.87,0.317c0.045,0.001,6.349,0.295,11.561,1.536c3.634,0.865,8.2,2.419,10.704,3.309l5.005,17.147 L47.068,65.489z M57.961,29.82c-2.487-0.89-7.275-2.532-11.17-3.458c-5.455-1.297-10.08-1.465-10.275-1.472 c-0.043-0.001-0.527-0.056-0.57-0.052c-0.098,0.007,0.116,0.084,0.162,0.111l-3.375-10.259c1.059-1.418,3.456-4.355,6.224-5.97 c3.573-2.084,9.58-3.729,10.369-3.939c1.771,0.08,4.988,0.359,9.004,1.297c3.533,0.827,6.046,1.753,7.556,2.4 c0.651,1.261,2.367,4.644,3.446,7.291c0.812,1.988,1.376,4.96,1.688,6.941L57.961,29.82z M37.767,6.678 c-3.084,1.799-5.659,4.908-6.86,6.505c-1.651-0.022-4.685,0.24-8.464,1.925c-1.326,0.592-2.456,1.188-3.414,1.757 c5.624-5.254,12.419-8.942,19.846-10.788C38.491,6.272,38.119,6.473,37.767,6.678z M6.699,43.827 c1.078-2.468,3.203-5.367,4.545-7.08L21.53,40.38c0.348,2.629,1.001,6.854,2.018,10.748c1.249,4.786,3.162,9.186,3.996,10.995 l-6.298,12.031c-1.283-0.223-3.371-0.711-6.672-1.764c-3.226-1.03-4.65-1.765-5.259-2.16c-2.574-5.174-4.15-10.849-4.597-16.784 c-0.096-1.268-0.136-2.531-0.127-3.787C5.215,47.694,5.971,45.493,6.699,43.827z M5.48,40.999 c1.158-5.739,3.43-11.201,6.728-16.121c-0.353,0.876-0.698,1.857-0.994,2.929c-0.711,2.578-1.001,4.994-1.119,6.588 C9.103,35.61,6.998,38.295,5.48,40.999z M11.265,73.743c0.736,0.28,1.587,0.579,2.59,0.898c4.045,1.29,6.473,1.807,7.921,1.979 c1.041,1.464,2.802,3.762,4.968,5.88c2.505,2.452,5.598,4.271,7.187,5.122c-0.082,0.16-0.129,0.34-0.129,0.532l-0.022,4.247 c-4.839-1.845-9.373-4.533-13.417-8.01C16.745,81.284,13.694,77.691,11.265,73.743z M36.139,93.225l0.027-5.037 c1.271-0.056,3.615-0.354,7.258-1.528c3.46-1.114,5.937-2.115,7.405-2.757c1.477,0.784,4.514,2.104,9.578,3.07 c3.21,0.612,6.055,0.854,8.45,0.717c0.224-0.013,0.431-0.028,0.627-0.046l0.404,3.072c-5.118,2.515-10.721,4.055-16.579,4.497 C47.414,95.659,41.608,94.967,36.139,93.225z M90.034,71.083c-0.248,0.014-0.492,0.025-0.722,0.034 c-1.49,0.051-2.854,0.021-3.774-0.017c-0.266-2.455-0.776-6.49-1.538-9.597c-0.819-3.346-2.328-7.081-3.172-9.05 c0.766-1.331,1.978-3.637,2.978-6.429c1.104-3.078,1.806-6.337,2.135-8.055l7.551-0.32c0.817,2.898,1.352,5.9,1.584,8.971 C95.725,55.223,93.958,63.635,90.034,71.083z M92.763,35.315l-7.276,0.31c-0.989-1.581-3.017-4.583-5.729-7.351 c-2.536-2.589-4.941-4.438-6.32-5.418c-0.308-2.058-0.936-5.578-1.915-7.981c-0.8-1.96-1.905-4.25-2.721-5.879 c0.076-0.015,0.165-0.029,0.246-0.044c3.705,1.734,7.196,3.985,10.383,6.723C85.638,21.011,90.186,27.767,92.763,35.315z"/>
</g>
</g>
</svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path d="M61.544,69.868c-0.003-0.011-0.01-0.02-0.013-0.03l0.002-0.001c-0.145-0.404-0.308-0.825-0.48-1.268 c-0.852-2.194-1.817-4.68-1.817-8.455c0-3.094,1.656-6.329,3.573-10.075c2.536-4.955,5.41-10.571,5.41-17.747 c0-9.857-8.019-17.877-17.876-17.877s-17.876,8.02-17.876,17.877c0,7.176,2.874,12.792,5.41,17.747 c1.917,3.746,3.573,6.981,3.573,10.075c0,3.775-0.965,6.261-1.817,8.455c-0.172,0.443-0.335,0.864-0.48,1.268l0.002,0.001 c-0.004,0.01-0.01,0.019-0.013,0.029l-3.084,9.047c-0.071,0.208-0.107,0.426-0.107,0.646c0,4.207,7.229,6.09,14.393,6.09 s14.393-1.883,14.393-6.09c0-0.22-0.036-0.438-0.107-0.645L61.544,69.868z M41.437,48.217c-2.444-4.775-4.971-9.713-4.971-15.925 c0-7.652,6.225-13.877,13.876-13.877s13.876,6.225,13.876,13.877c0,6.18-2.5,11.098-4.933,15.85 c-0.06,0.065-0.129,0.117-0.175,0.196c-1.142,1.952-3.923,6.887-5.09,10.542c-1.287,4.037-3.847,7.519-5.71,8.873 c-0.559,0.406-0.683,1.188-0.277,1.746c0.245,0.337,0.625,0.516,1.012,0.516c0.255,0,0.512-0.078,0.733-0.239 c1.708-1.241,3.957-3.972,5.566-7.462c0.306,3.356,1.249,5.824,1.979,7.703c0.039,0.101,0.071,0.19,0.109,0.288 c-0.924,0.54-3.42,1.28-7.091,1.28c-3.672,0-6.167-0.74-7.091-1.28c0.038-0.098,0.07-0.188,0.109-0.288 c0.393-1.01,0.845-2.199,1.231-3.592c0.048-0.084,0.099-0.167,0.128-0.263c0.739-2.493,3.051-11.031,1.792-16.258 c-0.162-0.671-0.835-1.083-1.508-0.922c-0.671,0.162-1.084,0.837-0.922,1.508c0.273,1.133,0.346,2.533,0.274,4.068 C43.597,52.46,42.539,50.37,41.437,48.217z M50.342,81.649c-5.902,0-9.401-1.369-10.268-2.125l1.843-5.408 c2.25,1.044,5.477,1.468,8.424,1.468c2.948,0,6.175-0.424,8.424-1.468l1.843,5.408C59.744,80.28,56.244,81.649,50.342,81.649z"/>
<path d="M48.115,46.743c0.633,0,1.176-0.479,1.242-1.122c0.051-0.491-0.197-0.936-0.589-1.181l0.006-0.009 c-0.886-0.551-1.416-1.5-1.415-2.54c0-1.646,1.338-2.984,2.983-2.984s2.983,1.339,2.983,2.985c0,1.039-0.529,1.988-1.415,2.54 l0.006,0.009c-0.393,0.245-0.64,0.69-0.589,1.181c0.066,0.643,0.609,1.122,1.242,1.122c0.043,0,0.086-0.002,0.13-0.006 c4.517-0.466,8.074-5.083,9.748-8.896c0.277-0.632-0.01-1.37-0.642-1.647c-0.631-0.277-1.369,0.009-1.647,0.642 c-0.942,2.146-2.537,4.455-4.407,5.922c0.044-0.284,0.075-0.572,0.075-0.867c0-3.024-2.46-5.484-5.483-5.484 s-5.483,2.46-5.483,5.484c0,0.294,0.031,0.583,0.076,0.867c-1.871-1.467-3.465-3.776-4.408-5.922 c-0.278-0.633-1.017-0.921-1.647-0.642c-0.632,0.277-0.919,1.015-0.642,1.647c1.674,3.812,5.231,8.43,9.748,8.896 C48.029,46.741,48.072,46.743,48.115,46.743z"/>
<path d="M55.171,77.312c-2.858,0.636-6.8,0.636-9.658,0c-0.543-0.12-1.074,0.22-1.193,0.759c-0.12,0.54,0.22,1.074,0.759,1.193 c1.57,0.349,3.39,0.534,5.264,0.534s3.694-0.185,5.264-0.534c0.539-0.12,0.879-0.654,0.759-1.193 C56.244,77.532,55.713,77.193,55.171,77.312z"/>
</g>
</svg>