// Definimos las dimensiones
var margin = { top: 10, right:20, bottom: 20, left: 20 },
width = 900 - margin.left - margin.right,
height = 900 - margin.top - margin.bottom;
// Se inserta el svg
var svg = d3.select("svg")
//se le asignar los atributos de tama�o
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
//se le asigna una posici�n en el marco
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('font-family', 'Amatic SC')
.attr('font-size', "15")
.attr('text-anchor', "middle");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var pack = d3.pack()
.size([width, height])
.padding(1.5);
d3.csv("MARNOBA_Muestreos.csv",
function(error, classes) {
if (error) throw error;
var root = d3.hierarchy({children: classes})
.sum(function(d) { return d.N_item; })
.each(function(d) {
if (id = d.data.ItemMarnoba) {
var id, i = id.lastIndexOf();
d.id = id;
d.N_item = d.data.N_item
d.package = d.data.CategoriaMarnoba;
d.class = d.data.ItemMarnoba;
}
});
var node = svg.selectAll(".node")
.data(pack(root).leaves())
.enter().append("g")
.attr("class", "node")
.attr("transform",
function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
var div = d3.select('#tooltip');
node.append("circle")
.attr("id", function(d) { return d.id; })
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.package); })
.on('mouseover', function(d) {
// Black stroke when mouse over circle
d3.select(this)
.transition().duration(200)
.attr('r', function(d) { return d.r + 1; })
.style('stroke', 'black')
.style('stroke-width', 2);
div.transition().duration(100)
.style('opacity', 1);
div.html(''
+ d.package
+ ' Subcategoria: '
+ d.class
+ ' Objetos: '
+ d.N_item + '')
.style('left', w/2 + 'px')
.style('top', 0 + 'px');
})
.on('mousemove', function(d) {
div.transition()
.duration(100)
.style('opacity', 1);
div.html(''
+ d.package
+ ' subcategoria '
+ d.class + ' Objetos '
+ d.N_item+ '')
.style('left', w/2 + 'px')
.style('top', 0 + 'px');
})
.on('mouseout', function(d) {
d3.select(this)
.transition().duration(200)
.attr('r', function(d){ return d.r; })
.style('stroke',
function(d) { return color(d.package); })
.style('stroke-width', 1);
div.transition()
.duration(500)
.style('opacity', 0);
});
node.append("clipPath")
.attr("id", function(d) { return "clip-" + d.id; })
.append("use")
.attr("xlink:href", function(d) { return "#" + d.id; });
node.append("text")
.attr("clip-path",
function(d) { return "url(#clip-" + d.id + ")"; })
.selectAll("tspan")
.data(function(d) {
return d.class.split(/(?=[A-Z][^A-Z])/g);
})
.enter().append("tspan")
.attr("x", 0)
.attr("y", function(d, i, nodes) {
return 13 + (i - nodes.length / 2 - 0.5) * 10;
})
.text(function(d) { return d; });
node.append("title")
.text(function(d) {
return d.id + "\n" + format(d.N_item);
});
});