chart = {
const root = d3.hierarchy({children: data})
.sum(function(d) { return d['Times_visited']; })
const svg = d3.create("svg")
.attr("class","graph")
.attr("viewBox", [0, 0, width, height])
.attr("font-size", 10)
.attr("font-family", "Roboto")
.attr("text-anchor", "middle");
const tooltip = d3.select("body")
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.style("background-color", "black")
.style("border-radius", "5px")
.style("padding", "5px")
.style("color", "white")
.style("position", "absolute");
let showTooltip = function(event, d) {
tooltip
.transition()
.duration(200)
tooltip
.style("opacity", 1)
.html("<b>Domain: " + d.data.domain)
.style("left", (d.x + (d3.pointer(this)[0] + 30)) + "px")
.style("top", (d.y + (d3.pointer(this)[1] + 30)) + "px");
}
let moveTooltip = function(d) {
tooltip
.style("left", (d.x + (d3.pointer(this)[0] + 200)) + "px")
.style("top", (d.y + (d3.pointer(this)[1] + 200)) + "px");
}
let hideTooltip = function(d) {
tooltip
.transition()
.duration(200)
.style("opacity", 0);
}
const node = svg.selectAll(".node")
.data(pack(root).leaves())
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { console.log('data on transform',d); return "translate(" + d.x + "," + d.y + ")"; })
.on("mouseover", showTooltip)
.on("mousemove", moveTooltip)
.on("mouseleave", hideTooltip);
node.append("circle")
.data(pack(root).leaves())
.attr("id", function(d) { return d.id; })
.attr("r", function(d) { return d.r; })
.attr("fill", function (d) {return d.data.fill})
.on('mouseover', function(){
d3.select(this)
.attr('stroke-width',6)
.style('stroke', 'black');
})
.on('mouseout', function(ev,d) {
d3.select(this)
.attr('stroke-width',0)
.style('stroke', d.data.fill);
});
node.append("text")
.attr("class","labels")
.attr("dy", ".2em")
.text(function(d) {
return d.data.domain ;
})
.attr("font-family", "Roboto")
.attr("font-size", function(d){
return d.r/5;
})
.attr("fill", "white")
.style("text-anchor", "middle")
node.append("text")
.attr("class","SecondLabels")
.attr("dy", "1.8em")
.text(function(d) {
return d.data.Times_visited;
})
.attr("font-family", "Roboto")
.attr("font-size", function(d){
return d.r/7;
})
.attr("fill", "white")
.style("text-anchor", "middle");
svg.node().drawData = function updateData(variable) {
var dict = {
domain: "Domain",
times_visited: "Times_Visited"
};
var root = d3.hierarchy({children: data})
.sum(function(d) { return d[variable]; })
.sort(function(a, b) { return b[variable] - a[variable]; })
var node = svg.selectAll(".node")
.data(pack(root).leaves())
.transition()
.duration(2000)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.select("circle")
.attr("id", function(d) { return d.id; })
.attr("r", function(d) { return d.r; })
.attr("fill", function (d) { return d.data.fill});
svg.selectAll(".node").select(".labels")
.transition()
.duration(2000)
.attr("dy", ".2em")
.style("text-anchor", "middle")
.text(function(d) {
return d.data.domain;
})
.attr("font-size", function(d){
return d.r/5;
})
.attr("fill", "white")
.attr("font-family", "Roboto");
svg.selectAll(".node").select(".SecondLabels")
.transition()
.delay(500)
.duration(1000)
.attr("dy", "1.8em")
.text(function(d) {
return d.data[dict[variable]];
})
.attr("font-family", "Roboto")
.attr("font-size", function(d){
return d.r/7;
})
.attr("fill", "white")
.style("text-anchor", "middle");
}
return svg.node();
}