├── .gitignore ├── README.md ├── latex ├── code │ ├── attention.py │ ├── attention_distribution.tex │ ├── histogram.tex │ ├── line_chart.tex │ ├── line_chart_with_error_bar.tex │ ├── scatter_diagram.tex │ ├── taxonomy_tree.tex │ ├── text_attention.tex │ ├── timeline.tex │ └── transformer.tex ├── imgs │ ├── category │ │ ├── attention_distribution.png │ │ ├── histogram.png │ │ ├── intro.png │ │ ├── line.png │ │ ├── scatter.png │ │ ├── struct.png │ │ ├── taxonomy_tree.png │ │ ├── text_attention.png │ │ └── timeline.png │ ├── icon │ │ ├── ai.png │ │ ├── catalogue.png │ │ ├── folders.png │ │ ├── heart.png │ │ ├── intro.png │ │ ├── motivation.png │ │ ├── notes.png │ │ ├── organizer.png │ │ └── resource.png │ ├── notes │ │ ├── 1.png │ │ ├── 1_step2.png │ │ ├── 2_step1.jpg │ │ ├── 2_step2.jpg │ │ ├── attention_distribution_1.jpg │ │ ├── attention_distribution_2.jpg │ │ ├── attention_distribution_3.jpg │ │ ├── attention_distribution_4.jpg │ │ ├── attention_distribution_full.jpg │ │ ├── plot.jpg │ │ ├── tikzpicture.png │ │ └── transformer.png │ └── profile │ │ ├── bei_li.jpg │ │ ├── libo_qin.jpg │ │ ├── qian_liu.jpg │ │ ├── shijue_huang.jpg │ │ ├── weihao_xia.png │ │ └── yudi_zhang.jpg └── notes │ ├── attention.md │ ├── attention_distribution.md │ ├── histogram-latex.pdf │ ├── line_chart.pdf │ ├── line_chart_with_error_bar.pdf │ ├── scatter_diagram.md │ ├── scatter_diagram.pdf │ ├── text_attention.md │ ├── transformer.md │ └── transformer.pdf └── matplotlib ├── code ├── attention.py ├── bar_chart.py ├── line_chart.py └── scatter_chart.py ├── imgs ├── category │ ├── attention.png │ ├── attention_distribution.png │ ├── bar_chart.png │ ├── histogram.png │ ├── intro.png │ ├── line.png │ ├── line_chart.png │ ├── scatter.png │ ├── scatter_matplotlab.jpg │ ├── struct.png │ └── text_attention.png ├── icon │ ├── ai.png │ ├── catalogue.png │ ├── folders.png │ ├── heart.png │ ├── intro.png │ ├── motivation.png │ ├── notes.png │ ├── organizer.png │ └── resource.png ├── notes │ ├── 1.png │ ├── 1_step2.png │ ├── 2_step1.jpg │ ├── 2_step2.jpg │ ├── attention_cmap.png │ ├── attention_distribution_1.jpg │ ├── attention_distribution_2.jpg │ ├── attention_distribution_3.jpg │ ├── attention_distribution_4.jpg │ ├── attention_distribution_full.jpg │ ├── plot.jpg │ ├── tikzpicture.png │ └── transformer.png └── profile │ ├── bei_li.jpg │ ├── libo_qin.jpg │ ├── qian_liu.jpg │ ├── shijue_huang.jpg │ └── yudi_zhang.jpg └── notes ├── attention.md ├── bar_chart.md ├── bar_chart.pdf ├── line_chart.md ├── line_chart.pdf └── scatter_chart.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | **/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |

Paper Picture Writing Code

3 |

4 | 5 | 6 |

7 | 8 | version 9 | 10 | 11 | Status-building 12 | 13 | 14 | PRs-Welcome 15 | 16 | 17 | stars 18 | 19 | 20 | FORK 21 | 22 | 23 | Issues 24 | 25 |
26 |

27 | 28 |
29 |

30 | 项目动机/ 31 | 项目简介/ 32 | 参考资源/ 33 | 目录/ 34 | 文件夹说明/ 35 | 组织者/ 36 | 贡献者 37 |

38 |
39 | 40 | 41 | 42 | --- 43 | 44 | ## 项目动机 45 | 46 | 对于很多科研新手来说论文图片的绘制常常成为论文写作中一大难题，图像失真、图示不合规范等问题会导致论文质量的降低，LaTex原生支持的图包绘制的矢量图具有不会出现失真、便于实时修改和维护等优点，为了帮助一些同学提高论文写作画图的质量和效率、学会更好地利用**LaTex画图**和**Matplotlib画图**，本项目基于**LaTex**和**matplotlib**开源论文中常用的**画图代码**，希望能对大家的论文写作图片绘制有所帮助。 47 | 48 | >本项目的特色： 49 | >1. **代码开源**：为初学者提供了可学习和可复用的代码样例，方便大家快速入门。 50 | >2. **笔记详细**：帮助此项目基础上进一步上手实践，也便于快速定位自己代码中的错误。 51 | >3. **类别广繁**：涵盖AI论文画图中常用的几类画图代码。 52 | 53 | 54 | 由于我们的水平有限，如有错误与疏漏，还望谅解，有任何问题欢迎随时指出，我们会进行更正，谢谢大家。 55 | 本项目所用徽章来自互联网，如侵犯了您的图片版权请联系我们删除，谢谢。 56 | 57 | ## 项目简介 58 | 59 | 本项目目前基于LaTex和Matplotlib开源了几种AI论文中常用的画图代码，共包含**折线图**、**柱状图**、**散点图**、**注意力可视化**以及**结构图**五种图，供各位同学参考。此外，附有详细的代码笔记讲解，可供同学们进一步学习以及拓展实践。 60 | 61 | 62 | ## 参考资源 63 | 64 | 该项目部分代码参考了 [MT Book](https://github.com/NiuTrans/MTBook)，MT Book是一本高质量的机器翻译书籍。书中所有的latex代码已经开源，也可以作为大家latex画图的一个参考。 65 | 66 | ## 目录 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 92 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 |
图类别Latex代码Latex笔记Matplotlib代码Matplotlib笔记贡献者
引言
折线图、
91 | 带误差条的
折线图		折线图、
93 | 带误差条的
折线图		折线图折线图
柱状图柱状图柱状图柱状图
散点图散点图散点图散点图
注意力分布注意力分布注意力分布注意力分布
注意力序列
可视化		注意力序列
可视化
结构图结构图
分类图分类图
时间线时间线
156 | 157 | 158 | 159 | 160 | 161 | ## 文件夹说明 162 | 163 | 164 | - **latex/code**、**matplotlib/code**：图片绘制代码 165 | - **latex/notes**、**matplotlib/note**: 图片绘制笔记 166 | - **latex/imgs**、**matplotlib/images**：项目中的图片 167 | 168 | 169 | ## 组织者 170 | 感谢以下同学对本项目的组织 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | ## 贡献者 181 | 感谢以下同学对本项目的支持与贡献 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | -------------------------------------------------------------------------------- /latex/code/attention.py: -------------------------------------------------------------------------------- 1 | # 本样例源于论文 TAPEX: Table Pre-training via Learning a Neural SQL Executor 2 | 3 | import numpy as np 4 | import matplotlib.pyplot as plt 5 | import seaborn as sns 6 | 7 | # 用于绘制注意力图的矩阵, 实际使用时也可以考虑从文件中读入 8 | data_matrix = np.mat( 9 | [[27.5, 28.3, 32.5, 40.8, 42.5], 10 | [40.0, 42.6, 53.1, 58.8, 60.2], 11 | [34.4, 38.2, 56.2, 57.3, 56.9], 12 | [57.4, 63.9, 70.2, 70.2, 71.7]] 13 | ) 14 | 15 | plt.rc('text', usetex=True) 16 | plt.rc('font', **{'size': 14}) 17 | plt.rc('text.latex', preamble=r'\usepackage{lmodern}') 18 | sns.set(rc={'figure.figsize' : (6, 4.5)}) 19 | 20 | # 把数据转换成一维数组，从而自动将数字展示在图表上 21 | ravel_arr = data_matrix.ravel() 22 | ravel_arr = np.array(ravel_arr)[0] 23 | 24 | fig = sns.heatmap(data_matrix, 25 | linewidth=0.5, 26 | # 将具体的数字写在对应的表格中，%.1f 指定了样式，在较复杂的样式中可以去掉 27 | annot=np.array(['%.1f' % data 28 | for data in ravel_arr]).reshape( 29 | np.shape(data_matrix)), 30 | # 这里必须置空，否则会出现问题 31 | fmt='', 32 | yticklabels=["Extra Hard", "Hard", "Medium", "Easy"], 33 | # 如果 usetext=True, 这里可以使用 latex 语法比如 $\leq$ = < 34 | xticklabels=["BART", "$\leq$ Easy", "$\leq$ Medium", "$\leq$ Hard", "$\leq$ Extra Hard"], 35 | vmax=75.0, 36 | cmap="YlGnBu", 37 | vmin=25.0) 38 | 39 | plt.ylabel("Question Difficulty Level in Downstream", fontsize=16, labelpad=25) 40 | plt.xlabel("SQL Difficulty Level in Pre-training", fontsize=16, labelpad=25) 41 | 42 | # 调整布局至合适的位置 43 | plt.tight_layout() 44 | plt.savefig('attention.pdf') -------------------------------------------------------------------------------- /latex/code/attention_distribution.tex: -------------------------------------------------------------------------------- 1 | \documentclass{article} 2 | \usepackage[utf8]{inputenc} 3 | 4 | \usepackage{tikz} 5 | \usepackage{pgfplots} 6 | \usepackage{xeCJK} 7 | 8 | \definecolor{tiffanyblue}{RGB}{129,216,208} 9 | \definecolor{bangdiblue}{RGB}{0,149,182} 10 | \definecolor{kleinblue}{RGB}{0,47,167} 11 | \definecolor{kabuliblue}{RGB}{26,85,153} 12 | \definecolor{purple}{RGB}{138,43,226} 13 | \definecolor{upink}{RGB}{255,150,128} 14 | 15 | \begin{document} 16 | 17 | \begin{figure} 18 | \centering 19 | \begin{tikzpicture} 20 | \tikzstyle{elementnode} = [rectangle,text=white,anchor=center] 21 | \tikzstyle{srcnode} = [rotate=45,font=\small,anchor=south west] 22 | \tikzstyle{tgtnode} = [left,font=\small,anchor=north east] 23 | \tikzstyle{alignmentnode} = [rectangle,draw,minimum height=3.6cm,minimum width=0.36cm] 24 | \tikzstyle{probnode} = [fill=blue!30,minimum width=0.4cm] 25 | \tikzstyle{labelnode} = [above] 26 | 27 | % alignment matrix 28 | \begin{scope}[scale=0.9,yshift=0.12in] 29 | \foreach \i / \j / \c / \z in 30 | { 0/5/1/50, 1/5/1/30, 2/5/1/70, 3/5/1/50, 4/5/1/20, 5/5/1/90, 31 | 0/4/1/10, 1/4/1/60, 2/4/1/30, 3/4/1/40, 4/4/1/40, 5/4/1/40, 32 | 0/3/1/30, 1/3/1/20, 2/3/1/40, 3/3/1/40, 4/3/1/30, 5/3/1/50, 33 | 0/2/1/50, 1/2/1/90, 2/2/1/30, 3/2/1/70, 4/2/1/20, 5/2/1/40, 34 | 0/1/1/20, 1/1/1/10, 2/1/1/30, 3/1/1/40, 4/1/1/60, 5/1/1/40, 35 | 0/0/1/10, 1/0/1/20, 2/0/1/30, 3/0/1/40, 4/0/1/20, 5/0/1/80} 36 | \node[elementnode,minimum size=0.6*1.2cm*\c,inner sep=0pt,fill=tiffanyblue!\z] (a\i\j) at (0.5*1.8cm*\i-3.8*0.5*1.8cm,0.5*1.8cm*\j-0.7*1.8cm) {}; 37 | 38 | % source 39 | \node[srcnode] (src1) at (-3.9*0.5*1.8cm,-1.75*1.8cm+7.5*0.5*1.8cm) {\scriptsize{Have}}; 40 | \node[srcnode] (src2) at ([xshift=0.9cm]src1.south west) {\scriptsize{you}}; 41 | \node[srcnode] (src3) at ([xshift=0.9cm]src2.south west) {\scriptsize{learned}}; 42 | \node[srcnode] (src4) at ([xshift=0.9cm]src3.south west) {\scriptsize{nothing}}; 43 | \node[srcnode] (src5) at ([xshift=0.9cm]src4.south west) {\scriptsize{?}}; 44 | \node[srcnode] (src6) at ([xshift=0.9cm]src5.south west) {\scriptsize{$\langle$eos$\rangle$}}; 45 | 46 | % target 47 | \node[tgtnode] (tgt1) at (-4.2*0.5*1.8cm,-1.35*1.8cm+7.5*0.5*1.8cm) {\scriptsize{你}}; 48 | \node[tgtnode] (tgt2) at ([yshift=-0.9cm]tgt1.north east) {\scriptsize{Have}}; 49 | \node[tgtnode] (tgt3) at ([yshift=-0.9cm]tgt2.north east) {\scriptsize{you}}; 50 | \node[tgtnode] (tgt4) at ([yshift=-0.9cm]tgt3.north east) {\scriptsize{learned}}; 51 | \node[tgtnode] (tgt5) at ([yshift=-0.9cm]tgt4.north east) {\scriptsize{nothing}}; 52 | \node[tgtnode] (tgt6) at ([yshift=-0.9cm]tgt5.north east) {\scriptsize{?}}; 53 | \node[tgtnode] (tgt7) at ([yshift=-0.9cm]tgt6.north east) {\scriptsize{$\langle$eos$\rangle$}}; 54 | 55 | \end{scope} 56 | \end{tikzpicture} 57 | \caption{Caption} 58 | \label{fig:my_label} 59 | \end{figure} 60 | 61 | 62 | \end{document} -------------------------------------------------------------------------------- /latex/code/histogram.tex: -------------------------------------------------------------------------------- 1 | \documentclass[letterpaper]{article} 2 | %% tikz作图 3 | \usepackage{tikz} 4 | \usepackage{pgfplots} 5 | 6 | \begin{document} 7 | 8 | \begin{figure}[t] 9 | \centering 10 | \begin{tikzpicture} 11 | \begin{axis}[ 12 | enlargelimits=0.7, 13 | legend style={at={(0.5,-0.25)}, 14 | anchor=north,legend columns=-1}, 15 | symbolic x coords={Acc., F1 Score }, 16 | xtick=data, 17 | ybar=5pt,% configures `bar shift' 18 | bar width=20pt, 19 | width=9.4cm, height=4.5cm, 20 | nodes near coords, 21 | nodes near coords align={vertical}, 22 | nodes near coords style={font=\tiny}, 23 | font=\small, 24 | grid=major, 25 | ] 26 | \addplot[fill=brown!40!white,draw=brown] coordinates { 27 | (Acc., 79.3) 28 | (F1 Score, 85.6) 29 | }; 30 | \addplot [fill=black!40!white,draw=black] coordinates { 31 | (Acc., 89.3) 32 | (F1 Score, 95.6) 33 | }; 34 | \legend{BERT, BART} 35 | \end{axis} 36 | \end{tikzpicture} 37 | \caption{Performance Comparison.} 38 | \end{figure} 39 | 40 | \end{document} -------------------------------------------------------------------------------- /latex/code/line_chart.tex: -------------------------------------------------------------------------------- 1 | \documentclass[letterpaper]{article} % 2 | \usepackage{pgfplots} % 画折线图 3 | \usepackage{scalefnt} %用于设置字体 4 | 5 | \definecolor{color1}{RGB}{145,30,180} 6 | \definecolor{color2}{RGB}{245,130,48} 7 | \definecolor{color3}{RGB}{230,25,75} 8 | 9 | \begin{document} 10 | 11 | \begin{figure}[h] %插入图片 12 | \centering %图片居中 13 | \resizebox{0.8\columnwidth}{!}{ %用于修改图片大小 14 | \begin{tikzpicture} %tikz图片 15 | \scalefont{0.7} %设置字体大小 16 | \begin{axis}[ 17 | sharp plot, %控制线的风格 18 | title=line chart,%图像标题 19 | xmode=normal,% 控制坐标轴为线性 20 | % ymode=log,% 控制坐标轴为对数 21 | xlabel=x, %x坐标名 22 | ylabel=y, %y坐标名 23 | width=8cm, height=5cm, %设置长和宽 24 | xmin=0,xmax=20, % 设置x坐标范围 25 | ymin=30, ymax=80, % 设置y坐标范围 26 | xtick={0,5,10,15,20}, %指定x轴刻度值。如果为空，则自动设置刻度线。即分割坐标轴 27 | ytick={30,45,60,75}, %指定y轴刻度值。如果为空，则自动设置刻度线。即分割坐标轴 28 | xlabel near ticks, % 设置x坐标名位置靠近折线图 29 | ylabel near ticks, % 设置y坐标名位置靠近折线图 30 | ymajorgrids=true, % 启用/禁用 [公式] 轴上刻度线位置上的网格线 31 | grid style=dashed, % 设置网格线格式 32 | legend style={at={(0.9,1.1)},anchor=south}, % 设置标签位置 33 | % legend columns=3, %设置标签列数 34 | % legend pos=north west, % 设置折线对应标签的位置 35 | % legend style={nodes={scale=0.6, transform shape}}, % 设置折线标签的格式 36 | ] 37 | 38 | %画第一条线，semithick设置线的粗细为0.6pt，mark是折线标示形状，options是mark形状的大小 ， olive!50!white是颜色，coordinates中包含要绘制的点的坐标 39 | \addplot+[semithick,mark=x,mark options={scale=0.6}, color=color1] plot coordinates { 40 | (0,66.58) 41 | (5,35.71) 42 | (10,38.99) 43 | (15,36.31) 44 | (20,42.19) 45 | }; 46 | \addlegendentry{a}%第一条线标签 47 | 48 | %画第二条线 49 | \addplot+[semithick,mark options={scale=0.3}, color=color2] plot coordinates { 50 | (0,71.79) 51 | (5,50.74) 52 | (10,53.33) 53 | (15,56.67) 54 | (20,53.75) 55 | }; 56 | \addlegendentry{b} %第二条线标签 57 | 58 | %画第三条线 59 | \addplot+[semithick,mark options={scale=0.3}, color=color3] plot coordinates { 60 | (0,72.53) 61 | (5,64.33) 62 | (10,59.05) 63 | (15,63.81) 64 | (20,71.25) 65 | }; 66 | \addlegendentry{c} %第三条线标签 67 | 68 | \end{axis} 69 | \end{tikzpicture} 70 | } 71 | \caption{Line chart} % 设置caption 72 | \label{fig:label} % 设置用于reference的label 73 | \end{figure} 74 | 75 | \end{document} 76 | 77 | -------------------------------------------------------------------------------- /latex/code/line_chart_with_error_bar.tex: -------------------------------------------------------------------------------- 1 | \documentclass[letterpaper]{article} 2 | \usepackage{pgfplots} 3 | \usepackage{scalefnt} %用于设置字体 4 | \usepgfplotslibrary{fillbetween} 5 | 6 | \definecolor{color1}{RGB}{145,30,180} 7 | \definecolor{color2}{RGB}{245,130,48} 8 | \definecolor{color3}{RGB}{230,25,75} 9 | 10 | 11 | \begin{document} 12 | 13 | \begin{figure}[t!] 14 | \centering 15 | \resizebox{0.8\columnwidth}{!}{ %用于修改图片大小 16 | \begin{tikzpicture} 17 | \footnotesize 18 | \scalefont{0.7} %设置字体大小 19 | \begin{axis}[ 20 | width=8cm, height=5cm, %设置长和宽 21 | ymin=30, ymax=80, 22 | ytick={30,45,60,75}, 23 | ylabel style={text width=0.3\columnwidth,align=center}, 24 | xlabel= x, 25 | ylabel = y, 26 | width=0.6\columnwidth, 27 | xmin=0,xmax=20, 28 | xtick={0,5,10,15,20}, 29 | ylabel near ticks, 30 | legend style={at={(0.9,1.1)},anchor=south}, 31 | ] 32 | 33 | % 下界1 34 | \addplot[draw=none,mark=none,name path=SeqSeqOneLower,forget plot] coordinates{ 35 | (0,64.62) 36 | (5,33.03) 37 | (10,35.30) 38 | (15,34.03) 39 | (20,34.32) 40 | }; 41 | % 上界1 42 | \addplot[draw=none,mark=none,name path=SeqSeqOneUpper,forget plot] coordinates{ 43 | (0,68.54) 44 | (5,38.40) 45 | (10,42.67) 46 | (15,38.59) 47 | (20,50.05) 48 | }; 49 | %下界1与上界1之间填充 50 | \addplot [fill=color1,opacity=0.2,forget plot] fill between[of=SeqSeqOneLower and SeqSeqOneUpper]; 51 | % 绘制折线1 52 | \addplot[color=color1,style={ thick}] coordinates { 53 | (0,66.58) 54 | (5,35.71) 55 | (10,38.99) 56 | (15,36.31) 57 | (20,42.19) 58 | }; 59 | \addlegendentry{\textsc{a}} % 设置名称1 60 | 61 | % 下界2 62 | \addplot[draw=none,mark=none,name path=SeqSeqLower,forget plot] coordinates{ 63 | (0,69.19) 64 | (5,49.82) 65 | (10,48.77) 66 | (15,46.94) 67 | (20,44.27) 68 | }; 69 | % 上界2 70 | \addplot[draw=none,mark=none,name path=SeqSeqUpper,forget plot] coordinates{ 71 | (0,74.39) 72 | (5,51.66) 73 | (10,57.90) 74 | (15,66.40) 75 | (20,63.23) 76 | }; 77 | %下界2与上界2之间填充 78 | \addplot [fill=color2,opacity=0.2,forget plot] fill between[of=SeqSeqLower and SeqSeqUpper]; 79 | % 绘制折线2 80 | \addplot[color=color2,style={ thick}] coordinates { 81 | (0,71.79) 82 | (5,50.74) 83 | (10,53.33) 84 | (15,56.67) 85 | (20,53.75) 86 | }; 87 | \addlegendentry{\textsc{b}} 88 | 89 | % 下界3 90 | \addplot[draw=none,mark=none,name path=FullGoldLower,forget plot] coordinates{ 91 | (0,71.57) 92 | (5,62.72) 93 | (10,55.14) 94 | (15,57.42) 95 | (20,62.86) 96 | }; 97 | % 上界3 98 | \addplot[draw=none,mark=none,name path=FullGoldUpper,forget plot] coordinates{ 99 | (0,73.49) 100 | (5,65.95) 101 | (10,62.96) 102 | (15,70.2) 103 | (20,79.64) 104 | }; 105 | %下界3与上界3之间填充 106 | \addplot [fill=color3,opacity=0.2,forget plot] fill between[of=FullGoldLower and FullGoldUpper]; 107 | % 绘制折线3 108 | \addplot[color=color3,style={ thick}] coordinates { 109 | (0,72.53) 110 | (5,64.33) 111 | (10,59.05) 112 | (15,63.81) 113 | (20,71.25) 114 | }; 115 | \addlegendentry{\textsc{c}} 116 | 117 | \end{axis} 118 | 119 | \end{tikzpicture} 120 | } 121 | \caption{Line chart with error bar} 122 | \label{fig:1} 123 | \end{figure} 124 | 125 | \end{document} 126 | -------------------------------------------------------------------------------- /latex/code/scatter_diagram.tex: -------------------------------------------------------------------------------- 1 | \documentclass{article} 2 | \usepackage[utf8]{inputenc} 3 | 4 | 5 | 6 | \usepackage{booktabs} % professional-quality tables 7 | \usepackage{tikz} 8 | \usepackage{pgfplots} 9 | \usepackage{xcolor} 10 | \usepackage{color} 11 | 12 | 13 | \definecolor{tiffanyblue}{RGB}{129,216,208} 14 | \definecolor{bangdiblue}{RGB}{0,149,182} 15 | \definecolor{kleinblue}{RGB}{0,47,167} 16 | \definecolor{kabuliblue}{RGB}{26,85,153} 17 | \definecolor{purple}{RGB}{138,43,226} 18 | \definecolor{upink}{RGB}{255,150,128} 19 | 20 | 21 | \title{Pictures} 22 | \author{libei_neu } 23 | \date{August 2022} 24 | 25 | \begin{document} 26 | 27 | 28 | 29 | 30 | %---------------------------------------------- 31 | \begin{figure} 32 | \centering 33 | \begin{tikzpicture} 34 | \begin{axis}[ 35 | at={(0,0)}, 36 | ymajorgrids, 37 | xmajorgrids, 38 | grid style=dashed, 39 | width=0.7*\textwidth, 40 | height=0.65*\textwidth, 41 | xlabel={\small{Prams. (M)}}, 42 | ylabel={\small{BLEU}}, 43 | ylabel style={yshift=0em, xshift=0em}, 44 | xlabel style={xshift=1em,yshift=0.0em}, 45 | yticklabel style={/pgf/number format/precision=1, 46 | /pgf/number format/fixed zerofill}, 47 | ymin=28.7,ymax=30.4, ytick={29,29.5,30}, 48 | xmin=90,xmax=330,xtick={100, 150, 200, 250, 300}, 49 | ] 50 | 51 | \addplot[purple!30,mark=*,mark size=3pt,thick,mark options={fill=purple!30,draw=purple!30,line width=1.0pt}] coordinates { (118,29.05)}; 52 | 53 | \addplot[kleinblue!50,mark=*,mark size=6pt,thick,mark options={fill=kleinblue!70,draw=kleinblue!70,line width=1.0pt}] coordinates { (194,29.44)}; 54 | 55 | \addplot[gray!30,mark=*,mark size=4.5pt,thick,mark options={fill=gray!30,line width=1.0pt}] coordinates { (137,29.30)}; 56 | 57 | \addplot[bangdiblue!70,mark=*,mark size=6pt,thick,mark options={fill=bangdiblue!70,line width=1.0pt}] coordinates { (194,29.60)}; 58 | 59 | \addplot[orange!30,mark=*,mark size=8pt,thick,mark options={fill=orange!30, draw=orange!30,line width=1.0pt}] coordinates { (270,29.92)}; 60 | 61 | \addplot[tiffanyblue!70,mark=*,mark size=8pt,thick,mark options={fill=tiffanyblue!70, draw=tiffanyblue!70,line width=1.0pt}] coordinates { (262,30.10)}; 62 | 63 | \addplot[yellow!50,mark=*,mark size=10pt,thick,mark options={fill=yellow!50, draw=yellow!50,line width=1.0pt}] coordinates { (272,30.19)}; 64 | \end{axis} 65 | 66 | \node[font=\tiny] at (3.3em, 2.5em){Purple}; 67 | \node[font=\tiny] at (4em, 5.5em){Gray}; 68 | \node[font=\tiny] at (10.9em, 9em){Bangdiblue}; 69 | \node[font=\tiny] at (10.2em, 7.2em){Kleinblue}; 70 | \node[font=\tiny] at (11.2em, 14.5em){Tiffanyblue}; 71 | \node[font=\tiny] at (16.9em, 16em){Yellow}; 72 | \node[font=\tiny] at (16.35em,11.9em){Orange}; 73 | \node[] at (12.85em,3.em){ 74 | \setlength{\tabcolsep}{2.7pt} 75 | \tiny 76 | \begin{tabular}{lrrr} 77 | \toprule 78 | Model & $\mathrm{\theta}$(M) & Updates (K) & BLEU\\ 79 | \midrule 80 | Purple & 118 &50& 29.05\\ 81 | kleinblue & 194 &50& 29.44\\ 82 | Orange & 270& 800&29.92 \\ 83 | Gray & 137& 50&29.30 \\ 84 | Bangdiblue & 194& 50&29.60 \\ 85 | Tiffanyblue & 262& 250&30.10\\ 86 | Yellow & 272& 300&30.19\\ 87 | \bottomrule 88 | \end{tabular} 89 | }; 90 | \end{tikzpicture} 91 | \caption{A scatter diagram tutorial.} 92 | \label{fig:scatter_diagram} 93 | \end{figure} 94 | 95 | 96 | \end{document} 97 | -------------------------------------------------------------------------------- /latex/code/taxonomy_tree.tex: -------------------------------------------------------------------------------- 1 | % This file is from Weihao Xia, Jing-Hao Xue. A Survey on 3D-aware Image Synthesis. https://arxiv.org/abs/2210.14267 2 | 3 | 4 | \documentclass[letterpaper]{article} 5 | %% tikz作图 6 | \usepackage{tikz} 7 | \usepackage{longtable} 8 | \usepackage{tikz-qtree} 9 | \usepackage[edges]{forest} 10 | \usetikzlibrary{trees} 11 | 12 | \usepackage{charter} % Use the Charter font 13 | 14 | 15 | \begin{document} 16 | 17 | 18 | \begin{figure}[t!] 19 | \centering 20 | \tikzset{ 21 | my node/.style={ 22 | font=\small, 23 | rectangle, 24 | draw=#1!75, 25 | align=justify, 26 | } 27 | } 28 | \forestset{ 29 | % 设置tree格式 30 | my tree style/.style={ 31 | for tree={grow=east, % 从左至右 32 | parent anchor=east, % 33 | child anchor=west, 34 | %设置parent node和child node的颜色、宽度等 35 | where level=0{my node=black,text width=1.5em}{}, 36 | where level=1{my node=black,text width=8.5em}{}, 37 | where level=2{my node=black,text width=8.0em}{}, 38 | where level=3{my node=black,text width=15em}{}, 39 | l sep=1.5em, 40 | forked edge, % 41 | fork sep=1em, % 42 | edge={draw=black!50, thick}, 43 | if n children=3{for children={ 44 | if n=2{calign with current}{}} 45 | }{}, 46 | tier/.option=level, 47 | } 48 | } 49 | } 50 | % \scalebox{0.65}{ 51 | % 逆序 52 | \begin{forest} 53 | my tree style 54 | [All 55 | [3D Generative Models from Single Views 56 | [Conditional 3D GANs 57 | [Semantic Label] 58 | [Image] 59 | ] 60 | [Unconditional 3D GANs 61 | [Interactive Editing] 62 | [Efficient and Consistent Rendering 63 | ] 64 | [Efficient and Effective Representations] 65 | ] 66 | ] 67 | [3D Novel View Synthesis from Multiple Views 68 | [Constrained $\rightarrow$ In-the-wild 69 | [Static $\rightarrow$ Dynamic] 70 | [Single $\rightarrow$ Large-scale] 71 | [Calibrated $\rightarrow$ Uncalibrated] 72 | [Dense $\rightarrow$ Sparse] 73 | ] 74 | [Speed up] 75 | [Neural Scene Representation] 76 | ] 77 | [3D Control of 2D Generative Models 78 | [3D Priors as Constraints 79 | [3D Components into 2D GANs] 80 | [3D Prior Knowledge] 81 | ] 82 | [3D Parameters as Controls 83 | [Explicit Control over 3D Parameters] 84 | [Control Factors from Pretrained Models] 85 | ] 86 | [3D Control Latent Directions 87 | [Unsupervised] 88 | [Supervised] 89 | ] 90 | ] 91 | ] 92 | \end{forest} 93 | % } 94 | \centering 95 | \caption{A systematic taxonomy.} 96 | \label{fig:phylogenetic_tree} 97 | \end{figure} 98 | 99 | 100 | 101 | \end{document} 102 | -------------------------------------------------------------------------------- /latex/code/text_attention.tex: -------------------------------------------------------------------------------- 1 | \documentclass{article} 2 | \usepackage[utf8]{inputenc} 3 | \begin{document} 4 | 5 | 6 | \begin{figure}[t!] 7 | \small 8 | \centering 9 | {\setlength{\fboxsep}{0pt}\colorbox{white!0}{\parbox{0.85\textwidth}{\colorbox{red!14.970936}{\strut Who} \colorbox{red!13.802228}{\strut are} \colorbox{red!9.717735}{\strut the} \colorbox{red!6.521768}{\strut only} \colorbox{red!12.306012800000001}{\strut players} \colorbox{red!6.903509}{\strut listed} \colorbox{red!7.086827999999999}{\strut that} \colorbox{red!8.5836988}{\strut played} \colorbox{red!5.565175999999999}{\strut in} \colorbox{red!3.8364928}{\strut 2011} \colorbox{red!12.1032894}{\strut ?} \colorbox{red!9.142228999999999}{\strut [HEAD]} \colorbox{red!34.7230372}{\strut player} \colorbox{red!2.3756811}{\strut $|$} \colorbox{red!2.3478372000000003}{\strut year} \colorbox{red!2.7668154}{\strut $|$} \colorbox{red!5.4725796}{\strut round} \colorbox{red!2.8656236}{\strut $|$} \colorbox{red!3.826232}{\strut result} \colorbox{red!2.804299}{\strut $|$} \colorbox{red!5.366216799999999}{\strut opponent} \colorbox{red!2.9017952000000005}{\strut [ROW]} \colorbox{red!2.8313821999999997}{\strut 1} \colorbox{red!10.299296}{\strut ray} \colorbox{red!10.579882}{\strut mond} \colorbox{red!8.221680000000001}{\strut van} \colorbox{red!9.008807}{\strut bar} \colorbox{red!7.4133814}{\strut ne} \colorbox{red!6.2307126}{\strut ve} \colorbox{red!9.183715000000001}{\strut ld} \colorbox{red!3.4074528}{\strut $|$} \colorbox{red!3.1364577999999996}{\strut 2009} \colorbox{red!3.0261772}{\strut $|$} \colorbox{red!7.1568668}{\strut quarter} \colorbox{red!10.29556}{\strut -} \colorbox{red!7.359226}{\strut final} \colorbox{red!2.7560094}{\strut $|$} \colorbox{red!6.2080400000000004}{\strut won} \colorbox{red!3.2449352}{\strut $|$} \colorbox{red!8.8993174}{\strut j} \colorbox{red!10.114287200000001}{\strut elle} \colorbox{red!6.2276626}{\strut k} \colorbox{red!8.8740266}{\strut la} \colorbox{red!9.735318}{\strut as} \colorbox{red!7.475064000000001}{\strut en} \colorbox{red!3.1987599999999996}{\strut [ROW]} \colorbox{red!3.2400194}{\strut 2} \colorbox{red!9.723582799999999}{\strut ray} \colorbox{red!9.352703}{\strut mond} \colorbox{red!7.594534}{\strut van} \colorbox{red!8.3187848}{\strut bar} \colorbox{red!7.1613126}{\strut ne} \colorbox{red!6.573388}{\strut ve} \colorbox{red!9.092343999999999}{\strut ld} \colorbox{red!3.7991596000000003}{\strut $|$} \colorbox{red!3.5757356000000002}{\strut 2010} \colorbox{red!4.040925}{\strut $|$} \colorbox{red!8.162047999999999}{\strut 2} \colorbox{red!9.4804764}{\strut nd} \colorbox{red!8.9249826}{\strut round} \colorbox{red!3.7699683999999998}{\strut $|$} \colorbox{red!8.1906486}{\strut won} \colorbox{red!4.8999714}{\strut $|$} \colorbox{red!11.6535628}{\strut bre} \colorbox{red!13.612498}{\strut nd} \colorbox{red!12.360156}{\strut an} \colorbox{red!10.665865}{\strut d} \colorbox{red!12.203512000000002}{\strut olan} \colorbox{red!37.615702}{\strut [ROW]} \colorbox{red!42.653722}{\strut 3} \colorbox{red!55.65368000000001}{\strut ad} \colorbox{red!57.33528}{\strut rian} \colorbox{red!60.769768}{\strut le} \colorbox{red!61.41157200000001}{\strut w} \colorbox{red!61.32967}{\strut is} \colorbox{red!45.39855000000001}{\strut $|$} \colorbox{red!23.587676000000002}{\strut 2011} \colorbox{red!45.02534}{\strut $|$} \colorbox{red!40.120506}{\strut final} \colorbox{red!37.421062}{\strut $|$} \colorbox{red!33.088660000000004}{\strut won} \colorbox{red!38.722848}{\strut $|$} \colorbox{red!37.43384}{\strut g} \colorbox{red!38.099266}{\strut ary} \colorbox{red!21.687636}{\strut and} \colorbox{red!26.274652}{\strut erson} }}} 10 | \caption{The visualization results of attention over text. } 11 | \end{figure} 12 | 13 | \end{document} 14 | -------------------------------------------------------------------------------- /latex/code/timeline.tex: -------------------------------------------------------------------------------- 1 | % This file is from Weihao Xia, Jing-Hao Xue. A Survey on 3D-aware Image Synthesis. https://arxiv.org/abs/2210.14267 2 | 3 | \documentclass[letterpaper]{article} 4 | %% tikz作图 5 | \usepackage{tikz} 6 | \usepackage{pgfplots} 7 | 8 | \begin{document} 9 | 10 | \begin{figure*}[th] 11 | \centering 12 | \resizebox{0.90\textwidth}{!}{% 13 | % 这里将第一年yearOne设置为图中起始年，后续就可以直接用年月的形式2019.05直接定义节点的位置 14 | \begin{tikzpicture}% 15 | \newcount\yearOne; 16 | \yearOne= 2019 17 | \def\n{4} 18 | \def\w{18} 19 | \def\lt{0.40} 20 | \def\lf{0.36} 21 | \def\lo{0.12} 22 | \def\lext{0.1} 23 | \def\rext{1.05} 24 | \def\yearLabel(#1,#2,#3){\node[above,black!60!cyan] at ({(#1-\yearOne)*\w/\n},{\lt*#2}) {#3};} 25 | 26 | % define yearArrowLabel (#position, #arrow direction(up/down), #arrow length, #method, #color) 27 | \def\yearArrowLabel(#1,#2,#3,#4,#5){ 28 | \def\xy{{(#1-\yearOne)*\w/\n}}; \pgfmathparse{int(#2*100)}; 29 | \ifnum \pgfmathresult<0 % 30 | \def\yyp{{(\lt*(0.90+#2))}}; \def\yyw{{(\yyp-\lt*#3)}} 31 | \fill[color=#5,radius=2pt] (\xy,0) circle; 32 | \draw[<-,thick,color=#5,align=center] 33 | (\xy,\yyp) -- (\xy,\yyw) 34 | node[below,color=#5] at (\xy,\yyw) {\strut #4}; 35 | \else % 36 | \def\yyp{{(\lt*(0.10+#2)}}; \def\yyw{{(\yyp+\lt*#3)}} 37 | \fill[color=#5,radius=2pt] (\xy,0) circle; 38 | \draw[<-,thick,color=#5,align=center] 39 | (\xy,\yyp) -- (\xy,\yyw) 40 | node[above] at (\xy,\yyw) {#4}; 41 | \fi} 42 | 43 | \draw[->,thick] (-\w*\lext,0) -- (\w*\rext,0); 44 | 45 | \foreach \tick in {0,1,...,\n}{ 46 | \def\x{{\tick*\w/\n}} 47 | \def\year{\the\numexpr \yearOne+\tick*1 \relax} 48 | \fill[black,radius=2.5pt] (\x,0) circle; 49 | \draw[thick] (\x,-0.0001) -- (\x,0.0001) % 50 | node[below] {\year}; 51 | \ifnum \tick<\n 52 | \foreach \ticko in {1,2,3,4,5,6,7,8,9,10,11}{ 53 | \def\xo{{(\x+\ticko*\w/\n/12)}} 54 | \draw[thick] (\xo,0) -- (\xo,\lo); % 55 | }\fi 56 | } 57 | \draw[thick] (-1*\w/\n/12,0) -- (-1*\w/\n/12,\lo); 58 | \draw[thick] (-2*\w/\n/12,0) -- (-2*\w/\n/12,\lo); 59 | \draw[thick] ({\w+\w/\n/12},0) -- ({\w+\w/\n/12},\lo); 60 | 61 | \yearArrowLabel(2018.95,-1.5,1.5, DeepVoxel, black!25!lime) % 62 | \yearArrowLabel(2018.95,0.5,1.5,VON, cyan) 63 | \yearArrowLabel(2019.30,-1.5,3.5, HoloGAN, violet) % 64 | \yearArrowLabel(2019.50,0.5,1.5, SRN, black!25!lime) 65 | \yearArrowLabel(2019.75,-1.5,1.5, RGBD-GAN, red) 66 | \yearArrowLabel(2019.95,0.5,2.5, DVR, black!25!lime) 67 | \yearArrowLabel(2020.05,-1.5,3.5, BlockGAN, violet) 68 | \yearArrowLabel(2020.15,0.5,4.5, GANLatentDiscovery, orange) 69 | \yearArrowLabel(2020.23,-1.5,1.5, NeRF, black!25!lime) 70 | \yearArrowLabel(2020.30,0.5,1.5, StyleRig, red) 71 | \yearArrowLabel(2020.40,-1.5,5.5, CONFIG, red) 72 | \yearArrowLabel(2020.55, 0.5,2.5, NGP, cyan) % 73 | \yearArrowLabel(2020.60,-1.5,0.5, GRAF, violet) % 74 | \yearArrowLabel(2020.65,-1.5,3.5, NeRF-W, black!25!lime) 75 | \yearArrowLabel(2020.75,0.5,1.5, PIE, red) 76 | \yearArrowLabel(2020.80,-1.5,4.5, NeRF++, black!25!lime) 77 | \yearArrowLabel(2020.90,-1.5,1.5, GIRAFFE, violet) 78 | \yearArrowLabel(2020.93,0.5,2.5, pi-GAN, violet) 79 | \yearArrowLabel(2020.93,4.5,0.5, PixelNeRF, black!25!lime) 80 | \yearArrowLabel(2021.05,-1.5,7.0, GAN-Control, red) 81 | \yearArrowLabel(2021.15,0.5,1.5, NeRF--, black!25!lime) 82 | \yearArrowLabel(2021.30,-1.5,2.5, KiloNeRF, black!25!lime) 83 | \yearArrowLabel(2021.35,0.5,3.5, BARF, black!25!lime) 84 | \yearArrowLabel(2021.35,5.5,0.5, VariTex, red) 85 | \yearArrowLabel(2021.65,0.5,0.5, ShadeGAN, violet) 86 | \yearArrowLabel(2021.92, 0.5,3.5, GOF, violet) 87 | \yearArrowLabel(2021.95, -1.5, 6.0, EG3D\\GRAM\\StyleSDF\\VolumeGAN, violet) 88 | \yearArrowLabel(2022.10, -1.5, 0.5, DepthGAN, cyan) 89 | \yearArrowLabel(2022.35, 0.5, 0.5, 90 | MVCGAN\\Sem2NeRF\\Disentangled3D\\PixelNeRF, violet) 91 | \yearArrowLabel(2022.45, -1.5, 6.0, VoxGRAF\\EpiGRAF\\StyleSDF\\IDE-3D, violet) 92 | \yearArrowLabel(2022.75, -1.5, 0.5, GMPI\\SURF-GAN\\StyleSDF, violet) 93 | \end{tikzpicture} 94 | } 95 | \caption{Chronological overview of representative XXX methods which are categorized by different learning approaches. 96 | Methods in \textcolor{orange}{orange}, \textcolor{red}{red}, \textcolor{cyan}{cyan}, \textcolor{black!25!lime}{lime}, and \textcolor{violet}{violet} are from Section A, B, C, and D, respectively. Best viewed in color.} 97 | \label{fig:timeline} 98 | \end{figure*} 99 | 100 | 101 | 102 | \end{document} -------------------------------------------------------------------------------- /latex/code/transformer.tex: -------------------------------------------------------------------------------- 1 | \documentclass{article} 2 | \usepackage[utf8]{inputenc} 3 | 4 | 5 | \usepackage{tikz} 6 | \usepackage{CJKutf8} 7 | \usepackage{xcolor} 8 | \usepackage{tcolorbox} 9 | 10 | \title{Pictures} 11 | \author{libei_neu } 12 | \date{August 2022} 13 | 14 | \begin{document} 15 | 16 | \begin{figure} 17 | \centering 18 | \begin{tikzpicture} 19 | \tikzstyle{Sanode} = [minimum height=1.4em,minimum width=7em,inner sep=3pt,rounded corners=1.5pt,draw,fill=orange!30]; 20 | \tikzstyle{Resnode} = [minimum height=1.1em,minimum width=7em,inner sep=3pt,rounded corners=1.5pt,draw,fill=yellow!30]; 21 | \tikzstyle{ffnnode} = [minimum height=1.4em,minimum width=7em,inner sep=3pt,rounded corners=1.5pt,draw,fill=blue!20]; 22 | \tikzstyle{outputnode} = [minimum height=1.4em,minimum width=7em,inner sep=3pt,rounded corners=1.5pt,draw,fill=blue!40]; 23 | \tikzstyle{inputnode} = [minimum height=1.4em,minimum width=3.5em,inner sep=3pt,rounded corners=1.5pt,draw,fill=red!20]; 24 | \tikzstyle{posnode} = [minimum height=1.4em,minimum width=3.5em,inner sep=3pt,rounded corners=1.5pt,draw,fill=black!10!white]; 25 | \tikzstyle{standard} = [rounded corners=3pt]; 26 | 27 | 28 | \node [Sanode,anchor=west] (sa1) at (0,0) {\tiny{$\textbf{SAN}$}}; 29 | \node [Resnode,anchor=south] (res1) at ([yshift=0.3em]sa1.north) {\tiny{$\textbf{Add \& LayerNorm}$}}; 30 | \node [ffnnode,anchor=south] (ffn1) at ([yshift=1em]res1.north) {\tiny{$\textbf{FFN}$}}; 31 | \node [Resnode,anchor=south] (res2) at ([yshift=0.3em]ffn1.north) {\tiny{$\textbf{Add \& LayerNorm}$}}; 32 | \node [inputnode,anchor=north west] (input1) at ([yshift=-1em,xshift=-0.5em]sa1.south west) {\tiny{$\textbf{Emb.}$}}; 33 | \node [] (add) at ([yshift=-1.6em,xshift=3.5em]sa1.south west) {$+$}; 34 | \node [posnode,anchor=north east] (pos1) at ([yshift=-1em,xshift=0.5em]sa1.south east) {\tiny{$\textbf{Position}$}}; 35 | \node [anchor=north] (inputs) at ([yshift=-3em]sa1.south) {\begin{CJK*}{UTF8}{gbsn}\scriptsize{$\textbf{ 我\ \ 很\ \ 好}$}\end{CJK*}}; 36 | \node [anchor=south] (encoder) at ([xshift=0.2em,yshift=0.6em]res2.north west) {\scriptsize{\textbf{Encoder}}}; 37 | 38 | % ""对encoder端的组成部分进行连接"" 39 | \draw [->] (sa1.north) -- (res1.south); 40 | \draw [->] (res1.north) -- (ffn1.south); 41 | \draw [->] (ffn1.north) -- (res2.south); 42 | \draw [->] ([yshift=-1em]sa1.south) -- (sa1.south); 43 | \draw [->] ([yshift=-0.3em]inputs.north) -- ([yshift=0.6em]inputs.north); 44 | 45 | 46 | \node [Sanode,anchor=west] (sa2) at ([xshift=3em]sa1.east) {\tiny{$\textbf{Self-Attention}$}}; 47 | \node [Resnode,anchor=south] (res3) at ([yshift=0.3em]sa2.north) {\tiny{$\textbf{Add \& LayerNorm}$}}; 48 | \node [Sanode,anchor=south] (ed1) at ([yshift=1em]res3.north) {\tiny{$\textbf{Enc-Dec Attention}$}}; 49 | \node [Resnode,anchor=south] (res4) at ([yshift=0.3em]ed1.north) {\tiny{$\textbf{Add \& LayerNorm}$}}; 50 | \node [ffnnode,anchor=south] (ffn2) at ([yshift=1em]res4.north) {\tiny{$\textbf{FFN}$}}; 51 | \node [Resnode,anchor=south] (res5) at ([yshift=0.3em]ffn2.north) {\tiny{$\textbf{Add \& LayerNorm}$}}; 52 | \node [outputnode,anchor=south] (o1) at ([yshift=1em]res5.north) {\tiny{$\textbf{Output layer}$}}; 53 | \node [inputnode,anchor=north west] (input2) at ([yshift=-1em,xshift=-0.5em]sa2.south west) {\tiny{$\textbf{Emb.}$}}; 54 | \node [] (add) at ([yshift=-1.6em,xshift=3.5em]sa2.south west) {$+$}; 55 | \node [posnode,anchor=north east] (pos2) at ([yshift=-1em,xshift=0.5em]sa2.south east) {\tiny{$\textbf{Position}$}}; 56 | \node [anchor=north] (outputs) at ([yshift=-3em]sa2.south) {\begin{CJK*}{UTF8}{gbsn}\scriptsize{$\textbf{解码器输入: $<$sos$>$ I am fine}$}\end{CJK*}}; 57 | \node [anchor=east] (decoder) at ([xshift=-1em,yshift=-1.5em]o1.west) {\begin{CJK*}{UTF8}{gbsn}\scriptsize{\textbf{Decoder}}\end{CJK*}}; 58 | \node [anchor=north] (decoutputs) at ([yshift=1.5em]o1.north) {\begin{CJK*}{UTF8}{gbsn}\scriptsize{$\textbf{解码器输出: I am fine $<$eos$>$ }$}\end{CJK*}}; 59 | 60 | \draw [->] (sa2.north) -- (res3.south); 61 | \draw [->] (res3.north) -- (ed1.south); 62 | \draw [->] (ed1.north) -- (res4.south); 63 | \draw [->] (res4.north) -- (ffn2.south); 64 | \draw [->] (ffn2.north) -- (res5.south); 65 | \draw [->] (res5.north) -- (o1.south); 66 | \draw [->] (o1.north) -- ([yshift=0.5em]o1.north); 67 | \draw [->] ([yshift=-1em]sa2.south) -- (sa2.south); 68 | \draw [->] ([yshift=-0.3em]outputs.north) -- ([yshift=0.6em]outputs.north); 69 | 70 | Encoder-Decoder: 71 | \draw[->,standard] ([yshift=-0.5em]sa1.south) -- ([xshift=-4em,yshift=-0.5em]sa1.south) -- ([xshift=-4em,yshift=2.3em]sa1.south) -- ([xshift=-3.5em,yshift=2.3em]sa1.south); 72 | \draw[->,standard] ([yshift=0.5em]res1.north) -- ([xshift=-4em,yshift=0.5em]res1.north) -- ([xshift=-4em,yshift=3.3em]res1.north) -- ([xshift=-3.5em,yshift=3.3em]res1.north); 73 | 74 | \draw[->,standard] ([yshift=-0.5em]sa2.south) -- ([xshift=4em,yshift=-0.5em]sa2.south) -- ([xshift=4em,yshift=2.3em]sa2.south) -- ([xshift=3.5em,yshift=2.3em]sa2.south); 75 | \draw[->,standard] ([yshift=0.5em]res3.north) -- ([xshift=4em,yshift=0.5em]res3.north) -- ([xshift=4em,yshift=3.3em]res3.north) -- ([xshift=3.5em,yshift=3.3em]res3.north); 76 | \draw[->,standard] ([yshift=0.5em]res4.north) -- ([xshift=4em,yshift=0.5em]res4.north) -- ([xshift=4em,yshift=3.3em]res4.north) -- ([xshift=3.5em,yshift=3.3em]res4.north); 77 | 78 | \draw[->,standard] (res2.north) -- ([yshift=0.5em]res2.north) -- ([xshift=5em,yshift=0.5em]res2.north) -- ([xshift=5em,yshift=-2.2em]res2.north) -- ([xshift=6.5em,yshift=-2.2em]res2.north); 79 | \node [green,font=\scriptsize] (count) at ([xshift=-1.5em,yshift=-1em]encoder.south) {$6\times$}; 80 | \node [red,font=\scriptsize] (count) at ([xshift=10.8em,yshift=0em]decoder.south) {$\times 6$}; 81 | \end{tikzpicture} 82 | \caption{The overall architecture of Transformer which follows the encoder-decoder paradigm.} 83 | \label{fig:transformer} 84 | \end{figure} 85 | 86 | \end{document} 87 | -------------------------------------------------------------------------------- /latex/imgs/category/attention_distribution.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/category/attention_distribution.png -------------------------------------------------------------------------------- /latex/imgs/category/histogram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/category/histogram.png -------------------------------------------------------------------------------- /latex/imgs/category/intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/category/intro.png -------------------------------------------------------------------------------- /latex/imgs/category/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/category/line.png -------------------------------------------------------------------------------- /latex/imgs/category/scatter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/category/scatter.png -------------------------------------------------------------------------------- /latex/imgs/category/struct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/category/struct.png -------------------------------------------------------------------------------- /latex/imgs/category/taxonomy_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/category/taxonomy_tree.png -------------------------------------------------------------------------------- /latex/imgs/category/text_attention.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/category/text_attention.png -------------------------------------------------------------------------------- /latex/imgs/category/timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/category/timeline.png -------------------------------------------------------------------------------- /latex/imgs/icon/ai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/icon/ai.png -------------------------------------------------------------------------------- /latex/imgs/icon/catalogue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/icon/catalogue.png -------------------------------------------------------------------------------- /latex/imgs/icon/folders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/icon/folders.png -------------------------------------------------------------------------------- /latex/imgs/icon/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/icon/heart.png -------------------------------------------------------------------------------- /latex/imgs/icon/intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/icon/intro.png -------------------------------------------------------------------------------- /latex/imgs/icon/motivation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/icon/motivation.png -------------------------------------------------------------------------------- /latex/imgs/icon/notes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/icon/notes.png -------------------------------------------------------------------------------- /latex/imgs/icon/organizer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/icon/organizer.png -------------------------------------------------------------------------------- /latex/imgs/icon/resource.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/icon/resource.png -------------------------------------------------------------------------------- /latex/imgs/notes/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/notes/1.png -------------------------------------------------------------------------------- /latex/imgs/notes/1_step2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/notes/1_step2.png -------------------------------------------------------------------------------- /latex/imgs/notes/2_step1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/notes/2_step1.jpg -------------------------------------------------------------------------------- /latex/imgs/notes/2_step2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/notes/2_step2.jpg -------------------------------------------------------------------------------- /latex/imgs/notes/attention_distribution_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/notes/attention_distribution_1.jpg -------------------------------------------------------------------------------- /latex/imgs/notes/attention_distribution_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/notes/attention_distribution_2.jpg -------------------------------------------------------------------------------- /latex/imgs/notes/attention_distribution_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/notes/attention_distribution_3.jpg -------------------------------------------------------------------------------- /latex/imgs/notes/attention_distribution_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/notes/attention_distribution_4.jpg -------------------------------------------------------------------------------- /latex/imgs/notes/attention_distribution_full.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/notes/attention_distribution_full.jpg -------------------------------------------------------------------------------- /latex/imgs/notes/plot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/notes/plot.jpg -------------------------------------------------------------------------------- /latex/imgs/notes/tikzpicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/notes/tikzpicture.png -------------------------------------------------------------------------------- /latex/imgs/notes/transformer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/notes/transformer.png -------------------------------------------------------------------------------- /latex/imgs/profile/bei_li.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/profile/bei_li.jpg -------------------------------------------------------------------------------- /latex/imgs/profile/libo_qin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/profile/libo_qin.jpg -------------------------------------------------------------------------------- /latex/imgs/profile/qian_liu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/profile/qian_liu.jpg -------------------------------------------------------------------------------- /latex/imgs/profile/shijue_huang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/profile/shijue_huang.jpg -------------------------------------------------------------------------------- /latex/imgs/profile/weihao_xia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/profile/weihao_xia.png -------------------------------------------------------------------------------- /latex/imgs/profile/yudi_zhang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/imgs/profile/yudi_zhang.jpg -------------------------------------------------------------------------------- /latex/notes/attention.md: -------------------------------------------------------------------------------- 1 | # 如何绘制美妙的注意力矩阵可视化图 2 | 3 |
4 | -------------------------------------------------------------------------------- /latex/notes/attention_distribution.md: -------------------------------------------------------------------------------- 1 | # 如何用LaTex来绘制权重注意力分布 2 | 本节主要跟大家介绍一下如何在得到的注意力权重分布后，通过LaTex的方式将分布精美的呈现出来。当然，这里也推荐大家直接利用Python中的画图工具完成，两者区别不是很大，但本节介绍的方式要略微繁琐一些！后续我们也会继续更新和完善绘制的内容和形式。 3 | 4 | 首先还是老生常谈利用tikz包来完成figure的绘制。首先定义一些比较好看的颜色，大家也可以在绘制其他折线图、结构图等根据喜欢选择。 5 | 6 | ``` 7 | \definecolor{tiffanyblue}{RGB}{129,216,208} 8 | \definecolor{bangdiblue}{RGB}{0,149,182} 9 | \definecolor{kleinblue}{RGB}{0,47,167} 10 | \definecolor{kabuliblue}{RGB}{26,85,153} 11 | \definecolor{purple}{RGB}{138,43,226} 12 | \definecolor{upink}{RGB}{255,150,128} 13 | ``` 14 | 15 | 同时我们要预先定义一下这里要用到的node，也是LaTex画图中的一个非常使用的组件 16 | 17 | ``` 18 | \tikzstyle{elementnode} = [rectangle,text=white,anchor=center] ##一个长方形，居中，字体颜色为白色的node 19 | \tikzstyle{srcnode} = [rotate=45,font=\small,anchor=south west] ##rotate表示要展示的label所倾斜的角度，字体大小，以及展示label的位置 20 | \tikzstyle{tgtnode} = [left,font=\small,anchor=north east] ## 同理 21 | ``` 22 | 23 | 本次注意力分布的绘制主要分为3块，包括注意力分布的绘制，source label的绘制和target label的绘制。 24 | 25 | ## 输入的注意力分布的绘制 26 | 27 | ``` 28 | % matrix score 29 | \begin{scope}[scale=0.9,yshift=0.12in] 30 | \foreach \i / \j / \c / \z in 31 | {0/5/1/50, 1/5/1/30, 2/5/1/70, 3/5/1/50, 4/5/1/20, 5/5/1/90, 32 | 0/4/1/10, 1/4/1/60, 2/4/1/30, 3/4/1/40, 4/4/1/40, 5/4/1/40, 33 | 0/3/1/30, 1/3/1/20, 2/3/1/40, 3/3/1/40, 4/3/1/30, 5/3/1/50, 34 | 0/2/1/50, 1/2/1/90, 2/2/1/30, 3/2/1/70, 4/2/1/20, 5/2/1/40, 35 | 0/1/1/20, 1/1/1/10, 2/1/1/30, 3/1/1/40, 4/1/1/60, 5/1/1/40, 36 | 0/0/1/10, 1/0/1/20, 2/0/1/30, 3/0/1/40, 4/0/1/20, 5/0/1/80} 37 | \node[elementnode,minimum size=0.6*1.2cm*\c,inner sep=0pt,fill=tiffanyblue!\z] (a\i\j) at (0.5*1.8cm*\i-3.8*0.5*1.8cm,0.5*1.8cm*\j-0.7*1.8cm) {}; 38 | 39 | 40 | ... 41 | 42 | \end{scope} 43 | ``` 44 | 45 | 这里我们为了简洁用循环的方式来输入一个6*6的方阵，因此本次也是一次自注意力机制中权重矩阵的可视化。当然，小伙伴们想要可视化编码-解码注意力权重矩阵可以通过调整循环中i和j的大小来完成。那这里的4个循环变量依次指代对于最左上节点的x轴偏移、y轴偏移、点的大小以及权重的大小。也就是说，我们通过 46 | 47 | ``` 48 | \node[elementnode,minimum size=0.6*1.2cm*\c,inner sep=0pt,fill=tiffanyblue!\z] (a\i\j) at (0.5*1.8cm*\i-3.8*0.5*1.8cm,0.5*1.8cm*\j-0.7*1.8cm) {}; 49 | ``` 50 | 51 | 来定义node的大小，内部字体大小，填充颜色及透明度等属性，还可以定义任意两个node之间的间隙，以及与label之间的间隙。值得注意的是我们可以在{}里面添加例如具体的权重值等。 52 | 53 | 本次教程里利用颜色的透明度（0-100）来模拟权重的大小，透明度越低代表权重值越小，反之颜色越深代表权重值越大。 54 | 55 |
56 | 57 | ## Source Label的绘制 58 | 59 | ``` 60 | % source 61 | \node[srcnode] (src1) at (-3.9*0.5*1.8cm,-1.75*1.8cm+7.5*0.5*1.8cm) {\scriptsize{Have}}; 62 | \node[srcnode] (src2) at ([xshift=0.9cm]src1.south west) {\scriptsize{you}}; 63 | \node[srcnode] (src3) at ([xshift=0.9cm]src2.south west) {\scriptsize{learned}}; 64 | \node[srcnode] (src4) at ([xshift=0.9cm]src3.south west) {\scriptsize{nothing}}; 65 | \node[srcnode] (src5) at ([xshift=0.9cm]src4.south west) {\scriptsize{?}}; 66 | \node[srcnode] (src6) at ([xshift=0.9cm]src5.south west) {\scriptsize{$\langle$eos$\rangle$}}; 67 | ``` 68 | 69 | 其中xshift控制label之间的距离 70 | 71 |
72 | 73 | ## Target Label的绘制 74 | 75 | ``` 76 | % target 77 | \node[tgtnode] (tgt1) at (-4.2*0.5*1.8cm,-1.75*1.8cm+7.5*0.5*1.8cm) {\scriptsize{Have}}; 78 | \node[tgtnode] (tgt2) at ([yshift=-0.9cm]tgt1.north east) {\scriptsize{you}}; 79 | \node[tgtnode] (tgt3) at ([yshift=-0.9cm]tgt2.north east) {\scriptsize{learned}}; 80 | \node[tgtnode] (tgt4) at ([yshift=-0.9cm]tgt3.north east) {\scriptsize{nothing}}; 81 | \node[tgtnode] (tgt5) at ([yshift=-0.9cm]tgt4.north east) {\scriptsize{?}}; 82 | \node[tgtnode] (tgt6) at ([yshift=-0.9cm]tgt5.north east) {\scriptsize{$\langle$eos$\rangle$}}; 83 | ``` 84 | 85 | 其中yshift控制label之间的距离 86 | 87 |
88 | 89 | ## 不同超参数的选择 90 | 91 | ``` 92 | # 选用不同的颜色，上述的颜色是蒂芙尼蓝（fill=tiffanyblue），同样也可以根据点的大小来直观的显示出注意力的分布情况 93 | 94 | \begin{scope}[scale=0.9,yshift=0.12in] 95 | \foreach \i / \j / \c / \z in 96 | { 0/5/1/50, 1/5/1/30, 2/5/1/70, 3/5/1/50, 4/5/1/20, 5/5/1/90, 97 | 0/4/1/10, 1/4/1/60, 2/4/1/30, 3/4/1/40, 4/4/1/40, 5/4/1/40, 98 | 0/3/1/30, 1/3/1/20, 2/3/1/40, 3/3/1/40, 4/3/1/30, 5/3/1/50, 99 | 0/2/1/50, 1/2/1/90, 2/2/1/30, 3/2/1/70, 4/2/1/20, 5/2/1/40, 100 | 0/1/1/20, 1/1/1/10, 2/1/1/30, 3/1/1/40, 4/1/1/60, 5/1/1/40, 101 | 0/0/1/10, 1/0/1/20, 2/0/1/30, 3/0/1/40, 4/0/1/20, 5/0/1/80} 102 | \node[elementnode,minimum size=0.6*1.2cm*\c*\z*0.01,inner sep=0pt,fill=tiffanyblue!\z] (a\i\j) at (0.5*1.8cm*\i-3.8*0.5*1.8cm,0.5*1.8cm*\j-0.7*1.8cm) {}; 103 | ``` 104 | 105 | 这里通过一个简单的技巧来利用\z来直接对\c进行缩放，省去了逐点修改的麻烦 106 | 107 |
108 | 109 | 猛男粉！！！ 110 | 111 |
112 | -------------------------------------------------------------------------------- /latex/notes/histogram-latex.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/notes/histogram-latex.pdf -------------------------------------------------------------------------------- /latex/notes/line_chart.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/notes/line_chart.pdf -------------------------------------------------------------------------------- /latex/notes/line_chart_with_error_bar.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/notes/line_chart_with_error_bar.pdf -------------------------------------------------------------------------------- /latex/notes/scatter_diagram.md: -------------------------------------------------------------------------------- 1 | # 如何绘制美妙的散点图 2 | 3 |
4 | 5 | 6 | 本章节主要介绍如何采用latex绘制散点图。这里主要采用的package是pgfplots。 故首先要引用该包如下： 7 | 8 | ~~~ 9 | \usepackage{pgfplots} 10 | ~~~ 11 | 12 | 其它需要的package同第一节一样。 13 | 14 | pgfplots 的使用是嵌入在tikz内部的，故其代码块应该包在tikz代码块内部， 如下所示： 15 | 16 | ~~~ 17 | \begin{tikzpicture} 18 | ... 19 | {pdfplots 代码块;} 20 | ... 21 | \end{tikzpicture} 22 | ~~~ 23 | 24 | 接下来，我们将进入正题，开始从0到1绘制一个散点图。如上图所示，该散点描述了模型训练更新次数，模型容量，以及模型的性能之间的关系。 25 | 26 | Step 1: 首先第一步我们要定义我们的画布。这一部分主要采用的是axis命令来得到我们的画布, 如下所示: 27 | 28 | ~~~ 29 | \begin{tikzpicture} 30 | \begin{axis}[ 31 | at={(0,0)}, 32 | ymajorgrids, 33 | xmajorgrids, 34 | grid style=dashed, 35 | width=0.7*\textwidth, 36 | height=0.65*\textwidth, 37 | xlabel={\small{Prams. (M)}}, 38 | ylabel={\small{BLEU}}, 39 | ylabel style={yshift=0em, xshift=0em}, 40 | xlabel style={xshift=1em,yshift=0.0em}, 41 | yticklabel style={/pgf/number format/precision=1, 42 | /pgf/number format/fixed zerofill}, 43 | ymin=28.7,ymax=30.4, ytick={29,29.5,30}, 44 | xmin=90,xmax=330,xtick={100, 150, 200, 250, 300}, 45 | ] 46 | 47 | ... 48 | 49 | \end{axis} 50 | \end{tikzpicture} 51 | ~~~ 52 | 53 | 其中 54 | 55 | ~~~ 56 | \begin{axis}[...] \end{axis} 57 | ~~~ 58 | 59 | 是axis命令的基本使用格式，与figure，tikz等命令类似； at={(0,0)} 表示的是画布位于（0，0）处； width = 0.7*\textwidth, height=0.5*\textwidth 表示该画布的宽和高分别为0.7*\textwidth 和 0.5*\textwidth；xlabel 与 ylabel 则为 x轴与y轴的标签；坐标轴取值范围以及坐标的设置则由如下代码定义： 60 | 61 | ~~~ 62 | ymin=28.7,ymax=30.4, ytick={29,29.5,30}, xmin=90,xmax=330,xtick={100, 150, 200, 250, 300} 63 | ~~~ 64 | 65 | 该命令将x轴的取值范围设置为[90, 330]； y轴的取值范围设置为[28.7, 30.4]； y轴的刻度线为{29,29.5,30}； x轴的刻度线为{100, 150, 200, 250, 300}。 此外axis还提供了对坐标轴数值精度的设置，如下所示： 66 | 67 | ~~~ 68 | yticklabel style={/pgf/number format/precision=1, /pgf/number format/fixed zerofill} 69 | ~~~ 70 | 71 | 该命令将精度设置为小数点后一位。 72 | 73 |
74 | 75 | 76 | Step 2：将坐标点置于画布之上。 这一部分我们主要采用的是addplot命令， 具体如下： 77 | 78 | ~~~ 79 | \begin{axis}[...] 80 | \addplot[purple!30,mark=*,mark size=3pt,thick,mark options={fill=purple!30,draw=purple!30,line width=1.0pt}] coordinates { (118,29.05)}; 81 | 82 | \addplot[kleinblue!50,mark=*,mark size=6pt,thick,mark options={fill=kleinblue!70,draw=kleinblue!70,line width=1.0pt}] coordinates { (194,29.44)}; 83 | 84 | \addplot[gray!30,mark=*,mark size=4.5pt,thick,mark options={fill=gray!30,line width=1.0pt}] coordinates { (137,29.30)}; 85 | 86 | \addplot[bangdiblue!70,mark=*,mark size=6pt,thick,mark options={fill=bangdiblue!70,line width=1.0pt}] coordinates { (194,29.60)}; 87 | 88 | \addplot[orange!30,mark=*,mark size=8pt,thick,mark options={fill=orange!30, draw=orange!30,line width=1.0pt}] coordinates { (270,29.92)}; 89 | 90 | \addplot[tiffanyblue!70,mark=*,mark size=8pt,thick,mark options={fill=tiffanyblue!70, draw=tiffanyblue!70,line width=1.0pt}] coordinates { (262,30.10)}; 91 | 92 | \addplot[yellow!50,mark=*,mark size=10pt,thick,mark options={fill=yellow!50, draw=yellow!50,line width=1.0pt}] coordinates { (272,30.19)}; 93 | \end{axis} 94 | ~~~ 95 | 96 | \addplot命令的核心部分是 coordinates {}，正常情况下，我们只需要将对应的点坐标按照（x y） 的格式进行填写即可。 其中 \addplot[params] 的 params主要用于调整点的尺寸、点填充颜色以及点的形状。 97 | 98 |
99 | 100 | 101 | Step 3： 绘制annotations以及表格的嵌入。这一部分主要采用的核心代码是基于node命令的。具体来说，我们只需要将node命令中{}中填充annotations名称或者表格即可。这里不再赘述，只提供相应的代码，如下： 102 | 103 | ~~~ 104 | \node[font=\tiny] at (3.3em, 2.5em){Purple}; 105 | \node[font=\tiny] at (4em, 5.5em){Gray}; 106 | \node[font=\tiny] at (10.9em, 9em){Bangdiblue}; 107 | \node[font=\tiny] at (10.2em, 7.2em){Kleinblue}; 108 | \node[font=\tiny] at (11.2em, 14.5em){Tiffanyblue}; 109 | \node[font=\tiny] at (16.9em, 16em){Yellow}; 110 | \node[font=\tiny] at (16.35em,11.9em){Orange}; 111 | \node[] at (12.85em,3.em){ 112 | \setlength{\tabcolsep}{2.7pt} 113 | \tiny 114 | \begin{tabular}{lrrr} 115 | \toprule 116 | Model & $\mathrm{\theta}$(M) & Updates (K) & BLEU\\ 117 | \midrule 118 | Purple & 118 &50& 29.05\\ 119 | kleinblue & 194 &50& 29.44\\ 120 | Orange & 270& 800&29.92 \\ 121 | Gray & 137& 50&29.30 \\ 122 | Bangdiblue & 194& 50&29.60 \\ 123 | Tiffanyblue & 262& 250&30.10\\ 124 | Yellow & 272& 300&30.19\\ 125 | \bottomrule 126 | \end{tabular} 127 | }; 128 | ~~~ 129 | 130 |
131 | 132 | # 总结 133 | 134 | Latex 绘图的核心还是node的使用，只要熟练掌握node的使用，任何复杂的图都可以轻松解决。当然，为了更加高效、简洁的绘制图形，我们经常会用到偏移方法来进行绘制，以便更好的建模不同图形之间的关系，为后续图形的改动提供便利条件。 135 | 136 | -------------------------------------------------------------------------------- /latex/notes/scatter_diagram.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/notes/scatter_diagram.pdf -------------------------------------------------------------------------------- /latex/notes/text_attention.md: -------------------------------------------------------------------------------- 1 | # 如何绘制美妙的注意力序列可视化图 2 | 3 |
4 | 5 | 本章节主要介绍如何采用latex绘制注意力序列的可视化图。这里主要采用的package是tcolorbox。 故首先要引用该包如下： 6 | 7 | ~~~ 8 | \usepackage{tcolorbox} 9 | ~~~ 10 | 11 | 在序列上体现注意力的核心思想是通过渐变色来体现注意力的权重，即越大的权重对应越深的颜色，越小的权重对应越浅的颜色。例如，如果想在单词 `What` 上体现 `30%` 的注意力权重，可以使用如下命令来实现 12 | 13 | ~~~ 14 | \colorbox{red!30}{\strut What} 15 | ~~~ 16 | 17 | 其中 `red!30` 指的即是不透明度为`30%`的红色，而 `\strut` 是为了让 `colorbox` 与所包裹的文字边界对齐。 18 | 19 | 掌握了基本原理后，我们可以手动地构造序列，或者使用 Python脚本自动生成。下面我们提供了一个Python脚本，你需要先安装 `numpy` 库 20 | 21 | ~~~ 22 | pip install numpy 23 | ~~~ 24 | 25 | 然后在代码 `TODO:` 处填写你需要的内容，将生成的 `text_attention.tex` 中的图片块复制到需要展示的地方即可。 26 | 27 | > 以下代码修改自开源库[Text-Attention-Heatmap-Visualization](https://github.com/jiesutd/Text-Attention-Heatmap-Visualization)，如果您觉得该代码有用，请考虑引用原作者的论文。 28 | 29 | ```python 30 | # -*- coding: utf-8 -*- 31 | # @Author: Jie Yang 32 | # @Date: 2019-03-29 16:10:23 33 | # @Last Modified by: Jie Yang, Contact: jieynlp@gmail.com 34 | # @Last Modified time: 2019-04-12 09:56:12 35 | 36 | 37 | ## convert the text/attention list to latex code, which will further generates the text heatmap based on attention weights. 38 | import numpy as np 39 | 40 | latex_special_token = ["!@#$%^&*()"] 41 | 42 | 43 | def generate(text_list, attention_list, latex_file, color='red', rescale_value=False): 44 | assert (len(text_list) == len(attention_list)) 45 | if rescale_value: 46 | attention_list = rescale(attention_list) 47 | word_num = len(text_list) 48 | text_list = clean_word(text_list) 49 | with open(latex_file, 'w') as f: 50 | f.write(r'''\begin{figure} 51 | \centering 52 | ''') 53 | string = r'''{\setlength{\fboxsep}{0pt}\colorbox{white!0}{\parbox{0.85\textwidth}{''' + "\n" 54 | for idx in range(word_num): 55 | string += "\\colorbox{%s!%s}{" % (color, attention_list[idx]) + "\\strut " + text_list[idx] + "} " 56 | string += "\n}}}" 57 | f.write(string + "\n \end{figure}") 58 | 59 | 60 | def rescale(input_list): 61 | the_array = np.asarray(input_list) 62 | the_max = np.max(the_array) 63 | the_min = np.min(the_array) 64 | rescale = (the_array - the_min) / (the_max - the_min) * 100 65 | return rescale.tolist() 66 | 67 | 68 | def clean_word(word_list): 69 | new_word_list = [] 70 | for word in word_list: 71 | for latex_sensitive in ["\\", "%", "&", "^", "#", "_", "{", "}"]: 72 | if latex_sensitive in word: 73 | word = word.replace(latex_sensitive, '\\' + latex_sensitive) 74 | new_word_list.append(word) 75 | return new_word_list 76 | 77 | 78 | if __name__ == '__main__': 79 | # TODO: 文本输入处，以空格分割单词 80 | sent = "Who are the only plaerys listed that played in 2011 ?" 81 | words = sent.split() 82 | # TODO: 注意力权重输入处，最大值是100.0 83 | attention = [14.9, 13.8, 9.7, 6.5, 12.3, 6.9, 7.1, 8.5, 5.6, 3.8, 12.1] 84 | assert len(attention) == len(words) 85 | # TODO: latex 支持的颜色，包括 red, green, blue, cyan, magenta, yellow, black, gray, white, darkgray, lightgray, brown, lime, olive, orange, pink, purple, teal, violet 等 86 | color = 'red' 87 | generate(words, attention, "text_attention.tex", color) 88 | ``` -------------------------------------------------------------------------------- /latex/notes/transformer.md: -------------------------------------------------------------------------------- 1 | # 模型结构图 2 | 3 | ## 如何绘制一个深度学习模型图: 以Transformer为例 4 | 5 | ### 预备知识 6 | 在正式开始深度模型图绘制之前，我们首先介绍一个非常重要的预备知识，即 复杂的网络图结构都可以解耦成若干个基础图形的组合。而他们的组合则是通过**node**命令实现的。 7 | 具体来说 Tikz绘图中的Node定义如下： 8 | 9 | ~~~ 10 | \node[[line width], [shape], [draw], fill=[color], fill opacity=[], ...， [line shape]] (Names)(Optional) at (positions) {textual annotations}; 11 | ~~~ 12 | 其中： 13 | ~~~ 14 | line width：thick、thin 等； 15 | shape：rectangle， circle 等； 16 | draw：可选项，若选择，则绘制出轮廓； 17 | fill: 用于对物体进行颜色填充，具体颜色可参考RGB定义，采用fill=[color]进行赋值。 18 | fill opacity：用于设置填充颜色的透明度，取值范围为[0,1]。 19 | [line shape]: 设置线形的形状，主要选择如下， dotted、dashed等。 20 | ~~~ 21 | 22 | Example：\node[thick, rectangle, fill=blue, fill opacity=0.5, dashed] (example1) at (0, 0) {}; 23 | 24 | 其输出如下图所示。 25 | 26 | ![](../imgs/notes/1.png "Example") 27 | 28 | ### 从0到1绘制深度学习模型图 29 | 本章节我们将以Transformer模型（如下图所示）为例，进行实战讲解。 30 |
31 | 32 | 33 | 34 | Step 1： 为模型图中的每一个组成单元定义特定的形状参数。这里主要采用的是\tikzstyle{}命令来进行设定。 35 | 36 | ~~~ 37 | \tikzstyle{Sanode} = [minimum height=1.4em,minimum width=7em,inner sep=3pt,rounded corners=1.5pt,draw,fill=orange!30]; 38 | \tikzstyle{Resnode} = [minimum height=1.1em,minimum width=7em,inner sep=3pt,rounded corners=1.5pt,draw,fill=yellow!30]; 39 | \tikzstyle{ffnnode} = [minimum height=1.4em,minimum width=7em,inner sep=3pt,rounded corners=1.5pt,draw,fill=blue!20]; 40 | \tikzstyle{outputnode} = [minimum height=1.4em,minimum width=7em,inner sep=3pt,rounded corners=1.5pt,draw,fill=blue!40]; 41 | \tikzstyle{inputnode} = [minimum height=1.4em,minimum width=3.5em,inner sep=3pt,rounded corners=1.5pt,draw,fill=red!20]; 42 | \tikzstyle{posnode} = [minimum height=1.4em,minimum width=3.5em,inner sep=3pt,rounded corners=1.5pt,draw,fill=black!10!white]; 43 | \tikzstyle{standard} = [rounded corners=3pt]; 44 | ~~~ 45 | 其中 minimum height 指定了图形的高度； minimum width 指定了图形的宽度； innner sep 指定了图形边框到文字的边距大小；rounded corners 则指定了图形连接处的弧度大小；其余参数上述介绍过，不再赘述。 46 | 值得注意的是，上述步骤只是为了绘制过程中代码更加简洁明了,便于图形的修改，并非是必须的操作。经过上述定义后，如下命令等价： 47 | 48 | ~~~ 49 | \node[Sanode] (SAN) at (0, 0) {SAN}; 50 | \node[minimum height=1.4em,minimum width=7em,inner sep=3pt,rounded corners=1.5pt,draw,fill=orange!30] (SAN) at (0, 0) {SAN}; 51 | ~~~ 52 | 53 | Step 2: 对上述定义的形状进行布局设计。 这里从两个部分：encoder与decoder进行一一讲解。 54 | 55 | ~~~ 56 | Encoder: 57 | ""对encoder端的组成部分进行布局的设计"" 58 | \node [Sanode,anchor=west] (sa1) at (0,0) {\tiny{$\textbf{SAN}$}}; 59 | \node [Resnode,anchor=south] (res1) at ([yshift=0.3em]sa1.north) {\tiny{$\textbf{Add \& LayerNorm}$}}; 60 | \node [ffnnode,anchor=south] (ffn1) at ([yshift=1em]res1.north) {\tiny{$\textbf{FFN}$}}; 61 | \node [Resnode,anchor=south] (res2) at ([yshift=0.3em]ffn1.north) {\tiny{$\textbf{Add \& LayerNorm}$}}; 62 | \node [inputnode,anchor=north west] (input1) at ([yshift=-1em,xshift=-0.5em]sa1.south west) {\tiny{$\textbf{Emb.}$}}; 63 | \node [] (add) at ([yshift=-1.6em,xshift=3.5em]sa1.south west) {$+$}; 64 | \node [posnode,anchor=north east] (pos1) at ([yshift=-1em,xshift=0.5em]sa1.south east) {\tiny{$\textbf{Position}$}}; 65 | \node [anchor=north] (inputs) at ([yshift=-3em]sa1.south) {\begin{CJK*}{UTF8}{gbsn}\scriptsize{$\textbf{ 我\ \ 很\ \ 好}$}\end{CJK*}}; 66 | \node [anchor=south] (encoder) at ([xshift=0.2em,yshift=0.6em]res2.north west) {\scriptsize{\textbf{Encoder}}}; 67 | 68 | ""对encoder端的组成部分进行连接"" 69 | \draw [->] (sa1.north) -- (res1.south); 70 | \draw [->] (res1.north) -- (ffn1.south); 71 | \draw [->] (ffn1.north) -- (res2.south); 72 | \draw [->] ([yshift=-1em]sa1.south) -- (sa1.south); 73 | \draw [->] ([yshift=-0.3em]inputs.north) -- ([yshift=0.6em]inputs.north); 74 | ~~~ 75 |
76 | 通过上述步骤，我们成功将不同的基本单元安置在其特定的位置上，并将其按照相应逻辑连接起来。上述代码本质上就是许多\node 命令的堆叠，并辅以连接线连接。然而在日常使用中，我们为了方便，许多时候都采用这样一种设计思想：选取一个固定点，并由该点进一步向四周扩散开来的绘图方式。 在上述代码中，我们选取的固定的为sa1， 其坐标是（0，0），其余的点都由其通过一定的偏移得到。 77 | 78 | 由此又延伸出一个新的问题，如何高效地书写偏移代码，而不是通过线下独立计算得到。给定一个基准点A， 和一个点B, 其中B由A偏移S =（s_x, s_y）得到，点B的通用计算方法如下： B = A + S。 相应地，其对应的tikz代码如下： 79 | ~~~ 80 | B = ( [ xshift = s_x , yshift = s_y ] A.center )。 81 | ~~~ 82 | 通过上述代码，我们获取到偏移点的坐标，紧接着我们将其带入到\node命令中去，最终绘制出偏移点上对应的图形， 如下： 83 | ~~~ 84 | \node[] at ([ xshift = s_x , yshift = s_y ] A.center) {}; 85 | ~~~ 86 | 由此，最终可以绘制出所有的基础图形。 Decoder 端原理与其相同，这里就不一一赘述了。此处仅提供代码如下： 87 | 88 | ~~~ 89 | Decoder: 90 | \node [Sanode,anchor=west] (sa2) at ([xshift=3em]sa1.east) {\tiny{$\textbf{Self-Attention}$}}; 91 | \node [Resnode,anchor=south] (res3) at ([yshift=0.3em]sa2.north) {\tiny{$\textbf{Add \& LayerNorm}$}}; 92 | \node [Sanode,anchor=south] (ed1) at ([yshift=1em]res3.north) {\tiny{$\textbf{Enc-Dec Attention}$}}; 93 | \node [Resnode,anchor=south] (res4) at ([yshift=0.3em]ed1.north) {\tiny{$\textbf{Add \& LayerNorm}$}}; 94 | \node [ffnnode,anchor=south] (ffn2) at ([yshift=1em]res4.north) {\tiny{$\textbf{FFN}$}}; 95 | \node [Resnode,anchor=south] (res5) at ([yshift=0.3em]ffn2.north) {\tiny{$\textbf{Add \& LayerNorm}$}}; 96 | \node [outputnode,anchor=south] (o1) at ([yshift=1em]res5.north) {\tiny{$\textbf{Output layer}$}}; 97 | \node [inputnode,anchor=north west] (input2) at ([yshift=-1em,xshift=-0.5em]sa2.south west) {\tiny{$\textbf{Emb.}$}}; 98 | \node [] (add) at ([yshift=-1.6em,xshift=3.5em]sa2.south west) {$+$}; 99 | \node [posnode,anchor=north east] (pos2) at ([yshift=-1em,xshift=0.5em]sa2.south east) {\tiny{$\textbf{Position}$}}; 100 | \node [anchor=north] (outputs) at ([yshift=-3em]sa2.south) {\begin{CJK*}{UTF8}{gbsn}\scriptsize{$\textbf{解码器输入: $<$sos$>$ I am fine}$}\end{CJK*}}; 101 | \node [anchor=east] (decoder) at ([xshift=-1em,yshift=-1.5em]o1.west) {\begin{CJK*}{UTF8}{gbsn}\scriptsize{\textbf{Decoder}}\end{CJK*}}; 102 | \node [anchor=north] (decoutputs) at ([yshift=1.5em]o1.north) {\begin{CJK*}{UTF8}{gbsn}\scriptsize{$\textbf{解码器输出: I am fine $<$eos$>$ }$}\end{CJK*}}; 103 | 104 | \draw [->] (sa2.north) -- (res3.south); 105 | \draw [->] (res3.north) -- (ed1.south); 106 | \draw [->] (ed1.north) -- (res4.south); 107 | \draw [->] (res4.north) -- (ffn2.south); 108 | \draw [->] (ffn2.north) -- (res5.south); 109 | \draw [->] (res5.north) -- (o1.south); 110 | \draw [->] (o1.north) -- ([yshift=0.5em]o1.north); 111 | \draw [->] ([yshift=-1em]sa2.south) -- (sa2.south); 112 | \draw [->] ([yshift=-0.3em]outputs.north) -- ([yshift=0.6em]outputs.north); 113 | 114 | Encoder-Decoder: 115 | \draw[->,standard] ([yshift=-0.5em]sa1.south) -- ([xshift=-4em,yshift=-0.5em]sa1.south) -- ([xshift=-4em,yshift=2.3em]sa1.south) -- ([xshift=-3.5em,yshift=2.3em]sa1.south); 116 | \draw[->,standard] ([yshift=0.5em]res1.north) -- ([xshift=-4em,yshift=0.5em]res1.north) -- ([xshift=-4em,yshift=3.3em]res1.north) -- ([xshift=-3.5em,yshift=3.3em]res1.north); 117 | 118 | \draw[->,standard] ([yshift=-0.5em]sa2.south) -- ([xshift=4em,yshift=-0.5em]sa2.south) -- ([xshift=4em,yshift=2.3em]sa2.south) -- ([xshift=3.5em,yshift=2.3em]sa2.south); 119 | \draw[->,standard] ([yshift=0.5em]res3.north) -- ([xshift=4em,yshift=0.5em]res3.north) -- ([xshift=4em,yshift=3.3em]res3.north) -- ([xshift=3.5em,yshift=3.3em]res3.north); 120 | \draw[->,standard] ([yshift=0.5em]res4.north) -- ([xshift=4em,yshift=0.5em]res4.north) -- ([xshift=4em,yshift=3.3em]res4.north) -- ([xshift=3.5em,yshift=3.3em]res4.north); 121 | 122 | \draw[->,standard] (res2.north) -- ([yshift=0.5em]res2.north) -- ([xshift=5em,yshift=0.5em]res2.north) -- ([xshift=5em,yshift=-2.2em]res2.north) -- ([xshift=6.5em,yshift=-2.2em]res2.north); 123 | \node [ugreen,font=\scriptsize] (count) at ([xshift=-1.5em,yshift=-1em]encoder.south) {$6\times$}; 124 | \node [red,font=\scriptsize] (count) at ([xshift=10.8em,yshift=0em]decoder.south) {$\times 6$}; 125 | ~~~ 126 | 127 |
128 | 129 | -------------------------------------------------------------------------------- /latex/notes/transformer.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/latex/notes/transformer.pdf -------------------------------------------------------------------------------- /matplotlib/code/attention.py: -------------------------------------------------------------------------------- 1 | # 本样例源于论文 TAPEX: Table Pre-training via Learning a Neural SQL Executor 2 | 3 | import numpy as np 4 | import matplotlib.pyplot as plt 5 | import seaborn as sns 6 | 7 | # 用于绘制注意力图的矩阵, 实际使用时也可以考虑从文件中读入 8 | data_matrix = np.mat( 9 | [[27.5, 28.3, 32.5, 40.8, 42.5], 10 | [40.0, 42.6, 53.1, 58.8, 60.2], 11 | [34.4, 38.2, 56.2, 57.3, 56.9], 12 | [57.4, 63.9, 70.2, 70.2, 71.7]] 13 | ) 14 | 15 | # 如果没有latex环境，可以将以下行注释 16 | plt.rc('text', usetex=True) 17 | plt.rc('text.latex', preamble=r'\usepackage{lmodern}') 18 | 19 | # 设置字体大小 20 | plt.rc('font', **{'size': 14}) 21 | 22 | # 在seaborn中设定图片的宽和高 23 | sns.set(rc={'figure.figsize': (6, 4.5)}) 24 | 25 | fig = sns.heatmap(data_matrix, 26 | linewidth=0.5, 27 | # 将具体的数字写在对应的表格中，%.1f 指定了样式，在较复杂的样式中可以去掉 28 | annot=np.array(['%.1f' % point for point in np.array(data_matrix.ravel())[0]]).reshape(np.shape(data_matrix)), 29 | # 这里必须置空，否则会出现问题 30 | fmt='', 31 | yticklabels=["Extra Hard", "Hard", "Medium", "Easy"], 32 | # 如果 usetext=True, 这里可以使用 latex 语法比如 $\leq$ = < 33 | xticklabels=["BART", "$\leq$ Easy", "$\leq$ Medium", "$\leq$ Hard", "$\leq$ Extra Hard"], 34 | # cmap 决定了注意力图的色调 35 | cmap="YlGnBu", 36 | vmax=75.0, 37 | vmin=25.0) 38 | 39 | plt.ylabel("Question Difficulty Level in Downstream", labelpad=25) 40 | plt.xlabel("SQL Difficulty Level in Pre-training", labelpad=25) 41 | 42 | # 调整布局至合适的位置 43 | plt.tight_layout() 44 | # 保存文件 45 | plt.savefig('attention.pdf') 46 | -------------------------------------------------------------------------------- /matplotlib/code/bar_chart.py: -------------------------------------------------------------------------------- 1 | import matplotlib.pyplot as plt 2 | import numpy as np 3 | plt.rc('font', family='Times New Roman') # 字体改为Times New Roman 4 | 5 | # 输入统计数据 6 | x = ('1', '2', '3', '4', '5') 7 | y1 = [6, 7, 6, 1, 2] 8 | y2 = [9, 4, 4, 5, 6] 9 | 10 | bar_width = 0.3 # 条形宽度 11 | a = np.arange(len(x)) # bar1的横坐标 12 | b = a + bar_width # bar2横坐标 13 | 14 | # 使用两次 bar 函数画出两组条形图 15 | plt.bar(a, height=y1, width=bar_width, color='b', label='a') 16 | plt.bar(b, height=y2, width=bar_width, color='g', label='b') 17 | 18 | plt.legend() # 显示图例 19 | plt.xticks(a + bar_width / 2, x) # 设置x轴刻度的显示位置， a + bar_width/2 为横坐标轴刻度的位置 20 | plt.xlabel('x') # 纵坐标轴标题 21 | plt.ylabel('y') # 纵坐标轴标题 22 | plt.title('figure') # 图形标题 23 | 24 | plt.show() 25 | -------------------------------------------------------------------------------- /matplotlib/code/line_chart.py: -------------------------------------------------------------------------------- 1 | import matplotlib.pyplot as plt 2 | plt.rc('font',family='Times New Roman') #字体改为Times New Roman 3 | 4 | x = [1,2,4,8,16,32] #点的横坐标 5 | y1 = [16,22,44,56,78,91] #线1的纵坐标 6 | y2 = [53,67,82,90,95,97] #线2的纵坐标 7 | 8 | plt.plot(x,y1,'s-',color = 'r',label="LSTM") #s-:方形 9 | plt.plot(x,y2,'o-',color = 'g',label="BERT") #o-:圆形 10 | plt.xlabel("Training data") #横坐标名字 11 | plt.ylabel("Accuracy") #纵坐标名字 12 | plt.legend(loc = "best") #图例 13 | 14 | plt.show() -------------------------------------------------------------------------------- /matplotlib/code/scatter_chart.py: -------------------------------------------------------------------------------- 1 | import matplotlib.pyplot as plt 2 | import numpy as np 3 | 4 | 5 | N = 10 # 样本的数量 6 | x = np.random.rand(N) #类别1的样本横坐标 7 | y = np.random.rand(N) #类别1的样本纵坐标 8 | x2 = np.random.rand(N) #类别2的样本横坐标 9 | y2 = np.random.rand(N) #类别2的样本纵坐标 10 | x3 = np.random.rand(N) #类别3的样本横坐标 11 | y3 = np.random.rand(N) #类别3的样本纵坐标 12 | 13 | # x, y, scale = np.random.randn(3, 10) 14 | area = np.random.rand(N) * 1000 #控制样本的点大小 15 | fig = plt.figure() 16 | ax = plt.subplot() 17 | ax.scatter(x, y, s=area, alpha=0.5) #绘制类别1的样本 18 | ax.scatter(x2, y2, s=area, c='green', alpha=0.6) #绘制类别1的样本，修改点的颜色 19 | ax.scatter(x3, y3, s=area, c=area, marker='v', cmap='Reds', alpha=0.7) # 更换标记样式，另一种颜色的样式 20 | ax.set(title="This is a tutorial of scatter diagram") 21 | plt.show() -------------------------------------------------------------------------------- /matplotlib/imgs/category/attention.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/category/attention.png -------------------------------------------------------------------------------- /matplotlib/imgs/category/attention_distribution.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/category/attention_distribution.png -------------------------------------------------------------------------------- /matplotlib/imgs/category/bar_chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/category/bar_chart.png -------------------------------------------------------------------------------- /matplotlib/imgs/category/histogram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/category/histogram.png -------------------------------------------------------------------------------- /matplotlib/imgs/category/intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/category/intro.png -------------------------------------------------------------------------------- /matplotlib/imgs/category/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/category/line.png -------------------------------------------------------------------------------- /matplotlib/imgs/category/line_chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/category/line_chart.png -------------------------------------------------------------------------------- /matplotlib/imgs/category/scatter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/category/scatter.png -------------------------------------------------------------------------------- /matplotlib/imgs/category/scatter_matplotlab.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/category/scatter_matplotlab.jpg -------------------------------------------------------------------------------- /matplotlib/imgs/category/struct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/category/struct.png -------------------------------------------------------------------------------- /matplotlib/imgs/category/text_attention.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/category/text_attention.png -------------------------------------------------------------------------------- /matplotlib/imgs/icon/ai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/icon/ai.png -------------------------------------------------------------------------------- /matplotlib/imgs/icon/catalogue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/icon/catalogue.png -------------------------------------------------------------------------------- /matplotlib/imgs/icon/folders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/icon/folders.png -------------------------------------------------------------------------------- /matplotlib/imgs/icon/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/icon/heart.png -------------------------------------------------------------------------------- /matplotlib/imgs/icon/intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/icon/intro.png -------------------------------------------------------------------------------- /matplotlib/imgs/icon/motivation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/icon/motivation.png -------------------------------------------------------------------------------- /matplotlib/imgs/icon/notes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/icon/notes.png -------------------------------------------------------------------------------- /matplotlib/imgs/icon/organizer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/icon/organizer.png -------------------------------------------------------------------------------- /matplotlib/imgs/icon/resource.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/icon/resource.png -------------------------------------------------------------------------------- /matplotlib/imgs/notes/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/notes/1.png -------------------------------------------------------------------------------- /matplotlib/imgs/notes/1_step2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/notes/1_step2.png -------------------------------------------------------------------------------- /matplotlib/imgs/notes/2_step1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/notes/2_step1.jpg -------------------------------------------------------------------------------- /matplotlib/imgs/notes/2_step2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/notes/2_step2.jpg -------------------------------------------------------------------------------- /matplotlib/imgs/notes/attention_cmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/notes/attention_cmap.png -------------------------------------------------------------------------------- /matplotlib/imgs/notes/attention_distribution_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/notes/attention_distribution_1.jpg -------------------------------------------------------------------------------- /matplotlib/imgs/notes/attention_distribution_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/notes/attention_distribution_2.jpg -------------------------------------------------------------------------------- /matplotlib/imgs/notes/attention_distribution_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/notes/attention_distribution_3.jpg -------------------------------------------------------------------------------- /matplotlib/imgs/notes/attention_distribution_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/notes/attention_distribution_4.jpg -------------------------------------------------------------------------------- /matplotlib/imgs/notes/attention_distribution_full.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/notes/attention_distribution_full.jpg -------------------------------------------------------------------------------- /matplotlib/imgs/notes/plot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/notes/plot.jpg -------------------------------------------------------------------------------- /matplotlib/imgs/notes/tikzpicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/notes/tikzpicture.png -------------------------------------------------------------------------------- /matplotlib/imgs/notes/transformer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/notes/transformer.png -------------------------------------------------------------------------------- /matplotlib/imgs/profile/bei_li.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/profile/bei_li.jpg -------------------------------------------------------------------------------- /matplotlib/imgs/profile/libo_qin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/profile/libo_qin.jpg -------------------------------------------------------------------------------- /matplotlib/imgs/profile/qian_liu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/profile/qian_liu.jpg -------------------------------------------------------------------------------- /matplotlib/imgs/profile/shijue_huang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/profile/shijue_huang.jpg -------------------------------------------------------------------------------- /matplotlib/imgs/profile/yudi_zhang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/imgs/profile/yudi_zhang.jpg -------------------------------------------------------------------------------- /matplotlib/notes/attention.md: -------------------------------------------------------------------------------- 1 | # 如何绘制美妙的注意力矩阵可视化图 2 | 3 |
4 | 5 | 本章节主要介绍如何使用`matplotlib`和`seaborn`绘制注意力矩阵的可视化图。 故首先要引用依赖库如下: 6 | 7 | ```python 8 | import numpy as np 9 | import matplotlib.pyplot as plt 10 | import seaborn as sns 11 | ``` 12 | 13 | 如果还未安装上述库，可以通过以下安装指令安装: 14 | 15 | ```shell 16 | pip install seaborn 17 | ``` 18 | 19 | 接下来，首先让我们来初始化一个用于绘制注意力图的矩阵: 20 | 21 | ```python 22 | data_matrix = np.mat( 23 | [[27.5, 28.3, 32.5, 40.8, 42.5], 24 | [40.0, 42.6, 53.1, 58.8, 60.2], 25 | [34.4, 38.2, 56.2, 57.3, 56.9], 26 | [57.4, 63.9, 70.2, 70.2, 71.7]] 27 | ) 28 | ``` 29 | 30 | > 实际使用时也可以首先通过 `np.save(f, data_matrix)` 将自动计算得到的矩阵存储到文件 `f = open('data.npy', 'wb')` 中，在绘制脚本中使用 `np.load(open('data.npy', 'rb'))` 进行数据读取。 31 | 32 | 接下来，有些时候我们需要在注意力图的横轴或纵轴使用到Latex的相关语法如 `\textsc`，或者为了与论文中的字体风格更加匹配，可以引入如下定义 (前提是绘图环境中已经成功安装Latex，并配置好了相关的环境变量): 33 | 34 | ```python 35 | plt.rc('text', usetex=True) 36 | plt.rc('text.latex', preamble=r'\usepackage{lmodern}') 37 | ``` 38 | 39 | 接下来，直接使用以下代码进行注意力矩阵的绘制: 40 | 41 | ```python 42 | fig = sns.heatmap(data_matrix, 43 | linewidth=0.5, 44 | # 将具体的数字写在对应的表格中，%.1f 指定了样式，在较复杂的样式中可以去掉 45 | annot=np.array(['%.1f' % point for point in np.array(data_matrix.ravel())[0]]).reshape(np.shape(data_matrix)), 46 | # 这里必须置空，否则会出现问题 47 | fmt='', 48 | yticklabels=["Extra Hard", "Hard", "Medium", "Easy"], 49 | # 如果 usetext=True, 这里可以使用 latex 语法比如 $\leq$ = < 50 | xticklabels=["BART", "$\leq$ Easy", "$\leq$ Medium", "$\leq$ Hard", "$\leq$ Extra Hard"], 51 | vmax=75.0, 52 | vmin=25.0, 53 | # cmap 决定了注意力图的色调 54 | cmap="YlGnBu") 55 | ``` 56 | 57 | 在这里笔者解释一下每个选项的含义: 58 | - `np.array(data_matrix.ravel())[0]` 是为了将矩阵从二维变成一维，把文本依次排列在每个单元格上 59 | - 但当矩阵过大时，一般我们不会显示每个单元格内的具体数字，此时可以将 `annot` 该行去掉 60 | - `yticklabels` 是纵轴从下往上的标签列表，其长度需要与 `data_matrix` 行的数量一样 61 | - `xticklabels` 是横轴从左往右的标签列表，其长度需要与 `data_matrix` 列的数量一样 62 | - `linewidth` 是分隔单元格的线的宽度 63 | - `ymax` 和 `ymin` 分别指定了色系两端对应的值 64 | - `cmap` 是注意力图的色系，推荐以下选择 65 | 66 | 67 | 68 | 最后，给纵轴和横轴分别写上对应的标签: 69 | 70 | ```python 71 | plt.ylabel("Question Difficulty Level in Downstream", labelpad=25) 72 | plt.xlabel("SQL Difficulty Level in Pre-training", labelpad=25) 73 | ``` 74 | 75 | 即可调整布局并保存成用在论文中的格式: 76 | 77 | ```python 78 | # 调整布局至合适的位置 79 | plt.tight_layout() 80 | # 保存文件 81 | plt.savefig('attention.pdf') 82 | ``` 83 | -------------------------------------------------------------------------------- /matplotlib/notes/bar_chart.md: -------------------------------------------------------------------------------- 1 | # 如何绘制柱状图 2 | 3 |
4 | 5 | 本章节主要介绍如何使用`matplotlib`绘制柱状图。 故首先要引用依赖库如下: 6 | 7 | ```python 8 | import matplotlib.pyplot as plt 9 | import numpy as np 10 | ``` 11 | 12 | 如果还未安装上述库，可以通过以下安装指令安装: 13 | 14 | ```shell 15 | pip install matplotlib 16 | ``` 17 | 18 | 首先设置全局字体为Times New Roman: 19 | 20 | ```shell 21 | plt.rc('font', family='Times New Roman') 22 | ``` 23 | 24 | 接下来，首先让我们输入统计数据: 25 | 26 | ```python 27 | x = ('1', '2', '3', '4', '5') 28 | y1 = [6, 7, 6, 1, 2] 29 | y2 = [9, 4, 4, 5, 6] 30 | ``` 31 | 32 | - x表示横坐标数值 33 | - y1表示第一组条形图的纵坐标数值 34 | - y2表示第二组条形图的纵坐标数值 35 | 36 | 接下来，我们需要设置条形宽度，以及每组条形图的横坐标位置（因为有多组，需要进行偏移） 37 | 38 | ```python 39 | bar_width = 0.3 # 条形宽度 40 | a = np.arange(len(x)) # bar1的横坐标 41 | b = a + bar_width # bar2横坐标 42 | ``` 43 | 44 | 接下来，直接使用以下代码进行条形图绘制: 45 | 46 | ```python 47 | plt.bar(a, height=y1, width=bar_width, color='b', label='a') 48 | plt.bar(b, height=y2, width=bar_width, color='g', label='b') 49 | ``` 50 | 51 | 在这里笔者解释一下每个选项的含义: 52 | 53 | - `a` 和`b`是相应的横坐标 54 | - `height`设置每组条形图的高度，用纵坐标序列`y1`和`y2`赋值 55 | - `width` 是条形宽度 56 | - `color` 用于设置条形颜色，例如`'b'`表示蓝色blue，`'br`表示红色red 57 | - `label` 是每组条形图的标签名字 58 | 59 | 最后，绘制标签图例，并设置x轴刻度的显示位置（a + bar_width/2 为横坐标轴刻度的位置），然后设置给纵轴和横轴和整个图形分别写上对应的标签，即可显示出相应的柱状图 60 | 61 | ```python 62 | plt.legend() # 显示图例 63 | plt.xticks(a + bar_width / 2, x) # 设置x轴刻度的显示位置， a + bar_width/2 为横坐标轴刻度的位置 64 | plt.xlabel('x') # 纵坐标轴标题 65 | plt.ylabel('y') # 纵坐标轴标题 66 | plt.title('figure') # 图形标题 67 | plt.show() 68 | ``` 69 | 70 | -------------------------------------------------------------------------------- /matplotlib/notes/bar_chart.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/notes/bar_chart.pdf -------------------------------------------------------------------------------- /matplotlib/notes/line_chart.md: -------------------------------------------------------------------------------- 1 | # 如何绘制折线图 2 | 3 |
4 | 5 | 本章节主要介绍如何使用`matplotlib`绘制柱状图。 故首先要引用依赖库如下: 6 | 7 | ```python 8 | import matplotlib.pyplot as plt 9 | ``` 10 | 11 | 如果还未安装上述库，可以通过以下安装指令安装: 12 | 13 | ```shell 14 | pip install matplotlib 15 | ``` 16 | 17 | 首先设置全局字体为Times New Roman: 18 | 19 | ```shell 20 | plt.rc('font', family='Times New Roman') 21 | ``` 22 | 23 | 接下来，首先让我们输入统计数据: 24 | 25 | ```python 26 | x = [1,2,4,8,16,32] #点的横坐标 27 | y1 = [16,22,44,56,78,91] #线1的纵坐标 28 | y2 = [53,67,82,90,95,97] #线2的纵坐标 29 | ``` 30 | 31 | - x表示横坐标数值 32 | - y1表示第一组折线图的纵坐标数值 33 | - y2表示第二组折线图的纵坐标数值 34 | 35 | 接下来，直接使用以下代码进行折线图绘制: 36 | 37 | ```python 38 | plt.plot(x,y1,'s-',color = 'r',label="LSTM") #s-:方形 39 | plt.plot(x,y2,'o-',color = 'g',label="BERT") #o-:圆形 40 | ``` 41 | 42 | 在这里笔者解释一下每个选项的含义: 43 | 44 | - `x` 和`y1`是相应的横坐标和纵坐标 45 | - `-o`和`-s`用于设置折线图的mark形状，`s-`:方形，`o-`:圆形 46 | - `color` 用于设置条形颜色，例如`'g'`表示绿色green，`'r`表示红色red 47 | - `label` 是每组条形图的标签名字 48 | 49 | 最后，绘制标签图例，并设置给纵轴和横轴和整个图形分别写上对应的标签，即可显示出相应的折线图 50 | 51 | ```python 52 | plt.xlabel("Training data") #横坐标名字 53 | plt.ylabel("Accuracy") #纵坐标名字 54 | plt.legend(loc = "best") #图例 55 | 56 | plt.show() 57 | ``` 58 | 59 | -------------------------------------------------------------------------------- /matplotlib/notes/line_chart.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLNLP-World/Paper-Picture-Writing-Code/4092efa7b630afccb22f1c27370e945b464a556c/matplotlib/notes/line_chart.pdf -------------------------------------------------------------------------------- /matplotlib/notes/scatter_chart.md: -------------------------------------------------------------------------------- 1 | # 如何绘制折线图 2 | 3 |
4 | 5 | 本章节主要介绍如何使用`matplotlib`绘制柱状图。 故首先要引用依赖库如下: 6 | 7 | ```python 8 | import matplotlib.pyplot as plt 9 | import numpy as np 10 | ``` 11 | 12 | 如果还未安装上述库，可以通过以下安装指令安装: 13 | 14 | ```shell 15 | pip install matplotlib 16 | ``` 17 | 18 | 首先让我们输入统计数据: 19 | 20 | ```python 21 | N = 10 # 样本的数量 22 | x = np.random.rand(N) #类别1的样本横坐标 23 | y = np.random.rand(N) #类别1的样本纵坐标 24 | x2 = np.random.rand(N) #类别2的样本横坐标 25 | y2 = np.random.rand(N) #类别2的样本纵坐标 26 | x3 = np.random.rand(N) #类别3的样本横坐标 27 | y3 = np.random.rand(N) #类别3的样本纵坐标 28 | ``` 29 | 30 | - N表示样本数量 31 | - x,y表示第一组散点图的横、纵坐标数值 32 | - x2,y2表示第二组散点图的横、纵坐标数值 33 | - x2,y2表示第三组散点图的横、纵坐标数值 34 | 35 | 接下来，使用随机值控制样本点的大小: 36 | 37 | ```python 38 | area = np.random.rand(N) * 1000 #控制样本的点大小 39 | ``` 40 | 41 | 接下来，直接使用以下代码进行散点图绘制: 42 | 43 | ```python 44 | ax = plt.subplot() #创建画布 45 | ax.scatter(x, y, s=area, alpha=0.5) #绘制类别1的样本 46 | ax.scatter(x2, y2, s=area, c='green', alpha=0.6) #绘制类别1的样本，修改点的颜色 47 | ax.scatter(x3, y3, s=area, c=area, marker='v', cmap='Reds', alpha=0.7) # 更换标记样式，另一种颜色的样式 48 | ``` 49 | 50 | 在这里笔者解释一下每个选项的含义: 51 | 52 | - `x` 和`y`是相应的横坐标和纵坐标 53 | 54 | - `s`用于设置样本大小 55 | 56 | - `c` 用于设置颜色，默认蓝色’b’，其他可选例如`'green'`表示绿色 57 | 58 | - `alpha` 用于设置透明度，介于0-1之间，1不透明，0透明 59 | 60 | - `camp` 是色彩盘，可以使用默认的也可以使用自定义的，它实际上就是一个 三列的矩阵(或者说，shape 为 [N, 3]的 array ) 61 | 62 | - `marker` 用于设置标记样式 63 | 64 | 具体如下 65 | 66 | | 值 | 说明 | 67 | | :--------------------: | ---------------- | 68 | | `'o'` | 圆圈 | 69 | | `'+'` | 加号 | 70 | | `'*'` | 星号 | 71 | | `'.'` | 点 | 72 | | `'x'` | 叉号 | 73 | | `'square'` 或 `'s'` | 方形 | 74 | | `'diamond'` 或 `'d'` | 菱形 | 75 | | `'^'` | 上三角 | 76 | | `'v'` | 下三角 | 77 | | `'>'` | 右三角 | 78 | | `'<'` | 左三角 | 79 | | `'pentagram'` 或 `'p'` | 五角星（五角形） | 80 | | 'hexagram'` 或 `'h' | 六角星（六角形） | 81 | | `'none'` | 无标记 | 82 | 83 | 最后，设置图形的标签，即可显示出相应的折线图 84 | 85 | ```python 86 | ax.set(title="This is a tutorial of scatter diagram") 87 | plt.show() 88 | ``` 89 | 90 | --------------------------------------------------------------------------------