arboles.csv

nombre_familia,nombre_comun,cant
Aceráceas,Arce negundo,6651
Aceráceas,Arce tridente,690
Aceráceas,Arce,144
Aceráceas,Arce campestre (Arce común o  Arce menor),116
Aceráceas,Arce real,29
Aceráceas,Arce blanco,17
Adoxaceae,Sauco austral,3
Agavaceae,Yuca,9
Anacardiáceas,Aguaribay,98
Anacardiáceas,Zumaque de Virginia (Rus o Rustifina),33
Anacardiáceas,Rus,8
Anacardiáceas,Schinus,6
Anacardiáceas,Aruera,1
Apocynaceae,Laurel de jardin (Laurel de flor),419
Apocynaceae,Adelfa amarilla,10
Apocynaceae,Guatambu amarillo,3
Apocynaceae,Nerium,2
Apocynaceae,Thevetia,2
Araliaceas,Aralia,29
Araliaceas,Aralia variegada,21
Araliaceas,Cheflera,19
Araliaceas,Aralia elegantisima,8
Araucariaceas,Bunya-bunya (Araucaria de Bidwill),60
Araucariaceas,Araucaria (Araucaria de pisos),46
Araucariaceas,Araucaria,36
Araucariaceas,Pino del Paraná (Pino de Misiones o Pino de Brasil),13
Araucariaceas,Kauri de corteza lisa,11
Araucariaceas,Araucaria columnar,3
Arecaceas,Pindó,1875
Arecaceas,Fenix,331
Arecaceas,Palmera china,179
Arecaceas,Palma de california,109
Arecaceas,Palmera enana,87
Arecaceas,Washingtonia (Palmera washingtonia),84
Arecaceas,Washingtonia,63
Arecaceas,Palmera del senegal,37
Arecaceas,Palma Bangalow  (Palma Rey),26
Arecaceas,Areca,14
Arecaceas,Trachycarpus,10
Arecaceas,Caranday,6
Arecaceas,Fénix paludosa,4
Arecaceas,Palmito,2
Arecaceas,Livistona de China (Palmera china de abanico),2
Betuláceas,Abedul común (Abedul de Europa o Abedul verrugoso),74
Betuláceas,Abedul blanco,13
Bignoniáceas,Jacarandá,10240
Bignoniáceas,Guarán amarillo,470
Bignoniáceas,Lapacho rosado,313
Bignoniáceas,Catalpa,209
Bignoniáceas,Lapacho,180
Bignoniáceas,Lapacho amarillo,79
Bignoniáceas,Lapacho negro,1
Bombacáceas,Palo borracho rosado,1490
Bombacáceas,Palo borracho,227
Bombacáceas,Palo borracho blanco,83
Borragináceas,Guayaibi,2
Buxaceas,Boj común,5
Caprifoliaceas,Viburnum,23
Caprifoliaceas,Bola de nieve,2
Casuarinaceas,Casuarina,451
Celtidacea,Almez del Mississippi,2
Cervantesiaceae,Sombra de toro,2
Cicadaceas,Cica,24
Combretaceae,Palo amarillo,1
Cupresáceas,Ciprés,519
Cupresáceas,Tuya oriental,116
Cupresáceas,Tuya,76
Cupresáceas,Tuja,56
Cupresáceas,Ciprés piramidal,52
Cupresáceas,Macrocarpa (Ciprés de Monterrey o Ciprés de Lambert),35
Cupresáceas,Cedro blanco de California,32
Cupresáceas,Ciprés horizontal,19
Cupresáceas,Arizónica (Ciprés de Arizona),18
Cupresáceas,Falso ciprés de Lawson,12
Cupresáceas,Juniperus,11
Cupresáceas,Ciprés fúnebre (Ciprés llorón chino),8
Cupresáceas,Ciprés blanco,7
Cupresáceas,Libocedro (Calocedro),5
Cupresáceas,Libocedrus,2
Cupresáceas,Cedro de San Juan,1
Cupresáceas,Falso alerce,1
Cupresáceas,Ciprés funerario,1
Ebenaceas,Caqui,9
Esterculiáceas,Brachichiton (Árbol botella, Brachichito),171
Esterculiáceas,Braquiquito,35
Esterculiáceas,Brachichito rosa,14
Euforbiáceas,Falso cafeto,123
Euforbiáceas,Estrella federal,19
Euforbiáceas,Euforbia,10
Fagáceas,Roble común,243
Fagáceas,Roble americano,224
Fagáceas,Roble palustre,170
Fagáceas,Roble,91
Fagáceas,Encina,22
Fagáceas,Castaño,20
Fagáceas,Alcornoque,7
Fagáceas,,0
Fitolacáceas,Ombú,69
Ginkgoaceas,Ginkgo,557
Hamamelidáceas,Liquidambar,4115
Hipocastanáceas,Castaño de Indias común,17
Juglandáceas,Nogal europeo (Nogal común),50
Juglandáceas,Nogal criollo,31
Juglandáceas,Nogal americano,25
Juglandáceas,Pecán,22
Juglandáceas,Juglans,10
Lauráceas,Palto,1249
Lauráceas,Falso Alcanforero,142
Lauráceas,Laurel,88
Lauráceas,Alcanforero,62
Lauráceas,Cinnamomun,16
Lauráceas,Laurel blanco,6
Lauráceas,Laurus,1
Leguminosas,Tipa blanca,8310
Leguminosas,Sófora japónica,2739
Leguminosas,Acacia blanca,1655
Leguminosas,Acacia bola,1111
Leguminosas,Acacia de constantinopla,1033
Leguminosas,Visco (Viscote, Arca),1004
Leguminosas,Acacia,806
Leguminosas,Arce plateado (Arce blanco),530
Leguminosas,Pata de vaca  (Pezuña de vaca),508
Leguminosas,Ceibo,374
Leguminosas,Acacia de Baile (Mimosa de Baile),287
Leguminosas,Ibirá pitá,250
Leguminosas,Mimosa (Aromo francés),200
Leguminosas,Arce japones,187
Leguminosas,Sófora péndula,183
Leguminosas,Timbó (Oreja de negro),159
Leguminosas,Lapachillo,149
Leguminosas,Palo coca,136
Leguminosas,Corona de cristo,114
Leguminosas,Arbol de las orquideas,88
Leguminosas,Acacia frisia,70
Leguminosas,Espinillo (Aromo),50
Leguminosas,Robinia,42
Leguminosas,Algarrobo Blanco,34
Leguminosas,Acacia rosada,29
Leguminosas,Aromo,25
Leguminosas,Carnaval,23
Leguminosas,Plumerillo rojo,19
Leguminosas,Árbol del amor (Ciclamor o  árbol de Judas,18
Leguminosas,Cina cina,16
Leguminosas,Ceibo del monte,13
Leguminosas,Acacia negra,11
Leguminosas,Boungavillea,10
Leguminosas,Casia (Rama negra),7
Leguminosas,Sesbania,7
Leguminosas,Peladera (Liliaque, huaje o guaje),6
Leguminosas,Prosopis,4
Leguminosas,Naranjillo,2
Leguminosas,Acacia verde,2
Leguminosas,Algarrobo,2
Leguminosas,Vainillo,1
Leguminosas,Poinciana (Caesalpinia o Barba de chivo),1
Leguminosas,Inga,1
Litráceas,Crespón (ñrbol de Júpiter),10033
Magnoliáceas,Tulipanero,203
Magnoliáceas,Magnolia,110
Malvácea,Rosa de Siria,522
Malvácea,Rosa de China (Hibisco),473
Malvácea,Abutilo,149
Malvácea,Hibiscus,84
Malvácea,Rosa de mayo,59
Malvácea,Lagunaria (Árbol pica-pica),5
Meliáceas,Paraíso,24077
Meliáceas,Paraíso umbraculifera,82
Meliáceas,Cedro misionero (Cedro colorado o Cedro real),32
Meliáceas,Cedrela,8
Menispermaceas,Coculus, Cóculo,5
Mioporaceas,Siempreverde,7
Mirtáceas,Limpiatubos,1780
Mirtáceas,Eucalipto,80
Mirtáceas,Arrayán (Anacahuita),73
Mirtáceas,Callistemon,57
Mirtáceas,Falso Guayabo (Guayaba del Brasil),21
Mirtáceas,Eucalipto (Eucalipto común),19
Mirtáceas,ñangapirí (Grosella o Cereza de Cayena),17
Mirtáceas,Robusta,8
Mirtáceas,Eucalipto cinerea,8
Mirtáceas,Eucalipto saligna,7
Mirtáceas,Guayabo,7
Mirtáceas,Eucalipto sideroxylon,6
Mirtáceas,Eucalipto tereticornis,5
Mirtáceas,Mirto,4
Mirtáceas,Cerella,2
Mirtáceas,Guabiyú,2
Mirtáceas,Boj cepillo,1
Moráceas,Ficus,23714
Moráceas,Ficus variegado,928
Moráceas,Gomero,828
Moráceas,Morera blanca,636
Moráceas,Morera de papel (Moral de China),113
Moráceas,Morus,82
Moráceas,Higueron,80
Moráceas,Morera negra,76
Moráceas,Higuera,72
Moráceas,Ficus lirá (Árbol lirá),36
Moráceas,Laurel de indias,10
Moráceas,Morera péndula,6
Moráceas,Naranjo de Luisana,3
Moráceas,Ficus herrumbroso (Ficus oxidado o Higuera herrumbrosa),3
Moráceas,Ficus ali,2
Musaceae,Bananero,6
No identificada,No Determinable,5616
No identificada,No Determinado,266
Oleáceas,Fresno americano,138663
Oleáceas,Fresno (Fresno común),10376
Oleáceas,Ligustro,9571
Oleáceas,Ligustro disciplinado (Ligustro variegado),9142
Oleáceas,Fresno,2899
Oleáceas,Ligustrum,457
Oleáceas,Olivo,253
Oleáceas,Ligustrina,120
Oleáceas,Ligustrina de California,13
Oleáceas,Olivo oloroso,4
Oleáceas,Olea,3
Palmaceas,Rafis (Palmerita china),3
Paulowniaceae,Paulonia (Árbol de la emperatriz),5
Pináceas,Pino,171
Pináceas,Cedro del Himalaya,73
Pináceas,Cedro,47
Pináceas,Pino piñonero,29
Pináceas,Cedro del Atlas (Cedro plateado o Cedro atlántico),25
Pináceas,Cedro del Himalaya variedad aurea,24
Pináceas,Pino de las canarias,24
Pináceas,Cedro azulado,22
Pináceas,Pino de Siberia,7
Pináceas,Picea,6
Pináceas,Pino carrasco (Pino de Jerusalén),5
Pináceas,Cedro del Líbano  (Cedro de Salomón),2
Pináceas,Pino rodeno,1
Pitosporáceas,Azarero,62
Pitosporáceas,Pitosporum,3
Platanaceae,Plátano,33019
Platanaceae,Plátano de Oriente (Plátano oriental),363
Podocarpaceae,Afrocarpus,5
Polygonaceas,Viraró (Viraró crespo),1
Proteáceas,Roble sedoso (Grevillea),151
Proteáceas,Grevillea,6
Punicaceas,Granado,8
Ramnaceas,Árbol de las pasas,9
Rosáceas,Níspero japonés,1047
Rosáceas,Ciruelo de jardín,668
Rosáceas,Fotinia,403
Rosáceas,Ciruelo rojo,99
Rosáceas,Prunus,98
Rosáceas,Durazno,92
Rosáceas,Ciruelo,76
Rosáceas,Cerezo,24
Rosáceas,Cotoneaster,9
Rosáceas,Malus,3
Rosáceas,Membrillero,3
Rosáceas,Crataegus,3
Rosáceas,Espino de fuego,1
Rubiaceae,Jazmín,3
Ruscaceae,Drácena indivisa,89
Ruscaceae,Drácena marginata,63
Ruscaceae,dracaena,4
Ruscaceae,Nolina,1
Rutaceas,Limonero,1018
Rutaceas,Naranjo amargo,333
Rutaceas,Citricos,315
Rutaceas,Mandarino,312
Rutaceas,Naranjo dulce,117
Rutaceas,Arbol del pomelo,43
Rutaceas,Lima,16
Rutaceas,Quinoto,11
Rutaceas,Canela de venado,1
Salicáceas,Álamo carolina,1737
Salicáceas,Sauce llorón,942
Salicáceas,Sauce eléctrico,589
Salicáceas,Álamo,406
Salicáceas,Álamo plateado,321
Salicáceas,Sauce criollo,248
Salicáceas,Sauce,145
Salicáceas,Álamo negro,105
Salicáceas,Álamo blanco piramidal,77
Salicáceas,Álamo de Italia,68
Salicáceas,Sauce blanco,45
Salicáceas,Álamo negro del Canada,32
Salicáceas,Sauce blanco variedad tristis,7
Sapindaceas,Chal Chal,3
Sapindaceas,Mataojos,1
Simarrubáceas,Árbol del cielo (Ailanto o Árbol de los dioses),1368
Simarrubáceas,Ailanthus,34
Solanaceas,Jazmín del Paraguay,15
Solanaceas,Tabaquillo,13
Sterculiaceae,Parasol de la china,67
Sterculiaceae,Esterculea,1
Taxodiáceas,Ciprés calvo,48
Taxodiáceas,Criptomeria (Cedro del Japón),12
Taxodiáceas,Ahuehuete,2
Taxodiáceas,Taxodium,1
Taxodiáceas,Cedro del Japón,1
Teaceae,Camelia,3
Tiliaceas,Tilo,16981
Tiliaceas,Sota Caballo ,9
Ulmaceas,Olmo europeo,350
Ulmaceas,Olmo,332
Ulmaceas,Almez (Almecino o Almecina),163
Ulmaceas,Celtis tala,17
Ulmaceas,Olmo de montaña,7
Ulmaceas,Almez de china,3
Verbenaceas,Duranta,15
Verbenaceas,Duranta variedad aurea,3
Verbenaceas,Espina del bañado,1

index.html

<!DOCTYPE HTML>
<html>
<head>
    <title>Circle Pack with Truncated Labels</title>
    <meta charset="utf-8">
    <!-- poor man's browser detection -->
    <!--[if IE]><script type="text/javascript">window['isIE'] = true;</script><![endif]-->
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    
    <style type="text/css">
        html, body {
            overflow: hidden;
            margin: 0;
            font-family: "Helvetica Neue", Helvetica;
        }
        text {
            font-size: 11px;
            pointer-events: none;
        }

        text.parent {
            fill: #1f77b4;
        }

        circle {
            fill: #ccc;
            stroke: #999;
            pointer-events: all;
        }

        circle.parent {
            fill: #1f77b4;
            fill-opacity: .1;
            stroke: steelblue;
        }

        circle.parent:hover {
            stroke: #ff7f0e;
            stroke-width: .5px;
        }

        circle.child {
            pointer-events: none;
        }
    </style>
</head>
<body>

<script type="text/javascript">
    var w = 650,
        h = 565,
        r = 500,
        x = d3.scale.linear().range([0, r]),
        y = d3.scale.linear().range([0, r]),
        node,
        root;

    var pack = d3.layout.pack()
        .size([r, r])
        .value(function(d) { return d.cant; });

    var vis = d3.select("body").insert("svg:svg", "h2")
        .attr("width", w)
        .attr("height", h)
        .append("svg:g")
        .attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");

    d3.json("http://www.billdwhite.com/wordpress/wp-content/data/flare2.json", function(data) {
        node = root = data;

        var nodes = pack.nodes(root);

        vis.selectAll("circle")
            .data(nodes)
            .enter().append("svg:circle")
            .attr("class", function(d) { return d.children ? "parent" : "child"; })
            .attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; })
            .attr("r", function(d) { return d.r; })
            .on("click", function(d) { return zoom(node == d ? root : d); });

        vis.selectAll("text")
            .data(nodes)
            .enter().append("svg:text")
            .attr("class", function(d) { return d.children ? "parent" : "child"; })
            .attr("x", function(d) { return d.x; })
            .attr("y", function(d) { return d.y; })
            .attr("dy", ".35em")
            .attr("text-anchor", "middle")
            .style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
            .text(function(d) {
                return d.nombre_familia;
            });

        d3.select(window).on("click", function() { zoom(root); });
    });


    function zoom(d, i) {
        var k = r / d.r / 2;
        x.domain([d.x - d.r, d.x + d.r]);
        y.domain([d.y - d.r, d.y + d.r]);

        var t = vis.transition()
            .duration(d3.event.altKey ? 7500 : 750);

        t.selectAll("circle")
            .attr("cx", function(d) { return x(d.x);  })
            .attr("cy", function(d) { return y(d.y);  })
            .attr("r", function(d)  { return k * d.r; });

        // updateCounter is a hacky way to determine when transition is finished
        var updateCounter = 0;

        t.selectAll("text")
            .style("opacity", 0)
            .attr("x", function(d) { return x(d.x); })
            .attr("y", function(d) { return y(d.y); })
            .each(function(d, i) {
                updateCounter++;
            })
            .each("end", function(d, i) {
                updateCounter--;
                if (updateCounter == 0) {
                    adjustLabels(k);
                }
            });

        node = d;
        d3.event.stopPropagation();
    }


    function adjustLabels(k) {
        vis.selectAll("text")
            .style("opacity", function(d) {
                return k * d.r > 20 ? 1 : 0;
            })
            .text(function(d) {
                return d.nombre_familia;
            })
            .filter(function(d) {
                d.tw = this.getComputedTextLength();
                return (Math.PI*(k*d.r)/2) < d.tw;
            })
            .each(function(d) {
                var proposedLabel = d.nombre_familia;
                var proposedLabelArray = proposedLabel.split('');
                while ((d.tw > (Math.PI*(k*d.r)/2) && proposedLabelArray.length)) {
                    // pull out 3 chars at a time to speed things up (one at a time is too slow)
                    proposedLabelArray.pop();proposedLabelArray.pop(); proposedLabelArray.pop();
                    if (proposedLabelArray.length===0) {
                        proposedLabel = "";
                    } else {
                        proposedLabel = proposedLabelArray.join('') + "..."; // manually truncate with ellipsis
                    }
                    d3.select(this).text(proposedLabel);
                    d.tw = this.getComputedTextLength();
                }
            });
    }
</script>
</body>
</html>