|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
svg{ |
|
background:#2379d5; |
|
} |
|
|
|
/* 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 |
|
} |
|
</style> |
|
<body> |
|
|
|
<script src="http://d3js.org/d3.v3.js"></script> |
|
<script src="http://d3js.org/topojson.v1.js"></script> |
|
<script> |
|
/* |
|
our list of brazilian world cup cities |
|
|
|
*/ |
|
|
|
|
|
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('./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 |
|
|
|
|
|
//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('circle') |
|
.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') |
|
.attr('r',function(d){ |
|
// console.log(d.properties) |
|
|
|
if(d.properties.pop > 100000){ |
|
bigCit++; |
|
console.log(d.properties) |
|
return 4} |
|
else{return 1.5} |
|
}) |
|
.on('click', function(d){ |
|
console.log(d.properties.name) |
|
}) |
|
|
|
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); |
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
// console.log(projection([-54,-8.4])) |
|
|
|
|
|
</script> |
|
</body> |
