General Drawing Code

This section provides some well-written drawing objects that can be directly used when visualizing data.

Importing Library Files

First, let's introduce how to use library files. "Library files" refer to pre-packaged drawing functions, and there are three methods to import files into MicroCity Web for use.

Method 1: Code-Based Import

👍 It is recommended to use this method to import library files, so that you can ensure that the latest version of the library is used.

Taking the import of Histogram and Subplot as an example, the code to import the library files is as follows:

print('Downloading dependencies to the virtual disk...')
-- Download the histogram code to the virtual disk
os.upload('https://www.zhhuu.top/ModelResource/libs/Histogram.lua')
-- Download the subplot code to the virtual disk
os.upload('https://www.zhhuu.top/ModelResource/libs/Subplot.lua')
print('Download completed')

Method 2: Download Code Files and Import

Go to the Code File Download section to download the required library files, then import the file into MicroCity Web, and finally reference the file to use it.

Taking the import of a histogram as an example, the code to import is as follows:

require("Histogram") -- Import the histogram

Method 3: Copying the Code

Unless you need to modify the function's functionality or logic, it is not recommended to do so. The code for each function is available in the Code section.

Histogram

A histogram is generally used to display the frequency or frequency distribution of each data value in a dataset.

It divides the data into several intervals (or "bins") with a certain interval, then draws a bar chart of the frequency (or frequency) on the vertical axis for each interval, reflecting the distribution of the data.

Here is an example of a histogram drawn using a histogram object (function).

::: center  :::

Importing the Histogram

First, import the code for the histogram. For specific import methods, please refer to Importing Library Files.

The filename for the histogram is Histogram.lua, and the code to import the histogram is:

require("Histogram") -- Import the histogram

Creating a Histogram Object

Create a histogram object:

local plot = Histogram(list) -- list represents the dataset

You can also set the properties of the graph when creating the object.

local plot = Histogram(list, {range={40,90,0,100}, scale={10, 50}, fdisp=function(x) return (x/n*100).."%" end})

Setting the properties is not necessary and can be done based on your needs. In this example, only the range, scale, and fdisp properties are set.

Setting Histogram Properties

The example provided above demonstrates setting histogram properties. Based on the code, more properties can be set. Please refer to the table below for more details:

Advanced Usage of Histogram

📈 Dynamically Refreshing Data Graph

1. Modify the data in the graph. Here we take adding data to the graph as an example, where rnd is the added data. The value of plot.data can also be modified directly.

table.insert(plot.data, rnd)

2. Refresh the graph

plot:refresh()

Example

Basic Usage Example: Drawing a Poisson Distribution

require("Histogram") -- Import the Histogram library

local seed = math.randomseed(1, {
    distribution = "poisson",
    mu = "3"
})
local list = {seed:random()}

-- Static drawing
for i = #list, 400 do
    table.insert(list, seed:random())
end

local histplot = Histogram(list, {
    range = {0, 10, 0, 50},
    scale = {1, 5}
})
scene.render()

Advanced Usage Example: Dynamically Refreshing the Poisson Distribution Graph

This is an example of drawing a Poisson distribution and dynamically refreshing the data graph. Assuming that the Histogram object has been imported and the scene is set to display in 2D.

require("Histogram") -- Import the Histogram library

local seed = math.randomseed(1, {
    distribution = "poisson",
    mu = "3"
})
local list = {seed:random()}

local histplot = Histogram(list, {
    range = {0, 10, 0, 50},
    scale = {1, 8}
})
scene.render()

-- Dynamically drawing
local count = 1
while count < 1000 and scene.render() do
    local rnd = seed:random()
    table.insert(histplot.data, rnd)

    histplot:refresh()
    count = count + 1
end
scene.render()

Subplot

A Subplot is used to solve the positioning and sizing issues when placing multiple graphs in a single interface. The name is borrowed from MATLAB.

::: center  :::

Importing Subplots

First, import the code for subplots. The specific import method can be found in Importing Library Files.

The filename of the subplot is Subplot.lua, and it is referenced as follows:

require("Subplot") --referencing the subplot

Subplot Attribute Settings

Here we will provide a detailed explanation of the attributes of the subplot. Setting the attributes is not mandatory and can be done based on your needs.

Reading Subplot Values

After creating the subplot with the specified attributes, or modifying the subplot attributes and refreshing, you can read the calculated values of the subplot to obtain the original positions and sizes of each subplot in the Subplot module. You can mainly read these values using the following attributes.

Example

Here is an example of drawing the display range of the subplots. It is assumed that the Subplot module has already been imported, and the scene has been set to display in 2D.

In this example, the display range of each subplot in a 2-row, 3-column subplot is drawn as a rectangle. The range of each subplot is represented by four gray points, and the position of each subplot is represented by a blue rectangle.

require("Subplot") --import the subplot code

local subplot = Subplot(2, 3, {span = 10})

-- Drawing the boundary points of the Subplot object
local lb = scene.addobj("points",{size = 10, vertices={subplot.diag[1],subplot.diag[2],0}})
local lt = scene.addobj("points",{size = 10, vertices={subplot.diag[1],subplot.diag[4],0}})
local rb = scene.addobj("points",{size = 10, vertices={subplot.diag[3],subplot.diag[4],0}})
local rt = scene.addobj("points",{size = 10, vertices={subplot.diag[3],subplot.diag[2],0}})

-- Drawing Range for i = 1, subplot.row do for j = 1, subplot.col do scene.addobj("polyline", {size = 8, color = "blue", vertices={ subplot.originpt[i][j][1]+subplot.psize[1], subplot.originpt[i][j][2], 0, subplot.originpt[i][j][1], subplot.originpt[i][j][2], 0, subplot.originpt[i][j][1], subplot.originpt[i][j][2]+subplot.psize[2], 0, subplot.originpt[i][j][1]+subplot.psize[1], subplot.originpt[i][j][2]+subplot.psize[2], 0, subplot.originpt[i][j][1]+subplot.psize[1], subplot.originpt[i][j][2], 0, } }) end end scene.render()

Code

You can remove the scene.setenv code at the beginning of the script, depending on the combination of your code. The scene.render() in the code is to refresh the image when dynamically drawing.

Code File Download

Please find the list of code files in ModelResource/libs

🔗The links in the table above point to the GitHub repository. You can view the code directly on GitHub or download the files to your local machine for use.

This post is translated using ChatGPT, please feedback if any omissions.