Visualization of medical data using D3.js (ii) Legend (Legend) __js

introduce

At the end of the previous article, we mentioned a number of areas to be improved on the generated visual graph. Here we will discuss the display of the legend.

The main purpose of the legend is to describe the contents and indicators of the symbols and colors represented in the chart. For the line chart we generated earlier, we need to use a legend to illustrate what each curve means. The basic principles of the two-point summary are as follows:

1. The color of the corresponding curve in the legend, and indicate the name of the corresponding medical institution;

2. The legend should be placed in the appropriate position in order to play an appropriately indicative role.

This article will implement two different implementations and discuss their differences.

code Example

<!
    DOCTYPE html>  



Visualization Results

As you can see, one of the implementation methods (method one) puts the legend directly behind the curve (the principle can refer to [1]), while the other method (method two) places the legend set below the chart.



discussion

First look at the implementation method. There are several basic concepts in the implementation of the legend above.

First, either way, you need to pass the names in to the chart to display the name of the medical institution in the legend. Second, the corresponding relationship between the name list and the colors needs to be clearly defined so that the associated relationship with the curve is maintained in the legend.

In addition to some of the common places above, method one of the key two points, one is to put the text of the legend next to the position of the last point of the curve, the second is to keep the text of the legend to the right blank. In this example, because of the use of Clippath, the scope of the Clippath also needs to be covered to the scope of the legend.

Method Two also need to leave enough space for the legend below the chart. In addition, the appropriate legend layout should be set up. The current implementation is evenly spaced as a row because of its wide enough width. You can also set the appropriate calculations to perform other forms of typesetting, such as arranging multiple lines or arranging them vertically.

After adding the legend generated by both methods, the layout of the entire chart above is shown in the following illustration.



From the present realization effect, the first method occupies the horizontal space, the advantage is that the legend followed the curve, so that users of each curve represents the data at a glance. But its flaws are obvious, and different legend names may overlap and not be seen clearly. The second approach is a comparison of the standard legend placement method, occupies the vertical space, there is no particularly obvious defects. For the current line graph, the second method of personal feeling is more appropriate. Of course, for each of the different charts, you need to choose the way in which the legend is presented, depending on its actual situation.

Reference Documents

1. Multi-series line Chart. http://bl.ocks.org/mbostock/3884955