中文: simplified characters

Simplified Chinese characters by Kangxi radical

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 only showing characters from the about ~2500 simplified characters, so not all radicals have a set of characters to visualize.

You may notice some radicals look more complicated than the rendered characters, this is because the radical is being shown in its traditional variation while the characters are all simplified.
There is a similar visualization of the traditional characters here

###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

Character lookup by radical

An excellent example of looking up Chinese characters by their radical: http://hanzi.hemiola.com/

<!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 {
    width: 100%;
    height: 100%;
    text-align: center;
    position:absolute;
    top:0;
  }
  .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 {
    float: left;
    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-right {
    width: 200px;
    height: 100%;
    position:absolute;
    top:5px; right: 10px;
  }
</style>

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")
      .style({
        "line-height": height/1.05 + "px",
        "font-size": fontSize + "px",
        color: "white"
      })
    
    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 stop() {
      setTimeout(function() {
        char.style("opacity", 0);
      }, flash+1);
    }
    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.003) fraction = 0.003;
      if(fraction > 0.2) fraction = 0.2;
      
      flash = 3000 / data.length;
      if(flash < 100) flash = 100;
      if(flash > 1000) flash = 1000;
      console.log("flash", flash)
      
      
      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("simple.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;
        marker.style("width", 530 * (index)/data.length + "px");
        if (duration >= flash) {
          start = now;
          if(!data[index]) { stop(); return false; }
          char.style("opacity", 0)
          char
            .transition()
            .ease("linear")
            .duration(flash-1)
            .style("opacity", 1)
          char.text(data[index].c);
          
          ctx.fillStyle = "rgba(255, 255, 255, " + fraction + ")"
          ctx.fillText(data[index].c, 150,115); 
          
          if(++index >= data.length) { stop(); return false;};  
        }
        
      })
    })
    })
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js