{
let width = 932;
let height = 932;
const svgHTML = html`<svg width="${width}" height="${height}"></svg>`;
const svg = d3.select(svgHTML)
.style("width", "100%")
.style("height", "auto")
const leaf = svg.selectAll("g")
.data(highest_packed_data.leaves())
.enter().append("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
let circle = leaf.append("circle")
.attr("r", d => d.r)
.attr("fill", d => {
if(d.data.isGrowing){
return "#80a8b2";
}
else{
return "#d9534f";
}
});
let innerCircles = leaf.append("circle")
.attr("r", d => {
let scale = d3.scaleSqrt()
.domain([0, d.data.Miles_High])
.range([0,d.r]);
return scale(d.data.Miles_Low);
})
.attr("fill", "#d9edf7");
let current_circle = undefined;
let format = d3.format(",d")
function selectOccupation(d) {
if(current_circle !== undefined){
current_circle.attr("fill", d => "#d9edf7");
svg.selectAll("#details-popup").remove();
}
current_circle = d3.select(this);
current_circle.attr("fill","#b2e1f9");
let textblock = svg.selectAll("#details-popup")
.data([d])
.enter()
.append("g")
.attr("id", "details-popup")
.attr("font-size", 14)
.attr("font-family", "sans-serif")
.attr("text-anchor", "start")
.attr("transform", d => `translate(0, 20)`);
textblock.append("text")
.text("Type:"+ d.data.Type)
.attr("font-weight", "bold");
textblock.append("text")
.text(d => "Road miles (billions): " + d.data.Y2018)
.attr("y", "16");
}
innerCircles.on("click", selectOccupation);
return svg.node()
}