Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <title> Evolution tree example </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treantjs@1.0.0/Treant.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/example6.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treantjs@1.0.0/vendor/perfect-scrollbar/perfect-scrollbar.css">

  </head>

  <body>
    <div class="chart" id="OrganiseChart6"></div>
    <script src="https://cdn.jsdelivr.net/npm/treantjs@1.0.0/vendor/raphael.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/treantjs@1.0.0/Treant.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/treantjs@1.0.0/vendor/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/treantjs@1.0.0/vendor/jquery.mousewheel.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/treantjs@1.0.0/vendor/perfect-scrollbar/perfect-scrollbar.js"></script>

    <script>
      var tree_structure = {
        chart: {
          container: "#OrganiseChart6",
          levelSeparation: 25,
          siblingSeparation: 70,
          subTeeSeparation: 70,
          nodeAlign: "BOTTOM",
          scrollbar: "fancy",
          padding: 35,
          node: {
            HTMLclass: "evolution-tree"
          },
          connectors: {
            type: "curve",
            style: {
              "stroke-width": 2,
              "stroke-linecap": "round",
              "stroke": "#ccc"
            }
          }
        },

        nodeStructure: {
          text: {
            name: "LIFE"
          },
          HTMLclass: "the-parent",
          children: [{
              text: {
                name: "true bacteria"
              },
              image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/truebacteria.png"
            },
            {
              pseudo: true,
              children: [{
                  text: {
                    name: "archea bacteria"
                  },
                  image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/archaebacteria.png"
                },
                {
                  text: {
                    name: "EUKARYOTES"
                  },
                  HTMLclass: "the-parent",
                  children: [{
                      text: {
                        name: "protocists"
                      },
                      image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/protoctis.png"
                    },
                    {
                      pseudo: true,
                      children: [{
                          text: {
                            name: "PLANTS"
                          },
                          HTMLclass: "the-parent",
                          children: [{
                              pseudo: true,
                              children: [{
                                  pseudo: true,
                                  children: [{
                                      pseudo: true,
                                      children: [{
                                          text: {
                                            name: "flowering seed plants"
                                          },
                                          image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/cvijece2.png"
                                        },
                                        {
                                          text: {
                                            name: "non-flowering seed plants"
                                          },
                                          image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/ne_cvijece.png"
                                        }
                                      ]
                                    },
                                    {
                                      text: {
                                        name: "ferns and fern allies"
                                      },
                                      image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/ferns.png"
                                    }
                                  ]
                                },
                                {
                                  text: {
                                    name: "mosses and allies"
                                  },
                                  image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/mosses.png"
                                }
                              ]
                            },
                            {
                              text: {
                                name: "green algae"
                              },
                              image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/greenalgae.png"
                            }
                          ]
                        },
                        {
                          pseudo: true,
                          children: [{
                              text: {
                                name: "fungi and lichens"
                              },
                              image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/fungi.png"
                            },
                            {
                              text: {
                                name: "ANIMALS"
                              },
                              HTMLclass: "the-parent",
                              children: [{
                                  text: {
                                    name: "sponges"
                                  },
                                  image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/spuzva.png"
                                },
                                {
                                  pseudo: true,
                                  children: [{
                                      text: {
                                        name: "cnidarians"
                                      },
                                      image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/cnidarians.png"
                                    },
                                    {
                                      pseudo: true,
                                      childrenDropLevel: 1,
                                      children: [{
                                          pseudo: true,
                                          children: [{
                                              text: {
                                                name: "echinoderms"
                                              },
                                              image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/zvezda.png"
                                            },
                                            {
                                              text: {
                                                name: "VERTEBRATES"
                                              },
                                              HTMLclass: "the-parent",
                                              children: [{
                                                  text: {
                                                    name: "cartilaginous fish"
                                                  },
                                                  image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/cartilaginousfish.png"
                                                },
                                                {
                                                  text: {
                                                    name: "bony fish"
                                                  },
                                                  image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/bonyfish.png"
                                                },
                                                {
                                                  text: {
                                                    name: "TETRAPODS"
                                                  },
                                                  HTMLclass: "the-parent",
                                                  children: [{
                                                      text: {
                                                        name: "amphibians"
                                                      },
                                                      image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/zaba.png"
                                                    },
                                                    {
                                                      text: {
                                                        name: "AMNIOTES"
                                                      },
                                                      HTMLclass: "the-parent",
                                                      children: [{
                                                          pseudo: true,
                                                          children: [{
                                                              text: {
                                                                name: "turtles"
                                                              },
                                                              image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/kornjaca.png"
                                                            },
                                                            {
                                                              pseudo: true,
                                                              children: [{
                                                                  text: {
                                                                    name: "snakes and lizards"
                                                                  },
                                                                  image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/zmijurina.png"
                                                                },
                                                                {
                                                                  text: {
                                                                    name: "crocodiles and birds"
                                                                  },
                                                                  image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/ptica.png"
                                                                }
                                                              ]
                                                            }
                                                          ]
                                                        },
                                                        {
                                                          text: {
                                                            name: "mammals"
                                                          },
                                                          image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/slon.png"
                                                        }
                                                      ]
                                                    }
                                                  ]
                                                }
                                              ]
                                            }
                                          ]
                                        },
                                        {
                                          text: {
                                            name: "ARTHROPODS"
                                          },
                                          HTMLclass: "the-parent",
                                          children: [{
                                              text: {
                                                name: "chelicerates"
                                              },
                                              image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/chelirates.png"
                                            },
                                            {
                                              pseudo: true,
                                              stackChildren: true,
                                              children: [{
                                                  text: {
                                                    name: "crustaceans"
                                                  },
                                                  image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/rak.png"
                                                },
                                                {
                                                  text: {
                                                    name: "insects and myriapods"
                                                  },
                                                  image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/insekti.png"
                                                }
                                              ]
                                            }
                                          ]
                                        },
                                        {
                                          pseudo: true,
                                          children: [{
                                              text: {
                                                name: "flatworms"
                                              },
                                              image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/flatare.png"
                                            },
                                            {
                                              text: {
                                                name: "lophophorates"
                                              },
                                              image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/lophoprates.png"
                                            }

                                          ]
                                        },
                                        {
                                          pseudo: true,
                                          childrenDropLevel: 1,
                                          stackChildren: true,
                                          children: [{
                                              text: {
                                                name: "rotifers"
                                              },
                                              image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/rotfiers.png"
                                            },
                                            {
                                              text: {
                                                name: "roundworms"
                                              },
                                              image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/roundworms.png"
                                            }
                                          ]
                                        },
                                        {
                                          pseudo: true,
                                          childrenDropLevel: 1,
                                          stackChildren: true,
                                          children: [{
                                              text: {
                                                name: "mollusks"
                                              },
                                              image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/mosculs.png"
                                            },
                                            {
                                              text: {
                                                name: "segmented worms"
                                              },
                                              image: "https://cdn.jsdelivr.net/npm/treantjs@1.0.0/examples/evolution-tree/img/segmentedworms.png"
                                            }
                                          ]
                                        }
                                      ]
                                    }
                                  ]
                                }
                              ]
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      };


      new Treant(tree_structure);

    </script>
  </body>

</html>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console