Public
Edited
Dec 3, 2022
2 forks
2 stars
timeline = {
const scale = 0.7;
let svg = d3.create("svg")
.attr("width", scale * 1200)
.attr("height", scale * 3000)
.style("background","#7F1431")
const images = await Promise.all(countryList.map(el => el.flag));
const xScale = d3.scaleBand()
.domain([0,1,2,3,4])
.range([0, scale * 400])
.paddingInner(0.1);
const yScale = d3.scaleLinear()
.domain([0, 50000])
.range([scale * 225, 0]);
let tickLabels = ["Rd. 16","Quart.","Semi","Final","WIN!"]
svg.append("text")
.attr("x", scale*600)
.attr("y", scale*100)
.classed("main-title-1",true)
.text("World Cup 2022")
svg.append("text")
.attr("x", scale*600)
.attr("y", scale*180)
.classed("main-title-2",true)
.text("Knockout Stage Results from 50,000 Simulations")
countryList.map( (country, index) => {
svg.append("rect")
.classed("blackRect",true)
.attr("transform", `translate(${scale*(index%2===0 ? 40 : 1200 - 400 - 40)}, ${scale*(index * 160 + 250)})`)
.attr("width", scale * 400)
.attr("height", scale * 225)
.attr("fill","black")
svg.append("image")
.classed("clipFlags",true)
.attr("transform", `translate(${scale*(index%2===0 ? 40 : 1200 - 400 - 40)}, ${scale*(index * 160 + 250)})`)
.attr("href", images[index].src)
.attr("width", scale * 400)
.attr("height", scale * 225)
.attr('clip-path', `url(#${country.team.replaceAll(" ","-")}-clip)`)
svg.append("g")
.attr("transform", `translate(${scale*(index%2===0 ? 40 : 1200 - 400 - 40)}, ${scale*(index * 160 + 250)})`)
.append("clipPath")
.attr("id", `${country.team.replaceAll(" ","-")}-clip`)
.selectAll(`.${country.team}-bar`)
.data(Object.values(results_tally.find(item => item.Country === country.team)).slice(1))
.join("rect")
.classed("bar",true)
.attr("stroke","white")
.attr("x", (d,i) => xScale(i))
.attr("y", d => yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => scale*225 - yScale(d));
svg.append("g")
.attr("transform", `translate(${scale*(index%2===0 ? 40 : 1200 - 400 - 40)}, ${scale*(index * 160 + 250)})`)
.selectAll(`.${country.team}-bar-label`)
.data(Object.values(results_tally.find(item => item.Country === country.team)).slice(1))
.join("text")
.text((d,i) => (i===0 ? "" : Math.round(100 * d/50000)+"%" ))
.classed("bar-label",true)
.attr("fill","white")
.attr("x", (d,i) => xScale(i) + xScale.bandwidth() / 2)
.attr("y", d => yScale(d) - scale*5);
svg.append("image")
.classed("backgroundFlag",true)
.style("opacity",0.25)
.attr("transform", (d,i) => `translate(${scale*(index%2===0 ? 40 : 1200 - 400 - 40)}, ${scale*(index * 160 + 250)})`)
.attr("href", images[index].src)
.attr("width", scale * 400)
.attr("height", scale * 225)
svg.append("g")
.classed("xAxis",true)
.attr("transform", `translate(${scale*(index%2===0 ? 40 : 1200 - 400 - 40)}, ${scale*(index * 160 + 250 + 225)} )`)
.call(d3.axisBottom(xScale).tickSize(0).tickSizeOuter(0).tickFormat((d,i) => tickLabels[i]));
svg.append("text")
.attr("x", scale*(index%2===0 ? 600 - 150 : 600 + 150))
.attr("y", scale*(index * 160 + 350))
.classed("countryNames",true)
.text(d => country.team)
.style("text-anchor", index%2===0 ? "start" : "end")
.attr("fill", "white")
})
return svg.node();
}
countryList = [{"team":"Netherlands", "rating":1716, "flag": FileAttachment("netherlands-flag.png").image()},
{"team":"Senegal", "rating":1604, "flag":FileAttachment("Flag_of_Senegal@1.svg").image()},
{"team":"England", "rating":1756, "flag": FileAttachment("Flag_of_England.svg").image()},
{"team":"United States", "rating":1653, "flag": FileAttachment("usa-flag.png").image()},
{"team":"Poland", "rating":1560, "flag": FileAttachment("poland-flag.png").image()},
{"team":"Argentina", "rating":1773, "flag": FileAttachment("Flag_of_Argentina.svg").image()},
{"team":"France", "rating":1754, "flag": FileAttachment("Flag_of_France_(lighter_variant).svg").image()},
{"team":"Australia", "rating":1534, "flag": FileAttachment("australia-flag.png").image()},
{"team":"Spain", "rating":1693, "flag": FileAttachment("Flag_of_Spain.svg").image()},
{"team":"Japan", "rating":1589, "flag": FileAttachment("japan-flag.png").image()},
{"team":"Morocco", "rating":1622, "flag": FileAttachment("morocco-flag.png").image()},
{"team":"Croatia", "rating":1671, "flag": FileAttachment("croatia-flag.png").image()},
{"team":"Brazil", "rating":1829, "flag": FileAttachment("brazil-flag.png").image()},
{"team":"Switzerland", "rating":1634, "flag": FileAttachment("swiss-flag.png").image()},
{"team":"Portugal", "rating":1667, "flag": FileAttachment("portugal-flag.png").image()},
{"team":"South Korea", "rating":1551, "flag": FileAttachment("south-korea-flag.png").image()},
/* {"team":"Serbia", "rating":1570, "flag": FileAttachment("serbia-flag.png").image()},*/
].sort((a,b) => a.rating < b.rating ? 1 : -1)
<style>
.main-title-1{
fill: white;
font-size: 60px; /* WANT 80PX */
text-anchor: middle;
font-family: 'Londrina Solid', cursive;
font-weight: 900;
filter: drop-shadow(5px 5px 5px black);
}
.main-title-2{
fill: white;
font-size: 37px; /* WANT 50PX */
text-anchor: middle;
font-family: 'Londrina Solid', cursive;
font-weight: 900;
filter: drop-shadow(3px 3px 3px black);
}
.xAxis{
color: white;
font-size: 23px; /* WANT 30PX */
font-family: 'Londrina Solid', cursive;
}
.yAxis{
color: white;
}
.countryNames{
font-size: 37px; /* WANT 50PX */
text-anchor: middle;
alignment-baseline: middle;
font-family: 'Londrina Solid', cursive;
font-weight: 900;
filter: drop-shadow(2px 2px 3px black);
}
.bar-label{
text-anchor: middle;
font-family: 'Londrina Solid', cursive;
font-weight: 100;
font-size: scale * 30px; /* WANT 40PX */
}
</style>
fonts = html`
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;400;900&display=swap" rel="stylesheet">
</style>`
// simulation results - this REPL can run the simulation:
// https://replit.com/@RussellLim1/world-cup-simulator
results_tally = FileAttachment("results_output_3@2.csv").csv()
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.