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