function tree(id){
const margin = {top: 10, right: 10, bottom: 10, left: 10},
width = 425 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom).attr("id", "tree-map")
console.log(radios);
var gs = 0;
if (radios == "Grand Slams") {
gs = 1;
} console.log(gs)
if (gs) {d3.select("#titles-won-title").text("Grand Slam Titles Won By Male Players from " + selected_country.country); } else {
console.log("in. here");
console.log(d3.select("#titles-won-title"));
d3.select("#titles-won-title").text("All Professional Titles Won By Male Players from " + selected_country.country); }
var adjusted = [];
if (gs) {
var num = -1;
for (var i = 0; i < gsCountryTitles.length; i++) {
if (gsCountryTitles[i].country_id === id) {num = i;}
}
var raw_data;
if (num >= 0) {
raw_data = gsCountryTitles[num];
adjusted = [{name: "Origin", parent: "", value: ""}, {name: "clay", parent: "Origin", value: raw_data.sum_clay_slams},{name: "hard", parent: "Origin", value: raw_data.sum_hard_slams},{name: "grass", parent: "Origin", value: raw_data.sum_grass_slams},];
} else {
return (emptyTree());
adjusted = [{name: "Origin", parent: "", value: ""}, {name: "clay", parent: "Origin", value: 0},{name: "hard", parent: "Origin", value: 0},{name: "grass", parent: "Origin", value: 0},];
}
// Read data
} else {
var num = -1;
for (var i = 0; i < titles.length; i++) {
if (titles[i].country_id === id) {num = i;}
}
if (num >= 0) {
var raw_data = titles[num];
// Read data
adjusted = [{name: "Origin", parent: "", value: ""}, {name: "clay", parent: "Origin", value: raw_data.clay_titles},{name: "hard", parent: "Origin", value: raw_data.hard_titles},{name: "grass", parent: "Origin", value: raw_data.grass_titles},];
} else {
var raw_data = titles[num];
// Read data
return (emptyTree());
adjusted = [{name: "Origin", parent: "", value: ""}, {name: "clay", parent: "Origin", value: 0},{name: "hard", parent: "Origin", value: 0},{name: "grass", parent: "Origin", value: 0},];
}
}
adjusted = adjusted.filter((n) => {return n.value > 0 || n.name === "Origin"});
// stratify the data: reformatting for d3.js
const root = d3.stratify()
.id(function(d) { return d.name; }) // Name of the entity (column name is name in csv)
.parentId(function(d) { return d.parent; }) // Name of the parent (column name is parent in csv)
(adjusted);
root.sum(function(d) { return +d.value }) // Compute the numeric value for each entity
// Then d3.treemap computes the position of each element of the hierarchy
// The coordinates are added to the root object above
d3.treemap()
.size([width, height])
.padding(4)
(root)
// use this information to add rectangles:
svg
.selectAll("rect")
.data(root.leaves())
.join("rect")
.attr('x', function (d) { return d.x0; })
.attr('y', function (d) { return d.y0; })
.attr('width', function (d) { return d.x1 - d.x0; })
.attr('height', function (d) { return d.y1 - d.y0; })
.style("stroke", "black")
.style("fill", function (d) {
if (d.data.name === "clay") return "#ff968f";
if (d.data.name === "hard") return "#b0caff";
if (d.data.name === "grass") return "green";
}).on('mouseover',function(d, i){
var added = "";
if (gs) added = " grand slam";
d3.select(this)
.style("opacity", .8);
svg.append('text')
.attr('class', 'ptLabel')
.style('background-color', 'white')//Set class to 'ptLabel' so can remove easily later
.attr('x', 0)
.attr('y', 343)
.attr('fill', "black")
.text(selected_country.id + ": " + i.value + added + " title(s) won by male players on " + i.id );
})
.on('mouseout', function(d){
svg.selectAll('.ptLabel').remove()
d3.select(this)
.style("opacity", 1)
});
// and to add the text labels
svg
.selectAll("text")
.data(root.leaves())
.join("text")
.attr("x", function(d){ return d.x0+10}) // +10 to adjust position (more right)
.attr("y", function(d){ return d.y0+20}) // +20 to adjust position (lower)
.text(function(d){ return (d.data.name + ": " + d.data.value) })
.attr("font-size", "15px")
.attr("fill", "white")
return svg.node()
}