中文: traditional characters

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

Character lookup by radical

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

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>

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;

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>

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