Adding key, adjusting node shape and magnifying a tikz diagram

Question

I wish to reproduce the diagram shown in the picture below:

Below is my MWE which I developed by imitating the solution provided at Modifying a decision tree terminal nodes using `tikz`.

\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{arrows,
    patterns,positioning,
    shadows,shapes,
    trees}
\definecolor{blue}{HTML}{0081FF}
\begin{document}
    \begin{figure}
        \centering
            \begin{tikzpicture}[
                ->,>=stealth',
                level/.style={sibling distance = 3cm/#1, level distance = 10mm},

                basic/.style = {draw, drop shadow, font=\sffamily\small, text=white,
                    rounded corners=2pt, thin}, % <---
                split/.style = {basic, fill=blue},    % <---
                leaf/.style = {basic, fill=#1},      % <---
                leaf/.default = red
                ]
                \node [split,rectangle, draw, fill=black,minimum size=.8cm] {}
                child{ node [split,circle,minimum size=.8cm] {}
                    child{ node [leaf,circle,minimum size=.4cm] {}}
                    child{ node [split, circle, minimum size=.8cm] {}
                        child{ node [split,circle,minimum size=.8cm] {} 
                            child{ node [leaf,circle,minimum size=.4cm] {}}
                            child{ node [leaf,circle,minimum size=.4cm] {}}}
                        child{ node [leaf,circle,minimum size=.4cm] {}}
                        }
                    }
                %
                child{ node [split,circle,minimum size=.8cm] {}
                    child{ node [leaf,circle,minimum size=.4cm] {}}
                    child{ node [split,circle,minimum size=.8cm] {}
                        child{ node [leaf,circle,minimum size=.4cm] {}}
                        child{ node [leaf,circle,minimum size=.4cm] {}}
                         }
                    };
            \end{tikzpicture}
        \caption{Tree Structure}
        \label{fig:decision-tree}
    \end{figure}
\end{document}

Here are the challenges with my MWE:

I have failed to add the key of my decision tree as shown in the picture I wish to reproduce. The key is supposed to be a black rectangle for a root, a blue circle for an internal node and a small red circle for a terminal node. NB: I wish to have this key to my tree structure diagram take the same layout as the one in the picture that I wish to reproduce.
I have also failed to create a rectangular black node in my MWE. I have tried to specify the shape of the node (the root of my decision tree) and to adjust its size using the command \node [split,rectangle, draw, fill=black,minimum size=.8cm] as in How to change the size of nodes? but the node remains a square.
I have also failed to magnify the diagram in my MWE, the tikz diagram is too huddled at the moment.

Progress made so far:

Thanks to @Raffaele Santoro problems 2 and 3 above have been solved. What is left now is problem 1. I wish to have a key to my tree diagram appear as one in the picture that I wish to reproduce. The key added by @Raffaele Santoro is not in the layout that I wish (The key is supposed to take the same layout as the one in the picture that I wish to reproduce). I would greatly appreciate all forms of help in solving this one remaining problem. Below is the updated MWE thanks to @Raffaele Santoro:

\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{arrows,
    patterns,positioning,
    shadows,shapes,
    trees}
\definecolor{blue}{HTML}{0081FF}
\begin{document}
    \begin{figure}
        \centering
        \begin{tikzpicture}[scale=2,
            -,line width=1.5mm,>=stealth',
            level/.style={sibling distance = 3cm/#1, level distance = 10mm},

            basic/.style = {draw, drop shadow, font=\sffamily\small, text=white,
                rounded corners=2pt, thin}, % <---
            split/.style = {basic, fill=blue},    % <---
            leaf/.style = {basic, fill=#1},      % <---
            leaf/.default = red
            ]
            \node [split,rectangle, draw, fill=black,minimum width=3cm,minimum height=1.1cm] {}
            child{ node [split,circle,minimum size=1cm] {}
                child{ node [leaf,circle,minimum size=.5cm] {}}
                child{ node [split, circle, minimum size=1cm] {}
                    child{ node [split,circle,minimum size=1cm] {} 
                        child{ node [leaf,circle,minimum size=.5cm] {}}
                        child{ node [leaf,circle,minimum size=.5cm] {}}}
                    child{ node [leaf,circle,minimum size=.5cm] {}}
                }
            }
            %
            child{ node [split,circle,minimum size=1cm] {}
                child{ node [leaf,circle,minimum size=.5cm] {}}
                child{ node [split,circle,minimum size=1cm] {}
                    child{ node [leaf,circle,minimum size=.5cm] {}}
                    child{ node [leaf,circle,minimum size=.5cm] {}}
                }
            };
            \fill (-3,-5.5) rectangle(-2,-5.25) (-1.5,-5.5 ) node () {ROOT}; 
            \fill[blue] (-3,-6.5) circle(.4)  (-1.5,-6.5 )node () {Text for blue circle};
            \fill[red] (-3,-7.5) circle(.2)  (-2,-7.5) node () {Text for red circle};
    \end{tikzpicture}
    \caption{Tree Structure}
    \label{fig:decision-tree}
\end{figure}

\end{document}

Below is the output from the updated MWE:

Raffaele Santoro · Answer 1 · 2023-11-12T17:00:28.137

Like this:

Code:

\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{arrows,
    patterns,positioning,
    shadows,shapes,
    trees}
\definecolor{blue}{HTML}{0081FF}
\begin{document}
    \begin{figure}
        \centering
        \begin{tikzpicture}[scale=3,
            ->,>=stealth',
            level/.style={sibling distance = 3cm/#1, level distance = 10mm},

            basic/.style = {draw, drop shadow, font=\sffamily\small, text=white,
                rounded corners=2pt, thin}, % <---
            split/.style = {basic, fill=blue},    % <---
            leaf/.style = {basic, fill=#1},      % <---
            leaf/.default = red
            ]
            \node[white] [split,rectangle, draw, fill=black,minimum size=2cm] {\Large \bfseries Long text indide}
            child{ node [split,circle,minimum size=2cm] {}
                child{ node [leaf,circle,minimum size=1cm] {}}
                child{ node [split, circle, minimum size=2cm] {}
                    child{ node [split,circle,minimum size=2cm] {} 
                        child{ node [leaf,circle,minimum size=1cm] {}}
                        child{ node [leaf,circle,minimum size=1cm] {}}}
                    child{ node [leaf,circle,minimum size=1cm] {}}
                }
            }
            %
            child{ node [split,circle,minimum size=2cm] {}
                child{ node [leaf,circle,minimum size=1cm] {}}
                child{ node [split,circle,minimum size=2cm] {}
                    child{ node [leaf,circle,minimum size=1cm] {}}
                    child{ node [leaf,circle,minimum size=1cm] {}}
                }
            };
        \end{tikzpicture}
        \caption{Tree Structure}
        \label{fig:decision-tree}
    \end{figure}
\end{document}

ADD: Its the better I can have for You:

Code:

\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{arrows,
    patterns,positioning,
    shadows,shapes,
    trees}
\definecolor{blue}{HTML}{0081FF}
\begin{document}
    \begin{figure}
        \centering
        \begin{tikzpicture}[scale=2,
            ->,>=stealth',
            level/.style={sibling distance = 3cm/#1, level distance = 10mm},

            basic/.style = {draw, drop shadow, font=\sffamily\small, text=white,
                rounded corners=2pt, thin}, % <---
            split/.style = {basic, fill=blue},    % <---
            leaf/.style = {basic, fill=#1},      % <---
            leaf/.default = red
            ]
            \node [split,rectangle, draw, fill=black] {\Huge \textcolor{black}{long text}}
            child{ node [split,circle,minimum size=2cm] {}
                child{ node [leaf,circle,minimum size=1cm] {}}
                child{ node [split, circle, minimum size=2cm] {}
                    child{ node [split,circle,minimum size=2cm] {} 
                        child{ node [leaf,circle,minimum size=1cm] {}}
                        child{ node [leaf,circle,minimum size=1cm] {}}}
                    child{ node [leaf,circle,minimum size=1cm] {}}
                }
            }
            %
            child{ node [split,circle,minimum size=2cm] {}
                child{ node [leaf,circle,minimum size=1cm] {}}
                child{ node [split,circle,minimum size=2cm] {}
                    child{ node [leaf,circle,minimum size=1cm] {}}
                    child{ node [leaf,circle,minimum size=1cm] {}}
                }
            };
            \fill (-3,-5.5) rectangle(-2,-5.25) (-1.5,-5.5 ) node () {ROOT}; 
            \fill[blue] (-3,-6.5) circle(.4)  (-1.5,-6.5 )node () {Text for blue circle};
            \fill[red] (-3,-7.5) circle(.2)  (-2,-7.5) node () {Text for red circle};
    \end{tikzpicture}
        \caption{Tree Structure}
    \label{fig:decision-tree}
    \end{figure}

\end{document}

Thanks @Raffaele Santoro. Problem number 3 has been solved now. However I am still experiencing problems 1 and 2. You have managed to make the root of my decision diagram rectangular in shape by using some text. However the root of my decision tree is supposed to be a black rectangle without any text. Also, I would gladly appreciate to have a key to the tree diagram as shown in the picture that I wish to reproduce. Once again thank you. — itc, Nov 12 '23 at 16:00
Thank you very much @Raffaele Santoro. Problems 2 and 3 have been solved now. However Problem 1 still stands. Can you kindly assist with making the adjustments to the key so that it is properly aligned and also it takes the same layout as the diagram that I wish to reproduce. — itc, Nov 13 '23 at 09:57

Zarko · Answer 2 · 2023-11-13T17:56:26.803

Mostly of topic (sorry, your question is not entirely clear to me, your MWE to me looks fine) ... so some effort is put in writing a shorter code:

\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{arrows,
                positioning,
                shadows}
\definecolor{blue}{HTML}{0081FF}
\begin{document}
    \begin{figure}
        \centering
        \tikzset{      > = stealth',
            basic/.style = {draw, thin, fill=#1, inner sep=0pt,
                            font=\sffamily\small, text=white,
                            drop shadow}, 
              root/.style = {basic=black, rounded corners, minimum height=6mm, minimum width=12mm},
             split/.style = {basic=blue, circle, minimum size=8mm},
              leaf/.style = {basic=red, circle, minimum size=2mm},
               lbl/.style = {scale=0.6, below right = of #1, align=left, text=black}
                    }
            \begin{tikzpicture}[scale=2, % or whatever magnification factor you wish
                level/.style={sibling distance = 3cm/#1, level distance = 10mm},
                 ]
            \node [root] {}
                child{ node [split] {} 
                    child{ node (L) [leaf, name=L] {}}
                    child{ node [split] {} 
                            child{ node [split] {}
                                child{ node (B) [leaf] {}}
                                child{ node [leaf] {}}

                                }
                            child{ node [leaf] {}}
                        }
                    }
                child{ node [split] {}
                        child{ node [leaf] {}}
                        child{ node [split] {}
                                child{ node [leaf] {}}
                                child{ node [leaf] {}}
                            }
                    };
             \end{tikzpicture}\[2ex]
    \begin{tabular}{rl}
            \tikz[baseline=-3pt]\node[scale=0.6, root] {}; &amp; root   \\[3pt]
            \tikz[baseline=-3pt]\node[scale=0.6, split]{}; &amp; split  \\[3pt]
            \tikz[baseline=-3pt]\node[leaf] {};            &amp; leaf
    \end{tabular}\hfil~

    \caption{Tree Structure}
    \label{fig:decision-tree}
\end{figure}

\end{document}

However, to my taste looks nicer, if legends are right of tree:

For this design are needed minor changes (marked by <--- to previous MWE:

\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{arrows,
                positioning,
                shadows}
\definecolor{blue}{HTML}{0081FF}
\begin{document}
    \begin{figure}
        \centering
        \tikzset{      > = stealth',
            basic/.style = {draw, thin, fill=#1, inner sep=0pt,
                            font=\sffamily\small, text=white,
                            drop shadow}, 
              root/.style = {basic=black, rounded corners, minimum height=6mm, minimum width=12mm},
             split/.style = {basic=blue, circle, minimum size=8mm},
              leaf/.style = {basic=red, circle, minimum size=2mm},
               lbl/.style = {scale=0.6, below right = of #1, align=left, text=black}
                    }
            \begin{tikzpicture}[scale=1.5,
                baseline=(current bounding box.center),
                level/.style={sibling distance = 3cm/#1, level distance = 10mm},
                 ]
            \node [root] {}
                child{ node [split] {} 
                    child{ node (L) [leaf, name=L] {}}
                    child{ node [split] {} 
                            child{ node [split] {}
                                child{ node (B) [leaf] {}}
                                child{ node [leaf] {}}

                                }
                            child{ node [leaf] {}}
                        }
                    }
                child{ node [split] {}
                        child{ node [leaf] {}}
                        child{ node [split] {}
                                child{ node [leaf] {}}
                                child{ node [leaf] {}}
                            }
                    };
             \end{tikzpicture}
        \qquad
        \begin{tabular}{rl}
                \tikz[baseline=-3pt]\node[scale=0.6, root] {}; & root   \[3pt]
                \tikz[baseline=-3pt]\node[scale=0.6, split]{}; & split  \[3pt]
                \tikz[baseline=-3pt]\node[leaf] {};            & leaf
        \end{tabular}\hfil~
    \caption{Tree Structure}
    \label{fig:decision-tree}
\end{figure}

\end{document}

Edit: Your diagram can be magnified by scaling of tikzpicture (as done now) or better with changing distances between nodes and their sizes.

@cfr, of course. I prepare such solution for addendum to answer, but you bit me for some minutes :-( - +1 for your answer. — Zarko, Nov 13 '23 at 18:22
Sorry :(. Your answer appeared while I was writing mine, but it wasn't forest. (Already +1 both existing answers, which are probably more what the OP wants.) — cfr, Nov 13 '23 at 18:25
@cfr, no problem.I'm glad that you wrote answer! BTW, temporary I use small ancient laptop (mine PC with two screens is on service), where I have difficulties to keep on screen visible two solutions ... hopefully situation will improve soon :-). It seems that I'm a bit spoiled with use of two screens ... — Zarko, Nov 13 '23 at 18:32
My machine is a laptop with a 12.5" screen. The possibility of keeping two solutions on screen hadn't occurred to me ;). — cfr, Nov 13 '23 at 19:45

cfr · Accepted Answer · 2023-11-14T00:33:04.787

Here's a solution using forest.

\documentclass{article}
% ateb: https://tex.stackexchange.com/a/701184/
\usepackage{forest}
\usetikzlibrary{positioning}
\tikzset{%
  broot/.style={rounded corners,fill=black,text width=25pt,text height=7.5pt},
  binode/.style={circle,inner sep=5pt,fill=blue},
  rleaf/.style={circle,inner sep=2.5pt,fill=red!50!black},
}
\begin{document}
\begin{figure}
  \centering
  \begin{forest}
    for descendants={%
      if n children=0{rleaf}{binode},
      s sep'+=25pt,
    },
    broot,
    [[[][[[][]][]]][[][[][]]]]
    \node (kroot) [broot, anchor=west,below=10pt of !r121 |- current bounding box.south]  {};
    \node (kinode) [binode, anchor=center] at (kroot.center -| !r22) {};
    \node (kleaf) [rleaf, anchor=north,below=5pt of kroot.south]  {};
    \foreach \i/\j in {kroot.east/root,kinode.east/internal node,kleaf.center -| kroot.east/terminal or leaf node} \node [font=\sffamily,anchor=west] at (\i) {\j};
  \end{forest}
\caption{Tree structure}\label{fig:tree-structure}
\end{figure}
\end{document}

EDIT

I don't know quite how spread out you want the tree, given that the original target picture isn't very spaced out, so the following is designed to be flexible.

increase s sep for horizontal spread
increase l sep for vertical spread
use fit=rectangle or fit=band to increase horizontal spread
use edge+={<tikz options>} to style the edges

For example,

\documentclass{article}
\usepackage{forest}
\usetikzlibrary{positioning}
\tikzset{%
  broot/.style={rounded corners,fill=black,text width=25pt,text height=7.5pt},
  binode/.style={circle,inner sep=5pt,fill=blue},
  rleaf/.style={circle,inner sep=2.5pt,fill=red!50!black},
}
\begin{document}
\begin{figure}
  \centering
  \begin{forest}
    for descendants={% increase s sep for horizontal spread
      if n children=0{rleaf}{binode},
      s sep'+=50pt,
      edge+={ultra thick},
    },
    broot,
    for tree={% uncomment one of the fit lines if desired; increase l sep to increase vertical spread
      l sep'+=25pt,
%       fit=band,
      fit=rectangle,
    },
    [[[][[[][]][]]][[][[][]]]]
    \node (kroot) [broot, anchor=east,below=20pt of !r1211 |- current bounding box.south]  {};
    \node (kinode) [binode, anchor=center] at (kroot.center -| !r122) {};
    \node (kleaf) [rleaf, anchor=north,below=10pt of kroot.south]  {};
    \foreach \i/\j in {kroot.east/root,kinode.east/internal node,kleaf.center -| kroot.east/terminal or leaf node} \node [font=\sffamily,anchor=west] at (\i) {\j};
  \end{forest}
\caption{Tree structure}\label{fig:tree-structure}
\end{figure}
\end{document}

EDIT 2

I originally thought to use matrix of nodes to make the key. However, this doesn't work out-of-the-box in a forest environment. I suspect this is because forest alters the catcodes. Anyway, after fiddling a bit, I got this to work by simply using the ampersand replacement option and thought I'd post the result as an alternative.

\documentclass{article}
\usepackage{forest}
\usetikzlibrary{matrix,positioning}
\tikzset{%
  broot/.style={rounded corners,fill=black,text width=25pt,text height=7.5pt},
  binode/.style={circle,inner sep=5pt,fill=blue},
  rleaf/.style={circle,inner sep=2.5pt,fill=red!50!black},
}
\begin{document}
\begin{figure}
  \centering
  \begin{forest}
    /tikz/ampersand replacement=&amp;,
    for descendants={% increase s sep for horizontal spread
      if n children=0{rleaf}{binode},
      s sep'+=50pt,
      edge+={ultra thick},
    },
    broot,
    for tree={% uncomment one of the fit lines if desired; increase l sep to increase vertical spread
      l sep'+=25pt,
%       fit=band,
      fit=rectangle,
    },
    [[[][[[][]][]]][[][[][]]]]
    \matrix [matrix of nodes,nodes in empty cells,column 1/.style={anchor=center},column 2/.style={anchor=west},column 3/.style={anchor=center},column 4/.style={anchor=west},nodes={font=\sffamily},below=10pt of current bounding box.south]  {%
        |[broot]|{} &amp; root &amp; |[binode]|{} &amp; internal node\
        |[rleaf]|{} &amp; terminal or leaf node &amp; &amp; \
      };
  \end{forest}
\caption{Tree structure}\label{fig:tree-structure}
\end{figure}
\end{document}

Irritatingly, the alignment in the key still doesn't look quite right to me ....

If anybody knows why binode doesn't align quite how I expect (!), please let me know. — cfr, Nov 13 '23 at 18:09
Thanks @cfr. I have 2 questions:

How do I increase the thickness of the connecting lines (branches)?

How do I magnify the diagram so that it becomes less huddled? — itc, Nov 13 '23 at 19:33
Well explained @cfr. With the above explanation, I made the perfect adjustments I wanted. Many thanks. — itc, Nov 13 '23 at 20:09
@itc See second edit if you're interested in using a matrix of nodes for the key. I tried to do this earlier, but it didn't work out-of-the-box inside forest. However, the solution turns out to be extremely straightforward, so I'm posting it as an alternative. — cfr, Nov 14 '23 at 00:34

Adding key, adjusting node shape and magnifying a tikz diagram

Progress made so far:

3 Answers3

EDIT

EDIT 2