Graph/diagram/visualization Examples Yet to Be Explored

导言

画图是为了解释文字难以说清的事情。

首先要明确目标(一句话)：

• 解释清楚什么逻辑、什么关系、什么过程、证明什么观点。
• 复杂的内容会导致内容的丢失，要明确什么时候需要子图。

其次要明确(大概逻辑)：

1. 明确重点对象；明确其与余下对象的分隔/不同。
2. 对象间逻辑。

最后才是具体实现(用什么图案、颜色、字体、线条)。注意明确目标、突出重点、画面和谐、读者易读易懂。

画图准则

对象间逻辑

关于逻辑，主体对象之间一定要能从图中看出逻辑，常见逻辑以及处理如下：

1. 包含关系: 用实线或者虚线框框住，大概念包围住小概念
2. 先后顺序：主干事物/事件用加粗箭头表示，其余关系用虚线小箭头表示
3. 对比或相似关系：横向排列竖向虚线间隔，并保证大小形状色调相反或一致。

以上都可以使用小字补充说明。

对象

颜色

4. 颜色代表重要程度：艳红 > 浅色红黄绿蓝 > 灰色
5. 主体字体只有黑白两种颜色选择，不可能是彩色的。
   1. 一定是加粗的，因为一些额外信息要区分为不加粗斜体。
   2. 对比的文字可能是彩色(红绿)，但是要加粗
   3. 一句话的几个关键字可以用彩色
6. 其余文字根据重要程度，可以修改粗体、斜体(英文且非居中文字可选)、字体和颜色来体现。其中颜色可以选择PPT同一列的色系：
7. 主体对象(底色) 一定要填充 颜色用于逻辑上的归类，
   1. 注意一点要底色与主体字体一点要对比度强烈(色差大)，主体字是黑色，底色就是浅色系；主体字是白色，底色就是深色系
   2. 很少用白色，但是有两种情况会用白色： 同逻辑的对象太多，用彩色太花; 对象不重要
   3. 底色一般不要过于鲜艳，因为是次于主体文字的分类信息
8. 主体对象 的边框 要么是黑色，要么是填充色的加深色
   1. 一定要避免边框的显眼程度比文字主题高: 主体对象(底色)可以是白色，但是这时边框只能是黑色，彩色就主次颠倒了。
9. 主体对象 之间的逻辑线， 一般是黑色和黑色注释

文字

1. 主体等线
2. 补充文字：斜体加粗、来视觉上区分。

圆角块

1. 圆角套方形(文字一内一外)

3. 有色块中放 虚线白色块

逻辑图

实例说明图

根据实际案例决定。

金字塔/火箭形

1. 优势：用于表示(工作模块的依赖/重要关系)
   1. 技巧：通过在每层的梯形里用小缺口来划分出同质模块。
2. 问题：
   1. 字体大小不一
   2. section元素不一致

针对这些问题，还是推荐竖向或者横向的流程图。除非有强烈的金字塔关系

散点图

按时间、规模、效果散点

领域研究分类

流程图

Flow chart： 业务流程图，用于描述一个系统或流程的各个阶段，以及它们之间的关系。

Steps ordered by numbers 1,2,3,…

[^1]

缺角灰色矩形代表Formulas And Code

[^6]

Highlight Consided Part

[^6]

分层抽象

隔离各项的逻辑，例如抽象到具体、基础到顶层。

Stacked Abstraction layers

[^3]

系统架构设计

Architecture design

Overview design

[^2]

Details design

Design Comparision

数据图

适合不同任务的图表

• 根据不同的任务选择最合适的图表分析
• 十种基础可视分析任务：
  • 找异常；找聚类；
  • 找相关性；计算数值；
  • 查看数据分布；找极值；
  • 排序；获取数值；
  • 过滤；决定数据范围。
• 五种可视化形式在十种任务上的表现，
  • 散点图，表格数据，柱状图，折线图，饼状图
• 其中的表现区分了准确率、时间和用户体验。
  • 其中左侧的图表优于右侧，上方的图表优于下方，
  • 而箭头方向代表source A显著得优于target B。

柱状图

1. 柱状图bar和折线图的区别在于：折线图的数据能体现上升下降趋势。
2. 体会: 感觉高低一点，尤其是图中间的虚线矩形，变成扁的最好看。

single bar

multi-bar compared in diff way

multi-bar compared in more bigger scale num

stacked bar

stacked + grouped compare bar

折线图

数据表

Table

实验配置

Simulation Configuration

实验用例

Workloads

代码展示

code block

[^5]

[^5]

含代码流程图

彩色导航框 + 白色或者灰色的对应代码示例。

[^4]

What templates are Onur Mutlu’s lab using

help from Brother qcjiang

其他

Special

Comparison of theoretical formulas

参考文献

[^1]: MICRO23 Utopia: Fast and Efficient Address Translation via Hybrid Restrictive & Flexible Virtual-to-Physical Address Mappings, Onur Mutlu

[^2]: MICRO23 Victima: Drastically Increasing Address Translation Reach by Leveraging Underutilized Cache Resources

[^3]: xMath2.0: a high‑performance extended math library for SW26010‑Pro many‑core processor

[^4]: Kerncraft: A tool for analytic performance modeling of loop kernels

[^5]: Automated instruction stream throughput prediction for intel and amd microarchitectures

[^6]: SC21: Symplectic structure-preserving particle-in-cell whole-volume simulation of tokamak plasmas to 111.3 trillion particles
and 25.7 billion grid