我的D3.js之路

数据可视化作为大数据应用的一个分支,随着大数据时代的到来得到了飞速发展。各种各样的开发库如雨后春笋般出现,单是前端方向就不下百种。D3.js无疑是此中翘楚,是在世界范围内最受广泛认可的前端可视化工具,Github上的排名就是有利的佐证。

为什么D3.js如此受到关注呢?它有三点特性:高自由性、代码简洁、有研究的趣味性。作为一种完全开源的技术,它不追求作图的速度,有很多为高端开发者考虑的地方,使其成为了一项“值得深入学习”的技术。绘图,本身就有很强的趣味性,开发人员得到的结果是图形而不是枯燥的数字,在学习也中不易感到烦闷。

我最早接触D3是在2013年,距离D3发布仅仅两年,是我到日本留学的第二年。在一门叫做项目演习的课程上,四人的一组在三个月内需要完成一件作品。我被组长分配的任务是做一个在日本地图上表现农产品产量分布的图表,并添加一些交互行为。当时我对数据可视化几乎全然不知,完全没有头绪用什么工具来做。一个在设计学方向很资深的老师给了我一本书,日文版的《Visualizing Data》。书中有大量的可视化案例,代码是用Processing写的。这位老师建议我看看D3,说是近期的新技术,很有趣。一进D3的官网我就被绚丽的图形吸引了。当时我不知其实类似的工具还有很多,如果只为完成那件作品,D3绝非最快的方法。但是我很庆幸自己选择了这种比较复杂的方法,并且越是学习越能感到D3的魅力。

在众多可视化工具里,我把D3称为是一项“值得深入学习”的技术。不仅仅因为D3有很多优点,如高自由性、代码简洁等。更重要的是,有研究的趣味性,它完美融合了绘图和编程的乐趣。开发者不仅是在编码,也是在做设计,还是在创造艺术。

日文里有一个词“わかりやすく”,这是一个副词,直译过来就是“简单易懂地”,后面可以跟“说明、表现什么什么”。但是,虽然意思一样,日文中这个词远比翻译后要亲切。在日本,无论是在技术书、论文报告,还是商品宣传中,各行各业,只要是要传达给别人某些事情的时候,都在强调这个词。所以看日文书学技术,速度远比看汉语要快,正是因为每个作者都在体现这种精神。这也是我在日本的留学生活中学到的最大的财富。

因此,判断一篇技术文章、一个视频教程好不好,判断的标准就是它是否足够简单。光是专家能看懂不行,光是高手能看懂也不行,要让初学者也能轻易看懂才行。如果说一个作者在文章中不能简单明确地传达某个知识点,最大的可能性就是他也一知半解。当然,这也是人之常情,谁都会有。

Rapid D3.js恰如其名称形容的一样,是一套能快速入门的课程。它有不少为初学者考虑的细节,总体来说做到了由易入难,初学者在学习的过程中很少卡带。视频的长度大都在5-6分钟以内,不容易疲劳。每课都凝缩了一个知识点,并以很简短的方式进行了讲解,没有冗余,知识结构也比较完整。可以说是体现了“简单易懂的精神”的教程,作为没有D3基础的学生很合适。

声明:CSDN登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。

本文转自d1net(转载)

时间: 2024-10-24 03:07:46

我的D3.js之路的相关文章

高大上必备!D3.js对产品的贡献度剖析

在这个用数据说话的时代(靠脸吃饭的年代),没有一个好的展现形态(没有一张帅气清秀的脸蛋),对于整个产品产生的影响,那简直...  在数据可视化竞争的战场,互联网的各家各户都很注重自家产品的前端展现.这也造成了目前前端各种火到爆,火的不要不要的原因之一.各类新型的框架也是接踵而至,如:emberjs.angluarjs.backbonejs.vuejs以及reactjs等等,这个对目前企业的发展也造成了一定的困扰. 追星派:此派弟子非常注重对新技能的渴求,看到新的技能书,不管前方道路如何坎坷,练了

《D3.js数据可视化实战手册》—— 1.2 搭建一个简易的D3开发环境

1.2 搭建一个简易的D3开发环境 D3.js数据可视化实战手册 在开始使用D3之前,我们要做的第一件事是搭建一个开发环境.这节里,我们将告诉你如何在几分钟内搭建一个简单的D3开发环境. 1.2.1 准备阶段 在我们开始前,请确保你已经安装好一个文本编辑器. 1.2.2 搭建环境 我们先要下载D3.js. 1.我们可以在http://d3js.org/下载最新版本的D3.js,也可以在https://github. com/mbostock/d3/tags下载之前的版本.另外,如果你对开发中的最

《D3.js数据可视化实战手册》——导读

前言 D3.js数据可视化实战手册 D3.js是一个JavaScript库,它主要用于对数据的动态图表展示.通过HTML.SVG以及CSS,D3可以让数据展现得更加鲜活.D3使得数字的图形化展示变得异常简单,可以说,它是当下最强大的基于网络的数据可视化技术. 本书理论与实践结合,力图向读者全方位地展示D3数字可视化技术,帮助读者快速利用D3创建可视化程序.学习完本书后,快速高效地创建叹为观止的数据可视化程序,对读者来说将是小菜一碟! 本书由浅入深,首先介绍了一些D3数字可视化编程中的基本概念,继

d3.js 读取csv文件,csv文件长度为4万多条,用下面的方法读取,出现脚本运行时间过长

问题描述 d3.js 读取csv文件,csv文件长度为4万多条,用下面的方法读取,出现脚本运行时间过长 试过将csvdata.length改成数字,例如25,则可以正常显示.csvdata.length为45284. var csvdata = new Array(); d3.csv("daaa02_bus_station.csv",function(csvdata){ for (var i = 0; i < csvdata.length; i ++) { //var point

D3.js实现柱状图的方法详解_javascript技巧

D3.js介绍 D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 如何用D3.js实现柱状图? 柱状图里面有坐标轴和柱子.然而我们还需要SVG画布来画这些东西.先把大概的画图框架搭起来,代码如下(请注意此时我在body标签里添加

D3.js封装文本实现自动换行和旋转平移等功能_javascript技巧

我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧. 一.引用 multext.js 文件 multext.js function appendMultiText(container, str, posX, posY, width, fontsize, fontfamily){ if( arguments.length < 6){ fontsize = 14; } if( arguments.length < 7){ fontfamily = &q

D3.js实现饼状图的方法详解_javascript技巧

前言 小编在之前已经跟大家分享过关于怎样用柱状图和折线图这两种基本图表.这两种图表都是有坐标轴的,现在来说一种没有坐标轴的图表--饼图. 饼状图实现 还是和之前一样,我们先把简单的画图框架搭起来,添加SVG画布.但是这里需要注意的是,为了方便后面画饼图上的弧形,我们把组合这些元素的g元素移动到画布的中心: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

【D3.js 学习总结】1、初识D3

D3是指数据驱动文档(Data-Driven Documents),根据D3的官方定义: D3.js是一个JavaScript库,它可以通过数据来操作文档.D3可以通过使用HTML.SVG和CSS把数据鲜活形象地展现出来.D3严格遵循Web标准,因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖.同时,它提供了强大的可视化组件,可以让使用者以数据驱动的方式去操作DOM.----D3维基(2013年8月) 从一个Hello Wordld示例来看看d3如何运行 点击查看在线DEMO fu

D3.js实现散点图和气泡图的方法详解_javascript技巧

前言 小编之前已经跟大家分享过了<D3.js实现柱状图的方法详解>和<D3.js实现折线图的方法详解>这两篇文章,已经介绍过柱状图和折线图了.下面就来说说和这两种非常相似的图表--散点图和气泡图.有需要的朋友们可以参考学习. 散点图和气泡图的实现 还是和之前一样,我们先把简单的画图框架搭起来,添加SVG画布: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q