可视化编程技术到底是什么

JavaScript013

可视化编程技术到底是什么,第1张

可视化编程 可视化编程,亦即可视化程序设计:以“所见即所得”的编程思想为原则,力图实现编程工作的可视化,即随时可以看到结果,程序与结果的调整同步。

可视化编程是与传统的编程方式相比而言的,这里的“可视”,指的是无须编程,仅通过直观的操作方式即可完成界面的设计工作,是目前最好的Windows应用程序开发工具。

可视化编程语言的特点主要表现在两个方面:一是基于面向对象的思想,引入了控件的概念和事件驱动;二是程序开发过程一般遵循以下步骤,即先进行界面的绘制工作,再基于事件编写程序代码,以响应鼠标、键盘的各种动作。

可视化编程十问

1. 什么是可视化程序设计?

可视化(Visual)程序设计是一种全新的程序设计方法,它主要是让程序设计人员利用软件本身所提供的各种控件,像搭积木式地构造应用程序的各种界面。

2. 可视化程序设计有哪些优点?

可视化程序设计最大的优点是设计人员可以不用编写或只需编写很少的程序代码,就能完成应用程序的设计,这样就能极大地提高设计人员的工作效率。

3. 能够进行可视化程序设计的语言有哪些?

能进行可视化程序设计的语言很多,比较常用的有微软的Visual Basic、Visual C++、中文Visual Foxpro、Borland公司的Delphi等。

4. 可视化程序设计中有哪些基本概念?

主要的几个基本概念有表单、组件、属性、事件、方法等。

5. 什么是表单(Form)?

表单是指进行程序设计时的窗口,我们主要是通过在表单中放置各种部件(如命令按钮、复选框、单选框、滚动条等)来布置应用程序的运行界面。

6. 什么是组件?

所谓组件,就是组成程序运行界面的各种部件,如:命令按钮、复选框、单选框、滚动条等。

7. 什么是属性?

属性就是组件的性质。它说明组件在程序运行的过程中是如何显示的、组件的大小是多少、显示在何处、是否可见、是否有效……

8. 属性可以分成哪几类?

属性可分成三类,设计属性:是在进行设计时就可发挥作用的属性;运行属性:这是在程序运行过程中才发挥作用的属性;只读属性:是一种只能查看而不能改变的属性。

9. 什么是事件?

事件就是对一个组件的操作。如用鼠标点击一个命令按钮,在这里,点击鼠标就称为一个事件(Click事件)。

10. 什么是方法?

方法就是某个事件发生后要执行的具体操作,类似以前的程序。例如当我们用鼠标单击“退出”命令按钮时,程序就会通过执行一条命令而结束运行,命令的执行过程就叫方法。

面向对象程序设计 1.历史回顾

1967年挪威计算中心的Kisten Nygaard和Ole Johan Dahl开发了Simula67语言,它提供了比子程序更高一级的抽象和封装,引入了数据抽象和类的概念,它被认为是第一个面向对象语言。20世纪70年代初,Palo Alto研究中心的Alan Kay所在的研究小组开发出Smalltalk语言,之后又开发出Smalltalk-80,Smalltalk-80被认为是最纯正的面向对象语言,它对后来出现的面向对象语言,如Object-C,C++,Self,Eiffl都产生了深远的影响。随着面向对象语言的出现,面向对象程序设计也就应运而生且得到迅速发展。之后,面向对象不断向其他阶段渗透,1980年Grady Booch提出了面向对象设计的概念,之后面向对象分析开始。1985年,第一个商用面向对象数据库问世。1990年以来,面向对象分析、测试、度量和管理等研究都得到长足发展。

实际上,“对象”和“对象的属性”这样的概念可以追溯到20世纪50年代初,它们首先出现于关于人工智能的早期著作中。但是出现了面向对象语言之后,面向对象思想才得到了迅速的发展。过去的几十年中,程序设计语言对抽象机制的支持程度不断提高:从机器语言到汇编语言,到高级语言,直到面向对象语言。汇编语言出现后,程序员就避免了直接使用0-1,而是利用符号来表示机器指令,从而更方便地编写程序;当程序规模继续增长的时候,出现了Fortran、C、Pascal等高级语言,这些高级语言使得编写复杂的程序变得容易,程序员们可以更好地对付日益增加的复杂性。但是,如果软件系统达到一定规模,即使应用结构化程序设计方法,局势仍将变得不可控制。作为一种降低复杂性的工具,面向对象语言产生了,面向对象程序设计也随之产生。

2.面向对象程序设计的基本概念

面向对象程序设计中的概念主要包括:对象、类、数据抽象、继承、动态绑定、数据封装、多态性、消息传递。通过这些概念面向对象的思想得到了具体的体现。

1)对象

对象是运行期的基本实体,它是一个封装了数据和操作这些数据的代码的逻辑实体。

2)类

类是具有相同类型的对象的抽象。一个对象所包含的所有数据和代码可以通过类来构造。

3)封装

封装是将数据和代码捆绑到一起,避免了外界的干扰和不确定性。对象的某些数据和代码可以是私有的,不能被外界访问,以此实现对数据和代码不同级别的访问权限。

4)继承

继承是让某个类型的对象获得另一个类型的对象的特征。通过继承可以实现代码的重用:从已存在的类派生出的一个新类将自动具有原来那个类的特性,同时,它还可以拥有自己的新特性。

5)多态

多态是指不同事物具有不同表现形式的能力。多态机制使具有不同内部结构的对象可以共享相同的外部接口,通过这种方式减少代码的复杂度。

6)动态绑定

绑定指的是将一个过程调用与相应代码链接起来的行为。动态绑定是指与给定的过程调用相关联的代码只有在运行期才可知的一种绑定,它是多态实现的具体形式。

7)消息传递

对象之间需要相互沟通,沟通的途径就是对象之间收发信息。消息内容包括接收消息的对象的标识,需要调用的函数的标识,以及必要的信息。消息传递的概念使得对现实世界的描述更容易。

3.面向对象语言

一个语言要称为面向对象语言必须支持几个主要面向对象的概念。根据支持程度的不同,通常所说的面向对象语言可以分成两类:基于对象的语言,面向对象的语言。

基于对象的语言仅支持类和对象,而面向对象的语言支持的概念包括:类与对象、继承、多态。举例来说,Ada就是一个典型的基于对象的语言,因为它不支持继承、多态,此外其他基于对象的语言还有Alphard、CLU、Euclid、Modula。面向对象的语言中一部分是新发明的语言,如Smalltalk、Java,这些语言本身往往吸取了其他语言的精华,而又尽量剔除他们的不足,因此面向对象的特征特别明显,充满了蓬勃的生机;另外一些则是对现有的语言进行改造,增加面向对象的特征演化而来的。如由Pascal发展而来的Object Pascal,由C发展而来的Objective-C,C++,由Ada发展而来的Ada 95等,这些语言保留着对原有语言的兼容,并不是纯粹的面向对象语言,但由于其前身往往是有一定影响的语言,因此这些语言依然宝刀不老,在程序设计语言中占有十分重要的地位。

4.面向对象程序设计的优点

面向对象出现以前,结构化程序设计是程序设计的主流,结构化程序设计又称为面向过程的程序设计。在面向过程程序设计中,问题被看作一系列需要完成的任务,函数(在此泛指例程、函数、过程)用于完成这些任务,解决问题的焦点集中于函数。其中函数是面向过程的,即它关注如何根据规定的条件完成指定的任务。

在多函数程序中,许多重要的数据被放置在全局数据区,这样它们可以被所有的函数访问。每个函数都可以具有它们自己的局部数据。下图显示了一个面向过程程序中函数和数据的关系。

图1 面向过程程序设计中函数和数据的关系示例

这种结构很容易造成全局数据在无意中被其他函数改动,因而程序的正确性不易保证。面向对象程序设计的出发点之一就是弥补面向过程程序设计中的一些缺点:对象是程序的基本元素,它将数据和操作紧密地连结在一起,并保护数据不会被外界的函数意外地改变。下图显示了一个面向对象程序中对象与函数和数据的关系。

图2 面向对象程序设计中函数和数据的关系示例

比较面向对象程序设计和面向过程程序设计,还可以得到面向对象程序设计的其他优点:

1)数据抽象的概念可以在保持外部接口不变的情况下改变内部实现,从而减少甚至避免对外界的干扰;

2)通过继承大幅减少冗余的代码,并可以方便地扩展现有代码,提高编码效率,也减低了出错概率,降低软件维护的难度;

3)结合面向对象分析、面向对象设计,允许将问题域中的对象直接映射到程序中,减少软件开发过程中中间环节的转换过程;

4)通过对对象的辨别、划分可以将软件系统分割为若干相对为独立的部分,在一定程度上更便于控制软件复杂度;

6)以对象为中心的设计可以帮助开发人员从静态(属性)和动态(方法)两个方面把握问题,从而更好地实现系统;

7)通过对象的聚合、联合可以在保证封装与抽象的原则下实现对象在内在结构以及外在功能上的扩充,从而实现对象由低到高的升级。

面对对象的程序设计方法

在数据输入模块内部设计中,采用面向对象的设计方法。[6]面向对象的基本概念如下:

对象:对象是要研究的任何事物。从一本书到一家图书馆,单的整数到整数列庞大的数据库、极其复杂的自动化工厂、航天飞机都可看作对象,它不仅能表示有形的实体,也能表示无形的(抽象的)规则、计划或事件。对象由数据(描述事物的属性)和作用于数据的操作(体现事物的行为)构成一独立整体。从程序设计者来看,对象是一个程序模块,从用户来看,对象为他们提供所希望的行为。在对内的操作通常称为方法。

类:类是对象的模板。即类是对一组有相同数据和相同操作的对象的定义,一个类所包含的方法和数据描述一组对象的共同属性和行为。类是在对象之上的抽象,对象则是类的具体化,是类的实例。类可有其子类,也可有其它类,形成类层次结构。

消息:消息是对象之间进行通信的一种规格说明。一般它由三部分组成:接收消息的对象、消息名及实际变元。

面向对象主要特征:

封装性:封装是一种信息隐蔽技术,它体现于类的说明,是对象的重要特性。封装使数据和加工该数据的方法(函数)封装为一个整体,以实现独立性很强的模块,使得用户只能见到对象的外特性(对象能接受哪些消息,具有那些处理能力),而对象的内特性(保存内部状态的私有数据和实现加工能力的算法)对用户是隐蔽的。封装的目的在于把对象的设计者和对象者的使用分开,使用者不必知晓行为实现的细节,只须用设计者提供的消息来访问该对象。

继承性:继承性是子类自动共享父类之间数据和方法的机制。它由类的派生功能体现。一个类直接继承其它类的全部描述,同时可修改和扩充。继承具有传递性。继承分为单继承(一个子类只有一父类)和多重继承(一个类有多个父类)。类的对象是各自封闭的,如果没继承性机制,则类对象中数据、方法就会出现大量重复。继承不仅支持系统的可重用性,而且还促进系统的可扩充性。

多态性:对象根据所接收的消息而做出动作。同一消息为不同的对象接受时可产生完全不同的行动,这种现象称为多态性。利用多态性用户可发送一个通用的信息,而将所有的实现细节都留给接受消息的对象自行决定,如是,同一消息即可调用不同的方法。例如:Print消息被发送给一图或表时调用的打印方法与将同样的Print消息发送给一正文文件而调用的打印方法会完全不同。多态性的实现受到继承性的支持,利用类继承的层次关系,把具有通用功能的协议存放在类层次中尽可能高的地方,而将实现这一功能的不同方法置于较低层次,这样,在这些低层次上生成的对象就能给通用消息以不同的响应。在OOPL中可通过在派生类中重定义基类函数(定义为重载函数或虚函数)来实现多态性。

综上可知,在面对对象方法中,对象和传递消息分别表现事物及事物间相互联系的概念。类和继承是是适应人们一般思维方式的描述范式。方法是允许作用于该类对象上的各种操作。这种对象、类、消息和方法的程序设计范式的基本点在于对象的封装性和类的继承性。通过封装能将对象的定义和对象的实现分开,通过继承能体现类与类之间的关系,以及由此带来的动态联编和实体的多态性,从而构成了面向对象的基本特征。

面向对象设计是一种把面向对象的思想应用于软件开发过程中,指导开发活动的系统方法,是建立在“对象”概念基础上的方法学。对象是由数据和容许的操作组成的封装体,与客观实体有直接对应关系,一个对象类定义了具有相似性质的一组对象。而每继承性是对具有层次关系的类的属性和操作进行共享的一种方式。所谓面向对象就是基于对象概念,以对象为中心,以类和继承为构造机制,来认识、理解、刻画客观世界和设计、构建相应的软件系统。。按照Bjarne STroustRUP的说法,面向对象的编程范式:

l 决定你要的类;

2 给每个类提供完整的一组操作;

3 明确地使用继承来表现共同点。

由这个定义,我们可以看出:面向对象设计就是“根据需求决定所需的类、类的操作以及类之间关联的过程”。

面向对象设计方法的特点和面临的问题

面向对象设计方法以对象为基础,利用特定的软件工具直接完成从对象客体的描述到软件结构之间的转换。这是面向对象设计方法最主要的特点和成就。面向对象设计方法的应用解决了传统结构化开发方法中客观世界描述工具与软件结构的不一致性问题,缩短了开发周期,解决了从分析和设计到软件模块结构之间多次转换映射的繁杂过程,是一种很有发展前途的系统开发方法。

但是同原型方法一样, 面向对象设计方法需要一定的软件基础支持才可以应用,另外在大型的MIS开发中如果不经自顶向下的整体划分,而是一开始就自底向上的采用面向对象设计方法开发系统,同样也会造成系统结构不合理、各部分关系失调等问题。所以面向对象设计方法和结构化方法目前仍是两种在系统开发领域相互依存的、不可替代的方法。

数据分析之大数据可视化之初级篇--零编程工具

Tableau

Tableau 是一款企业级的大数据可视化工具。Tableau 可以让你轻松创建图形,表格和地图。 它不仅提供了PC桌面版,还提供了服务器解决方案,可以在线生成可视化报告。服务器解决方案可以提供了云托管服务。

Infogram

Infogram的最大优势在于,让可视化信息图表与实时大数据相链接。只须三个简单步骤,可以选择在众多图表,地图,甚至是视频可视化模板中进行选择,支持团队账号。

ChartBlocks

ChartBlocks是一个易于使用在线工具,它无需编码,便能从电子表格,数据库中构建可视化图表。整个过程可以在图表向导的指导下完成。图表是响应式的,并且可以和任何的屏幕尺寸及设备兼容。

Datawrapper

Datawrapper是一款专注于新闻和出版的可视化工具。 Datawrapper非常容易使用,不需要任何编程基础。你只需要上传你的数据,便能轻松地创建和发布图表,甚至是地图。Datawrapper提供了 众多的自定义布局及地图模板。

Plotly

Plotly帮助你在短短几分钟内,从简单的电子表格中开始创建漂亮的图表。如果希望为JavaScript和Python等编程语言提供一个API接口的 话,Plotly是一款非常人性化的工具。

RAW

RAW弥补了很多工具在电子表格和矢量图形(SVG)之间的缺失环节。你的大数据可以来自MicrosoftExcel中,谷歌文档或是一个简单的逗号分 隔的列表。它最厉害的功能是可以很容易地导出可视化结果,因为它和Adobe Illustrator,Sketch 和Inkscape是相容的。

Visual.ly

Visual.ly是一个可视化的内容服务。它提供专门的大数据可视化的服务。如果你想完 全外包可视化文件给第三方。你可以使用非常简化的在线流程:你只需描述你的项目,服务团队将在项目的整个持续时间内和你在一起。

数据可视化之开发展篇--JavaScript库

D3.js

D3.js是最好的数据可视化工具库。D3.js运行在JavaScript上,并使用HTML,CSS和SVG。 D3.js是开源工具,使用数据驱动的方式创建漂亮的网页。 D3.js可实现实时交互。这个库非常强大和前沿,所以它带有没有预置图表也不支持IE9。

Ember Charts

Ember Charts – 顾名思义是一种基于Ember.js框架和使用d3.js的可视化工具。Ember Charts以绘制时间序列图,柱状图,饼图和散点图为主。它非常优易于扩展,有极强的错误处理能力,当你遇到坏数据时,系统也不会崩溃。

NVD3

NVD3运行在d3.js之上, 它可建立可重用的图表组件。该项目的目标是保持所有的图表整洁和可定制性。 NVD3是d3.js之上的简单的接口,保持了d3.js的所有强大功能。 NVD3由Novus Partners前端工程师开发和使其保持了图表技术洞察力。

Google Charts

Google Charts 以HTML5和SVG为基础,充分考虑了跨浏览器的兼容性,并通过VML支持旧版本的IE浏览器。所有您将创建的图表是交互式的,有的还可缩放。 Google Charts非常人性化,有全面的模板库,你可以从中找到所需模板。

FusionCharts

FusionCharts是最全面的JavaScript图表库,包括90个图表和900种地图。FusionCharts可以轻松集成像jQuery库,Angularjs和React框架以及ASP.NET和PHP语言。 FusionCharts支持JSON和XML数据,并提供许多格式图表:PNG,JPEG,SVG和PDF。

Highcharts

Highcharts是一个JavaScript API与jQuery的集成,全球最大的100家公司中有61家正在使用它。图表使用SVG格式,并使用VML支持旧版浏览器。它提供了两个专门的图表类 型:Highstock和Highmaps,并且还配备了一系列的插件。

Chart.js 

对于一个小项目的图表,chart.js是一个很好的选择。开源,只有11KB大小,这使得它快速且易于使用,它支持多种图表类型: 饼图,线性图和雷达图等。

Leaflet

Leafleft 基于Open Street Map数据,使用HTML5 / CSS3绘制互动式可视化图。可以使用他们的扩展插件库添加热点图(heatmaps)和动画标记。 Leaflet 是开源和只有33 KB大小。

Chartist.js

Chartist.js的开发社区一直致力于打败所有其他JavaScript图表库。它使用了Sass的个性化风格,它的SVG输出是响应式的。

N3-charts

N3-charts是一种基于AngularJS框架的工具。它建立在D3.js之上,帮助您创建简单的互动图表。 N3-charts是一种小型化的图表工具,不适用于大型项目。

Sigma JS

Sigma JS 是交互式可视化工具库。由于使用了WebGL技术,可以使用鼠标和触摸的方式来更新和变换图表,同时支持JSON和GEXF两种数据格式。这为它提供了大量的可用互动式插件。Sigma JS 专注于网页格式的网络图可视化,在大数据网络可视化中非常有用。

Polymaps

Polymaps是一款地图可视化一个JavaScript工具库。 Polymaps使用SVG实现从国家到街道一级地理数据的可视化。可以使用CSS格式来修改你的样式。它是创建heatmap热点图的最好的工具之一,创建的所有地图都可以变成动态图。

Processing.js

Processing.js是一个基于可视化编程语言的JavaScript库。作为一种面向Web的JavaScript 库,Processing.js是能够有效进行网页格式图表处理。这使得它成为了一种非常好交换式可视化工具。 Processing.js需要一个兼容HTML5的浏览器来实现这一功能。

Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者,可以快速地以申明的方式创建自定义的Web3D数据可视化模型,添加数据,并且将其作为一个组件整合到自己的应用中。

Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者,可以快速地以申明的方式创建自定义的Web3D数据可视化模型,添加数据,并且将其作为一个组件整合到自己的应用中。

这个库的开发是受到Google 2012 Info大会上的某项目可视化的启发,该项目开发者是Google员工Michael Chang。使用Gio.js就可以快速构建这种炫酷的3D模型,并以此为基础进行深入地开发。

在HTML的<head>中引入Three.js和Gio.js依赖, 以下展示了如何使用<script>标签引入依赖:

在引入Three.js和Gio.js在页面之后,已经可以创建3D Gio地球了。在此我们将先展示如何创建基础样式的Gio地球。

创建一个<p>,Gio地球将会被渲染在这个区域中:

添加一下4行Javascript代码在你的HTML中, 用以创建并渲染:

在Gio.js 1.0发布之后,开发者们提出了很多很酷的、很有建设性的建议,比如微信应用开发者希望Gio.js支持微信小程序,有经验的Three.js开发者希望Gio.js提供Three.js编程接口等。在经过仔细研究、综合设计之后,Gio.js 2.0实现了大部分功能,并且添加了有关文档说明。以下列出了主要的2.0新增特性:

Gio.js仅依赖于Three.js。

经过测试,Gio.js在Three.js R90版本下可以很好地运行和使用。

Gio.js可以运行在以下的浏览器环境中:

更多详细的介绍就不在本文中介绍了,官方文档非常详细,感兴趣的小伙伴可以直接移步文档:

Gio.js可以说是Three.js中实践的非常不错的了,官方还提供了非常多的实例,通过一些简单的API配置即可实现非常炫酷的Web3D可视化地球,而且文档非常详细,更多实用和有趣的地方等待你的 探索 !