D3JsDay02 学学D3JS 技能提高SSS—为什麽D3

https://ithelp.ithome.com.tw/upload/images/20210917/20125095DghW4uRK4Z.jpg

图片来源:unsplash

关於资料视觉化的工具一般使用者最先接触的可能是Microsoft Excel工具,後来在程序语言当中常见的是Python MatplotlibR语言,另外商业界常见的Power BITableau
其他同样是Javascript的函式库的像是ChartJsHightcharts等等

工具比较

非程序设计人员

  • Microsoft Excel
  • Power BI
  • Tableau

程序设计人员

  • Matplotlib (python)
  • ChartJs (Javascript)
  • Hightcharts (Javascript)
  • D3Js (Javascript)

一般而言Excel出发点比较像是原先处理报表计算相关的事情附加可以绘制图表
Power BITableau是後来才出现,专为数据分析、视觉化呈现等等因此操作方式会比Excel简单许多,以上这些都是对於非程序设计人员比较友善的工具。

如果我们今天要处理的资料是比较繁琐,而且重复的性质很高的话,例如一份产品资料当中含有利润、产品型号、成本、各区销售额、产品子分类,我们每次要处理这些资料都必须下载资料汇入用滑鼠操作切割出我们需要的资料,可能我只想知道产品和销售数量的长条图却每次都必须切割出不需要的部分,这样操作繁琐的事情正是程序设计人员善於解决的事情,藉由程序设计人员的自动化可以节省时间成本,也让事情简单化,更别说我们如果是要上架到网页当中可能需要绘制图表人员截图或是产出图表再请网页开发人员放入到网站中。

因此对於程序设计人员自然而然可以选择像是pythonR语言Javascript等等,今天要完成的事情是将资料呈现成图表放置到网站中又网页三大元素HTML、CSS、Javascript刚好所使用的便是Javascript这个程序语言,所以自然而然在引入方面也会选择Javascript相关的套件比较容易、也无须再接触一个新的语言增加学习成本,另外值得一提的事情是R语言除了资料视觉化呈现,比较强大的地方在於资料分析,而python现在可以做的事情越来越多,属於比较通用性的语言,善於做爬虫、机器学习、人工智慧、後端,如果你有上述需求需要结合资料视觉化的话也可以研究这些程序语言。

为什麽D3Js

为何Javascript当中有像是D3JsHeightchartschartJs的这些套件当中要选择D3呢?与其说D3Js是一个图表库,应该说他是一个易於操作网页DOM而且结合资料的library,所以也更可以做出一些动画、客制化需求的图表,如果你只是要简单的图表像是长条图、折线图,其实HeightchartschartJs这些图表库并没有不好,但如果你想要呈现的资料是根据客户或主管要求而这些图表库没有你所要的图表时候,D3Js会是你的好选择。

另一方面D3Js在Github的星星数比其他两个多上许多,因此能够找到的资源和社群间的互动可能也相对比较高一些。

各个library的Github

D3 Github
Hightcharts Github
Chart Js Github


非程序设计使用软件的官方网站

Microsoft Power BI官方网站
Microsoft Excel官方网站
Tablbau官方网站


接下来就会开始D3Js的相关教学


<<:  Day5 用Scanner实作一支程序

>>:  Day5 Data types, Variables, and Operators (Ⅰ)

[Day 30] 完赛心得:你的前端之旅还尚未结束

未完待续的前端之旅 在这30天我们带到了前端技能树上各种类型的技能,包括基本的 HTML、CSS、J...

DAY16 MongoDB Explain 与 Index 建议

DAY16 MongoDB Explain 与 Index 建议 MongoDB explain -...

30天轻松学会unity自制游戏-添加音效

现在再加上一点音效做装饰,先给一个背景音乐,直接在Hierarchy按右键开启Audio->A...

Day 15 KYC + PYC=市场基本生存法则

因应各国个资保护法如雨後春笋般出现,在2C市场上不单单只有眼前的利益营收,更要有一套完善的隐私保护的...

Day 21【Tokens' Owner】[问卦] 宋芸桦和夏宇乔到底是不同一个人?

【前言】 我们已经知道其实 NFT 是以 ERC-721 协定架设的智能合约,也就是说我们最理想找...