Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8
Last active September 28, 2017 06:37
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mpmckenna8/b87df1c44243aa1575cb to your computer and use it in GitHub Desktop.
Save mpmckenna8/b87df1c44243aa1575cb to your computer and use it in GitHub Desktop.
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

Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment