{
let svg = html`<svg style="width:500px;height:500px;border:1px lightgray solid;"></svg>`
let element = html`<style>
text {
font-size: 10px;
text-anchor: middle;
fill: #4f442b;
}
g > text.active {
font-size: 30px;
}
circle {
fill: #75739F;
stroke: black;
stroke-width: 1px;
}
circle.active {
fill: #FE9922;
}
circle.inactive {
fill: #C4B9AC;
}
</style>
<div id="viz">${svg}</div>
<div id="controls"></div>`;
d3.select(svg)
.append("g")
.attr("id", "teamsG")
.attr("transform", "translate(50,300)")
.selectAll("g")
.data(worldcup)
.enter()
.append("g")
.attr("class", "overallG")
.attr("transform", (d, i) =>`translate(${(i * 50)}, 0)`);
let teamG = d3.select(svg).selectAll("g.overallG");
teamG
.append("circle")
.attr("r", 20);
teamG
.append("text")
.style("text-anchor", "middle")
.attr("y", 30)
.text(d => d.team);
return element;
}