Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8

mpmckenna8/icon_10684.svg

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.
Download ZIP
d3 .append('image') w/ some svg's from the Noun Project
Raw
readme.md

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
icon_10684.svg
<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>
Display the source blob
Display the rendered blob
Raw
icon_51440.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!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