Advanced

Visualization

There are a number of advanced features that are available when creating interactive browswer visualizations of tree learners. To access this additional functionality, use the TreePlot and Questionnaire objects for tree visualizations and questionnaires, respectively.

Each of these objects takes a tree learner as the first argument. Keyword arguments are used to control the additional functionality, as described below. Use write_html or show_in_browser to save or view the visualization. In a Jupyter notebook, the resulting visualization is displayed automatically.

Changing Names

The following keyword arguments enable you to rename various aspects of the data:

  • feature_renames to rename the features in the data, where the keys are the old feature names and the values are the corresponding new feature names:

    Dict("old_feature_1" => "new_feature_1", "old_feature_2" => "new_feature_2")
  • level_renames to rename the categoric/ordinal levels in the data, where the keys are the feature names and each value is a Dict for this feature where the keys are the old level names and the values are the new level names:

    Dict("feature_1" => Dict("old_level_1" => "new_level_1"),
         "feature_2" => Dict("old_level_1" => "new_level_1",
                             "old_level_2" => "new_level_2"))
  • label_renames to rename the labels of the target for classification and prescription problems, where the keys are the old label names and the values are the new label names:

    Dict("old_label_1" => "new_label_1", "old_label_2" => "new_label_2")

In the following example, we use feature_renames to replace some feature codes in the data with more descriptive names:

vis_renamed_features = TreePlot(lnr, feature_renames=Dict(
    "Disp" => "Displacement",
    "HP" => "Horsepower",
    "WT" => "Weight",
))
Optimal Trees Visualization

Extra Content Outputs

The extra_content keyword argument allows you to include additional information for each node of the tree in the visualization. To do this, simply construct a vector with one entry for each node of the tree containing the HTML content you would like to display for this node.

For example, the following code calculates the mean feature value for all the points that fall into each node of the tree:

using Statistics
node_inds = IAI.apply_nodes(lnr, X)
extras = map(node_inds) do inds
  string("<b>Mean horsepower in node:</b> ",
         round(mean(X[inds, :HP]), digits=1))
end
7-element Array{String,1}:
 "<b>Mean horsepower in node:</b> 146.7"
 "<b>Mean horsepower in node:</b> 72.4"
 "<b>Mean horsepower in node:</b> 160.4"
 "<b>Mean horsepower in node:</b> 129.6"
 "<b>Mean horsepower in node:</b> 105.2"
 "<b>Mean horsepower in node:</b> 154.1"
 "<b>Mean horsepower in node:</b> 248.4"

We can then include this information in the visualization by passing the extra_content keyword argument to any of the visualization functions:

vis_extra_text = IAI.TreePlot(lnr, extra_content=extras)
Optimal Trees Visualization

You can incorporate additional information using any combination of HTML/CSS/JavaScript. Note that if you include any <script> tags, the closing tag must be terminated with <\/script> for the code to function correctly.

For example, the following code uses billboard.js to visualize the split threshold at each split node in the tree:

node_inds = IAI.apply_nodes(lnr, X)
extras = map(enumerate(node_inds)) do (t, inds)
  IAI.is_leaf(lnr, t) && return ""

  feature = IAI.get_split_feature(lnr, t)
  threshold = round(IAI.get_split_threshold(lnr, t), digits=2)

  """
  <div id="node-plot-$t" style="width: 280px;"></div>
  <script>
    var chart = bb.generate({
      data: {
        xs: {
          y: "x"
        },
        columns: [
          ["x", $(join(X[inds, feature], ","))],
          ["y", $(join(y[inds], ","))],
        ],
        type: "scatter",
      },
      axis: {
        x: {
          label: "$feature",
          tick: {
            count: 3,
            format: function(x) { return x.toFixed(2); }
          }
        },
      },
      grid: {
        x: {
          lines: [
            {
              value: $threshold,
              text: "$feature < $threshold"
            }
          ]
        }
      },
      legend: {
        show: false
      },
      bindto: "#node-plot-$t"
    });
  <\\/script>
  """
end

vis_extra_plots = IAI.TreePlot(lnr, extra_content=extras)
Optimal Trees Visualization