开启D3:是什么让程序员与设计师如此钟爱
摘要: D3是一个开源的JavaScript程序库。它对设计师来说很友好,因为它能让设计师使用SVG这种常见的图形格式进行创作。它对程序员来说也很合适,因为它是兼容Web标准的。下面让我们开启D3,聊聊这个在Web上实现数据可视化最牛的工具。 本文选自《图说D3:数据可视化利器从入门到进阶》。
D3,即“Data Driven Documents”(数据驱动文档)的缩写,是由才华横溢的Mike Bostock编写的一个JavaScript程序库。D3名副其实,能将数据绑定到Web文档,然后基于数据来操纵那些文档。酷吧,但是这又能做什么呢?
我们先从D3是JavaScript编程库这件事说起。D3不是像Adobe Illustrator那样需要下载下来使用的软件,也不是类似R语言那样可以通过命令行工具来分析和生成图表的开发环境,更不是像Google Charts或Tableau Public那样能让你登录一个站点、插入一些数字然后就能生成股票图形的工具。换言之,就像每个用其他语言开发的扩展包一样,D3完全就是一个开源的JavaScript扩展。D3扩充了JavaScript的能力,特别是在数据可视化方面非常有用。
如果你是一个编程新手,这个答案可能让你感到不太满意。什么是程序库?物理上这个库里面又包含了哪些东西?答案是:一堆函数和方法(非常像函数的东西)。函数和方法包含了代码的可用执行序列,可以被重用。库本质上就是一组函数的集合,函数之间被设计成可以互相协同调用。这些函数集为编程提供了一种新的方式。
D3作为一个程序库,正是一组函数或方法及其定义(具体命令的执行序列)的集合。这组函数或方法包含在具体的JavaScript文件中。只要你愿意,现在就可以对其一窥门径。访问http://d3js.org/d3.v3.js,D3现在已经是第3个版本,正如它所宣称的那样,是开源的。
应该怎么使用它呢?通过新建一个网页并引入和运行这个JavaScript文件即可。当你在浏览器里运行d3.v3.js时,浏览器会导出D3的所有函数和方法,这样你就可以在自己的代码里面直接使用这些函数和方法了。如果其他用户访问你的站点,他的浏览器一样会直接运行d3.v3.js,D3的函数同样会被导出。
这些函数非常有用。D3绝对是一个能让程序员完全改变编程方式的JavaScript程序库。
D3最大的亮点和它的名称一样——数据驱动文档。D3使数据绑定并操纵Web文档成为可能。从技术上来讲,能被浏览器访问并被其渲染的东西都可以称为Web文档,这包括任何HTML页面,但更为重要的还有SVG(可缩放矢量图形)及图片。
你以前可能用过SVG。如果你是一名设计师,那就100% 用过了。SVG是一种矢量图形格式:图形的分辨率能够根据缩放级别自我调节,所以从来不会失真。其背后的秘密就是使用了一种类似HTML的标记语言来编码这种Web图形文档。例如,< p >标签代表段落,< h1 >标签表示头部。SVG使用标签表示圆形,使用标签表示线条。
用户可以通过D3将数据植入SVG文档是D3擅长数据可视化的一个重要因素。这也意味着你可以将单个数据点和SVG图形元素(如圆形、矩形及路径等)进行连接,然后基于这些数据连接点来格式化或重定位图形元素。
为了确保说明要点,我打算再重复一遍。D3可以让你直接在SVG这种华丽的Web文档格式的图形元素上根据数据值来设置属性!使用D3,就是在使用数据直接控制浏览器所显示的内容。简而言之,这就是D3。
设计师为什么喜欢D3
如果你是一名设计师,有丰富的Adobe Illustrator或Inkscape使用经验,那么你一定会喜欢上D3,其创建、销毁和格式化SVG元素的方式是那么优雅。你肯定无数次从网上下载过SVG文件并粘贴到你的设计软件中。有了D3,你将来到SVG标签的内容深处,即使是第一次接触,也会发现其组成逻辑和命名方式似曾相识。对图形的内部着色称为“填充”,围绕边界的线条称为“笔触”。你可以将图形打包,然后统一运用渐变,剪切路径及改变对象的透明度。一旦学会其语法,其他的事情将水到渠成。
程序员为什么钟爱D3
如果你是一个程序员,你会钟爱D3,因为D3基于现有Web标准的HTML和SVG就能发挥强大的威力,根本不需要依赖任何第三方插件或专属框架。基于Web的可视化工具以前就有,如Protovis、Flare及JavaScript InfoViz工具集。所有这些工具都依赖一套自己特有的方式在页面上制图(用技术术语来讲,就是都在使用自己的场景结构)。D3与众不同,它与数据结合,提供一种直接操作Web的内置场景结构,即文档对象模型的方式。
D3也从其他JavaScript库中汲取了一些精华。例如,可以像jQuery那样进行链式方法调用。
D3的使用要点
你可以用D3来制作一些用以娱乐或赚钱的东西,而不用缴纳任何许可证费用,甚至不需要提到D3的名字。D3是完全开放的。并非所有浏览器都支持D3,这是因为并非所有浏览器都执行Web标准。被称为“现代浏览器”的Google Chrome、Mozilla Firefox、Opera、Safari和Internet Explorer 9及其以上版本都兼容D3。
任何使用D3开发的项目,如果用户能看到其外观,即表示能访问其数据。一般情况下,这种等级的数据透明度不会引起安全问题——既然你已经打算将数据可视化并公开,那么这份数据应该不用保密了吧。不过,这倒是提醒我们要时刻注意检查数据来源是否允许原始数据被散布出去。
本文选自《图说D3:数据可视化利器从入门到进阶》,点此链接可在博文视点官网查看此书。
想及时获得更多精彩文章,可在微信中搜索“博文视点”或者扫描下方二维码并关注。
开启D3:是什么让程序员与设计师如此钟爱相关推荐
- 【转发】程序员和设计师必备:全球高清无版权图片网站推荐
因为最近做小专栏,然后经常会给自己文章或者小专栏的里面的其他文章挑选一些高清符合文章方向的题图,今天特意整理了下收藏的免费高清无版权图片素材网站,没有聊到多少技术的东西但是足够实用.虽然题目里面写了是 ...
- 如果美工请假了,要程序员做图顶上!会是什么样的场景?经常我们都能听见程序员和设计师之间的互怼日常!
程序员:"你们设计都是一帮大少爷,拿张破草稿纸在那边瞎胡笔划几下,就让我做东飞西跳的牛逼效果,我哪知道是什么效果???你们怎么不去动物园耍猴呀!" 设计师:"你妹的!技术 ...
- 在西安,有多少家企业在招聘程序员,设计师?
没法统计清楚,反正就是很多很多家,超乎你的想象,你可以翻翻各大招聘网站就知道了大概了.俗话说的好,有一技傍身,走哪都不怕失业!更何况现在IT行业发展的如此好! 各新技术的层出不穷也彰显的着IT行业无限 ...
- 一个程序员 作者 设计师的 2018 年终总结
有人经常问我,什么每年能做这么多东西.我的答案一直.总是.老是:不加班. 不加班,钱少,多了点 x 生活.人生总是要做很多的抉择,如我这一般穷的人做的抉择,便更加有限了.上一年里的收入帮家里还了钱,这 ...
- 值得程序员和设计师关注的微信公众号
这篇文章分享了十多个技术和设计类微信公众号.其中有最受欢迎的热门公众号.也有专注某个技术或设计的公众号,涵盖 Java.Python.Android.iOS.Web前端.PHP.C/C++..NET. ...
- 程序员 or 设计师
iPhone 4颠覆了人们对智能手机认知的那一年,正是出版社如火如荼的开展数字阅读的元年.R公司,以可旋转的魔方作为电子书目录的独创设计,令他们赢得了一个重要的出版社客户. 不过,实际开发的过程中,R ...
- 设计的工程化,来自Codesigner程序员X设计师的分享
这篇文章是社区成员ML404 Jun在 Mixlab 广州线下分享活动内容的总结,Jun是一名喜欢设计和代码的互联网从业者,兴趣广泛,从设计到代码均有涉猎,目前专注于设计系统和工具的探索.他做过的东西 ...
- 天才程序员的传奇人生:项目被总统抢走,在瞄准镜下写完代码后被捕入狱
作者 | Nathaniel Popper ,Ana Vanessa Herrero 译者 | 核子可乐 编辑 | Tina 委内瑞拉的石油币,原本只是一位程序员的创业项目.2017 年,27 岁的程 ...
- JAVA程序员从菜鸟到菜鸟
CSDN十大风云博客专栏评选结果公布! 下载频道分享季1:分享经典,领取积分! CSDN博客皮肤评选活动火爆开启! [置顶] Java程序员从笨鸟到菜鸟之(序 ...
最新文章
- cmd常见错误及解决方法
- 网站优化也逃不过“细节决定成败”定律
- LeetCode 205 Isomorphic Strings(同构的字符串)(string、vector、map)(*)
- Ubuntu 16.04安装Tomcat 8 图解
- 【NOI2012】迷失游乐园【概率期望】【换根dp】【基环树】
- 网页打开微信公众号关注界面
- jquery 高亮插件 highlight
- ElasticSearch 2 (11) - 节点调优(ElasticSearch性能)
- 使用CefSharp在.NET中嵌入Google kernel
- Java学习手册:数据结构与算法汇总
- 关于vc6++编译DDK驱动出现的问题fatal error C1083: Cannot open include file: 'specstrings.h': No such file or dir
- 加壳及脱壳《逆向工程》
- 直博人数远大于硕士人数,清华计算机系到底有多强?
- Jmeter随机常用变量
- 终于搞懂了回车与换行的区别
- 60级神圣系圣骑心得(转)
- PR软件——音频变音(机器音)
- css样式字体文本汇总
- php 文字水印换行,thinkPHP5图片加文字水印实现换行的方法
- 如何画出FPN论文中的金字塔结构图
热门文章
- springboot(十)SpringBoot消息中间件RabbitMQ
- windows10 安装 cuda8.0 cudnn6.0 tensorflow-gpu1.3.0 pycharm jupyter 及路径
- 库卡机器人坐标手势_在工具坐标系中移动库卡机器人
- 微信接收QQ邮箱提醒
- 对大脑有益的16种食物_16种食物为大脑添能量 让你工作干劲满满
- 江城子·乙卯正月二十日夜记梦
- 公司要新招美女跟我学docker,你来吗?
- linux与python客户端,Python编写的socket服务器和客户端
- halfstone 原理_躺在操场看天
- Scratch3.0----离线编辑器下载