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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Copyright 2015 Teralytics AG | |
| * | |
| * @author Kirill Zhuravlev <kirill.zhuravlev@teralytics.ch> | |
| * | |
| */ | |
| (function (factory) { | |
| if (typeof define === 'function' && define.amd) { | |
| define(['leaflet', 'd3'], factory); |
A basic example of the use of Vue.js.
This examples extends the previous one by including two viewports:
- the first one, depicted in blue, is used for filtering objects when outside the blue viewport. By zooming in it is possible to see that the DOM is continuosly updated by adding and removing the object inside and outside the viewport;
- the second one, depicted in red, is used for recognizing which is the object the user is interested in. Once a certain level of zoom is reached the interested object is colored in red.
The algorithm for calculating the intersect area between two rectangles has been taken from this Math Stackexchange discussion.
This example uses the zoom behaviour of D3.js (version 4) for enabling "click-to-zoom" interactions on SVG objects such as rectangles, circles and so on.
The D3 zoom.transform function has been used in order to create an animated transition every time an object is clicked.
In order to translate and scale the visualization, it is necessary to use the d3.zoomTransform function. In order to translate and scale the visualization, since the x, y and k properties are read-only, d3.zoomIdentity must be translated and scaled without accessing them directly.
By refreshing the visualization, random rectangles are generated.