758519_zh-CN

liliconcom

当海洋生物学家、视频游戏和 JMP 结合在一起时，您会得到什么？(2020-US-45MP-543)

SAS/JMP 部门首席软件开发人员 John Powell

新颖的想法往往来自于将完全不同的行业所用的方法结合起来。JMP 发现峰会和 JMP 用户社区提供了将不同行业的想法交叉传播到其他行业的绝佳方式。这次演讲源于一位海洋生物学家在 JMP 用户社区提出的在狭小空间内显示许多变量的请求。视频游戏中使用的技术提供了可能的解决方案。我将展示 JMP 的可自定义可视化功能如何应对挑战，将这些潜在的解决方案变为现实。视频游戏技术的另一个用途是 JMP 中提供的 3D 散点图功能。这种方法需要现代台式计算机上通常具有的强大图形功能。但是，如果您需要在网络上共享这些散点图怎么办？人们用来查看 Web 内容的设备上的图形功能范围差异很大。因此，我们需要使用即使在功能较弱的设备上也能工作的技术。游戏行业再次提供了一个解决方案——粒子系统！我将介绍粒子系统基础知识以及如何将 3D 数据导出到我在网络上使用粒子系统构建的 3D 散点图应用程序中。

自动生成的成绩单...

扬声器	脚本
乔波	嗨，欢迎参加我的演讲。
	此次演讲的动机是基于 JMP 用户社区的讨论。Anderson Mayfield 博士是美国国家海洋和大气管理局和迈阿密大学的海洋生物学家。
	他研究珊瑚礁的健康状况。他曾在 JMP On Air 地球日特别节目中发表演讲。他也将在本次会议上发表演讲。
	因此，在这篇 JMP 用户社区帖子中，他发布了这张图片。如果你能看出来，它有所有这些代表珊瑚或珊瑚礁的图形
	它们代表了多条数据，全部包含在一个小图形中，有点像视频游戏中的玩家统计数据
	并且当玩家在场景中奔跑时，它们会围绕着玩家盘旋。现在你可能知道为什么我将我的演讲命名为“当你将视频游戏、海洋生物学家和 JMP 结合在一起时，你会得到什么”了。那么让我们继续吧。
	我要讲的是基于游戏或受游戏启发的解决方案，这些解决方案可以在 JMP 中实现，包括使用自定义图形脚本，
	自定义地图。然后我将介绍我构建的基于 Web 的 3D 散点图应用程序，以及如何将 JMP 数据集集成到该应用程序中。
	这是图形脚本的一个示例。
	这是使用自定义地图的示例。这是我的 3D 散点图应用程序。
	那么让我们开始吧。为了了解如何使用自定义图形脚本，我这里有一个小示例。
	当我打开 JMP 并运行
	这张小图，实际上，我会谈论它。
	我使用这个从头开始创建的虚构数据集。它基本上是关于一群鱼从大堡礁游到悉尼的。
	因此，要获得图形脚本，您可以做的就是进行自定义。
	然后这个小加号按钮可以让你添加一个新脚本。它开始是空的，但我们在 JMP 中有一些样本。
	我喜欢多边形脚本。它非常简单。它只是绘制一个三角形。因此，如果我将它应用到我的图形中，你就会看到一个三角形。
	我们只需三行，设置透明度，设置填充颜色，然后绘制多边形。
	但我们想知道的是，如何将其嵌入到脚本中？最简单的方法是点击答案按钮
	然后将脚本保存到脚本窗口。这是脚本。它开始，我的小型双变量平台启动，带有纬度和经度。下面有一个带有添加图形脚本的调度。
	然后是样本的三行。
	这是一个使用图形脚本的非常简单的例子。
	现在我要嵌入一个图形脚本。它会在每个点上绘制浮动的条形图。
	我在这个应用程序中首先要做的事情是设置透明度，然后绘制小图形的背景。
	一个代表饥饿，一个代表力量，一个代表速度。
	现在我要向你们展示整个脚本，因为它依赖于其他东西。它依赖于我设置的这些常量，这些常量主要用于处理颜色和背景，以及一些背景之类的东西。
	这是我的绘制条形图函数。它需要一个位置、一个长度和一个颜色。因此它可以用于每个条形图。因此，如果我运行该脚本。
	就是这样，你得到了一张带有小
	当鱼儿顺着澳大利亚东部洋流向悉尼游去时，一种受游戏启发的健康监测器就会在每条鱼上方盘旋。
	这将让您了解该函数的工作原理，基本上是逐步介绍。我们从屏幕上的一个标记开始，并为每个标记设置像素原点。
	然后我们开始绘制背景，但这需要几个步骤。第一次设置线条粗细时，您实际上看不到任何东西。
	然后我们设置颜色，颜色为黑色。然后我们移动并画出背景和非常粗的线条。
	对于每个条形，我们将设置条形的颜色，移动到相应位置，然后画一条线。然后我们绘制背景，设置其颜色，并继续绘制条形。当然，我们对其他两条线也执行同样的操作。
	现在，您可以使用许多不同的图形函数。这是 JSL 语法参考的图形函数部分，您可以构建任何您想要的。所以开始吧。
	接下来我要讲一下使用自定义地图。
	打扰一下。
	要使用自定义地图，基本上需要提供两个表格。第一个表格是您要使用的所有形状的定义。第二个表格为表格中的形状命名。
	对于此名称列，基本上您需要添加的是地图角色列属性，并且其类型必须是形状名称定义。我稍后会向您展示。
	举一个非常简单的例子，当然，我们需要的是 Big Class。我将举一个非常简单的例子。
	地图也只有两个矩形。让我打开这些文件。
	正如我所说，这是一张非常小的地图。为了向你们展示这些坐标，我做了一些
	此处的脚本主要展示了要点。
	如果我突出显示这前四个，那就是顶部矩形，接下来的四个是底部矩形。
	上面的是体重，下面的是身高。如果你看看列属性，
	它是地图角色、形状名称定义。
	所以一旦我们准备好这张地图，我们就可以开设大课堂。
	我们不能直接重用它。我们首先需要做的是取出身高和体重列并将它们堆叠起来。所以我们转到表格。让我把它们堆叠起来。
	现在我得到了一个包含这些堆叠列的表格。
	您可以看到标签具有交替的高度和重量，为了将其连接到地图文件，我们需要做的是添加另一个列属性。
	这个一直到这里，再次是地图角色。但我们不会说形状名称定义，我们会说形状名称使用，我们需要选择
	地图文件，名称地图文件。
	并将列设置为名称。
	然后我们就完成了。现在我们有了它，我实际上可以在图表中使用它。
	我们想要的图表基本上是使用地图形状的标签列，它设置了顶部和底部的形状，然后我们可以拖入包含所有数据的数据列
	进入颜色角色。好了，这是 Big Class 中所有学生的总结，但我们真正想要的是
	每个学生一个。如果我将其拖到包装角色，它会有点紧，但我将通过每行设置一个级别并将其设置为 10 来将其展开。
	就是这样。这就是我想要的。这可能是一个有用的图表
	在其自己的。
	现在让我们做一些更复杂的事情。
	嗯，实际上，如果您正在做一些更复杂的事情，您可能需要使用自定义地图创建器插件。
	这是一个很棒的插件。它允许您拖入图像然后在其上进行描摹。
	当你描完所有形状后，点击“使用随机数据完成”，它会生成
	您需要的两个形状文件，以及一个随机数据集，用于测试您的自定义地图。这里我刚刚设置了四个变量，一个变量在中间。所以它基本上就是您在我原来的幻灯片中看到的正方形版本。
	但这并非我们想要的。我们想要的是圆形的，我相信梅菲尔德博士把它称为复合派。
	我不知道这是否是一个正式术语，但我决定用脚本来构建这些东西。
	所以我想要做的是创建形状文件，并确保我得到了医生开的处方。这就是四个形状，中间有一个东西。
	然后我想，好吧，我是个程序员。我喜欢做更多的事情，让事情更灵活一些。
	所以我想也许有些人想做同样的事情，但只有两个变量加上一个平均值或中心变量或更多。
	我觉得如果能制作出菱形或正方形等不同形状就好了。所以，我不是天才。我很幸运。Xan Gregg 实际上回答了一篇帖子，内容是“如何在 JMP 中制作这种极坐标图”。
	现在它来了。
	我们走了
	他们正在寻找这样的形状，这看起来非常符合我需要的形状。
	Xan 做的非常棒。这是一个灵活的脚本，可以完成这个任务，并围绕一个圆圈生成这些楔形，但唯一缺少的是中心，以及我想要的特定文件命名方式。
	但这并不太难。这就是我的脚本的作用。当你运行复杂馅饼时，有这种馅饼的配方，你打开复杂馅饼机。然后你添加一些配料。首先，你需要说出形状的数量。
	然后决定是否将其置于中心位置，是置于顶部还是稍微偏向一侧。
	然后有一个平滑度变量。
	然后您还需要提供内半径（无论您想要更多填充还是更少填充）和外半径。
	当然，下一步是运行脚本，它将生成
	这些
	为你制作形状文件，并进行示例测试，就像自定义饼图制作器或自定义地图插件一样。下面是五个复杂饼图的示例，形状为五个
	并将平滑度设置为 7。你可以使用 5 或 6，如果它们要
	画得很小。尺寸其实并不重要。重要的是相对的内半径和外半径。这大概就是梅菲尔德博士想要的结果，所以我坚持内半径为 4，外半径为 9。
	让我们看看我们实际上如何使用这些东西。就像我们在 Big Class 演示中所做的那样，我们必须……我们必须堆叠列。但有一点不同，我的形状文件中实际上没有力量和健康变量。它们实际上是
	在形状文件中，它们被命名为楔形 1、2 3 和
	中心。
	所以我需要建立一个
	文件将
	将两者联系起来。
	首先，我有这个小型学校的例子，
	我通过将健康、力量、速度列堆叠在一起来实现这一点。
	这是形状文件...我将要使用的名称形状文件。
	注意它有一个列属性
	地图角色，
	对，地图角色定义。
	当您制作自己的自定义形状时，这是必需的。
	因此，我基本上通过列出其中的标签来构建链接文件，即地图列到形状
	堆叠文件。
	然后在另一列，形状名称，我列出了形状的形状名称。
	现在，这里的形状名称很重要
	有一个属性是地图角色，但这个是形状名称使用。
	并且此数据标签列将具有链接 ID，因此它可以虚拟地重新连接回我的堆叠表。
	现在我已经把这些表都设置好了，
	接下来要做的事情实际上是建立一个图表。
	现在，它与我之前所做的类似。唯一的不同之处在于，现在我不再只是将标签拖到地图形状，而是使用虚拟连接列，将其拖到地图形状中，这样就得到了我想要的形状。接下来我需要做的是将数据添加到颜色列。
	然后添加名称以包装。我所有的鱼都有
	每一个都有一张图。为了得到正确的渐变，我转到这里的渐变，这就是这里的渐变。
	我想确保绿色是好的，所以我要反转颜色。
	就这样。这就是
	地图本身就很有用，因为你可以查看每条鱼，了解它们的状况。当然，我还想利用它做更多的事情。
	我想要做的是将这些图像放入工具提示中。
	为了做到这一点，我们要将其制作成数据表。
	把我拥有的文件和那张图形带回来。
	因此，它在这里的作用是，在红色三角形下有一个数据表。这将产生一个新的数据表
	所有这些图像，这真的很有用，特别是如果我们将其链接回去。我会将其打开并将其设置为链接 ID，这样我就可以从我的简单小型学校文件中指向它，这样我就能够拥有每个标记，找到每个角色的图表。
	好的，我实际上已经将其存储在另一个文件中，我将打开它。我将其命名为健康图像。
	所以我们不再需要这个了。
	而且我们不再需要堆叠文件了。
	但我们确实需要的是我一开始提到的那个小学校的例子。
	现在你需要做的第一件事就是让这些显示在
	graph 是设置那个图像列，那个虚拟列，
	如标记所示。
	您也可以在简单的图表中执行此操作。
	所以我们已经有一个示例了……好吧，我要再次打开它。为什么不呢？我的比赛脚本，只是为了向你展示我从头开始。但由于我已经标记了此列，现在当我将鼠标悬停在其中一个图形上时，你会看到……三个
	该图形的信息片段，您可以执行此操作并固定任意数量的这些字符。
	这是使用这些图形的一种方式。
	另一种方法是使用标记。
	您将获得的图形将浮动在点上方，并用来代替我之前使用的菱形。
	我会带回那些健康图像、小学校，我甚至会带回那张图形。
	现在，我们有了这些钻石。为了把它们变成这些形状，
	我们不得不再添加一个
	徽章添加到这个虚拟连接列。它真的越来越受欢迎，所以用作标记。所以出现了新的徽章。在我身后，
	您将看到这些图像被放入了场景中。最后一个细节是我不太喜欢图像周围的白色。这实际上是内置在图形图像中的。
	解决这个问题的一个方法是，它有一个脚本，可以找到白色区域并设置 alpha 通道，使其透明。所以现在我们有了漂亮的图表
	圆形，而不是方形背景。您可能还想做的另一件事是增加标记尺寸。
	我们最多可以达到 11 个。
	看起来怎么样？这看起来和我之前的情况差不多；10 可能更好。但我喜欢 11。好的，所以
	使用标记。我们想制作一个稍微复杂一点的图表。这就是 Anderson Mayfield 博士想要的，即标记后面的热图。这相当复杂，但 JMP 可以处理。这实际上是一个轮廓。
	所以我这里有另一个版本的小型学校。但这次，我得到了海洋温度
	落到最底下
	并且它们被隐藏，所以不会显示为实际点。
	所以我已经为这个构建了图像。
	实际上，与我之前构建的图像相同。
	首先
	结束在这里，这样我们才能真正看到我要做什么。所以我基本上想要这些图形
	悬停在轮廓上，这里有几个图例显示事物是什么。
	这应该不太难。我将从已放置的地图开始，并在 x 和 y 上设置经纬度。
	所以我要做的第一件事是添加轮廓。
	我们需要添加一点颜色，因此我将温度角色拖到颜色角色上，然后调整此轮廓上的级别数。
	稍微改变一下 alpha 并增加一些平滑度。
	接下来我想做的是让它变得有点透明。
	我们把 .6 放在其上。
	这和我之前做的差不多。现在要添加标记，有两种方法可以做到。您可以按住 Shift 键单击点，也可以直接将其拖入。要将其拖入，
	然后你可以再次设置标记大小，
	通过这样做
	转到这里并执行其他操作，这次我们使用 10。我认为 11 有点太大了。好吧，看起来不错。差不多了。我们想处理这个图例。我们如何将这些颜色放入其中？好吧，我们已经有了健康角色。
	您可以将其拖到这里角落，只需添加第二个颜色角色即可。最初会弄乱您的图表。
	我们可以解决这个问题。问题是轮廓实际上不需要使用健康角色。所以如果我们禁用它，那么我们就会回到我们想要的状态。
	接下来您要做的就是为此处的实际图例添加颜色。我们可以像之前一样再次自定义颜色。
	这次我们要做更多的事情。我想要四个标签。
	我希望它从五点开始，一直到
	20.
	哦，我也想反转颜色。
	好了，看起来差不多了，差不多完成了。我只想让它更漂亮一点。图例中有几个地方我想修复一下。
	因此，转到图例设置并删除这些似乎没有增加太多的东西，并将健康图例移到顶部。
	就是这样。所以我认为我已经尽我所能，实现了我的目标。
	所以我可以把那个扔掉。我相信大家都不再需要这个了。
	但我确实想补充一点。
	加个图例怎么样？因为实际上我们无法知道这幅图的哪个区域起什么作用，比如饥饿、速度、力量和健康。幸运的是我们有这个
	映射文件。它从列名到形状。
	我只想暂时把它打开一下。
	大家可以在这里看到我标记了所有行，也标记了数据标签列。这意味着，当你创建图表时，
	所有这些都会被标记。所以这个非常简单。你只需获取形状名称并将其拖到地图角色中，我们就真的完成了该图形。
	所以如果我想将它放到我的场景中，最好的方法就是选择它，加号，然后复制它。
	然后打开一些图像编辑应用程序并将其保存到磁盘。当然，我已经这样做了。所以我要
	一旦你有了它，我就需要再次带回我的图形，
	哇，我可以直接将其拖进来。
	它就在那里。哦，它不在那里。好吧，所以有办法找到它。转到自定义，它将其放在背景中，因为通常当您拖入图像时，您会拖入背景图像。
	所以我们现在要做的就是……让我们把它移开，这样你就能看见发生了什么……移到前面。它来了
	就这样。它就在前面。我想给它增加一点透明度，因为它对我来说有点太亮了。
	因此我们将其设为.8。
	现在我们只需将其拖到角落，就大功告成了。
	好的，有很多，涉及很多文件。所以让我们总结一下所有使用的文件。我使用复杂的饼图制作器生成了所需的两个地图文件，形状文件。我拿了小学校，然后把它堆起来。
	我创建了此列以形成映射文件，该文件需要指向具有映射角色的名称文件。我使用链接引用执行虚拟连接以返回到小型学校堆叠。
	然后我制作了一个想要制作成数据表的图形并将其保存到我的 health images.jmp 中。
	当然，那必须虚拟地连接到原来的小学校，这样我才能用它来制作图形。
	然后，我对小型学校海洋温度做了同样的事情，我的链接参考了健康图像。
	我只是……我将我的列放到形状文件中并绘制了图例，用于尝试用海洋温度来制作图形，然后我使用……我基本上只是通过将其拖入来使用它。
	这就是我想要做的 2D 演示。让我们在这里稍事休息，现在我们将进入 3D 的世界，甚至是网络
	应用。
	好的。
	这是我的 Web 3D 散点图应用程序。
	我将向你们展示如何将数据从 JMP 导入其中。
	我的应用程序基于 JMP 的 3D 散点图。因此，这只是为了提醒您它看起来是什么样子。
	现在我对此有一个小小的演示。
	所以基本上，它有……我将向你展示一些功能，首先是选择不同数据集的能力。这是钻石数据集。
	当然，这个画点。这就是整个想法。它们被画成这个小球形状，我稍后会解释这是怎么做的。
	但您可以做的其他事情是旋转它，就像在 JMP 中一样，您可以缩放、前后移动它。
	然后它还有悬停标签。你可以看到右下角我画了轴和网格，并添加了一些自定义内容。不是太多。
	您可以更改背景，设置墙壁的颜色。我们看看是否可以给它添加一点蓝色。
	是的，也许你不喜欢。但这只是一个演示。然后你可以更改标记的大小。
	这是在网上看到的。
	好吧，当我启动这个应用程序时，我首先想到的是，它能在网页上运行吗？它能在 iPhone 或 iPad 上运行良好吗？
	因为那些机器不如我的台式机强大。所以我创建了内置 3D 或三个随机数据集，其中点数不断增加。我去用了一个...
	我认为 25,000 在低功率设备上值得一试，但实际上，使用高功率设备可以达到更高的水平。
	然后我想，好吧，我应该尝试引入一些真实数据，我发现了著名的鸢尾花数据集，它是 CSV（逗号分隔变量）格式。
	我把它带进来了。但我必须编写一些代码才能将它转换为我的内部结构。
	我觉得 JMP 有很多数据集。我宁愿只引入这些数据集。所以我引入了汽车、钻石和流式细胞术。唯一的区别是流式细胞术，它没有很好的
	使用颜色的类别，他们实际上必须改变我的应用程序以接受没有任何颜色的图形。
	所以这个应用程序非常简单。只有一个……这是一个单页 Web 应用程序。所以只有一个 HTML 文件。我有几个 JavaScript 文件，我使用了一些第三方库、一个字体和一个纹理，纹理是用于形状的球。
	所以我在游戏行业使用的技术是粒子或粒子系统。它们在模拟游戏和 3D 可视化中非常常用。你可以制作一些很酷的效果，比如火、烟、烟花和云。
	我过去曾花过一些时间研究商业游戏引擎，我的职责实际上是改进粒子系统。
	所以我确实已经有了一些这方面的经验。嗯，那是在 C++ 领域，而不是 JavaScript。但由于我从事交互式 HTML5 和 JMP 工作了相当长一段时间，我认为是时候看看我是否可以接受它了。
	我将我的两个爱好结合起来，开发出了一个基于 Web 的粒子系统。我很幸运。我找到了这个库 Three.js。
	它具有硬件加速的 3D 绘图功能，并且具有出色的文档，还有许多包括粒子系统在内的代码示例，因此可以很容易地构建我的应用程序。
	实际上，对我来说，困难的部分是弄清楚如何从 JMP 获取数据。
	但我会……我会分享这个脚本。我做的一件事是确保我可以轻松使用这些对象
	在我的应用程序中。所以我做的一件事就是创建一个 JavaScript 对象数组，并为数字列添加最小值和最大值，这样我就不必在 JavaScript 中计算了。当然，JMP 非常擅长计算这类东西。
	嗯，对于类别，对于颜色列，我需要做的是使用类别字典。基本上，所有这一切都是将类别的名称放在一个列表中，然后通过从零开始的索引指向这些值。这就是该结构的工作原理。
	我认为做一个用户界面会很好。实际上这很容易做到。我马上就给你演示。但基本上我需要做的就是将其限制为 x、y 和 z 的数字列。
	然后将其限制为颜色角色的分类列。
	让我们看一下该代码。
	好的，我首先给出一个非常简单的数据集的例子。
	然后对话就真的很容易做了。我使用列对话，并指定了我想要的数字列和颜色列，并确保建模类型是分类的，因此它是序数和名义的。
	接下来，我获取列数据并构建我需要的 JavaScript 对象。这是最小值和最大值字符串。这只是构建这些对象的字符串。
	然后，如果有一个颜色列，我也会这样做。这有点复杂，因为我需要取出这些字符串并将它们填充到 JavaScript 对象中。
	最后，它需要做的就是将其保存到文本文件中。
	因此让我们尝试一下。
	当然，我将使用 Big Class，因此这是一个很好的小文件。
	和
	所以我运行了脚本。
	然后它问我，我想要什么作为我的 XYZ。我已经选择了身高和体重，年龄是一个数字列，所以我也会使用它，性别是一个很好的颜色。
	然后我们就完成了。实际上，这里的输出告诉我文件在哪里。
	下一张幻灯片正好有这个内容。那我们就来看这个吧。
	我敢打赌你一定想知道 JavaScript 中的 Big Class 是什么样子的。这就是它。所以你可以看到三个
	数字列包含最小值和最大值，然后颜色列包含用于类别的 F 和 M 字典，0 表示女性，1 表示男性。好了，这就是我这次演讲的精彩结尾，希望你们喜欢。
	感谢您的观看，如果有任何问题，请提出。

高级统计建模基础数据分析与建模内容组织数据探索与可视化实验设计质量与工艺工程可靠性分析分享和交流结果