Chinese dictionaries have organized their thousands of characters with the radical system for the last few hundred years. In this visualization we lay out all 214 standard radicals. Clicking on one will rapidly overlay all the characters with that radical.
This visualization is showing characters from about 20,000 of the most commonly used CJK characters
###The data The data is powered by the Unicode Unihan database. It was much easier to work with thanks to the Chinese Character Web API
An excellent example of looking up Chinese characters by their radical: http://hanzi.hemiola.com/
How does typing in Chinese work?
Simplified characters by radical
forked from enjalot‘s block: 中文: simplified characters
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
body {
margin: 0;
position: fixed;
top: 0; left: 0;
width: 960px;
height: 500px;
}
.char {
font-size: 23px;
text-align: center;
position:absolute;
bottom:15px;
right: 220px;
color: white;
}
.progress {
position:absolute;
bottom: 5px;
left: 210px;
height: 5px;
width: 530px;
border: 1px solid gray;
}
.marker {
width: 5px;
height: 5px;
background-color: white;
}
canvas {
width: 100%;
height: 100%;
}
.radical {
font-size: 23px;
margin: 1px;
font-family: "Times";
border-bottom: 1px solid black;
}
.radicals-left {
width: 200px;
height: 100%;
position:absolute;
top:5px; left: 10px;
}
.radicals-left .radical {
float:left;
}
.radicals-right {
width: 200px;
height: 100%;
position:absolute;
top:5px; right: 10px;
}
.radicals-right .radical {
float:right;
}
</style>
<body>
<canvas></canvas>
<div class="char">中</div>
<div class="radicals-left"></div>
<div class="radicals-right"></div>
<div class="progress">
<div class="marker"></div>
</div>
<script>
var bbox = document.body.getBoundingClientRect();
var width = bbox.width;
var height = bbox.height;
var duration = 100;
var bgColor = "#10131d";
var fontSize = height/1.1;
var radicalColors = d3.scale.linear()
.range(["#919191", "#ffffff"])
.interpolate(d3.interpolateRgb)
var canvas = d3.select("canvas").node();
var ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "lighter";
ctx.font = fontSize/3.3 + "px Times";
ctx.textAlign = "center";
d3.select("body").style("background-color", bgColor);
var char = d3.select(".char")
var marker = d3.select(".marker")
// we want to change these when someone clicks on the radical
var start;
var index;
var radical = "稣";
var data;
var fraction
var characters;
function go() {
ctx.clearRect(0, 0, width, height);
start = Date.now();
index = 0;
var c;
data = [];
for(var i = 0; i < characters.length; i++) {
c = characters[i];
if(c.r === radical) data.push(c);
};
fraction = 1/data.length;
if(fraction < 0.004) fraction = 0.004;
if(fraction > 0.2) fraction = 0.2;
console.log("fraction", fraction)
char.text(radical)
d3.selectAll("div.radical")
.style("border-bottom", "1px solid black")
.filter(function(r) { return r.string === radical })
.style("border-bottom", "1px solid white")
}
var rlookup = {};
d3.json("radicals.json", function(err, radicals) {
console.log("radical", radicals[0]);
radicals.forEach(function(r) {
r.actualCount = 0;
rlookup[r.string] = r;
})
d3.json("traditional.json", function(err, chars){
characters = chars;
console.log("character", chars[0])
var c, r;
var maxCount = 0;
for(var i = 0; i < characters.length; i++) {
c = characters[i];
r = rlookup[c.r]
r.actualCount++;
if(r.actualCount > maxCount) maxCount = r.actualCount;
}
radicalColors.domain([0, maxCount]);
var left = radicals.slice(0, 107)
var right = radicals.slice(107)
d3.select(".radicals-left").selectAll("div.radical")
.data(left)
.enter().append("div").classed("radical", true)
.text(function(d) { return d.string })
.style("color", function(d) { return radicalColors(d.actualCount) })
.filter(function(r) { return r.actualCount })
.style("text-shadow", "0 0 0.2em #b6b9b6")
.style("cursor", "pointer")
.on("click", function(d) {
radical = d.string;
go();
d3.select(this).style("border-bottom", "1px solid white");
})
d3.select(".radicals-right").selectAll("div.radical")
.data(right)
.enter().append("div").classed("radical", true)
.text(function(d) { return d.string })
.style("color", function(d) { return radicalColors(d.actualCount) })
.filter(function(r) { return r.actualCount })
.style("text-shadow", "0 0 0.2em #b6b9b6")
.style("cursor", "pointer")
.on("click", function(d) {
radical = d.string;
go();
})
go();
//timer related
start = Date.now();
index = 0;
d3.timer(function(elapsed) {
var now = Date.now(), duration = now - start;
if (duration >= duration) {
start = now;
if(!data[index]) { return false; }
char.text(data[index].c);
ctx.fillStyle = "rgba(255, 255, 255, " + fraction + ")"
ctx.fillText(data[index].c, 150,115);
}
marker.style("width", 530 * (index+1)/data.length + "px");
if(++index >= data.length) { return false;};
})
})
})
</script>
</body>[{"string":"\u4e00","radical":"1","count":"42"},{"string":"\u4e28","radical":"2","count":"13"},{"string":"\u4e36","radical":"3","count":"9"},{"string":"\u4e3f","radical":"4","count":"27"},{"string":"\u4e59","radical":"5","count":"43"},{"string":"\u4e85","radical":"6","count":"7"},{"string":"\u4e8c","radical":"7","count":"19"},{"string":"\u4ea0","radical":"8","count":"22"},{"string":"\u4eba","radical":"9","count":"642"},{"string":"\u513f","radical":"10","count":"39"},{"string":"\u5165","radical":"11","count":"7"},{"string":"\u516b","radical":"12","count":"23"},{"string":"\u5182","radical":"13","count":"19"},{"string":"\u5196","radical":"14","count":"21"},{"string":"\u4e60","radical":"15","count":"52"},{"string":"\u5160","radical":"16","count":"19"},{"string":"\u51f5","radical":"17","count":"10"},{"string":"\u5200","radical":"18","count":"150"},{"string":"\u529b","radical":"19","count":"94"},{"string":"\u52f9","radical":"20","count":"28"},{"string":"\u5315","radical":"21","count":"8"},{"string":"\u531a","radical":"22","count":"31"},{"string":"\u5338","radical":"23","count":"9"},{"string":"\u4e27","radical":"24","count":"27"},{"string":"\u535c","radical":"25","count":"12"},{"string":"\u516f","radical":"26","count":"26"},{"string":"\u5382","radical":"27","count":"53"},{"string":"\u517f","radical":"28","count":"16"},{"string":"\u53c8","radical":"29","count":"29"},{"string":"\u4eb8","radical":"30","count":"742"},{"string":"\u56d7","radical":"31","count":"67"},{"string":"\u571f","radical":"32","count":"448"},{"string":"\u58eb","radical":"33","count":"23"},{"string":"\u51e6","radical":"34","count":"10"},{"string":"\u5909","radical":"35","count":"11"},{"string":"\u5915","radical":"36","count":"17"},{"string":"\u4e54","radical":"37","count":"77"},{"string":"\u5626","radical":"38","count":"476"},{"string":"\u5b50","radical":"39","count":"49"},{"string":"\u5b80","radical":"40","count":"118"},{"string":"\u5bf8","radical":"41","count":"22"},{"string":"\u53bc","radical":"42","count":"23"},{"string":"\u5c22","radical":"43","count":"20"},{"string":"\u5c38","radical":"44","count":"52"},{"string":"\u5c6e","radical":"45","count":"3"},{"string":"\u57ca","radical":"46","count":"357"},{"string":"\u5ddb","radical":"47","count":"10"},{"string":"\u5de5","radical":"48","count":"10"},{"string":"\u5df1","radical":"49","count":"11"},{"string":"\u5dfe","radical":"50","count":"114"},{"string":"\u5e72","radical":"51","count":"9"},{"string":"\u4e61","radical":"52","count":"6"},{"string":"\u5e7f","radical":"53","count":"116"},{"string":"\u5ef4","radical":"54","count":"8"},{"string":"\u5efe","radical":"55","count":"13"},{"string":"\u5f0b","radical":"56","count":"10"},{"string":"\u5f13","radical":"57","count":"60"},{"string":"\u520d","radical":"58","count":"18"},{"string":"\u5f61","radical":"59","count":"19"},{"string":"\u5f73","radical":"60","count":"81"},{"string":"\u53af","radical":"61","count":"579"},{"string":"\u6208","radical":"62","count":"47"},{"string":"\u6236","radical":"63","count":"21"},{"string":"\u624b","radical":"64","count":"738"},{"string":"\u652f","radical":"65","count":"4"},{"string":"\u6534","radical":"66","count":"82"},{"string":"\u6587","radical":"67","count":"15"},{"string":"\u6597","radical":"68","count":"12"},{"string":"\u65a4","radical":"69","count":"21"},{"string":"\u65b9","radical":"70","count":"39"},{"string":"\u65e0","radical":"71","count":"5"},{"string":"\u5c21","radical":"72","count":"272"},{"string":"\u66f0","radical":"73","count":"21"},{"string":"\u6708","radical":"74","count":"30"},{"string":"\u551c","radical":"75","count":"1015"},{"string":"\u6b20","radical":"76","count":"66"},{"string":"\u6b62","radical":"77","count":"21"},{"string":"\u6b79","radical":"78","count":"59"},{"string":"\u6bb3","radical":"79","count":"24"},{"string":"\u4e78","radical":"80","count":"10"},{"string":"\u6bd4","radical":"81","count":"6"},{"string":"\u6bdb","radical":"82","count":"52"},{"string":"\u6c0f","radical":"83","count":"5"},{"string":"\u6c14","radical":"84","count":"31"},{"string":"\u51fc","radical":"85","count":"1073"},{"string":"\u52f2","radical":"86","count":"446"},{"string":"\u722a","radical":"87","count":"11"},{"string":"\u7236","radical":"88","count":"5"},{"string":"\u723b","radical":"89","count":"4"},{"string":"\u4e2c","radical":"90","count":"10"},{"string":"\u7247","radical":"91","count":"18"},{"string":"\u7259","radical":"92","count":"2"},{"string":"\u725b","radical":"93","count":"79"},{"string":"\u72ac","radical":"94","count":"216"},{"string":"\u7384","radical":"95","count":"5"},{"string":"\u7389","radical":"96","count":"337"},{"string":"\u74dc","radical":"97","count":"10"},{"string":"\u74e6","radical":"98","count":"50"},{"string":"\u7518","radical":"99","count":"6"},{"string":"\u751f","radical":"100","count":"9"},{"string":"\u7528","radical":"101","count":"7"},{"string":"\u5841","radical":"102","count":"89"},{"string":"\u758b","radical":"103","count":"7"},{"string":"\u7592","radical":"104","count":"222"},{"string":"\u7676","radical":"105","count":"7"},{"string":"\u7560","radical":"106","count":"50"},{"string":"\u76ae","radical":"107","count":"17"},{"string":"\u76bf","radical":"108","count":"48"},{"string":"\u715b","radical":"109","count":"235"},{"string":"\u77db","radical":"110","count":"7"},{"string":"\u77e2","radical":"111","count":"17"},{"string":"\u77f3","radical":"112","count":"320"},{"string":"\u793a","radical":"113","count":"125"},{"string":"\u6b76","radical":"114","count":"7"},{"string":"\u79be","radical":"115","count":"179"},{"string":"\u7a74","radical":"116","count":"86"},{"string":"\u4ea7","radical":"117","count":"48"},{"string":"\u5284","radical":"118","count":"374"},{"string":"\u7c73","radical":"119","count":"130"},{"string":"\u7cf8","radical":"120","count":"575"},{"string":"\u7f36","radical":"121","count":"25"},{"string":"\u5570","radical":"122","count":"58"},{"string":"\u7f8a","radical":"123","count":"52"},{"string":"\u7fbd","radical":"124","count":"67"},{"string":"\u8001","radical":"125","count":"11"},{"string":"\u800c","radical":"126","count":"6"},{"string":"\u8012","radical":"127","count":"32"},{"string":"\u8033","radical":"128","count":"73"},{"string":"\u7c9b","radical":"129","count":"11"},{"string":"\u670a","radical":"130","count":"347"},{"string":"\u5367","radical":"131","count":"8"},{"string":"\u81ea","radical":"132","count":"9"},{"string":"\u81f3","radical":"133","count":"9"},{"string":"\u81fc","radical":"134","count":"15"},{"string":"\u654c","radical":"135","count":"17"},{"string":"\u821b","radical":"136","count":"4"},{"string":"\u821f","radical":"137","count":"77"},{"string":"\u826e","radical":"138","count":"3"},{"string":"\u8272","radical":"139","count":"6"},{"string":"\u5179","radical":"140","count":"969"},{"string":"\u864d","radical":"141","count":"30"},{"string":"\u866b","radical":"142","count":"464"},{"string":"\u8840","radical":"143","count":"12"},{"string":"\u884c","radical":"144","count":"22"},{"string":"\u8863","radical":"145","count":"276"},{"string":"\u897e","radical":"146","count":"13"},{"string":"\u898b","radical":"147","count":"67"},{"string":"\u89d2","radical":"148","count":"46"},{"string":"\u8a00","radical":"149","count":"564"},{"string":"\u8c37","radical":"150","count":"14"},{"string":"\u8c46","radical":"151","count":"14"},{"string":"\u8c55","radical":"152","count":"35"},{"string":"\u8c78","radical":"153","count":"37"},{"string":"\u8c9d","radical":"154","count":"190"},{"string":"\u8d64","radical":"155","count":"12"},{"string":"\u8d70","radical":"156","count":"67"},{"string":"\u8db3","radical":"157","count":"247"},{"string":"\u8eab","radical":"158","count":"31"},{"string":"\u519b","radical":"159","count":"206"},{"string":"\u8f9b","radical":"160","count":"18"},{"string":"\u8fb0","radical":"161","count":"5"},{"string":"\u8fb5","radical":"162","count":"216"},{"string":"\u9091","radical":"163","count":"182"},{"string":"\u9149","radical":"164","count":"123"},{"string":"\u91c6","radical":"165","count":"6"},{"string":"\u91cc","radical":"166","count":"5"},{"string":"\u91d1","radical":"167","count":"932"},{"string":"\u9577","radical":"168","count":"9"},{"string":"\u9580","radical":"169","count":"155"},{"string":"\u961c","radical":"170","count":"153"},{"string":"\u96b6","radical":"171","count":"3"},{"string":"\u96b9","radical":"172","count":"45"},{"string":"\u96e8","radical":"173","count":"105"},{"string":"\u9751","radical":"174","count":"13"},{"string":"\u8f88","radical":"175","count":"5"},{"string":"\u9762","radical":"176","count":"6"},{"string":"\u9769","radical":"177","count":"98"},{"string":"\u97cb","radical":"178","count":"33"},{"string":"\u97ed","radical":"179","count":"6"},{"string":"\u97f3","radical":"180","count":"15"},{"string":"\u9801","radical":"181","count":"157"},{"string":"\u51ec","radical":"182","count":"52"},{"string":"\u98db","radical":"183","count":"3"},{"string":"\u8680","radical":"184","count":"181"},{"string":"\u9996","radical":"185","count":"3"},{"string":"\u9999","radical":"186","count":"19"},{"string":"\u51af","radical":"187","count":"252"},{"string":"\u9aa8","radical":"188","count":"47"},{"string":"\u9ad8","radical":"189","count":"7"},{"string":"\u9adf","radical":"190","count":"68"},{"string":"\u9b25","radical":"191","count":"10"},{"string":"\u9b2f","radical":"192","count":"2"},{"string":"\u9b32","radical":"193","count":"10"},{"string":"\u9b3c","radical":"194","count":"28"},{"string":"\u7a23","radical":"195","count":"392"},{"string":"\u7ff5","radical":"196","count":"395"},{"string":"\u9e75","radical":"197","count":"10"},{"string":"\u9e7f","radical":"198","count":"37"},{"string":"\u9ea5","radical":"199","count":"22"},{"string":"\u9ebb","radical":"200","count":"8"},{"string":"\u9ec3","radical":"201","count":"10"},{"string":"\u9ecd","radical":"202","count":"4"},{"string":"\u9ed1","radical":"203","count":"39"},{"string":"\u9ef9","radical":"204","count":"4"},{"string":"\u9efd","radical":"205","count":"16"},{"string":"\u9f0e","radical":"206","count":"5"},{"string":"\u9f13","radical":"207","count":"13"},{"string":"\u9f20","radical":"208","count":"27"},{"string":"\u9f3b","radical":"209","count":"15"},{"string":"\u6589","radical":"210","count":"9"},{"string":"\u6b6f","radical":"211","count":"60"},{"string":"\u5390","radical":"212","count":"19"},{"string":"\u4e80","radical":"213","count":"5"},{"string":"\u9fa0","radical":"214","count":"6"}]