UXgraph - Vue.js library with predefined D3 graphs
Olena Pastushenko*
Abstract
The goal of this project is to create a new JavaScript library, which would contain reusable components for graphs creation. The main challenge is not only to visualize the data on a graph, but also to increase UX of interaction with a final product. And on the other hand - to allow programmers to add new widgets quickly and with minimum input needed. The theoretical part of the project is about defining correct data visualization principles, based on how human brain perceives information. Such principles are fundamental and do not rely on some web development trends, thatrsquo;s why they should be always followed. Most of the existing tools for manipulating with graphs or dashboards offer too many options, and so it is difficult to achieve the best possible representation. UXgraph is a Vue.js library which solves the problem by creating a set of predefined components, which already have default settings. So a programmer needs to connect a dataset, and specify properties only when relevant. At the current stage, several graphs are implemented as independent components and published on a GitHub as an open-source project. More graphs will be added at the next stage. This paper also describes a real life usage example of the library, as the part of the web application for dashboards construction.
Keywords: UX graphs — Data visualization — Vue.js / D3.js library — Informational Dashboards
Supplementary Material: GitHub repository — Live demo
- Introduction
The focus of this work is to create reusable Vue.js components based on D3.js SVG graphs. The main value is that those graphs are designed in accordance with the best UX (User Experience) principles. Those principles are mainly based on the work of Stephen Few [1] and are covered in Section 2. UX defines what impression (experience) users have from using an interface, and how easily they reach their goals. Components created during this project are gathered into Vue library, which is hosted on GitHub as an open-source tool under MIT License. Beta-version is already published as npm (Node Project Manager) library so it is available for all Node.js based projects. There are several angles in which practical utility of this project may be proven. First of all, D3 helps to create a huge variety of different data visualization types [2]. But, the question is how usable and understandable they are. Since D3 offers a lot of possibilities, a programmer may be focused more on finding an appropriate coding solution, then on designing an understandable graph. So, UXgraph solves this problem by providing already predefined and easy to use components. The user just needs to connect a dataset and select a color (though default color scheme is provided too). Vue was selected as a base library for this project because it is fast, reactive, and provides an opportunity to create new reusable components which can be imported and used as a new custom HTML tag throughout the web page.
Currently, there already exist several Vue.js / D3.js open-source components available on the internet. But firstly, they do not represent even minimum set of needed graph types and allow you to create only one or two types. For example, in Tyrone Tudenhope GitHub project provides only sparklines and line charts. There are a lot of different D3 examples created by Mike Bostock , but they do not offer a possibility to quickly set custom settings. The other problem of their components (and the main problem solved in this project) is that they do not fulfill design requirements specified by different graphic visualization experts, Stephen Few [1] in particular. Not following these requirements makes these graphs difficult to understand, and as a result - less effective.
At the current stage, UXgraph also contains only several types of graphs, but they all already follow required design principles and allow easy definition of custom properties, so the first part of the challenge was solved. At the next stage, during the work on my Thesis, all other needed graphs would be added.
Another benefit of this solution is that it already has practical usage example - the web application for Information Dashboard design (Sec. 4). The main motivation for developing that application is to create not just another tool for working with dashboards but to provide a user with a predefined set of widgets, which already satisfy all UX requirements. So, UXgraph helps to achieve that.
- Ergonomics of the interaction
The big mistake of any software development process is to focus only on the features development, not carrying in mind the general application architecture and vision. At the same time, it is important not to end up developing a business software product which is more entartaining then useful. Cooper calls such effect dancing bearware [3]. To build complete and high usability dashboard, it is also important to take into account how people perceive and think. Science that deals with designing things so that they fit the people who use them is called Ergonomics. Main ergonomics principles which are relevant to graphs are going to be used for this project and are listed in this Section. Some of them are combined in so-called Gestalt psychology [4],which explain rules of clustering perceived items into groups. (Figure 1).
Figure 1. Pie charts are used quite commonly, but they are less effective than the bar charts. Whereas a bar chart uses the line length to encode the quantitive information, pie charts use two-dimensional areas of the slices and their angles, and our visual perception experience troubles comparing angles and 2-D areas.
Besides pre-attentive and attenti
剩余内容已隐藏，支付完成后下载完整资料
外文翻译题目： UXgraph-具有预定义D3图形的Vue.js库
摘要
该项目的目标是创建一个新的JavaScript库，该库将包含用于图形创建的可重用组件。主要挑战不仅在于可视化图形上的数据，还在于增加与最终产品交互的用户体验。另一方面-允许程序员以最少的输入量快速添加新的小部件。该项目的理论部分是基于人脑如何感知信息来定义正确的数据可视化原理。这些原则是基本原则，并不依赖于某些网络发展趋势，因此始终应遵循这些原则。现有的大多数用于处理图形或仪表板的工具都提供了太多的选择，因此很难获得最佳的表示形式。 UXgraph是一个Vue.js库，它通过创建一组预定义的组件来解决该问题，这些组件已经具有默认设置。因此，程序员需要连接数据集，并仅在相关时指定属性。在当前阶段，几个图被实现为独立的组件，并作为开源项目在GitHub上发布。下一阶段将添加更多图形。本文还描述了该库的实际用法示例，作为用于仪表板构造的Web应用程序的一部分。
关键词：UX graphs — 数据可视化 — Vue.js / D3.js库— 信息仪表板
补充材料：GitHub 资料库 — Live demo（现场演示）
- 引言
这项工作的重点是基于D3.js SVG图创建可重用的Vue.js组件。主要价值在于这些图形是根据最佳UX（用户体验）原理设计的。这些原则主要基于Stephen Few [1]的工作，并在第2节中进行了介绍。UX定义了用户使用界面时的印象（体验）以及实现目标的难易程度。在此项目中创建的组件被收集到Vue库中，该库作为MIT许可下的开源工具托管在GitHub上。 Beta版本已经作为npm（节点项目管理器）库发布，因此可用于所有基于Node.js的项目。从多个角度可以证明该项目的实际应用。首先，D3有助于创建各种不同的数据可视化类型[2]。但是，问题是它们的可用性和可理解性。由于D3提供了许多可能性，因此程序员可能会更加着重于寻找合适的编码解决方案，然后着重设计易于理解的图形。因此，UXgraph通过提供已经预定义且易于使用的组件来解决此问题。用户只需要连接一个数据集并选择一种颜色（尽管也提供了默认的配色方案）。 Vue之所以被选作该项目的基础库，是因为它速度快，反应灵敏，并提供了创建新的可重用组件的机会，这些组件可以导入并用作整个网页中的新自定义HTML标签。
当前，互联网上已经存在一些Vue.js / D3.js开源组件。 但是首先，它们甚至不代表所需图形类型的最小集，而仅允许您创建一种或两种类型。 例如，在Tyrone Tudenhope GitHub项目中仅提供迷你图和折线图。 Mike Bostock创建了许多不同的D3示例，但是它们没有提供快速设置自定义设置的可能性。 它们的组件的另一个问题（也是本项目中要解决的主要问题）是，它们不能满足不同图形可视化专家（特别是Stephen Few [1]）指定的设计要求。 不遵循这些要求将使这些图表难以理解，从而降低效率。
在当前阶段，UXgraph还只包含几种类型的图，但是它们都已经遵循了必需的设计原则，并且可以轻松定义自定义属性，因此解决了挑战的第一部分。 在下一阶段，在我的论文工作期间，将添加所有其他需要的图形。
该解决方案的另一个好处是它已经有了实际的使用示例-用于信息仪表板设计的Web应用程序（第4节）。 开发该应用程序的主要动机不仅在于创建另一个用于仪表板的工具，还在于为用户提供一组预定义的小部件，这些小部件已经满足了所有UX要求。 因此，UXgraph有助于实现这一目标。
- 人机工程学
任何软件开发过程的最大错误是仅专注于功能开发，而不考虑总体应用程序体系结构和愿景。 同时，重要的是不要最终开发出更具有实用性的商业软件产品。 库珀称这种效果跳舞的熊具[3]。 要构建完整的高可用性仪表板，考虑人们的看法和想法也很重要。 处理事物以使其适合使用它们的人的科学被称为人体工程学。 与图形相关的主要人体工程学原理将用于本项目，并在本节中列出。 其中一些被组合在格式塔心理学[4]中，解释了将感知到的项目聚类成组的规则。 （图1）。
图1.饼图的使用非常普遍，但效果不如条形图。 条形图使用线长来编码定量信息，而饼形图使用切片的二维区域及其角度，而我们的视觉感知在比较角度和二维区域时会遇到麻烦。
除了格式塔心理学中显示的注意前和注意属性外，还有其他因素可能会影响用户与软件的交互：他们的体验，目标和环境。 可以应用于图形的另一种度量是由Edward R. Tufte [5]引入的数据墨水比率的概念。 由于这个概念，数据信息是指用于打印定量数据的墨水随数据变化而变化的时间。 由于该项目是关于软件的，因此可以用像素代替墨水，但公式应相同，目的是使该比率等于1：
因此，设计正确图形集的第一步就是分析如何提高该比率的可能方法。 为此，应首先减少非数据像素，然后再增强数据像素。 图2显示了如何消除图中的网格线而不会丢失任何信息。
- 图书馆实施
UXgraph需要将正在运行的Vue应用程序或vue.js脚本连接到任何其他代码库。 Vue.js是用于构建用户界面的渐进框架。 它专注于视图层，并提供反应性和可组合的视图组件。 Vue的优势在于，即使它是一个JavaScript框架，它仍然在单个文件组件中支持HTML和CSS（与React恰恰相反，那里的一切都只是JS）。 在选择D3.js之前，对现有的JS工具进行了分析，以进行图形创建。 应用以下标准：价格，所有必需元素的可用性，适应性。 D3被选为满足所有要求的唯一一个。 它的另一个优点是高度可伸缩，因此将来可能会将其他图形类型添加到库中。
-
- UXgraph支持Vue和D3的最新版本，此功能非常重要，因为在最近的版本更改中，两者都有一些核心更新。
- 显示为库选择的媒体
重要的是使用适当且设计良好的显示媒体，以发挥数据可视化的全部潜力。 该项目的图形类型选择基于以下标准：
bull; 当显示在小屏幕上时，它必须能够有效地显示信息。
bull; 显示仪表板信息中最常用的信息必须是野兽的意思。
bull; 它必须允许以最小的工夫来创建新图。
根据主要设计原则（第2节），提供信息的最佳方法是以带有X和Y轴的二维图形的形式显示定量数据。 对于本项目，根据其可用性选择了七种图形。 之所以选择它们，是因为它们可以更有效地提供信息[1]，而且与其他方法相比，它们非常易于使用，这在开发和将来使用时都是重要的功能。
下面的列表显示了选定的图形：子弹图，由斯蒂芬·福伊（Stephen Few）专门为仪表板开发，旨在替换仪表和仪表[1]； 条形图（水平和垂直），用于显示一个或多个关键度量的多个实例； 堆叠的条形图（水平和垂直），在您需要显示一个整体的多个实例时应使用，但重点在于整体本身； 线图是显示数据移动的形状以及动态和迷你图的最佳方法，它们是Edward R. Tufte [5]发明的，提供了简明的数据显示形式。
-
- 查看可重复使用的组件
Vue中的组件可以帮助扩展基本HTML元素以封装可重用的代码。 为了使其发挥作用，Vue的编译器将特殊行为附加到这些自定义元素上。 要注册全局UXgraph组件，需要执行以下步骤：
之后，该组件可以在网页模板中用作自定义元素：
每个图形类型组件都位于其自己的单个文件模板中，该模板包含HTML，用于声明属性，行为和样式的脚本。 这样就可以独立使用它们。 以下组件已经实现并且可以导入：迷你图，折线图，条形图，HorizontalBarcharts。 在下一阶段将添加StackedBarcharts和BulletGraphs组件。
图3.将图集成到Web项目中
通过npm安装d3，然后将d3作为全局变量导入，将常规D3方法连接到.vue组件。 但是，要使应用程序具有反应性，仅按常规创建D3 SVG元素是不够的。 这就是UXgraph使用Vue挂载事件来调用呈现组件实例后创建图形的方法的原因。 调用该方法时，还需要指定其参数，这些参数代表可自定义的图形设置。 例如，对于174条迷你图，它将为：
结果，由这些参数表示的变量可以在SVG构建期间的任何地方使用。
-
- 在组件之间传递数据
UXgraph中使用的Vue的另一个功能是可以将数据传递给具有属性的组件。由于组件是可重用的，并且可以插入到网页的几乎任何位置，因此重要的是将它们保持在各自的隔离范围内，并且 所以-不要直接从子组件中引用父数据。这就是为什么该库中的所有数据都通过prop传递给子组件的原因。 首先，在所有子组件（包含图形模板）中，使用props选项定义属性：
在组件中此之后，每个属性都可以称为this.property Name。 然后可以从父模板传递它们，如下所示：
结果如图4所示。
图4.带有定制参数的生成的迷你图组件的示例
为所有UXgraph组件指定了默认属性，以使包括新组件变得容易。 用户仅在想要使用自定义值时才需要指定属性。
图5.没有任何参数的条形图组件示例
- 使用范例
我的论文项目是UXgraph用法的真实示例。 主要目标是创建一个Web应用程序，使研究人员可以轻松，快速地创建仪表板，其所有组件均能最好地完成工作。
用户体验要求。 应用是使用Quasar Framework构建的，稍后可以在Cordova包装器的帮助下将其转换为混合移动应用。
4.1主要人物
在致力于提高UX的任何应用程序上工作时，程序员务必牢记“您不是用户”的原则。 为此，一种可能的方法是创建主要角色：未来应用程序的原型用户。 根据定义，每个主要角色都需要一个不同的界面[6]。 由于本论文的主要目标是创建供研究小组内部使用的应用程序，因此无需满足普通用户的需求。 根据选定的目标用户群，开发了该主要角色：活跃的博士。 需要快速完成例行任务的学生。由于该项目只有一个主要角色，因此只需要一个界面。
4.2技术栈
技术堆栈是用于创建Web或移动应用程序的软件和编程语言的组合。 有前端（客户端）堆栈和后端（服务器端）堆栈（图6）。
图6.用于应用程序服务器和客户端的技术说明，并说明如何在下一阶段生成混合移动应用程序。
此应用程序前端的基础是Vue，具有连接的UXgraph组件。 由于将数据集和其他参数设置为Vue属性，因此图是在客户端完全生成的245。 项目使用单页应用程序（SPA）体系结构。 它加载单个HTML页面，并在用户与该应用进行交互时动态更新它。 因此，View Layer由Vue处理，路由由vue-router管理。 服务器通信借助vue-resource插件进行工作，该插件用于与RESTful后端接口。 一切都是使用Webpack构建工具构建的。
4.3用于处理仪表板操作的RESTful API
一个重要的功能是，所有后端逻辑都是作为一个单独的Node.js项目制作和托管的，可以通过API进行访问。 由于前端和后端未紧密集成在一起，因此可以添加或修改后端操作，而不会影响前端和后端。 选择MongoDB是因为它可以与另存为JSON的对象一起使用，这使得稍后在[7]上导出它们变得容易。 此外，还可以将gridstack.js中的对象（用于为小部件构造窗格启用拖放功能）直接保存为Mongo JSON对象。 与MongoDB的所有协作都在Mongoose的帮助下进行管理。 这是一个设计用于异步环境的MongoDB对象建模工具。
4.4动态道具
任务之一是在更改图形设置时动态更新图形。 为此，使用了另一个Vue函数：v-bind。 它允许将道具动态绑定到父对象上的某些数据。 因此，当用户为图表选择新的颜色时，该参数会动态向下流到子级，并在图表上进行更新，而无需重新加载页面。 用法示例是：
为了在不更改页面的情况下更改属性时重新绘制图形，已开发了自定义监视功能。 更改特定属性后，将触发每个观察程序，然后调用一个负责绘制SVG的方法。
- 结论
本文
剩余内容已隐藏，支付完成后下载完整资料
资料编号：[236165]，资料为PDF文档或Word文档，PDF文档可免费转换为Word
以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。
