2.2.1 chordD3

It requires D3 to work. You can see more information about this library on this website. This library has five components: charts.js, chord.js, countrymerge.js, layout.js, timeline.js. We had to do some changes in the files for our implementation in the website.

• chord.js: This file has all the equations and mathematical formulas required for drawing geometric figures of the chords. A chord represent a flow of information between two entities, in our case it represents the connection between a region's diet or agricultural production, and the geographical historical origins of the crops consumed/produced (thus creating lines connecting different regions).

• layout.js: This file has some function to order the groups and subgroups of the circos diagram. A group in our case represents a region of the world.

• timeline.js: This file allows management of the filters over the circos diagram. The filters depends on the data file. Into the data structure exists a element called matrix, this object has some values, every value represent a category for the circos diagram. The timeline takes these names of the categories and draws it in form of the buttons, when a button is pressed, it changes the filter for the circos. Before the class didn't allow to filter the categories by text, only by numbers; we modified this file to allow filters by text.

• charts.js: This file is responsible for managing the display of the chart. This object receives the parameters that lets you customize the way information is displayed. It contains most events that occur when users interact with the diagram. Our implementation is different from original because we don't expand the main groups in subgroups, for example, we don't expand the world regions in the countries located in that region. The original (migration) file allows this.

  • Data:

    • names: It's a label list of the names the regions and subregions of the circos diagram. You can see that it's repeated in our case because we do not have the second level (opening from regions to countries). The original data structure didn't change and we adapted our data to the requirements.
    • regions: indicates where to start a new set of the elements. It takes the labels of the root element called names. Every array element indicates where to start the following region (or group) of the circos diagram. The elements in middle of the limits are the subregion (or subgroup).
    • matrix: has the information of the chords. The root elements represent a category and they are used by timeline.js to filter the information, we called them categories. The elements inside of every category represent a matrix. The matrix indicate the flow value between every position of the label names.
    • help: It's similar to matrix, but the information is not related with the chords, but will show in the popup helper (box of information).

  • Parameters: The class receives three parameters

    • data: It is a url where is located the data file
    • config: It is a data structure with the parameters to customize the look and feel of the diagram. The following is the structure of the json to pass how parameter:

{
    element: '#diagram', // Name of the div where the diagram will draw
    openSubgroup: 'close', // 'open' show subgroups, 'close' doesn't show
    animationDuration: 500, // time to display the animation in the diagram
    width: 900, // Circos' width
    height: 800, // Circos' height 
    margin: 100, // Circos' margin
    arcPadding: 0.01, // Distance between arcs of the diagram
    precision: 0, // Quantity of decimals in numbers
    layout: {
        alpha: 0, // Transparence
        threshold: 0.1, // Minimun of the value of the chord to show in the diagram
        labelThreshold: 0.1, 
        colors:  'FF0000 FF4500 EE4000 CD3700 CD0000 8B0000 A2CD5A 66CD00 458B00 228B22 006400 EED5B7 CDAA7D 8B7355 8B4513 EEC900 00BFFF 1E90FF 1C86EE 104E8B 0000CD FFA500 FF8C00'.split(' ').map(function (c) { return '#' + c; }) // Array of the circos' colors 
    }
}

    * helper: It is the configuration to secondary tools of the diagram

{
    popup:'open' // 'open' show secondary , 'close' doesn't show 
}