Skip to main content

Basic visualization

🚀 Interactive documentation
This page uses Wasm code blocks so you can run the examples directly in the browser.

SA Engine provides a wide range of basic visualization types, such as Line plot and Bar plot.

Text​

Text visualization simply shows the output as text.

range(10)

Text single​

Text single is used to visualize a single line of text in a bit larger font. The text is updated for every new output value.

//plot: Text single
timeout(heartbeat(1), 5);

Line plot​

Regular​

Line plot plots the output(s) as line(s) in a diagram:

//plot: Line plot
simsig(siota(1,200)/10);
Note

You can click and drag the mouse vertically on the graph to zoom in the y-range. If you click and drag on the x-axis you can zoom it in as well. Double click to reset zoom.

Multiple series in one line plot​

Line plots also support several series:

//plot: Line plot
select [simsig(x), cos(x)]
  from Number x
 where x in siota(1,200)/10;

When a record is received the key for each value is used as series label:

//plot: Line plot
select {
    "sim_sig(x)": simsig(x),
    "cos(x)": cos(x)
    }
  from Number x
 where x in range(200)/10
 order by x;
Note

You can click the colored square next to a series to toggle the visibility of the series.

Plotting batches​

When line plot receives one of the batch data types it will render a full graph from the data:

//plot: Line plot
select Vector of {"sim_sig": simsig(x), "cos": cos(x)}
  from Number x
 where x in range(200)/10
 order by x;

Bar plot​

Regular​

Bar plot works on the same data as Line plot but is better suited for the Vector and Record data.

//plot: Bar plot
timeout(rfft(winagg(simstream(0.01),256,4)), 8);
Note

You can click and drag the mouse vertically on the graph to zoom in the y-range. Double click to reset zoom.

When Bar plot gets a record the keys for each value will be used as labels:

//plot: Bar plot
{
  "x": 10,
  "y": 5,
  "z": 13
}

Plotting batches with slider​

With batch data types you get a slider at the top of the graph that lets you slide through all of the data in the batch (Note! this query will take some time to populate the plot):

//plot: Bar plot
select vector of x
  from Vector x
where x in rfft(winagg(simstream(0.01),256,4))
limit 100

Pie chart​

Pie chart can display the contents of a Vector or Record as a pie chart.

For Vectors the pie chart displays the ratio of the values in the vector:

//plot: Pie chart
[4,8,12,39,3,22];

For Records it also displays the ratio of the values but with labels:

//plot: Pie chart
{
  "a": 10,
  "b": 20,
  "c": 30
}

Scatter plot​

Regular​

Scatter plot works with all the data types as well. But it makes the most sense when there are at least two dimensions. Lets start by creating a streaming unit circle:

//plot: Scatter plot
select [cos(x), sin(x)]
  from Number x
 where x in heartbeat(0.01)*10/(2*PI())
 limit 500;
Note

You can click and drag the mouse on the graph to zoom in. Double click to reset zoom.

Changing size and color​

Scatter plot can also show different sizes (and colors) on each point as well as be reconfigured on what to show on each axis.

The default settings for Scatter plot is to use the first label in the record as X-axis, the second label in the record as Y-axis, the third label in the record as size on the points, and the color is turned off.

select { <x-axis>,
         <y-axis>,
         <size> }
  from ...

The following example will plot points on a unit circle because the first element in the record, cos(x), is the position along the X-axis, and the second element in the record, sin(x), is the position along the Y-axis. The size of the points are determined by the third element, mod(round(x),2).

//plot: Scatter plot
select { "cos(x)": cos(x),
         "sin(x)": sin(x),
         "mod(x,2)": mod(round(x),2),
         "cos(x)*sin(x)": cos(x)*sin(x)
       }
  from Number x
 where x in heartbeat(0.01)*100
 limit 500;

To colorize the points you have to click the settings icon (cogwheel) in the plot. This will open a settings dialog where you can select which label to use as color.

Exercise

Select cos(x)*sin(x) as the color-axis in the plot above. Then play around with setting the different axes.

Note

If you want to change the settings without using the settings dialog you need to run the scatter plot in a multiplot window. See Multi plot for more information.

Plotting batches​

When using batch data types scatter plot simply renders all the given points:

//plot: Scatter plot
select vector of { "cos(x)": cos(x),
         "sin(x)": sin(x),
         "mod(x,2)": mod(round(x),2),
         "cos(x)*sin(x)": cos(x)*sin(x)
       }
  from Number x
 where x in heartbeat(0.01)*100
 limit 100

Automatic​

The Automatic plot type tries to choose the visualization type most suitable for the data.

//plot: Automatic
timeout(simstream(0.01), 5);