Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* JavaScript */
var teamInfo = REP_Fifa_data.data
var top9 = teamInfo.filter(rank => rank[2] < 10);
var teamColor = d3.scaleOrdinal()
.domain(["F", "E", "B", "D", "G", "H", "C"])
.range(["#f9e6e6", "#7294d4", "#d8a499", "#c6cdf7", "#e6a0c4",
"#66b266", "#ffff7f"]);
// Static Graphics
teamG = REframe.append("g")
.attr("transform", "scale(2)translate(30,100)")
.selectAll("team")
.data(top9)
.enter()
.append("g")
.attr("class", "team")
.attr("transform", (d, i) =>`translate(${(i * 55)}, 0)`)
teamG.append("text")
.attr("y", 45)
.text(d => d[1]);
teamG.append('use')
.attr('xlink:href', '#ball')
.attr('fill', (d) => {
return teamColor(d[3])
})
.attr('stroke', 'black')
// Interactivity
teamG
.on("click", (d) => {
if (d.length == 7)
d.shift();
REframe.selectAll("td.data").data(d3.values(d))
.html(p => p)
})
.on('mouseover', function(d) {
d3.select(this).select("circle").attr("r", "30");
})
.on('mouseout', function(d) {
d3.select(this).select("circle").attr("r", "0");
})
d3.select('#winnerToken')
.on("mouseover", function(d) {
d3.select(this).select("path.outerCircle").attr("fill", "red");
})
.on("mouseout", function(d) {
d3.select(this).select("path.outerCircle").attr("fill", "#FFCA10");
})
.on('click', () => {
d3.select(winnerName)
.attr("display", "visible")
})
// Entry animation
d3.select('#title')
.on('click', playAnimation)
function playAnimation() {
teamG
.insert("circle", 'use')
.attr("r", 0)
.transition()
.delay((d, i) => i * 100)
.duration(800)
.attr("r", 40)
.transition()
.duration(800)
.attr("r", 0);
}
playAnimation()
/* HTML (svg) */
<text id='title' x=500 y=70 >
TOP 9 WORLD CUP TEAMS
</text>
<foreignObject x="50" y="350" width="600" height="230">
<h1>STATISTICS</h1>
<table>
<tr><td>Team Name</td><td class="data"></td></tr>
<tr><td>Current FIFA rank</td><td class="data"></td></tr>
<tr><td>Group</td><td class="data"></td></tr>
<tr><td>Previous Finals</td><td class="data"></td></tr>
<tr><td>Previous Titles</td><td class="data"></td></tr>
<tr><td>Previous Semifinals</td><td class="data"></td></tr>
</table>
</foreignObject>
<text id="winner" x="730" y="400" width="400" height="300">
WINNER
</text>
<foreignObject id="winnerName" display="none" x="720" y="700" width="400" height="300">
<p id="winnerp">?</p>
</foreignObject>
<defs>
<g id="ball"
transform="scale(1.4)">
<path
style="fill-rule:evenodd"
inkscape:connector-curvature="0"
id="path5"
d="m -3.1794292,-0.14033159 c -1.445234,-0.432404 -2.9165745,-0.838956 -4.5159127,-1.11750901 -0.3325407,-1.082785 -0.5479824,-2.1754549 -0.670404,-3.4430128 -0.038273,-0.4030028 -0.1287581,-0.9289341 -0.044609,-1.2969593 0.11938,-0.5213691 1.3017751,-1.636597 1.6989483,-2.0119726 0.7728022,-0.7307277 1.4472617,-1.0977391 2.2365389,-1.4307867 0.5936054,-0.2509263 2.0094374,-7.604e-4 2.7272394,0.1789434 0.770521,0.1926303 1.434081,0.4972903 1.966856,0.8496009 0.211387,1.0277839 0.342172,2.102965 0.49222099,3.2638159 0.04537,0.3548452 0.187054,0.8338863 0.133574,1.1180159 -0.06641,0.3561126 -0.69448299,0.6970175 -1.02829099,0.9836817 -1.057945,0.9078966 -2.123242,1.9285836 -2.9961608,2.90618261 z"
clip-rule="evenodd" /><path
style="fill:#000000"
inkscape:connector-curvature="0"
id="path7"
d="m -3.1786689,-0.13754359 -0.00152,-2.53e-4 c -1.3752795,-0.411367 -2.8739937,-0.831606 -4.515153,-1.11750901 -0.3386237,-1.0977396 -0.5520378,-2.1919302 -0.6726852,-3.4452943 -0.00735,-0.078066 -0.016982,-0.1612011 -0.026613,-0.246364 -0.0403,-0.3538314 -0.086177,-0.7545531 -0.018249,-1.0513558 0.11938,-0.5183275 1.3025355,-1.6376108 1.691091,-2.005129 l 0.00836,-0.00786 c 0.7720461,-0.7302181 1.4525886,-1.1000176 2.23705,-1.4315444 0.1667773,-0.069955 0.4106066,-0.1056932 0.7238843,-0.1056932 0.6387214,0 1.4546119,0.1470073 2.0053829,0.28489 0.717294,0.1791969 1.397836,0.472958 1.96787,0.8498544 0.194911,0.9436349 0.321388,1.9313719 0.45597599,2.9768981 l 0.03701,0.288692 c 0.01445,0.1122831 0.03777,0.2347047 0.06311,0.3642233 0.05272,0.2752585 0.107721,0.5598951 0.07122,0.7542996 -0.04841,0.2597974 -0.39869399,0.5145256 -0.70715599,0.7390919 -0.118873,0.08643 -0.23065,0.168298 -0.322149,0.2461105 -1.125366,0.9661929 -2.161261,1.9711649 -2.9959077,2.90643591 l -0.00152,5.07e-4 z M -3.7525043,-9.543984 c -0.3130242,0 -0.5555863,0.035738 -0.7221101,0.1059466 -0.783701,0.3307665 -1.4639901,0.7005659 -2.235525,1.4302798 l -0.00836,0.00786 c -0.3885597,0.3675156 -1.5714617,1.485785 -1.6898279,2.0030987 -0.067928,0.2957889 -0.021798,0.6962571 0.018503,1.0493281 0.00963,0.085416 0.01901,0.168298 0.026613,0.246364 0.1206474,1.253364 0.333808,2.3473012 0.6706575,3.4427592 1.639385,0.28413001 3.1375923,0.70386101 4.5126176,1.11522801 0.8343928,-0.93501701 1.8705418,-1.93948301 2.9954008,-2.90516881 0.09125,-0.078573 0.203529,-0.1604407 0.322149,-0.2468709 0.307701,-0.2243129 0.65671699,-0.4780272 0.70563499,-0.7355435 0.03624,-0.1938976 -0.0185,-0.4780272 -0.07122,-0.7525254 -0.02484,-0.1300254 -0.04866,-0.252447 -0.06311,-0.3644767 l -0.03701,-0.288692 C 0.5375746,-6.481923 0.4108446,-7.4696601 0.2166936,-8.4115208 c -0.56826,-0.3746152 -1.248295,-0.6681229 -1.964829,-0.8475732 -0.550771,-0.1378827 -1.3659009,-0.28489 -2.0043689,-0.28489 z" />
<path
style="fill-rule:evenodd"
inkscape:connector-curvature="0"
id="path11"
d="m 8.4019586,-5.6845351 c 1.112187,0.2291287 1.9884004,0.6949898 2.8169644,1.2069808 0.292747,0.7370642 0.561162,1.5537152 0.804992,2.4149757 0.237492,0.837434 0.554572,1.83049401 0.447358,2.77184801 -0.07097,0.61819099 -0.551531,1.64749599 -0.849854,2.19116899 -0.358394,0.652662 -0.819186,1.268572 -1.29696,1.698949 C 9.3610546,4.1015894 8.3525346,3.6506824 7.2844496,3.2583254 7.1906696,1.7170294 6.8903186,0.42387241 6.5238136,-0.89995359 6.4236966,-1.2608826 6.1441296,-1.8641196 6.1661806,-2.1520506 c 0.02889,-0.3781637 0.854417,-1.3603247 1.072646,-1.6992019 0.468903,-0.722617 0.796375,-1.2766825 1.163132,-1.8332826 z"
clip-rule="evenodd" /><path
style="fill:#000000"
inkscape:connector-curvature="0"
id="path13"
d="m 10.32522,4.6026824 -0.0015,-7.61e-4 C 9.3248316,4.0858754 8.3018626,3.6347144 7.2837106,3.2608604 c -0.09885,-1.594016 -0.425054,-2.94141399 -0.76241,-4.16056099 -0.0332,-0.11862001 -0.08516,-0.26207801 -0.139911,-0.41440801 -0.108988,-0.302126 -0.232423,-0.644298 -0.217216,-0.838449 0.02129,-0.2772862 0.467889,-0.8764678 0.79384,-1.3139413 0.118873,-0.1586665 0.221018,-0.2957888 0.279314,-0.3865278 0.224059,-0.3459741 0.413394,-0.6488599 0.595886,-0.9411003 0.193137,-0.3094757 0.375629,-0.6019696 0.566739,-0.8916754 1.140827,0.2334375 2.0294604,0.7178012 2.8207654,1.2062204 0.27906,0.7010728 0.549757,1.5134149 0.805752,2.4162424 0.01926,0.06691 0.03802,0.134588 0.05804,0.203529 0.228875,0.797895 0.488419,1.70275101 0.388555,2.56933301 -0.073,0.64277699 -0.587269,1.71516999 -0.849347,2.19218399 -0.371574,0.67674 -0.832366,1.280737 -1.29696,1.699455 l -0.0015,0.0015 z M 8.4011986,-5.6820005 c -0.187814,0.288692 -0.370813,0.5811858 -0.563697,0.8904081 -0.183252,0.2927473 -0.372334,0.5956331 -0.596647,0.9418607 -0.05804,0.090739 -0.160441,0.2278613 -0.278807,0.3865278 -0.325697,0.4367131 -0.773056,1.0351343 -0.793586,1.3114063 -0.01521,0.192631 0.108481,0.534296 0.217216,0.836168 0.05551,0.152076 0.107214,0.296042 0.139911,0.41491501 0.338116,1.219401 0.663053,2.56705199 0.760636,4.15903999 1.016378,0.371827 2.038839,0.822734 3.0377274,1.338273 0.464087,-0.418717 0.924119,-1.021447 1.294679,-1.697427 0.261318,-0.477267 0.77559,-1.548139 0.849094,-2.19015599 0.0991,-0.865822 -0.160441,-1.76966401 -0.388556,-2.56730501 -0.02002,-0.06894 -0.03929,-0.136869 -0.05804,-0.203782 C 11.765131,-2.9646463 11.494435,-3.776735 11.215881,-4.476287 10.427111,-4.9636923 9.5397446,-5.4475492 8.4011986,-5.6820005 z" />
<path
style="fill-rule:evenodd"
inkscape:connector-curvature="0"
id="path17"
d="m 0.93500159,-3.7620343 c 1.90323801,0.31784 3.49370501,0.9476903 5.05223601,1.6099837 0.349776,1.17555201 0.772802,2.43373101 0.983935,3.845002 0.06666,0.446598 0.208852,1.082531 0.134334,1.475395 -0.06641,0.347749 -0.54925,0.728194 -0.850108,1.028545 -0.966193,0.9667 -1.883468,1.886002 -3.04001,2.593665 -1.911348,-0.340145 -3.620435,-0.880523 -5.141961,-1.609984 -0.314545,-1.228018 -0.578651,-2.495576 -0.8493471,-3.845001 -0.07908,-0.39159699 -0.31125,-0.91499399 -0.268922,-1.25209699 0.037005,-0.290213 0.5530521,-0.776604 0.8501081,-1.073407 0.998129,-0.99787501 2.161768,-1.92706311 3.12973499,-2.77210171 z"
clip-rule="evenodd" /><path
style="fill:#000000"
inkscape:connector-curvature="0"
id="path19"
d="m 3.2151356,6.7933444 h -5.07e-4 c -1.882201,-0.335329 -3.612578,-0.876975 -5.142721,-1.609984 -0.332034,-1.29189 -0.612869,-2.66286 -0.8508686,-3.847789 -0.026613,-0.133321 -0.070716,-0.279821 -0.1173524,-0.43468599 -0.088204,-0.292747 -0.1789434,-0.595886 -0.1508093,-0.817918 0.033203,-0.265627 0.4574973,-0.685358 0.7669723,-0.992299 0.02915,-0.02864 0.05728,-0.05652 0.08339,-0.08263 0.716534,-0.71653401 1.507332,-1.38795141 2.272023,-2.03731821 0.300605,-0.2552351 0.58473499,-0.4967834 0.85821899,-0.7347831 1.92326101,0.3201211 3.55174701,0.9705017 5.05502401,1.6092233 0.05627,0.187814 0.11355,0.376136 0.171339,0.566231 0.312518,1.02879801 0.63568,2.09257401 0.813356,3.280291 0.01318,0.08871 0.0294,0.183506 0.04588,0.28337 0.0697,0.411367 0.148781,0.877481 0.08846,1.193547 -0.05272,0.277793 -0.370053,0.575356 -0.649621,0.837942 -0.07198,0.06742 -0.139403,0.131039 -0.200234,0.192123 l -0.01039,0.0094 c -0.965432,0.9667 -1.877131,1.878652 -3.030378,2.584034 l -0.0018,0.0013 z M 0.93424059,-3.7597531 c -0.270696,0.2377463 -0.55507899,0.4792945 -0.85593699,0.7345296 -0.764945,0.6493668 -1.55549,1.3202779 -2.27177,2.03706491 -0.02611,0.02636 -0.05424,0.05373 -0.08288,0.08288 -0.291987,0.288692 -0.7327551,0.725152 -0.765705,0.989004 -0.028134,0.221018 0.063112,0.523651 0.1508092,0.815384 0.046637,0.15537199 0.090485,0.30212499 0.1170989,0.43569899 0.2379999,1.18417 0.5190879,2.555393 0.8496009,3.845002 1.528116,0.731742 3.257986,1.273134 5.139173,1.607956 1.152487,-0.704875 2.064439,-1.616827 3.028858,-2.582513 l 0.01039,-0.01039 c 0.06109,-0.06007 0.128759,-0.123942 0.199981,-0.191363 0.279821,-0.262332 0.596647,-0.558628 0.64886,-0.835914 0.06007,-0.314545 -0.0185,-0.780153 -0.0877,-1.191266 -0.01698,-0.100371 -0.0332,-0.194912 -0.04664,-0.282609 -0.177925,-1.18822499 -0.500834,-2.25174699 -0.813351,-3.280037 -0.057789,-0.190603 -0.115325,-0.378924 -0.170073,-0.564965 -1.501248,-0.6372004 -3.129735,-1.2873276 -5.05071501,-1.6084625 z" />
<path
style="fill-rule:evenodd"
inkscape:connector-curvature="0"
id="path23"
d="m -2.0616664,5.3151604 c 1.583116,0.698031 3.249875,1.3109 5.231939,1.60973 0.193391,0.511738 0.292494,1.055411 0.447612,1.653832 0.128505,0.49577 0.478027,1.179101 0.402496,1.6550996 -0.0768,0.478534 -1.19887,1.140067 -1.744064,1.386178 -1.64141301,0.739852 -3.418427,0.702086 -5.2311795,0.08922 -0.6904274,-0.232933 -1.8312549,-0.688909 -2.1911694,-1.073409 -0.3163191,-0.337356 -0.5231432,-1.0493276 -0.6711644,-1.5648666 -0.1789434,-0.626049 -0.2481382,-1.223456 -0.3125173,-1.922248 1.439151,-0.528212 2.7903509,-1.144629 4.0680476,-1.833536 z"
clip-rule="evenodd" /><path
style="fill:#000000"
inkscape:connector-curvature="0"
id="path25"
d="m -0.3257134,12.174065 c -0.836674,0 -1.721506,-0.155118 -2.6301633,-0.462059 -0.800683,-0.271457 -1.8550803,-0.71476 -2.1919298,-1.074674 -0.3196142,-0.340652 -0.5317609,-1.0782226 -0.6724317,-1.5658816 -0.184773,-0.646325 -0.252954,-1.278456 -0.3117569,-1.923007 1.386938,-0.510217 2.7556268,-1.127141 4.0695677,-1.835311 1.401892,0.617178 3.11833,1.29113 5.233207,1.609224 0.137883,0.362195 0.227608,0.739852 0.322909,1.139306 0.03979,0.167284 0.08085,0.340398 0.126224,0.51706 0.03979,0.15081 0.09885,0.317334 0.161201,0.493489 0.144473,0.408579 0.294015,0.830338 0.241295,1.1616106 -0.07756,0.485378 -1.230553,1.155782 -1.745585,1.388459 -0.813103,0.366504 -1.68881001,0.551784 -2.602537,0.551784 z m -1.736714,-6.8563696 c -1.3121667,0.707663 -2.680602,1.324586 -4.0665262,1.832522 0.060831,0.641003 0.1292651,1.273134 0.3137846,1.919459 0.1404173,0.487659 0.3523106,1.2242156 0.6711644,1.5641066 0.3358357,0.359154 1.3897261,0.801951 2.1899021,1.071886 0.9078971,0.307195 1.7922221,0.46358 2.6286431,0.46358 0.91321899,0 1.788166,-0.186293 2.600762,-0.552544 0.513258,-0.231664 1.665745,-0.901054 1.742544,-1.38339 0.05297,-0.3305126 -0.09657,-0.7522716 -0.241042,-1.1593296 -0.06235,-0.176155 -0.122168,-0.343439 -0.161454,-0.494249 -0.04588,-0.177169 -0.08719,-0.349776 -0.126731,-0.51706 -0.09454,-0.399961 -0.184519,-0.777618 -0.320374,-1.137532 -2.113864,-0.31632 -3.830808,-0.990272 -5.230673,-1.607449 z" />
<path
clip-rule="evenodd"
d="m 4.8699816,-11.497407 c 0.031429,0.658238 0.081868,1.328388 -0.044609,1.9222473 -1.70199,0.1320531 -3.247848,0.4197312 -4.471811,1.0285443 -1.177832,-0.7302208 -2.682883,-1.1322098 -4.5607747,-1.1623717 -0.027374,-0.6435369 -0.024079,-1.3174899 -0.089218,-1.9227539 2.438294,-1.140067 6.856877,-1.082025 9.166413,0.134334 z"
id="path31"
inkscape:connector-curvature="0"
style="fill-rule:evenodd" /><path
d="m 0.3530556,-8.5438274 -7.61e-4,-5.069e-4 c -1.196589,-0.74188 -2.730281,-1.1327167 -4.5595077,-1.1621181 -0.010899,-0.2020084 -0.016729,-0.4078186 -0.022051,-0.6072926 -0.011913,-0.442542 -0.024332,-0.900039 -0.069702,-1.317743 1.1134537,-0.522383 2.7259716,-0.820453 4.4256806,-0.820453 1.865472,0 3.594582,0.347242 4.74352,0.952506 0.0051,0.06413 0.0076,0.126224 0.01115,0.188322 0.02991,0.589296 0.06083,1.198363 -0.05424,1.7369671 -1.944552,0.1525835 -3.364947,0.4792946 -4.472824,1.0298116 l -0.0013,5.069e-4 z m -0.226341,-3.9035506 c -1.699202,0 -3.3107061,0.298323 -4.4221321,0.817918 0.046637,0.415169 0.058803,0.872919 0.071222,1.315715 0.00532,0.199221 0.010899,0.4047773 0.019263,0.6047579 1.8274526,0.02712 3.3619056,0.4177036 4.5584936,1.1595836 1.107878,-0.5507705 2.528526,-0.8774816 4.471811,-1.0280374 0.11203,-0.5358161 0.0806,-1.1446291 0.0512,-1.7334191 -0.0035,-0.0621 -0.0061,-0.124449 -0.0094,-0.186547 -1.147164,-0.602984 -2.875767,-0.949971 -4.740479,-0.949971 z"
id="path33"
inkscape:connector-curvature="0"
style="fill:#000000" /><path
clip-rule="evenodd"
d="m 5.0932806,-11.407935 c 3.004779,1.257926 5.1647724,3.3606375 6.4832754,6.3048392 -0.121915,0.1312927 -0.20581,0.3006046 -0.312517,0.4468515 -0.824255,-0.5173136 -1.7643404,-0.9182888 -2.8169634,-1.2069807 -1.031333,-1.3387804 -2.002848,-2.7366172 -3.44276,-3.6668187 0.04512,-0.6103333 0.119127,-1.1920263 0.08896,-1.8778913 z"
id="path37"
inkscape:connector-curvature="0"
style="fill-rule:evenodd" /><path
d="m 11.264546,-4.6529493 -0.0023,-0.00152 c -0.815112,-0.5117383 -1.7628014,-0.9175291 -2.8161844,-1.2064746 -0.118367,-0.15233 -0.233945,-0.3044065 -0.349776,-0.4567365 -0.893197,-1.1727635 -1.817061,-2.3855739 -3.093744,-3.2103356 0.0089,-0.1345877 0.02002,-0.2653735 0.03092,-0.3961593 0.03979,-0.4653537 0.08085,-0.9464227 0.05703,-1.4837597 v -0.0035 l 0.0035,0.0013 c 2.989318,1.251336 5.1708554,3.3728037 6.4842894,6.3058531 -0.07578,0.084403 -0.138389,0.1827453 -0.198713,0.2777931 -0.0365,0.057282 -0.07376,0.1163386 -0.113804,0.171593 l -0.0013,0.00203 z M 5.0953086,-11.404133 c 0.02332,0.535816 -0.01724,1.016124 -0.05703,1.4802111 -0.01115,0.1310393 -0.02205,0.2620786 -0.03244,0.3943852 1.276683,0.822734 2.201054,2.0357978 3.094251,3.2090683 0.115831,0.1523299 0.231916,0.3044065 0.348255,0.4559761 1.051609,0.2874246 1.9992984,0.693469 2.8144294,1.204953 0.03954,-0.054494 0.0768,-0.1130435 0.112283,-0.1695653 0.06032,-0.095301 0.123182,-0.1938976 0.198713,-0.2757654 -1.312674,-2.9279802 -3.4919304,-5.048434 -6.4784594,-6.299263 z"
id="path39"
inkscape:connector-curvature="0"
style="fill:#000000" /><path
clip-rule="evenodd"
d="m -8.5895519,-5.9978127 c 0.087951,1.7463455 0.2549817,3.4120904 0.7603827,4.7402251 -0.7994157,1.19811001 -1.539268,2.455023 -1.7886735,4.202889 -0.6275693,0.200741 -1.5968033,0.158159 -2.2357783,0 -0.809048,-1.057946 -0.750245,-3.20678699 -0.491715,-4.784328 0.257517,-1.5727247 0.796882,-3.0308852 1.431041,-4.069061 0.6225,-0.2841296 1.58996,-0.2511797 2.3247431,-0.089725 z"
id="path43"
inkscape:connector-curvature="0"
style="fill-rule:evenodd" /><path
d="m -10.660834,3.0826774 c -0.411874,0 -0.846306,-0.04917 -1.193041,-0.135602 -0.976838,-1.275162 -0.624781,-3.986179 -0.493488,-4.786609 0.245096,-1.4994744 0.766466,-2.9827275 1.43104,-4.0700748 0.306181,-0.1396569 0.72135,-0.2136675 1.2019117,-0.2136675 0.3647302,0 0.764438,0.044102 1.1253663,0.123182 0.080601,1.5643606 0.2321702,3.3484718 0.7619035,4.7414933 -0.7651984,1.14893801 -1.5334384,2.417763 -1.7879131,4.204409 -0.2783001,0.09023 -0.6394814,0.136869 -1.0457794,0.136869 z m 0.9464227,-9.2006306 c -0.4800547,0 -0.8944637,0.07325 -1.1991237,0.2121468 -0.662293,1.0855729 -1.184169,2.5685726 -1.428759,4.0670338 -0.131039,0.800176 -0.483096,3.508405 0.4907,4.782553 0.344707,0.0844 0.779646,0.133574 1.19076,0.133574 0.406298,0 0.7664655,-0.04664 1.0424844,-0.134334 0.2529539,-1.785125 1.0214474,-3.05496399 1.7874062,-4.202128 -0.5307471,-1.3915007 -0.6820633,-3.1761188 -0.7611431,-4.7387051 -0.3586471,-0.076799 -0.7581015,-0.1201405 -1.1223248,-0.1201405 z"
id="path45"
inkscape:connector-curvature="0"
style="fill:#000000" /><path
clip-rule="evenodd"
d="m 12.649963,1.0222934 c 0.0512,-0.0068 0.07959,0.01039 0.08922,0.04486 -0.212907,3.061807 -1.379841,5.364753 -2.9061818,7.198796 -0.190603,0.228875 -0.3581406,0.621232 -0.7150126,0.626048 -0.133828,-0.332034 0.175901,-0.657731 0.312517,-0.938819 0.4344316,-0.897758 0.8607524,-1.99423 1.0285434,-3.21946 0.976078,-0.991286 1.634569,-2.300918 2.190916,-3.711428 z"
id="path49"
inkscape:connector-curvature="0"
style="fill-rule:evenodd" /><path
d="m 9.1157046,8.8942814 v -0.0015 c -0.101384,-0.250927 0.05272,-0.50312 0.189336,-0.725152 0.04588,-0.07578 0.08922,-0.146247 0.123182,-0.215695 0.5500096,-1.136012 0.8868584,-2.189395 1.0285434,-3.218193 1.074421,-1.092924 1.735447,-2.557421 2.191423,-3.711935 0.0096,-0.0028 0.01622,-0.0035 0.02332,-0.0035 0.03751,0 0.06159,0.01571 0.07072,0.0479 -0.190096,2.723184 -1.141081,5.078089 -2.9077038,7.200824 -0.04334,0.05196 -0.08516,0.112283 -0.129265,0.176408 -0.1459926,0.208852 -0.3112496,0.446852 -0.5872676,0.4504 h -0.0023 z m 3.5555494,-7.871228 c -0.0061,0 -0.01369,7.61e-4 -0.02129,0.0015 -0.453948,1.153247 -1.114721,2.619012 -2.189142,3.710668 -0.141177,1.029051 -0.4777728,2.082181 -1.0287964,3.218699 -0.03346,0.06894 -0.07731,0.140925 -0.122929,0.216203 -0.135602,0.220511 -0.288945,0.47093 -0.189842,0.719828 0.273231,-0.0053 0.437473,-0.241294 0.5819456,-0.448879 0.04385,-0.06362 0.08618,-0.123942 0.129519,-0.176155 1.7661148,-2.122735 2.7165928,-4.476119 2.9061818,-7.197275 -0.0086,-0.0294 -0.02991,-0.04461 -0.06565,-0.04461 z"
id="path51"
inkscape:connector-curvature="0"
style="fill:#000000" /><path
clip-rule="evenodd"
d="m -9.6624518,3.1237374 c 0.8323655,1.656621 1.9622942,3.015171 3.3984036,4.069315 0.012673,1.403413 0.5289728,2.541452 0.89421,3.4425056 -0.570287,0.127237 -1.2429722,-7.61e-4 -1.7438109,-0.08922 -1.5050508,-1.0663096 -2.8324254,-2.5059666 -3.8006459,-4.2482576 -0.496277,-0.892689 -0.963152,-1.726322 -0.939326,-3.129988 0.652155,0.06336 1.603647,0.09986 2.1911692,-0.04436 z"
id="path55"
inkscape:connector-curvature="0"
style="fill-rule:evenodd" /><path
d="m -5.9061615,10.691572 c -0.4004682,0 -0.8148767,-0.07274 -1.1481778,-0.131799 l -0.059563,-0.0109 C -8.6686317,9.4475864 -9.9835868,7.9785274 -10.916576,6.2996024 l -0.0074,-0.01242 c -0.491461,-0.885845 -0.956309,-1.721506 -0.931723,-3.119089 v -0.0028 l 0.0025,7.6e-4 c 0.261572,0.02484 0.664321,0.055 1.096725,0.055 0.455216,0 0.8234948,-0.0332 1.0934307,-0.10037 0.8349001,1.657887 1.9780087,3.026069 3.4006847,4.069821 0.012166,1.293411 0.4516673,2.362763 0.8049918,3.2225016 0.030669,0.07553 0.060831,0.149542 0.090232,0.221525 l 7.604e-4,0.0025 -0.00279,7.61e-4 c -0.1591735,0.03574 -0.3401446,0.05373 -0.5370837,0.05373 z M -11.850833,3.1711344 c -0.02408,1.394796 0.440008,2.229696 0.931468,3.113514 l 0.0071,0.01242 c 0.9324832,1.678164 2.2469313,3.146717 3.8001396,4.2480036 l 0.058549,0.0094 c 0.3330476,0.0588 0.7472027,0.132307 1.1474174,0.132307 0.1956718,0 0.3748687,-0.01774 0.5332817,-0.05272 -0.028897,-0.07125 -0.058805,-0.143988 -0.089474,-0.217999 -0.3530711,-0.8607526 -0.7923188,-1.9303576 -0.803978,-3.2230076 -1.4219156,-1.041471 -2.5655311,-2.411427 -3.3984036,-4.067794 -0.2676547,0.06717 -0.6356801,0.101384 -1.0916561,0.101384 -0.431391,0 -0.832366,-0.03016 -1.094444,-0.05551 z"
id="path57"
inkscape:connector-curvature="0"
style="fill:#000000" /><path
clip-rule="evenodd"
d="m -0.0489334,12.737509 c -0.02484,-0.06514 0.05221,-0.231157 -0.04461,-0.223553 1.746346,-0.400215 3.325154,-0.966446 4.291854,-2.146053 1.933653,-0.07959 3.52412,-0.5010916 4.606144,-1.4315466 0.543167,0.18604 -0.256502,0.66863 -0.581439,0.939326 -1.940243,1.6140386 -4.930068,3.1251726 -8.271949,2.8618266 z"
id="path61"
inkscape:connector-curvature="0"
style="fill-rule:evenodd" /><path
d="m 0.71575759,12.770205 c -0.25498199,0 -0.51224399,-0.0109 -0.76494499,-0.02991 -0.01115,-0.02611 -0.0066,-0.06438 -0.0015,-0.102145 0.0053,-0.04436 0.01115,-0.08972 -0.0068,-0.110255 -0.0074,-0.0091 -0.0185,-0.0109 -0.03574,-0.0109 l -7.6e-4,-0.0058 c 1.542056,-0.353071 3.257479,-0.884071 4.291346,-2.144786 2.078886,-0.08592 3.585204,-0.5535576 4.605891,-1.4310396 0.113804,0.03701 0.175395,0.09023 0.186294,0.157906 0.02889,0.179704 -0.301619,0.430123 -0.566485,0.630104 -0.0735,0.05627 -0.142952,0.108228 -0.19846,0.154358 -1.045019,0.8693696 -3.869081,2.8924946 -7.50877901,2.8924946 z m -0.79130499,-0.25777 c 0.0089,0.0015 0.01622,0.0053 0.02205,0.01166 0.01901,0.02306 0.01318,0.06945 0.0074,0.114564 -0.0048,0.03701 -0.0094,0.07401 -7.61e-4,0.09733 0.250673,0.01926 0.507682,0.02864 0.76266399,0.02864 3.63817801,0 6.46097201,-2.021604 7.50573701,-2.8912276 0.055,-0.04588 0.124703,-0.09784 0.198207,-0.153851 0.263853,-0.199727 0.592845,-0.448372 0.564964,-0.625542 -0.0109,-0.06565 -0.07173,-0.117859 -0.180971,-0.154611 -1.019166,0.877482 -2.526498,1.3458776 -4.605384,1.4310406 -1.028038,1.255645 -2.73535,1.78842 -4.273858,2.141997 z"
id="path63"
inkscape:connector-curvature="0"
style="fill:#000000" /><path
d="m 0.1109996,12.799353 c -6.9808194,0 -12.6598646,-5.6790436 -12.6598646,-12.66011759 0,-6.98081941 5.6790452,-12.66037141 12.6598646,-12.66037141 6.98082,0 12.6598644,5.679552 12.6598644,12.66037141 0,6.98107399 -5.6790444,12.66011759 -12.6598644,12.66011759 z m 0,-24.969445 c -6.7869218,0 -12.3088206,5.5218986 -12.3088206,12.30932741 0,6.78692299 5.5218988,12.30882059 12.3088206,12.30882059 6.78743,0 12.3085674,-5.5218976 12.3085674,-12.30882059 0,-6.78742881 -5.5211374,-12.30932741 -12.3085674,-12.30932741 z"
id="path67"
inkscape:connector-curvature="0" />
</g>
</defs>
<g id="winnerToken" transform="translate(600, 450)">
<g>
<path d="M121.426,137.649l-3.303,31.188h19.754l-3.301-31.188c-2.131,0.852-4.327,1.303-6.577,1.303
C125.753,138.953,123.557,138.501,121.426,137.649z" fill="#F8D417"/>
<path d="M163.043,73.458c0.182-3.061,0.285-6.174,0.285-9.341c0-1.273-0.018-2.541-0.048-3.799H92.718
c-0.03,1.258-0.047,2.526-0.047,3.799c0,3.167,0.104,6.28,0.285,9.341C82.41,78.514,75.333,87.742,75.333,98.271
c0,15.252,14.851,27.777,33.595,28.826c3.742,5.097,7.967,8.74,12.498,10.553c2.131,0.852,4.327,1.303,6.573,1.303
c2.25,0,4.446-0.451,6.577-1.303c4.529-1.813,8.752-5.456,12.494-10.553c18.745-1.049,33.596-13.573,33.596-28.826
C180.666,87.742,173.591,78.514,163.043,73.458z M81.411,98.271c0-7.461,4.759-14.076,12.068-18.245
c1.637,16.007,5.689,30.095,11.31,40.483C91.423,118.193,81.411,109.11,81.411,98.271z M151.211,120.509
c5.621-10.389,9.672-24.477,11.31-40.483c7.311,4.168,12.067,10.783,12.067,18.245
C174.588,109.11,164.578,118.193,151.211,120.509z" fill="#FCAE42"/>
<rect fill="#FC8A00" height="3.543" width="19.754" x="118.123" y="168.838"/>
<rect fill="#AA2746" height="17.427" width="46.413" x="104.845" y="172.381"/>
<rect fill="#5B3CA8" height="5.873" width="58.487" x="98.959" y="189.808"/>
<path d="M127.999,60.318H92.718c-0.03,1.258-0.047,2.526-0.047,3.799c0,3.167,0.104,6.28,0.285,9.341
C82.41,78.514,75.333,87.742,75.333,98.271c0,15.252,14.851,27.777,33.595,28.826c5.502,7.494,12.044,11.856,19.071,11.856V60.318
z M81.411,98.271c0-7.461,4.759-14.076,12.068-18.245c1.637,16.007,5.689,30.095,11.31,40.483
C91.423,118.193,81.411,109.11,81.411,98.271z" fill="#F8D417"/>
<path class="outerCircle" d="M127.999,12.518c-63.773,0-115.48,51.708-115.48,115.482c0,63.773,51.708,115.482,115.48,115.482 c5.972,0,11.839-0.456,17.567-1.337h0.015c51.604-7.887,91.974-49.932,97.31-102.323c0.396-3.891,0.591-7.826,0.591-11.822
C243.481,64.226,191.774,12.518,127.999,12.518z M229.29,138.439c-4.665,45.828-39.552,82.737-84.956,90.06l-0.849,0.122
c-5.077,0.791-10.289,1.186-15.486,1.186C71.87,229.806,26.194,184.131,26.194,128S71.87,26.193,127.999,26.193
c56.133,0,101.808,45.676,101.808,101.807C229.807,131.509,229.625,135.02,229.29,138.439z" fill="#FFCA10"/>
</g>
</g>
/* CSS */
text {
font-family: Arial;
font-size: 12px;
text-anchor: middle;
fill: black;
}
#title {
font-family: Arial;
font-size:40px;
fill: black;
}
#title:hover {
cursor: pointer;
}
#winner {
font-family: Arial;
font-size:40px;
font-weight: 900;
}
circle {
fill: #ffd700;
stroke: orange;
stroke-width: 2px;
}
h1 {
font-family: Arial;
}
td {
font-family: Arial;
font-size: 30px;
}
th {
font-family: Arial;
font-size: 30px;
}
td.data {
font-weight: 900;
padding-left: 20px;
}
.team:hover {
cursor: pointer;
}
#winnerToken:hover {
cursor: pointer;
}
/* Data from --- Fifa_data --- */
var REP_Fifa_data = {
names: [
{
"column_name": "EVO_DATE",
"data_type": "timestamp with time zone",
"ordinal_position": 1
},
{
"column_name": "t_Team",
"data_type": "text",
"ordinal_position": 2
},
{
"column_name": "t_Current FIFA rank",
"data_type": "numeric",
"ordinal_position": 3
},
{
"column_name": "t_Group",
"data_type": "text",
"ordinal_position": 4
},
{
"column_name": "t_Previous finals",
"data_type": "numeric",
"ordinal_position": 5
},
{
"column_name": "t_Previous titles",
"data_type": "numeric",
"ordinal_position": 6
},
{
"column_name": "t_Previous semifinals",
"data_type": "numeric",
"ordinal_position": 7
}
]
,// only sample displayed here
data: [
[
"2018-07-10T00:00:00+00:00",
"Germany",
1,
"F",
8,
4,
13
],
[
"2018-07-10T00:00:00+00:00",
"Brazil",
2,
"E",
7,
5,
11
],
[
"2018-07-10T00:00:00+00:00",
"Portugal",
3,
"B",
0,
0,
2
],
[
"2018-07-10T00:00:00+00:00",
"Argentina",
4,
"D",
5,
2,
5
],
[
"2018-07-10T00:00:00+00:00",
"Belgium",
5,
"G",
0,
0,
1
],
[
"2018-07-10T00:00:00+00:00",
"Spain",
6,
"B",
1,
1,
2
],
[
"2018-07-10T00:00:00+00:00",
"Poland",
7,
"H",
0,
0,
2
],
[
"2018-07-10T00:00:00+00:00",
"Switzerland",
8,
"E",
0,
0,
0
],
[
"2018-07-10T00:00:00+00:00",
"France",
9,
"C",
2,
1,
5
],
[
"2018-07-10T00:00:00+00:00",
"Peru",
11,
"C",
0,
0,
0
]
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment