imported>Jts1882: formatting of clade strcuture illustration /* Technical background */

2019-11-28T17:49:10Z

formatting of clade strcuture illustration Technical background

New page

{{Module rating |beta}}

{{uses TemplateStyles|Template:CladeN/styles.css|Template:Clade gallery/styles.css}}

This module is designed to be used with the [[User:Jts1882/sandbox/templates/CladeN|CladeN]] template to draw phylogenetic trees or cladograms. The new template-module combination extends the feature available with the [[Template:Clade|clade]] and [[Template:Cladex|cladex]] templates. As it replicates the behaviour of the clade and cladex templates it should be suitable for replacing them.

Additionally, the module as the code for a prototype [User:Jts1882/sandbox/templates/NewickConverter|NewickConverter] template, which converts Newick strings into clade structure. This is not to be used in wikipedia articles, but is a utility to help construct cladograms for inclusion in articles.

=== Usage ===

<code><nowiki>{{</nowiki>#invoke:{{BASEPAGENAME}}|main|style={{{style}}}}}</code>

===Examples===

Simple examples mimicking the clade template:

* [[User:Jts1882/sandbox/templates/Template:Passeroidea]]
* [[User:Jts1882/sandbox/templates/Template:Passerida]]

Example demonstrating more advanced features of cladeN:

* [[User:Jts1882/sandbox/test/Felidae]]

Example demonstrating features available:

{{User:Jts1882/sandbox/test/Newick tree}}

===Technical background===

The clade template has many features for customising the appearance. Using them optimally requires some understanding of how the template works. The cladogram is a table and the lines of the cladogram are borders of the cells.

{| class="wikitable"
! Description
! Table cell structure
! Cladogram
! Code using clade template
|-
| style="width:25%;" |A simple clade structure with a single child node (or leaf).This is an HTML table with two rows and two columns. The upper and lower cells in the left column hold the labels provided by {{para|label}} and {{para|sublabel}} parameters, respectively. The the cells of the righthand column are merged using the rowspan attribute.
|style="padding:50px" |
{| style="line-height:100%;border:1px dotted red;margin:1px;"
|-
| style="border:1px dotted green;border-bottom:3px solid black;text-align:center;" | labelA
| rowspan=2 style="border:1px dotted green;padding:0.1em;" |
Leaf A
|-
| style="border:1px dotted green;" | sublabelA
|}
|style="padding:20px" |
{{cladeN |thickness=3
|label1=labelA
|sublabel1=sublabelA
|1=LeafA
}}
|style="padding:20px" |<pre>
{{cladeN |thickness=3
|label1=labelA
|sublabel1=sublabelA
|1=LeafA
}}</pre>
|-
| style="width:20%;" |To build the cladogram, a the text in LeafA can be replaced with another clade structure.Hence a second HTML table is placed inside a the right-hand cell of the outer table.
|style="padding:50px" |
{| style="line-height:100%;border:1px dotted red;margin:1px;"
|-
| style="border:1px dotted green;border-bottom:3px solid black;text-align:center;" | labelA
| rowspan=2 style="border:1px dotted green;padding:0.1em;" |
{| class="clade" style="line-height:100%;border:1px dotted red;margin:1px;"
|-
| style="border:1px dotted green;border-bottom:3px solid black;text-align:center;" | label1
| rowspan=2 style="border:1px dotted green;vertical-align:middle;padding:0 1em;" |leaf1
|-
| style="border:1px dotted green;border-left:3px solid black;text-align:center;" | sublabel1
|-
| style="border:1px dotted green;border-bottom:3px solid black;border-left:3px solid black;text-align:center;" | label2
| rowspan=2 style="border:1px dotted green;vertical-align:middle;padding:0 1em;" |leaf2
|-
| style="border:1px dotted green;text-align:center;" | sublabel2
|}
|-
| style="border:1px dotted green;text-align:center;" | sublabelA
|}
|style="padding:20px" |
{{cladeN |thickness=3
|label1=labelA
|sublabel1=sublabelA
|1={{cladeN |thickness=3
|label1=label1
|sublabel1=sublabel1
|1=leaf1
|label2=label2
|sublabel2=sublabel2
|2=leaf2
}}
}}
|style="padding:20px" |<pre>
{{cladeN |thickness=3
|label1=labelA
|sublabel1=sublabelA
|1={{cladeN |thickness=3
|label1=label1
|sublabel1=sublabel1
|1=leaf1
|label2=label2
|sublabel2=sublabel2
|2=leaf2
}}
}}</pre>
|}

====Add right hand labels with grouplabel====

{| class="wikitable"
! Description
! Table cell structure
! Cladogram
! Code using clade template
|-
| style="width:25%;" |
Bar adds a solid line to the right of the column containing the leaves.
Group label adds an third column to the basic 2x2 clade structure. As with the leaf the two cells are merged using the rowspan attribute.
|style="padding:50px" |
{| style="line-height:100%;border:1px dotted red;margin:1px;"
|-
| style="border:1px dotted green;border-bottom:3px solid black;text-align:center;" | labelA
| rowspan=2 style="border:1px dotted green;border-right:2px solid blue;padding:0.2em;" | Leaf A 
| rowspan=2 style="border:1px dotted green;padding:0.2em;" | Grouplabel A

|-
| style="border:1px dotted green;" | sublabelA
|}
|style="padding:20px" |
{{cladeN |thickness=3
|label1=labelA
|sublabel1=sublabelA
|1=Leaf A 
|bar1=blue
|grouplabel1=Grouplabel A
}}
|style="padding:20px" |<pre>
{{cladeN |thickness=3
|label1=labelA
|sublabel1=sublabelA
|1=Leaf A
|bar1=blue
|grouplabel1=Grouplabel A
}}</pre>
|-
| style="width:20%;" |To build the cladogram, the text in LeafA can be replaced with another clade structure.Hence a second HTML table is placed inside a the right-hand cell of the outer table.
|style="padding:50px" |
{| style="line-height:100%;border:1px dotted red;margin:1px;"
|-
| style="border:1px dotted green;border-bottom:3px solid black;text-align:center;" | labelA
| rowspan=2 style="border:1px dotted green;border-right:2px solid blue; padding:0.2em;" |
{| class="clade" style="line-height:100%;border:1px dotted red;margin:1px;"
|-
| style="border:1px dotted green;border-bottom:3px solid black;text-align:center;" | label1
| rowspan=2 style="border:1px dotted green;vertical-align:middle;padding:0 1em;" |leaf1
|-
| style="border:1px dotted green;border-left:3px solid black;text-align:center;" | sublabel1
|-
| style="border:1px dotted green;border-bottom:3px solid black;border-left:3px solid black;text-align:center;" | label2
| rowspan=2 style="border:1px dotted green;vertical-align:middle;padding:0 1em;" |leaf2
|-
| style="border:1px dotted green;text-align:center;" | sublabel2
|}
| rowspan=2 style="border:1px dotted green;padding:0.2em;" | Grouplabel A
|-
| style="border:1px dotted green;" | sublabelA
|}
|style="padding:20px" |
{{cladeN |thickness=3
|label1=labelA |sublabel1=sublabelA
|grouplabel1=Grouplabel A
|bar1=blue
|1={{cladeN |thickness=3
|label1=label1
|sublabel1=sublabel1
|1= leaf1 
|label2=label2
|sublabel2=sublabel2
|2= leaf2 
}}
}}
|style="padding:20px" |<pre>
{{cladeN |thickness=3
|label1=labelA |sublabel1=sublabelA
|grouplabel1=Grouplabel A
|bar1=blue
|1={{cladeN |thickness=3
|label1=label1
|sublabel1=sublabel1
|1=leaf1 
|label2=label2
|sublabel2=sublabel2
|2=leaf2 
}}
}}</pre>

|-
| style="width:20%;" |Grouplabels can be applied at any level.
|style="padding:50px" |
{| style="line-height:100%;border:1px dotted red;margin:1px;"
|-
| style="border:1px dotted green;border-bottom:3px solid black;text-align:center;" | labelA
| rowspan=2 style="border:1px dotted green;border-right:2px solid blue; padding:0.2em;" |
{| class="clade" style="line-height:100%;border:1px dotted red;margin:1px;"
|-
| style="border:1px dotted green;border-bottom:3px solid black;text-align:center;" | label1
| rowspan=2 style="border:1px dotted green;vertical-align:middle;border-right:2px solid orange;padding:0 2em;" |leaf1
| rowspan=2 style="border:1px dotted green;vertical-align:middle;padding:0 2em;" |GL1
|-
| style="border:1px dotted green;border-left:3px solid black;text-align:center;" | sublabel1
|-
| style="border:1px dotted green;border-bottom:3px solid black;border-left:3px solid black;text-align:center;" | label2
| rowspan=2 style="border:1px dotted green;vertical-align:middle;border-right:2px solid purple;padding:0 2em;" |leaf2
| rowspan=2 style="border:1px dotted green;vertical-align:middle;padding:0 2em;" |GL2
|-
| style="border:1px dotted green;text-align:center;" | sublabel2
|}
| rowspan=2 style="border:1px dotted green;padding:0.2em;" | Grouplabel A
|-
| style="border:1px dotted green;text-align:center;" | sublabelA
|}
|style="padding:20px" |
{{cladeN |thickness=3
|label1=labelA |sublabel1=sublabelA
|grouplabel1=Grouplabel A
|bar1=blue
|1={{cladeN |thickness=3
|label1=label1
|sublabel1=sublabel1
|grouplabel1=GL1
|bar1=orange
|1= leaf1 
|label2=label2
|sublabel2=sublabel2
|grouplabel2=GL2
|bar2=purple
|2= leaf2 
}}
}}
|style="padding:20px" |<pre>
{{cladeN |thickness=3
|label1=labelA |sublabel1=sublabelA
|grouplabel1=Grouplabel A
|bar1=blue
|1={{cladeN |thickness=3
|label1=label1
|sublabel1=sublabel1
|grouplabel1=GL1
|bar1=orange
|1= leaf1 
|label2=label2
|sublabel2=sublabel2
|grouplabel2=GL2
|bar2=purple
|2= leaf2 
}}
}}</pre>
|}

<includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox | |


}}</includeonly>

Module:Sandbox/Jts1882/CladeN/doc - Revision history

imported>Jts1882: formatting of clade strcuture illustration /* Technical background */