| 项目 | 51 |信息 | 52 |
|---|---|
| 作者 | 57 |(日)金出武雄 | 58 |
| 出版社 | 61 |电子工业出版社 | 62 |
| 副标题 | 65 |科研成功之道 | 66 |
| 译者 | 69 |马金城 / 王国强 | 70 |
| 审校 | 73 |绝云 | 74 |
| 出版年 | 77 |2015-4 | 78 |
| ISBN | 81 |9787121250958 | 82 |
这是14年回国后第一次参与翻译/审校的书. 原书初版在03年, 修订版这本13年在日本面世. 作者金出武雄是科研大拿, 曾任卡耐基梅隆大学机器人研究所所长. 全书围绕作者对科研/工作的方法论 “像外行一样思考, 像专家一样实践” 进行叙述, 通过科研现场丰富的例证给大家推广了这个论点.
87 |相信这本书对科研 / 工作第一线的研究者或者工程师是有所裨益的.
88 |
| 项目 | 51 |信息 | 52 |
|---|---|
| 作者 | 57 |(日)杉浦賢 | 58 |
| 出版社 | 61 |电子工业出版社 | 62 |
| 译者 | 65 |绝云 | 66 |
| 出版年 | 69 |2016 | 70 |
“产品经理也能读懂的算法书”
75 |相比起《算法导论》这样的鸿篇巨制，《图解简单算法》用轻松诙谐的行文，图文并茂的排版解除大家对算法的恐惧心，非常亲和地为大家普及算法的基本概念和几种常用的简单算法。
76 |决策树是一种实现分治策略的层次数据结构。[1]
47 |举个 🌰 要不要去见相亲对象呢？
48 | A["年龄"] -->|>=30| no1("不见")
49 | A -->|<30| B["长相"]
50 | B -->|"丑"| no2("不见")
51 | B -->|"中等偏帅"| C["收入"]
52 | C -->|"<100k"| no3("不见")
53 | C -->|">=500"| yes1("见！💖")
54 | C -->|"(100k, 500k)"| D["程序🐵"]
55 | D -->|"是"| no4("什么鬼？")
56 | D -->|"否"| yes2("见！")
57 | 这就是一棵已经构造好的决策树，其中，每个矩形代表一个特征，每个圆角矩形代表一个类标签。输入数据后，根据不同的特征值过滤最终可以得到输入数据所属的类别。决策树算法的目标就是从一堆原始数据里构造这么一棵决策树，以作为预测、判断和决策的参考。
59 |决策树算法可以用作分类（分类决策树）也可以用作回归（回归决策树），可以用于提取特征值、相关性分析、建立专家系统、搜索排序、邮件过滤等。
60 |在2006年，国际数据挖掘社区推出的《数据挖掘十大算法》中评选出来的十大算法里有两个是决策树相关的算法（C4.5和CART），可见决策树算法算法在数据挖掘中应用的广泛程度。
61 |
ID3诞生于70年代末，由Ross Quinlan提出。这个算法倾向更小的树，并且越能带来熵减的决策节点离根节点越近。
64 |ID3每次确定划分数据集S的特征时，会计算每一个未使用的属性，计算其[熵（Entropy）](https://en.wikipedia.org/wiki/Entropy_(information_theory)H(S)，然后选取导致最小熵值的属性作为特征值，分割数据集S得到子数据集。这是一种贪心算法，并不保证得到一棵最小树（找最小树的算法是NP完全算法），只是准确度和效率的一个权衡的结果。然后对每一个子数据集进行同样的处理，并且在下列情况下停止递归处理：
熵值的计算方式为：
71 | H(S) = - \sum_{x \in X}p(x)log_{2}p(x)
72 | 用ID3构建一棵决策树的过程可以用下述伪代码来表示：
79 |tree = {};
80 | tree.root = ID3(S);
81 | function ID3(S){
82 | IF 数据集S纯度达到标准或者符合其它终止条件 THEN 返回类标签
83 | ELSE
84 | 计算所有特征的熵值
85 | 取最小熵值对应特征划分数据集S
86 | 创建分支节点B
87 | FOR 每个划分的子数据集S'
88 | B.splitS' = ID3(S')
89 | RETURN 分支节点B
90 | }
91 | <div id="visualize-id3">
94 | <nav class="toolbar">
95 | <div class="menu menu-horizontal u-1-2">
96 | <ul class="menu-list">
97 | <li class="menu-item">
98 | <span class="color-select menu-link" data-color="#33CCFF" style="background-color: #33CCFF;"> </span>
99 | </li>
100 | <li class="menu-item">
101 | <li class="menu-item">
102 | <span class="color-select menu-link" data-color="#009933" style="background-color: #009933;"> </span>
103 | </li>
104 | <li class="menu-item">
105 | <span class="color-select menu-link" data-color="#FF6600" style="background-color: #FF6600;"> </span>
106 | </li>
107 | <li class="menu-item">
108 | <span class="color-select menu-link" data-color="#FFC508" style="background-color: #FFC508;"> </span>
109 | </li>
110 | <li class="menu-item">
111 | <span class="btn-clear menu-link">清空</span>
112 | </li>
113 | <li class="menu-item">
114 | <span class="menu-link">选择颜色并画点</span>
115 | </li>
116 | </ul>
117 | </div>
118 | </nav>
119 | <canvas class="training-canvas" width="450" height="450"></canvas>
120 | <svg class="decision-tree" width="450" height="450"><g/></svg>
121 | </div>
122 | ./decision-tree/main.css
124 | ../lib/d3/d3.js
126 | ../lib/dagre-d3/dist/dagre-d3.js
127 | ./decision-tree/main.dist.js
128 | forked from lagodiuk/decision-tree-js
130 |数据示例（x和y为特征列，color为预测分类）
131 |{
132 | x: 200,
133 | y: 100,
134 | color: '#FFC508'
135 | }
136 | 但这个例子不是非常纯粹的ID3实现，它对整数值进行了离散化。譬如这里是根据取值把坐标轴的划分为两个区间，每个区间对应同一个特征值的两个取值范围（譬如y>=200和y<200）。这里借鉴了一部分C4.5处理连续值的办法。
138 |这个算法也是Ross Quinlan提出的，作为对ID3的改进。
140 |算法过程与ID3算法在宏观上一致。
141 |改进点：
142 |其中，**信息增益（IG）**指的是计算某一个属性导致的熵值下降的幅度。其计算方法为：
144 | IG(S,a) = H(S) - H(S|a)
145 | = H(S) - (
146 | \sum_{v \in vals(a)} \frac{|\{x \in S | x_{a} = v\}|}{|S|} \cdot
147 | H({x \in S|x_{a} = v})
148 | )
149 | 而，**信息增益率（IGR）**则是
151 | IGR(S,a) = IG(S,a)/IV(S,a)
152 | 其中，IV(S,a)的定义为
154 | IV(S,a) = - \sum_{v \in vals(a)} \frac{|\{x \in S | x_{a} = v\}|}{|S|} \cdot
155 | log_{2}(\frac{|\{x \in S | x_{a} = v\}|}{|S|})
156 | 所谓的剪枝，就是用节点的子树或者子叶子节点来替换这个节点，以得到更低的错误率。为解决ID3过度拟合的问题，C4.5的软件包实现了基于悲观剪枝（Pessimistic Pruning）方法的剪枝。
159 |这个方法通过递归地计算目标节点分支的错误率来获得这个目标节点的错误率。例如，对于一个有N个实例和E个错误（也就是和该叶子节点类别不一致的实例）的叶子节点，用$(E + 0.5)/N$表示这个叶子节点的错误率。假设一个节点有L个子节点，这些子节点共有$\sum E$个错误和$\sum N$个实例，那么该节点的错误率为$(\sum E + 0.5xL)/\sum N$。假设这个节点被它的最佳子节点替代后，在训练集上得到的错误分类数为J，那么如果$(J + 0.5)$在$(\sum E + 0.5xL)$的1标准差范围内，悲观剪枝法就采用这个子节点来替代该节点。
选取多决策准则来产生分支。譬如上述可视化的实现中，对连续值x采取了这样的策略：
162 |不过Quinlan论文中讲到的两个处理连续值的方法比这个复杂。第一个方法是对每一个属性用信息增益率选择阀值，第二个方法是用Risannen的最小描述长度原理（MDL）。
167 |在Quinlan的文献中有很多处理数据缺失的议题，其中比较重点的是三个。这里简单介绍一下问题并且提几个典型的解法。
169 |和C4.5的不同在于：
191 |上面讨论的算法都是基于一个输入维度来划分数据的，而构造多变量树时每个决策节点都可以使用所有的输入维度，因此更加一般化。当然这个已经超出本文的讨论范围了
198 |《机器学习导论》，Ethem Alpaydin著 ↩︎
211 |
| 项目 | 51 |信息 | 52 |
|---|---|
| 作者 | 57 |(日)青木峰郎 | 58 |
| 出版社 | 61 |人民邮电出版社 | 62 |
| 译者 | 65 |阿逸 / 绝云 | 66 |
| 出版年 | 69 |2016 | 70 |
我负责这本书后半部分的翻译. 作者在书中讲述如何基于javacc开发一个类C语言的编译器. 这是一本深入浅出并且操作性强的技术书. 作者青木峰郎是日本编程语言界的泰斗级人物.
75 |
| 项目 | 51 |信息 | 52 |
|---|---|
| 作者 | 57 |(日)増井敏克 | 58 |
| 出版社 | 61 |人民邮电出版社 | 62 |
| 译者 | 65 |绝云 | 66 |
| 出版年 | 69 |2016 | 70 |
源自日本著名程序员刷题网站CodeIQ，通过70道贴近生活的数学趣题，向读者普及了相当精辟的算法理论和编程技巧。
75 |作为一个前端开发，在做项目，尤其是做个人项目的时候，使用icon fonts这件事常常让我感到很挫败。因为通常一个icon fonts库无法涵盖项目所有的图标需求，而混用不同的icon fonts库会带来进一步的问题：有时候你发现命名空间有冲突，有时候你发现两个库的图标padding不一致，从而有一堆修修补补的事情要做。如果项目需要用到彩色的图标，或者要基于图标做一些复杂的动画效果，又要引入SVG或者gif了。
46 |要解决这些问题，统一用SVG icons是一个可行的办法。当然，用icon fonts还是SVG icons这个话题太大，不在本文讨论之列。有兴趣的同学可以看看这些文章。
47 |我自己总结了一下，如果不考虑浏览器兼容性的话，SVG icons从易用性／可维护性／表现力等各方面都比传统的icon fonts更有优势。从根本上说，一个是矢量文字（font），一个是表现矢量图形的XML（SVG），有点降维打击的意思。
53 |不过有个问题，现存的大部分开源图标库都是icon fonts的，包括影响力巨大的FontAwesome项目。相对而言，SVG icons方案可用的开源资源并不多。于是一个想法自然而言地诞生：能不能把现有的icon fonts直接转换成SVG icons？如果可以的话，从icon fonts升级到SVG icons的过程就非常平滑了。
54 |最直接的办法是从icon fonts图标库里的SVG font文件（一般的icon fonts库都会带的一个SVG font文件，譬如FontAwesome的fontawesome-webfont.svg。如果没有，也可以很简单地从ttf文件转换得到：ttf2svg）入手转换。
55 |得到这个SVG font文件之后，转换成可用的SVG文件就很简单了。仔细看看这个SVG font文件，会发现每个图标就是内部定义的一个glyph元素，这个元素内部就是一段SVG。取出这些glyph元素，我们就得到了一堆可独立使用的SVG片段。这里只需要注意一点：SVG font里的glyph的坐标系和SVG内嵌到HTML内时的坐标系是不一样的。glyph和普通的文字一样，左下角是坐标轴原点，而内嵌的SVG则和Canvas一样，左上角是坐标轴原点。所以第一步转换后还要在每个SVG片段最外层加一个用于坐标转换的<g>节点。
<!-- 原始的glyph元素 -->
57 | <glyph unicode="xxx"><!-- Outline of xxx glyph --></glyph>
58 |
59 | <!-- 转换后的SVG片段 -->
60 | <svg xmlns="http://www.w3.org/2000/svg">
61 | <g transform="scale(1, -1)">
62 | <!-- Outline of xxx glyph -->
63 | </g>
64 | </svg>
65 | 其中transform="scale(1, -1)"就是负责转换坐标轴的关键。至此，我们已经从一个传统的icon fonts图标库里提取出可用的SVG icon了，似乎就可以拿这些SVG icon合并成SVG sprite直接使用了？
还是不行。首先你会发现简单粗暴的坐标变换（y轴反转）会导致图标矢量在显示的时候是偏离中心线的，所以作为inline图标内嵌到HTML里会有问题。为解决这个问题，可以在得到的SVG片段上再加一个坐标偏移的transform。
68 |<svg xmlns="http://www.w3.org/2000/svg">
69 | <g transform="scale(1, -1) translate(0 -${iconHeight})">
70 | <!-- Outline of xxx glyph -->
71 | </g>
72 | </svg>
73 | 这里的-${iconHeight}就是矢量图形的高度，对应原本的SVG fonts文件中的<font-face>节点的units-per-em值。具体细节上的调整不少，关键点还是在坐标转换上。
解决了这个问题之后基本上和原来使用icon fonts的体验差不多了，还顺带解决了命名冲突／表现力等各方面的问题。不过慢慢地你会发现原来icon fonts方案的一个致命问题没有解决：如果两个图标分别来自两个不同的图标库，padding等还是有不统一的问题（怎么同一行同样样式的两个图标看着大小不一样？）！而且现在你手里的SVG片段全部都包了一层用来做坐标转换的<g>元素，怎么看怎么别扭。
先解决第二个问题，把这层碍眼的<g>元素干掉。幸好这件事不用太操心，已经有人做掉了。用svgo这个库就可以把这些杂七杂八的坐标转换干掉，还你一个清爽的SVG片段。
第一个问题有点棘手。最理想的结果是，我们把所有来自不同icon fonts库得到的SVG片段都清理一遍，去掉所有的padding，只留下表示矢量图形的片段，和一个viewBox属性标示这个矢量图形的实际宽高。这样只要给每个SVG片段设置同样的width和height属性，就可以得到统一的视觉效果了。
根据前面的经验，我们只要设置恰当的transform把整个矢量图形移动到其边缘和两条坐标轴相切，剩下的事情就可以交给svgo了。关键就在于，我们怎么知道目前矢量图形偏离两个坐标轴多远（top和left）？
图标的SVG片段我们有了。通过遍历这个SVG片段内部的各种图形（Rect, Path, etc）和它们的各种属性，计算出与两个坐标轴的最短距离就能得到top和left的值。不过这件事相当难，举个例子，如果矢量图形里有个曲线，那计算起来真的是要了命了。另外，要得到正确的结果就一定要遍历所有的情况。而如果依靠穷举来做，最终代码维护一定是个深坑。
80 |那么，最笨的办法是什么呢？创建一个SVG文件把这个SVG片段写进去，打开浏览器，打开调试控制台，看矢量图形部分的top和left属性。然后编辑这个文件，transform里加上translate=(-${left}, -${top})。返回浏览器刷新，我们得到了想要的结果。
好了，思路有了。既然浏览器能做，那直接拿一个无头浏览器也可以做，然后就可以脚本化、自动化了。经过试验，PhantomJS和Electron都符合要求。一旦祭出这个终极方案，前面很多工作都可以省略了，譬如解释SVG font文件，计算坐标转换的各种参数等。
82 |最终从icon fonts得到SVG icons的整个流程可以描述如下：由icon fonts库得到SVG fonts文件（可能要转换），然后抽取各个glyph片段，翻转坐标系得到SVG片段，用无头浏览器把矢量图形对齐到坐标轴，用svgo优化输出。
83 |然后就可以享用SVG icon了。内嵌到页面／sprite／做动画／加彩色／更好的渲染效果…新世界的大门已经向你打开。
84 |这个事情说起来逻辑还算简单清晰，似乎没有什么特别难的地方。不过说到底，icon fonts是一套标准，SVG fonts又是一套标准，SVG symbol/sprites又是不同的标准。在标准的转换之间需要特别严谨，兼容各种开源icon fonts库，兼容它们背后各种不同的设计风格等等又是另一堆问题。还有个比较尴尬的点：一旦转换的图标数量上来了，性能就成了不得不考虑的问题：每处理一个图标就要开一个无头浏览器进程，每次优化完还要重新所有图标处理一遍。不做任何优化的话，NodeJS进程是会挂掉的（弱爆了）。
85 |好消息是，我已经把整个流程自动化了。绝大多数的坑也已经填好。还准备了10k+个从开源图标库里转换过来的SVG icons。如果你还在犹豫要不要从icon fonts转为SVG icons，那么你最后的借口已经没了。项目地址：svg-icon。目前项目在重构当中，欢迎各种issue和pull request。
86 |History of Search Engines
34 | 35 |Search Engine Market share in March 2017
38 | 39 |Types of Search Queries
42 | 43 | Fall 2002, Andrei Broder 44 |Parts of a Search Engine
47 |
48 | | 63 | | I | 64 |like | 65 |search | 66 |engine | 67 |keyword | 68 |in | 69 ||
| Doc1 | 73 |1 | 74 |1 | 75 |1 | 76 |1 | 77 |0 | 78 |0 | 79 |0 | 80 |
| Doc2 | 83 |1 | 84 |0 | 85 |1 | 86 |0 | 87 |1 | 88 |1 | 89 |1 | 90 |
| 97 | | Doc1 | 98 |Doc2 | 99 |
| engine | 102 |1 | 103 |0 | 104 |
| 0 | 108 |1 | 109 ||
| I | 112 |1 | 113 |1 | 114 |
| in | 117 |0 | 118 |1 | 119 |
| keyword | 122 |0 | 123 |1 | 124 |
| like | 127 |1 | 128 |0 | 129 |
| search | 132 |1 | 133 |1 | 134 |
Actually, It's much more COMPLICATED
141 | 142 |
143 | Word-sense Disambiguation
146 |New Words Recognition
154 |
163 | 
167 | 
171 | References
175 |
11 |
12 | `,
13 | start: '1990-09-10',
14 | },
15 | {
16 | id: 'www',
17 | content: `Tim Berners-Lee & the WWW
18 | 
21 |
22 | `,
23 | start: '1991-08-06',
24 | },
25 | {
26 | id: 'yahoo',
27 | content: `Yahoo! Directory
28 | 
31 |
32 | `,
33 | start: '1994-04-01',
34 | },
35 | {
36 | id: 'webcrawler',
37 | content: `WebCrawler
38 | 
41 |
42 | `,
43 | start: '1994-04-20',
44 | },
45 | {
46 | id: 'Overture',
47 | content: `Pioneer of paid search
48 | 
51 |
52 | `,
53 | start: '1998-02-01',
54 | },
55 | {
56 | id: 'google-1998',
57 | content: `Google launched
58 | 
61 |
62 | `,
63 | start: '1998-09-04',
64 | },
65 | {
66 | id: 'baidu',
67 | content: `Baidu launched
68 | 
71 |
72 | `,
73 | start: '2000-01-01',
74 | },
75 | {
76 | id: 'google-AdWords',
77 | content: `Google AdWords
78 | 
81 |
82 | `,
83 | start: '2000-10-23',
84 | },
85 | {
86 | id: 'bing',
87 | content: `Bing launched
88 | 
91 |
92 | `,
93 | start: '2009-06-01',
94 | }
95 | ]
96 | Reveal.addEventListener('slidechanged', (event) => {
97 | // event.previousSlide, event.currentSlide, event.indexh, event.indexv
98 | if (event.indexh === 1 && event.indexv === 0 && !rendered) {
99 | new vis.Timeline(container, data, {})
100 | rendered = true
101 | }
102 | })
103 | })()
104 |
105 |
--------------------------------------------------------------------------------
/2017/a-brief-intro-to-search-engine/types-of-search-queries.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | let rendered = false
3 | const data = [
4 | {
5 | category: 'User Survey',
6 | type: 'Navigational',
7 | desc: 'The immediate intent is to reach a particular site',
8 | value: 24.5,
9 | },
10 | {
11 | category: 'User Survey',
12 | type: 'Informational',
13 | desc: 'The intent is to acquire some information assumed to be present on one or more web pages',
14 | value: 39,
15 | },
16 | {
17 | category: 'User Survey',
18 | type: 'Transactional',
19 | desc: 'The intent is to perform some web-mediated activity',
20 | value: 36,
21 | },
22 | {
23 | category: 'Query Log Analysis',
24 | type: 'Navigational',
25 | desc: 'The immediate intent is to reach a particular site',
26 | value: 20,
27 | },
28 | {
29 | category: 'Query Log Analysis',
30 | type: 'Informational',
31 | desc: 'The intent is to acquire some information assumed to be present on one or more web pages',
32 | value: 48,
33 | },
34 | {
35 | category: 'Query Log Analysis',
36 | type: 'Transactional',
37 | desc: 'The intent is to perform some web-mediated activity',
38 | value: 30,
39 | },
40 | ]
41 |
42 | Reveal.addEventListener('slidechanged', (event) => {
43 | // event.previousSlide, event.currentSlide, event.indexh, event.indexv
44 | if (event.indexh === 3 && event.indexv === 0 && !rendered) {
45 | const Stat = G2.Stat
46 | const chart = new G2.Chart({
47 | id: 'types-of-search-queries',
48 | forceFit: true,
49 | height: 500,
50 | plotCfg: {
51 | margin: 80
52 | }
53 | })
54 | chart.source(data)
55 | // 以 year 为维度划分分面
56 | chart.facet(['category'], {
57 | margin: 50,
58 | facetTitle: {
59 | colDimTitle: {
60 | title: null
61 | },
62 | colTitle: {
63 | title: {
64 | fontSize: 18,
65 | textAlign: 'center',
66 | fill: '#999'
67 | }
68 | }
69 | }
70 | })
71 | chart.legend({
72 | position: 'bottom'
73 | })
74 | chart.coord('theta', {
75 | radius: 1,
76 | inner: 0.35
77 | })
78 | chart.tooltip({
79 | title: null
80 | })
81 | chart.intervalStack().position(Stat.summary.percent('value'))
82 | .color('type')
83 | .label('type*..percent', (type, percent) => {
84 | percent = `${(percent * 100).toFixed(2)}%`
85 | return `${type} ${percent}`
86 | })
87 | .style({
88 | lineWidth: 1
89 | })
90 | chart.render()
91 | rendered = true
92 | }
93 | })
94 | })()
95 |
--------------------------------------------------------------------------------
/2017/a-brief-intro-to-search-engine/webcrawler.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leungwensen/blog/bd80c8bd2601d80a0c2cc04e8f1b447a5cb94b21/2017/a-brief-intro-to-search-engine/webcrawler.gif
--------------------------------------------------------------------------------
/2017/a-brief-intro-to-search-engine/yahoo-directory.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leungwensen/blog/bd80c8bd2601d80a0c2cc04e8f1b447a5cb94b21/2017/a-brief-intro-to-search-engine/yahoo-directory.png
--------------------------------------------------------------------------------
/2017/a-technique-for-drawing-directed-graphs/figure-1-2a.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leungwensen/blog/bd80c8bd2601d80a0c2cc04e8f1b447a5cb94b21/2017/a-technique-for-drawing-directed-graphs/figure-1-2a.png
--------------------------------------------------------------------------------
/2017/a-technique-for-drawing-directed-graphs/figure-1-3a.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leungwensen/blog/bd80c8bd2601d80a0c2cc04e8f1b447a5cb94b21/2017/a-technique-for-drawing-directed-graphs/figure-1-3a.png
--------------------------------------------------------------------------------
/2017/a-technique-for-drawing-directed-graphs/figure-2-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leungwensen/blog/bd80c8bd2601d80a0c2cc04e8f1b447a5cb94b21/2017/a-technique-for-drawing-directed-graphs/figure-2-3.png
--------------------------------------------------------------------------------
/2017/a-technique-for-drawing-directed-graphs/figure-2-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leungwensen/blog/bd80c8bd2601d80a0c2cc04e8f1b447a5cb94b21/2017/a-technique-for-drawing-directed-graphs/figure-2-4.png
--------------------------------------------------------------------------------
/2017/a-technique-for-drawing-directed-graphs/figure-2-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leungwensen/blog/bd80c8bd2601d80a0c2cc04e8f1b447a5cb94b21/2017/a-technique-for-drawing-directed-graphs/figure-2-5.png
--------------------------------------------------------------------------------
/2017/a-technique-for-drawing-directed-graphs/figure-4-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leungwensen/blog/bd80c8bd2601d80a0c2cc04e8f1b447a5cb94b21/2017/a-technique-for-drawing-directed-graphs/figure-4-2.png
--------------------------------------------------------------------------------
/2017/a-technique-for-drawing-directed-graphs/figure-4-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leungwensen/blog/bd80c8bd2601d80a0c2cc04e8f1b447a5cb94b21/2017/a-technique-for-drawing-directed-graphs/figure-4-3.png
--------------------------------------------------------------------------------
/2017/a-technique-for-drawing-directed-graphs/figure-4-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leungwensen/blog/bd80c8bd2601d80a0c2cc04e8f1b447a5cb94b21/2017/a-technique-for-drawing-directed-graphs/figure-4-4.png
--------------------------------------------------------------------------------
/2017/a-technique-for-drawing-directed-graphs/figure-5-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leungwensen/blog/bd80c8bd2601d80a0c2cc04e8f1b447a5cb94b21/2017/a-technique-for-drawing-directed-graphs/figure-5-1.png
--------------------------------------------------------------------------------
/2017/a-technique-for-drawing-directed-graphs/figure-5-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leungwensen/blog/bd80c8bd2601d80a0c2cc04e8f1b447a5cb94b21/2017/a-technique-for-drawing-directed-graphs/figure-5-4.png
--------------------------------------------------------------------------------
/2017/a-technique-for-drawing-directed-graphs/figure-5-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leungwensen/blog/bd80c8bd2601d80a0c2cc04e8f1b447a5cb94b21/2017/a-technique-for-drawing-directed-graphs/figure-5-5.png
--------------------------------------------------------------------------------
/2017/mind-map-drawing-algorithms/downward-organizational.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/2017/mind-map-drawing-algorithms/downward-tree-organizational.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/2017/mind-map-drawing-algorithms/indented.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leungwensen/blog/bd80c8bd2601d80a0c2cc04e8f1b447a5cb94b21/2017/mind-map-drawing-algorithms/indented.png
--------------------------------------------------------------------------------
/2017/mind-map-drawing-algorithms/right-fish-bone.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/2017/mind-map-drawing-algorithms/right-logical.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/2017/mind-map-drawing-algorithms/standard.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/2017/mindmap-drawing-algorithms.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 为了让整理思路的过程更流畅，市面上的思维导图软件一般采用自动布局，使用户不必关心图形布局也能画出比较优美的思维导图。而为了用相对较小的代价（需要实时交互，实时布局）实现自动布局，常见的思维导图软件处理的图数据格式都是树形数据（严格地说，是有序根树，即ordered rooted tree）。本文以经典思维导图软件XMind接受的数据格式为例，汇总常见的思维导图自动布局算法。
47 |{
49 | "root": {
50 | "name": "root",
51 | "children": [
52 | {
53 | "name": "child-1",
54 | "children": [
55 | {
56 | "name": "child-1-1"
57 | },
58 | {
59 | "name": "child-1-2",
60 | "children": [
61 | {
62 | "name": "child-1-2-1"
63 | }
64 | ]
65 | }
66 | ]
67 | },
68 | {
69 | "name": "child-2"
70 | },
71 | {
72 | "name": "child-3"
73 | },
74 | {
75 | "name": "child-4",
76 | "children": [
77 | {
78 | "name": "child-4-1"
79 | },
80 | {
81 | "name": "child-4-2"
82 | }
83 | ]
84 | }
85 | ]
86 | },
87 | "links": [
88 | {
89 | "source": "child-1-1",
90 | "name": "special link",
91 | "target": "child-2"
92 | }
93 | ]
94 | }
95 | 97 |99 |root及其子孙是思维导图里的节点，对应XMind里的Topic
98 |
100 |102 |links是思维导图节点间非继承关系的额外联系，对应XMind里的Relationship
101 |
更多关于.xmind文件的结构可参见xmind-sdk-javascript
103 |{
105 | "nodes": [], // 带坐标信息的节点
106 | "edges": [], // 带起点终点坐标信息的边
107 | }
108 | 
这种布局是经典的脑图布局，能比较直观地描绘发散的大脑思维，帮助人合并不同来源的资料，整理复杂的问题。
121 |
这种布局就是经典的树图层次结构布局，适合有明显分层的信息。譬如总结信息，族谱，目录结构和记录笔记等。
132 |
链接: http://leungwensen.github.io/blog/ 仓库: https://github.com/leungwensen/blog
46 |$ git clone https://github.com/leungwensen/blog.git $path/to/blog
77 | $ npm install
78 | $ npm start
79 | built by zfinder
81 |