跳转至

Graph/diagram/visualization Examples Yet to Be Explored

导言

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

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

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

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

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

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

画图准则

对象间逻辑

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

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

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

对象

颜色

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

文字

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

圆角块

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

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

逻辑图

实例说明图

根据实际案例决定。

金字塔/火箭形

  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 

评论