程序江湖事——前端可视化,网页中的花花世界

大家好,欢迎关注支持,谢谢!本篇主要介绍前端中的一些可视化方法,有兴趣的朋友可以了解一下!

江湖是一个多姿多彩的江湖,行走于其中的人形形色色,装扮更是各领风骚,形象也是不同凡响;而在程序江湖中,前端可视化可以说是现在非常热闹的一个门派了,它在大数据的带领下混的简直风生水起。

前端可视化按维度可以分成二维和三维,二维可视化是一直以前前端的主打领域,其中的CSS样式处理绝对是其中的一方霸主,除此之外为了适应数据可视化的趋势,svg与canvas也是有着很好的发展前途。


程序江湖事——前端可视化,网页中的花花世界

二维世界的绚丽多彩

svg和canvas虽然都能实现页面数据可视化,但它们的实现原理完全不同;canvas是基于位图实现的,实际上就是通过描一个有一个非常小的点从而由点变成线构建出二维图形的;而svg却是基于矢量图实现的,其底层是一个具有大小、颜色、形状、轮廓以及位置属性的对象,在可视化时在进行构建出来。photoshop、Painter等软件创建出来的都是属于位图,其中有一个很大的特点就是放大特别高的倍数时会失真,出现马赛克的效果。

程序江湖事——前端可视化,网页中的花花世界

失真的小可爱

其中canvas的代表之作有echarts,其中不仅有折线图、柱状图、饼状图等基础图形,还有复杂的迁徙图、热力图等。

程序江湖事——前端可视化,网页中的花花世界

二维世界的热力显示

而svg的代表之作有d3.js,它展现了和echarts的基础图形外,还提供了力导向图等,其中应用比较广泛的地方在于知识图谱的可视化展现。

程序江湖事——前端可视化,网页中的花花世界

强大的关系网可视化

三维可视化在3D场景和模型的推动下,借助webGL得到了长足的应用发展。

程序江湖事——前端可视化,网页中的花花世界

真假美猴王之虚拟挖土机

WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术协议允许把 JavaScript 和 OpenGL ES 2.0 结合在一起 ,为 HTML5 Canvas 提供硬件3D加速渲染,从而实现通过系统显卡来在浏览器里更流畅地展示3D场景和模型,创建复杂的导航和数据视觉化。


程序江湖事——前端可视化,网页中的花花世界

科技型虚拟大风车

个人内心独白:在这个颜值即正义的时代,美观大气的展示已经占据的比例已经越来越大了,数据可视化肯定还能得到很大的发展;但是颜值即正义的背后却是有着实力的支持,空有一副皮囊终究是掩不住腹中的草莽之气,落得个潦倒下场;随着时间的推移,颜值将不再存在,而只有内在人品才能越久越醇,因而欣赏一个人总是始于颜值,敬于才华,合于性格,久于善良,终于人品。大家有什么想法呢,可否不吝赐教!!


程序江湖事——前端可视化,网页中的花花世界

始于颜值,终于人品


颜值在日常工作生活中重要吗 (单选)
0人
0%
非常重要,人生的推进剂
0人
0%
一般重要,偶尔给自己惊喜
0人
0%
可有可无,没有太多的影响
0人
0%
构成烦恼,不利于人生发展
<button>投票/<button>


分享到:


相關文章: