Configure a chart with signals and sliders

While visualizing your data in a custom chart, you may want to explore many possible settings. A good approach is to create Vega signals for all the parameters you want to vary. You can then tune these values interactively via sliders in the Vega settings menu. You might leave these interactive sliders for all future viewers of the chart to find their own preferred configuration, keeping in mind that the adjusted slider settings will not be saved. If you find an optimal value or range, you can save it in the Vega spec to hardcode it for future viewers/instances of the chart.

Example: Circular dendrogram

You can log a circular dendrogram or radial tree natively to W&B (more detailed report and super quick Colab example). This example is taken directly from the Vega documentation, and this chart renders a tree of code variable types.

Display configuration

Click on the gear icon in the top right of the chart to see the following menu:

These options let you interactively adjust the following visual settings for the chart:

• labels: show/hide node names
• radius: spacing between concentric layers
• extent: 0-360 degrees of the circle in which to render the chart
• rotate: circle orientation (pivot chart around the root)
• layout: visual spacing of child nodes
• links: how the edges are rendered (lines, curves, orthogonal)

You can click on the eye icon in the top right to see the full Vega spec for this chart.

Defining an input signal

These interactive chart parameters are defined in the signals section of the Vega spec. Each interactive signal needs a name, an initial value, and an input type to which it is "bound". This is the UI element through which the viewer can control that parameter /signal once the chart is rendered. Some options for input type shown here are "checkbox" (binary button), "range" (slider), "radio" (radio button with text options), and "select" (dropdown menu with text options). The sliders take the min, max, and optionally a step size for the range. You can read more about signals in Vega here.

    {
      "name": "labels", "value": true,
      "bind": {"input": "checkbox"}
    },
    {
      "name": "radius", "value": 280,
      "bind": {"input": "range", "min": 20, "max": 600}
    },
    {
      "name": "extent", "value": 360,
      "bind": {"input": "range", "min": 0, "max": 360, "step": 1}
    },
    {
      "name": "rotate", "value": 0,
      "bind": {"input": "range", "min": 0, "max": 360, "step": 1}
    },
    {
      "name": "layout", "value": "tidy",
      "bind": {"input": "radio", "options": ["tidy", "cluster"]}
    },
    {
      "name": "links", "value": "line",
      "bind": {
        "input": "select",
        "options": ["line", "curve", "diagonal", "orthogonal"]
      }

Saving signal state

Sometimes this interactive menu is the goal: to let the viewer explore the chart and change it every time. However, this configuration is stateless, and none of the slider modifications will be saved for the future. There are two ways to save one of these configurations:

Update the default starting values

Once I find a particular configuration I'm happy with, I can update the default starting values for those signals. For example, below I've shortened the default radius and chosen "orthogonal" branching at each parent node. You can still explore all the other options with the gear icon.

Hardcode signals into fixed values

If you find an optimal setting and don't want it to change for future viewers, you could keep the signal fixed by simply removing the "bind" field for that signal (so there's no input UI to change it) or hardcoding its value anywhere it appears in the Vega spec. Below, I've

• removed the "labels" checkbox and the opacity control entirely such that labels are always shown
• set the node display method explicitly to cluster instead of taking a signal: "method" : "tidy" instead of "method" : {"signal": "layout"}
• hardcoded the extent variable to the number 360 because I want to use the full circle every time
• set rotate to 330 by default (so the root node is closer to horizontal aligment), removing the UI element but making it easier to find and change this parameter in the future (than it would be if I hardcoded every instance of rotate)

You can see the full Vega spec and the details of the changes by clicking on the eye icon in the top right. You could even copy & paste it and create your own preset.

Q & A

Thanks for reading! We hope this inspires you to explore more options and more interactivity for your Custom Charts. There are many more visualizations types to try, and we'd love to feature them if you do. Please use the comments below for any questions or feedback.