d3
关注
分享
扫一扫
wan353694124
低调
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
D3.js中的Cluster Dendrogram详解
Cluster Dendrogram今天聊一个简单点的，叫做Cluster Dendrogram。Dendrogram的意思是“树状图”，咦？为什么不叫tree呢？仔细看官网作者对Dendrogram的解释，恍然大悟。官网解释如下： A dendrogram is a node-link diagram that places leaf nodes of the tree at the原创 2017-12-09 10:17:19 · 7157 阅读 · 1 评论 -
D3.js中的Chord Diagram详解
Chord Diagram今天来聊一聊Chord Diagram，暂且叫弦图吧。这里我不确定从英文翻译过来是不是叫做弦图，因为在百度百科上搜“弦图”，解释的是我国古代数学家赵爽画的 “弦图”，是研究勾股定理的图。而我们这里讨论的Chord Diagram，维基百科上是如下定义的： A chord diagram is a graphical method of displaying t原创 2017-12-07 15:53:07 · 5430 阅读 · 1 评论 -
D3.js 实现Sequences sunburst的源码详解
Sequences sunburst聊一聊Sunburst,光芒图。光芒图非常吸引我，以致于我找了D3.js实现的好几个光芒图的例子，最终选了Kerry Rodden实现的的光芒图来解析。Kerry Rodden这幅光芒图交互性非常丰富，一眼就吸引了我。这张光芒图展示的是某个网站各个页面的访问量比例情况,将网站中的父页面与子页面的层级关系表现了出来，非常直观地看到各个层次页面的访问比例。另原创 2017-12-15 17:00:05 · 3368 阅读 · 3 评论 -
D3.js 中的 Non-Contiguous Cartogram详解
Non-Contiguous Cartogram今天来首次接触一下d3中的地图相关实现。这个地图非常简单，Non-Contiguous Cartogram，顾名思义，是一个不连续的示意性地图。 见图如下： 接下来解释地图的实现细节index.jsp详解——meta charset="utf-8">title>Non-Contiguous Cartogramtitle>原创 2017-12-07 10:34:14 · 672 阅读 · 1 评论 -
D3.js中Stream graph详解
Stream graph聊一聊Stream graph，流图。 流图是围绕中心轴线进行布局的一种堆叠面积图。——维基百科由于流图可绕中心轴流动，从而呈现出像河流一样的形状。 见图如下：接下来详细解释D3.js官网中是怎么实现这张图的。index.html——源码<!DOCTYPE html><meta charset="utf-8"><title>Streamgraph</title>原创 2017-12-15 10:02:08 · 4298 阅读 · 0 评论 -
D3.js中Stacked-to-Grouped Bars详解
Stacked-to-Grouped Bars原创 2017-12-14 15:02:01 · 898 阅读 · 0 评论 -
D3.js 中 Box Plots详解
Box Plots 箱形图（Box-plot）又称为盒须图、盒式图或箱线图，是一种用作显示一组数据分散情况资料的统计图。因形状如箱子而得名。在各种领域也经常被使用，常见于品质管理。 —— [ 百度百科 ]本d3实现的箱形图如下图所示：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导原创 2017-11-26 19:09:24 · 4170 阅读 · 0 评论 -
D3.js 中Bubble Chart详解
Bubble Chart今天来聊一聊美丽浪漫的气泡图~ 气泡图是一种显示三维数据的图表。 每个具有相关数据的三元组（v1，v2，v3）的实体都被绘制成一个气泡，它通过气泡的x，y位置表示了三元组中的两个vi值，而第三个通过它的大小表示。 气泡图可以被认为是散点图的变化，其中数据点被气泡代替。 正如Microsoft Office文档所解释的，“如果数据有三个数据系列，每个数据系列都包含原创 2017-11-28 11:07:21 · 5808 阅读 · 0 评论 -
D3.js中Bullet Charts详解
Bullet Charts今天我们来聊一聊 占地儿小却能表达足够丰富的数据信息的子弹图。 子弹图，顾名思义是由于该类信息图的样子很像子弹射出后带出的轨道。子弹图无修饰的线性表达方式使我们能够在狭小的空间中表达丰富的数据信息，这种情况在寸尺寸金的报纸媒介上尤其明显。与通常所见的里程表或时速表类似，每一个单元的子弹图只能显示单一的数据信息源，并且通过添加合理的度量标尺可以显示更精确的阶段性原创 2017-11-29 14:24:12 · 2183 阅读 · 2 评论 -
D3.js中的Calendar View详解
Calendar View今天我们来聊一聊绚丽多彩的Calendar View。d3.js官网中Calendar View展示的是从1990.01.01到2010.10.01日 Yahoo! Finance的股票情况。先来张Calendar View的靓照，如图所示（由于图片较大，只截取了部分）：接下来详细解读实现这张图的源码index.html文件解读—— [ 源码 ]原创 2017-12-05 11:28:10 · 1272 阅读 · 0 评论 -
D3.js学习中总结的那些金句
D3.js学习笔记1、D3.js是数据驱动去创建dom的；2、D3.js在生成图表的过程中，有很大一部分工作都在处理即将展示的数据，对dom的操作非常少；3、D3.js绘图三部曲：准备数据、创建dom、设置属性4、Data-Driven Documents 数据驱动！数据驱动！数据驱动5、D3.js的某些API有着和jqueryAPI类似功能，简化了javascri原创 2017-12-04 15:26:36 · 554 阅读 · 0 评论 -
D3.js中Population Pyramid详解
Population Pyramid聊一聊人口金字塔图。 人口金字塔是按人口年龄和性别表示人口分布的特种塔状条形图，是形象地表示某一人口的年龄和性别构成的图形。——百度百科一般的人口金字塔图如下图所示：例如上图表示，2011年利比亚男女不同年龄阶段的比例分布情况。 而本篇要讲的Population Pyramid图，将男女人口数据画在了坐标轴的同一边，通过柱状图的覆盖来看不同年龄阶段的男女比原创 2017-12-12 11:34:12 · 2121 阅读 · 0 评论 -
D3.js中Circle Packing详解
Circle Packing今天来聊一聊Circle Packing，Circle Packing是通过一个个包含与被包含的圆组成，通过这种“包含”来表示类似树形结构所体现的层次关系；而且Circle Packing可以通过圆的大小、颜色来表示节点的权重等信息，总的来说，表现力不错。 先上张来自官网的靓照：下面来详细解释D3.js官网是怎么实现Circle Packing图的。index.html原创 2017-12-12 09:08:06 · 5829 阅读 · 2 评论 -
D3.js中Force-Directed Graph详解
Force-Directed Graph原创 2017-12-10 11:18:57 · 13304 阅读 · 2 评论 -
D3.js中Radial Cluster Dendrogram详解
Radial Cluster Dendrogram昨天聊了Cluster Dendrogram，今天对照着聊一聊Radial Cluster Dendrogram. “radial”意思为放射状的，因此，估计你也能猜到Radial Cluster Dendrogram长啥样了。 Radial形状的Cluster Dendrogram靓照闪亮登场[来自官网]：接下来，解释这张图是怎么实原创 2017-12-09 16:13:57 · 2510 阅读 · 0 评论 -
D3.js中Treemap(矩形树图)源码详解
Treemap(矩形树图）聊一聊Treemap，即矩形树图，树形结构非常有意思的一种展现方式，外形规整而不失表达力。 矩形树状结构图（Treemap）是一种有效的实现层次结构可视化的图表结构，简称矩形树图或树图。在矩形树图中，各个小矩形的面积表示每个子节点的大小，矩形面积越大，表示子节点在父节点中的占比越大，整个矩形的面积之和表示整个父节点。通过矩形树图及其钻取情况，我们可以很清晰地知道数据的全原创 2018-01-03 10:35:01 · 10818 阅读 · 1 评论