Skip to content

Instantly share code, notes, and snippets.

@fabiovalse

fabiovalse/README.md

Last active February 3, 2017 15:16
Show Gist options
  • Save fabiovalse/aeec64f31496e49dac23469ab7e44cbe to your computer and use it in GitHub Desktop.
Save fabiovalse/aeec64f31496e49dac23469ab7e44cbe to your computer and use it in GitHub Desktop.
Download ZIP
Chinese Radicals
Raw
README.md

The 214 chinese radicals are shown as tiles. The radical is the black grapheme in the tile center while its simplification, when available, is shown in red. The top left digit denotes the number of the radical while the top right one the stroke counts needed for drawing the grapheme.

The stroke count has been also encoded using the tile color. Two alternated grays have been used in order to group radicals having the same stroke count.

For each radical its corresponding english name and pinyin conversion (within brackets) are placed below the grapheme.

Data have been taken from yellowbridge while pinyin with tones have been converted to toned marks using the Javascript pinyin-converter.

Raw
data.csv
number radical variants simplifiedradical pinyin english strokecount
1 一 yi1 one 1
2 丨 gun3 line 1
4 丿 乀 (fu2), 乁(yi2) pie3 slash 1
5 乙 乚 (yin3), 乛 yi4 second 1
6 亅 jue2 hook 1
3 丶 zhu3 dot 1
7 二 er4 two 2
8 亠 tou2 lid 2
9 人 亻 ren2 man 2
10 儿 er2 legs 2
11 入 ru4 enter 2
12 八 丷 ba1 eight 2
13 冂 jiong3 down box 2
14 冖 mi4 over 2
15 冫 bing1 ice 2
16 几 ji1 table 2
17 凵 qu3 open box 2
18 刀 刂 dao1 knife 2
19 力 li4 power 2
20 勹 bao1 wrap 2
21 匕 bi3 spoon 2
22 匚 fang1 right open box 2
23 匸 xi3 hiding enclo­sure 2
24 十 shi2 ten 2
25 卜 bu3 mysti­cism 2
26 卩 jie2 seal 2
27 厂 han4 cliff 2
28 厶 si1 private 2
29 又 you4 again 2
31 囗 wei2 enclo­sure 3
32 土 tu3 earth 3
33 士 shi4 scholar 3
34 夂 zhi3 (top) go 3
35 夊 sui1 (bot­tom) go slowly 3
36 夕 xi1 evening 3
37 大 da4 big 3
38 女 nü3 woman 3
39 子 zi3 child 3
40 宀 mian2 roof 3
41 寸 cun4 inch 3
42 小 xiao3 small 3
43 尢 尣 wang1 lame 3
44 尸 shi1 corpse 3
45 屮 che4 sprout 3
46 山 shan1 moun­tain 3
47 川 巛, 巜 (gui4) chuan1 river 3
48 工 gong1 work 3
49 己 ji3 oneself 3
50 巾 jin1 turban 3
51 干 gan1 dry 3
52 幺 yao1 short thread 3
30 口 kou3 mouth 3
53 广 guan3 dotted cliff 3
54 廴 yin3 long stride 3
55 廾 gong3 two hands 3
56 弋 yi4 shoot 3
57 弓 gong1 bow 3
58 彐 彑 ji4 snout 3
59 彡 shan1 bristle 3
60 彳 chi4 step 3
61 心 忄 xin1 heart 4
62 戈 ge1 halberd 4
63 戶 hu4 door 4
64 手 扌 shou3 hand 4
65 支 zhi1 branch 4
66 攴 攵 pu1 rap 4
67 文 wen2 script 4
68 斗 dou3 dipper 4
69 斤 jin1 axe 4
70 方 fang1 square 4
71 无 wu2 not 4
72 日 ri4 sun 4
73 曰 yue1 say 4
74 月 yue4 moon 4
75 木 mu4 tree 4
76 欠 qian4 lack 4
77 止 zhi3 stop 4
79 殳 shu1 weapon 4
80 毋 wu2 do not 4
81 比 bi3 compare 4
82 毛 mao2 fur 4
83 氏 shi4 clan 4
84 气 qi4 steam 4
85 水 氵 shui3 water 4
86 火 灬 huo3 fire 4
87 爪 爫 zhao3 claw 4
88 父 fu4 father 4
89 爻 yao2 double x 4
90 爿 丬 pan2, qiang2 half tree trunk 4
91 片 pian4 slice 4
92 牙 ya2 fang 4
93 牛 牜 niu2 cow 4
94 犬 犭 quan3 dog 4
78 歹 dai3 death 4
95 玄 xuan2 pro­found 5
96 玉 王 yu4 jade 5
97 瓜 gua1 melon 5
98 瓦 wa3 tile 5
99 甘 gan1 sweet 5
100 生 sheng1 life 5
101 用 yong4 use 5
102 田 tian2 field 5
103 疋 pi3 bolt of cloth 5
104 疒 chuang2 sick­ness 5
105 癶 bo4 dotted tent 5
106 白 bai2 white 5
107 皮 pi2 skin 5
108 皿 min3 dish 5
109 目 mu4 eye 5
110 矛 mao2 spear 5
111 矢 shi3 arrow 5
112 石 shi2 stone 5
113 示 礻 shi4 spirit 5
114 禸 rou3 track 5
115 禾 he2 grain 5
116 穴 xue4 cave 5
117 立 li4 stand 5
133 至 zhi4 arrive 6
118 竹 ⺮ zhu2 bamboo 6
121 缶 fou3 jar 6
122 网 罒 wang3 net 6
123 羊 yang2 sheep 6
124 羽 yu3 feather 6
125 老 lao3 old 6
126 而 er2 and 6
127 耒 lei3 plow 6
128 耳 er3 ear 6
129 聿 yu4 brush 6
130 肉 rou4 meat 6
131 臣 chen2 minis­ter 6
132 自 zi4 self 6
120 糸 纟 mi4 silk 6
134 臼 jiu4 mortar 6
135 舌 she2 tongue 6
136 舛 chuan3 oppose 6
137 舟 zhou1 boat 6
138 艮 gen4 stop­ping 6
139 色 se4 color 6
140 艸 艹 cao3 grass 6
141 虍 hu1 tiger 6
142 虫 chong2 insect 6
143 血 xue3 blood 6
144 行 xing2 walk enclo­sure 6
145 衣 衤 yi1 clothes 6
146 襾 覀 ya4 west 6
119 米 mi3 rice 6
147 見 见 jian4 see 7
148 角 jue2 horn 7
149 言 讠 yan2 speech 7
150 谷 gu3 valley 7
151 豆 dou4 bean 7
152 豕 shi3 pig 7
153 豸 zhi4 badger 7
154 貝 贝 bei4 shell 7
155 赤 chi4 red 7
156 走 zou3 run 7
157 足 ⻊ zu2 foot 7
158 身 shen1 body 7
159 車 车 che1 cart 7
160 辛 xin1 bitter 7
161 辰 chen2 morning 7
162 辵 辶 chuo4 walk 7
163 邑 阝 (right) yi4 city 7
164 酉 you3 wine 7
165 釆 bian4 distin­guish 7
166 里 li3 village 7
167 金 jin1 gold 8
168 長 长 chang2 long 8
170 阜 阝 (left) fu4 mound 8
171 隶 dai4 slave 8
172 隹 zhui1 short tailed bird 8
173 雨 yu3 rain 8
174 青 qing1 blue 8
175 非 fei1 wrong 8
169 門 门 men2 gate 8
182 風 风 feng1 wind 9
177 革 ge2 leather 9
179 韭 jiu3 leek 9
180 音 yin1 sound 9
181 頁 页 ye4 leaf 9
176 面 mian4 face 9
183 飛 飞 fei1 fly 9
184 食 飠 饣 shi2 eat 9
185 首 shou3 head 9
186 香 xiang1 fragrant 9
178 韋 韦 wei2 tanned leather 9
187 馬 马 ma3 horse 10
188 骨 gu3 bone 10
189 高 gao1 tall 10
190 髟 biao1 hair 10
191 鬥 dou4 fight 10
192 鬯 chang4 sacri­ficial wine 10
193 鬲 li4 caul­dron 10
194 鬼 gui3 ghost 10
195 魚 鱼 yu2 fish 11
197 鹵 lu3 salt 11
198 鹿 lu4 deer 11
199 麥 麦 mai4 wheat 11
200 麻 ma2 hemp 11
196 鳥 鸟 niao3 bird 11
201 黃 huang2 yellow 12
202 黍 shu3 millet 12
203 黑 hei1 black 12
204 黹 zhi3 embroi­dery 12
205 黽 黾 min3 frog 13
206 鼎 ding3 tripod 13
207 鼓 gu3 drum 13
208 鼠 鼡 shu3 rat 13
209 鼻 bi2 nose 14
210 齊 齐 qi2 even 14
211 齒 齿 chi3 tooth 15
212 龍 龙 long2 dragon 16
213 龜 龟 gui1 turtle 16
214 龠 yue4 flute 17
Raw
index.coffee
radical_component =
props:
value:
type: Object
required: true
computed:
pinyin: () ->
PinyinConverter.convert @value.pinyin
template: '''
<div class="radical">
<div class="numbers">
<div class="number">{{value.number}}</div>
<div class="number">{{value.strokecount}}</div>
</div>
<div class="characters">
<div class="character">{{value.radical}}</div>
<div class="character simplified">{{value.simplifiedradical}}</div>
</div>
<div class="text">{{value.english}}</div>
<div class="text">({{pinyin}})</div>
</div>
'''
radicals_component =
props:
value:
type: Array
required: true
components:
'radical': radical_component
template: '''
<div class="radicals">
<radical v-for="item in value" :value="item" :class="'_'+item.strokecount%2"></radical>
</div>
'''
app = new Vue
el: '#app'
data:
data: []
components:
'radicals': radicals_component
mounted: () ->
d3.csv 'data.csv', (data) =>
@data = data.sort (a,b) -> a.number - b.number
Raw
index.css
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#app {
width: 100%;
height: 100%;
overflow: scroll;
}
.radicals {
display: flex;
flex-wrap: wrap;
margin: 5px;
}
.radical {
width: 85px;
margin: 1px;
padding: 1px;
}
.radical:hover {
background: #FFF;
}
.radical > * {
pointer-events: none;
}
.radical .numbers {
display: flex;
justify-content: space-between;
}
.radical .number, .radical .strokecount {
font-size: 8px;
}
.radical .strokecount {
text-align: right;
}
.radical .characters {
display: flex;
justify-content: center;
align-items: baseline;
}
.radical .character {
font-size: 30px;
}
.radical .simplified {
font-size: 20px;
color: #e41a1c;
}
.radical .text {
text-align: center;
font-size: 12px;
}
._0 {
background: #e2e2e2;
}
._1 {
background: #f2f2f2;
}
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chinese Radicals</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="pinyin_converter.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
<radicals :value="data"></radicals>
</div>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
// Generated by CoffeeScript 1.10.0
(function() {
var app, radical_component, radicals_component;
radical_component = {
props: {
value: {
type: Object,
required: true
}
},
computed: {
pinyin: function() {
return PinyinConverter.convert(this.value.pinyin);
}
},
template: '<div class="radical">\n <div class="numbers">\n <div class="number">{{value.number}}</div>\n <div class="number">{{value.strokecount}}</div>\n </div>\n <div class="characters">\n <div class="character">{{value.radical}}</div>\n <div class="character simplified">{{value.simplifiedradical}}</div>\n </div>\n <div class="text">{{value.english}}</div>\n <div class="text">({{pinyin}})</div>\n</div>'
};
radicals_component = {
props: {
value: {
type: Array,
required: true
}
},
components: {
'radical': radical_component
},
template: '<div class="radicals">\n <radical v-for="item in value" :value="item" :class="\'_\'+item.strokecount%2"></radical>\n</div>'
};
app = new Vue({
el: '#app',
data: {
data: []
},
components: {
'radicals': radicals_component
},
mounted: function() {
return d3.csv('data.csv', (function(_this) {
return function(data) {
return _this.data = data.sort(function(a, b) {
return a.number - b.number;
});
};
})(this));
}
});
}).call(this);
Raw
pinyin_converter.js
// Generated by CoffeeScript 1.9.2
/*
PinyinConverter by David Chanin and Jen Liu @quizlet 2013
Inspired by http://stackoverflow.com/questions/1598856/convert-numbered-to-accentuated-pinyin/5607888#5607888
Authors: David Chanin and Jen Liu
Github: chanind
email: dchanin@quizlet.com
*/
(function() {
var PinyinConverter;
PinyinConverter = {
pinyinRegex: /(shuang|chuang|zhuang|xiang|qiong|shuai|niang|guang|sheng|kuang|shang|jiong|huang|jiang|shuan|xiong|zhang|zheng|zhong|zhuai|zhuan|qiang|chang|liang|chuan|cheng|chong|chuai|hang|peng|chuo|piao|pian|chua|ping|yang|pang|chui|chun|chen|chan|chou|chao|chai|zhun|mang|meng|weng|shai|shei|miao|zhui|mian|yong|ming|wang|zhuo|zhua|shao|yuan|bing|zhen|fang|feng|zhan|zhou|zhao|zhei|zhai|rang|suan|reng|song|seng|dang|deng|dong|xuan|sang|rong|duan|cuan|cong|ceng|cang|diao|ruan|dian|ding|shou|xing|zuan|jiao|zong|zeng|zang|jian|tang|teng|tong|bian|biao|shan|tuan|huan|xian|huai|tiao|tian|hong|xiao|heng|ying|jing|shen|beng|kuan|kuai|nang|neng|nong|juan|kong|nuan|keng|kang|shua|niao|guan|nian|ting|shuo|guai|ning|quan|qiao|shui|gong|geng|gang|qian|bang|lang|leng|long|qing|ling|luan|shun|lian|liao|zhi|lia|liu|qin|lun|lin|luo|lan|lou|qiu|gai|gei|gao|gou|gan|gen|lao|lei|lai|que|gua|guo|nin|gui|niu|nie|gun|qie|qia|jun|kai|kei|kao|kou|kan|ken|qun|nun|nuo|xia|kua|kuo|nen|kui|nan|nou|kun|jue|nao|nei|hai|hei|hao|hou|han|hen|nai|rou|xiu|jin|hua|huo|tie|hui|tun|tui|hun|tuo|tan|jiu|zai|zei|zao|zou|zan|zen|eng|tou|tao|tei|tai|zuo|zui|xin|zun|jie|jia|run|diu|cai|cao|cou|can|cen|die|dia|xue|rui|cuo|cui|dun|cun|cin|ruo|rua|dui|sai|sao|sou|san|sen|duo|den|dan|dou|suo|sui|dao|sun|dei|zha|zhe|dai|xun|ang|ong|wai|fen|fan|fou|fei|zhu|wei|wan|min|miu|mie|wen|men|lie|chi|cha|che|man|mou|mao|mei|mai|yao|you|yan|chu|pin|pie|yin|pen|pan|pou|pao|shi|sha|she|pei|pai|yue|bin|bie|yun|nüe|lve|shu|ben|ban|bao|bei|bai|lüe|nve|ren|ran|rao|xie|re|ri|si|su|se|ru|sa|cu|ce|ca|ji|ci|zi|zu|ze|za|hu|he|ha|ju|ku|ke|qi|ka|gu|ge|ga|li|lu|le|qu|la|ni|xi|nu|ne|na|ti|tu|te|ta|xu|di|du|de|bo|lv|ba|ai|ei|ao|ou|an|en|er|da|wu|wa|wo|fu|fo|fa|nv|mi|mu|yi|ya|ye|me|mo|ma|pi|pu|po|yu|pa|bi|nü|bu|lü|e|o|a)r?[1-5]/gi,
vowels: {
'a*': '0',
'e*': '1',
'i*': '2',
'o*': '3',
'u*': '4',
'ü*': '5',
'A*': '6',
'E*': '7',
'I*': '8',
'O*': '9',
'U*': '10',
'Ü*': '11'
},
pinyin: {
1: ['ā', 'ē', 'ī', 'ō', 'ū', 'ǖ', 'Ā', 'Ē', 'Ī', 'Ō', 'Ū', 'Ǖ'],
2: ['á', 'é', 'í', 'ó', 'ú', 'ǘ', 'Á', 'É', 'Í', 'Ó', 'Ú', 'Ǘ'],
3: ['ǎ', 'ě', 'ǐ', 'ǒ', 'ǔ', 'ǚ', 'Ǎ', 'Ě', 'Ǐ', 'Ǒ', 'Ǔ', 'Ǚ'],
4: ['à', 'è', 'ì', 'ò', 'ù', 'ǜ', 'À', 'È', 'Ì', 'Ò', 'Ù', 'Ǜ'],
5: ['a', 'e', 'i', 'o', 'u', 'ü', 'A', 'E', 'I', 'O', 'U', 'Ü']
},
convert: function(string) {
var j, len, match, matches, replacement;
matches = string.match(this.pinyinRegex);
if (!matches) {
return string;
}
for (j = 0, len = matches.length; j < len; j++) {
match = matches[j];
replacement = this.getReplacement(match);
string = string.replace(match, replacement);
}
return string;
},
getReplacement: function(match) {
var accentMap, accentedVowelChar, base, replacedWord, tone, vowel, vowelChar, vowelNum, word;
accentMap = this.getAccentMap();
tone = match.slice(-1);
word = match.slice(0, -1).replace('v', 'ü').replace('V', 'Ü');
for (base in accentMap) {
vowel = accentMap[base];
if (word.indexOf(base) >= 0) {
vowelChar = vowel.match(/.\*/)[0];
vowelNum = this.vowels[vowelChar];
accentedVowelChar = this.pinyin[tone.toString()][vowelNum];
replacedWord = word.replace(base, vowel).replace(vowelChar, accentedVowelChar);
return replacedWord;
}
}
return match;
},
getAccentMap: function() {
var base, i, j, len, nostars, ref, stars, starsArray;
if (!this.accentMap) {
stars = 'a*i a*o e*i ia* ia*o ie* io* iu* ' + 'A*I A*O E*I IA* IA*O IE* IO* IU* ' + 'o*u ua* ua*i ue* ui* uo* üe* ' + 'O*U UA* UA*I UE* UI* UO* ÜE* ' + 'A* E* I* O* U* Ü* ' + 'a* e* i* o* u* ü*';
nostars = stars.replace(/\*/g, '');
starsArray = stars.split(' ');
this.accentMap = {};
ref = nostars.split(' ');
for (i = j = 0, len = ref.length; j < len; i = ++j) {
base = ref[i];
this.accentMap[base] = starsArray[i];
}
}
return this.accentMap;
}
};
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
return define(factory);
} else if (typeof exports === 'object') {
return module.exports = factory();
} else {
return root.PinyinConverter = factory();
}
})(this, function() {
return PinyinConverter;
});
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment