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
<!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="//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.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>