使用D3.js做複雜資料視覺化(一):簡介

2018-02-09 12:42:43来源:https://weitinglin.com/2018/02/08/使用d3-js做複雜資料視覺化(一):簡介/作者:我們的基因體時代人点击

分享


在熟悉完html5/css的基础后(真的是颇多坑),终于可稍微踏进d3.js
的世界,边搞懂基本js边搞起来,然后在开发时,还必须稍微把后端的东西浅嚐一番(採取用koa2来做后端,前后从xdk到browserify到node.js下的koa2框架),来支撑前端的设计呈现,这坑走来一定要稍微纪录一下。



不得不说D3.js背后的逻辑很美,尤其是在阅读资料视觉化经典里的概念后,会发现作者Mike Bostock
开发D3所花费的苦心,同时慢慢体会到Javascript背后的想法。



放在软体世界中,D3.js是建立在前端的领域中javascript的视觉化套件(让浏览器 etc. firefox/chrome/safari 跑起来的程式语言),而前端领域是个变化快速的领域,尤其是javascript


在摸索过程中,可以发现网路上的js範例是由各个不同版本js语法(ES2016, ES2017….)所组成的,隔几年,基本上语法和函数都有点变化,所以要花一点时间大致理解围绕D3.js所需要的工具,其目前开发到什么程度。


D3.js是个快速迭代的Javascript 项目,所有书籍的教学和网路文章教学常常是过时


在学习D3.js的起手,挑了两本在2017年发表的书来阅读,分别是Data Visualization with D3 4.x Cookbook(Nick Zhu)
和D3.js 4.x Data Visualization
(Ændrew Rininsland ,‎ Swizec Teller),在实践的过程,我马上发现了两本都是在2017年发行的书,Javascript风格、使用的D3.js语法和目前最新版本的D3.js 4.x版本(话说在前几天D3.js 5.0发布了)都不太一样,部分逻辑也有些出入,所以基本上在使用D3.js的路上,会遇到很多版本语法的坑,很难直接把在网上的代码直接拿来应用,善用官方解释
和…..动手入坑。


D3.js开宗明义就是要做Data-Driven Document,重点不是在华丽的视觉化,而是如何有效地呈现资料


D3.js快速迭代的过程,其中一个目的便是简化资料处理的过程,以及让资料结构更贴近视觉化的流程,另外一部分的重点,便是互动性,资料视觉化的重点不是只停留于静态的视觉呈现,而是让使用者与资料更有效的互动,所以尽量由“资料特性”出发来思考设计,而不要一下子就用视觉化来想像,否则会创造出很多无用的设计



最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台