281498_zh-CN

liliconcom

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

级别：中级

 

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

 

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

 

 

自动生成的成绩单...

 

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

 

爆发数据可视化JSL应用程序开发