mappingdkp/index.html at master · samangoudarzi/mappingdkp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
    <head>
        <title>International Development Studies Journal Ratings</title>
        <meta charset="utf-8">
        <!--load jQuery-->
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="crossorigin="anonymous"></script>
        <!--load Highcharts-->
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/highcharts-more.js"></script>
        <script src="https://code.highcharts.com/modules/data.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
    </head>
<body>
  <div id="space" style="width:100%; height:150px;"></div>
  <div id="container" style="width:100%; height:450px;"></div>
  <script>
  $(function() {
    $.get('ratings.csv', function(csv) {     // enter csv file name
      Highcharts.chart('container', {
        chart: {
          type: 'line',
          renderTo: 'container',
        },
        title: {
          text: 'IDS Journals\' Reuters Impact Factor'  // chart title
        },
        data: {
          csv: csv,
          // data column headers (x, y, name...) must match column numbers (0, 1, 2...). Optional: category: 3
          seriesMapping: [{x: 0, y: 1, category: 2, sub: 3}],
          complete: function(data) {
            categoriesIntoSeries(data);
            changeSeriesColors(data);
            changeSeriesMarkers(data)
          }
        },
        xAxis: {
    gridLineWidth: 1
        },
        yAxis: {
          title: {
            text: 'Reuters Impact Factor',   // EDIT to insert vertical y-axis label
            margin: 18
          },
        },
        legend: {
            enabled: true,
            align: 'center',
            verticalAlign: 'top',
            y: 20,
            floating: false,
            margin: 18
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function (e) {
                            hs.htmlExpand(null, {
                                pageOrigin: {
                                    x: e.pageX || e.clientX,
                                    y: e.pageY || e.clientY
                                },
                                headingText: this.series.categories,
                            });
                        }
                    }
                },
                marker: {
                    lineWidth: 1,
                    states: {
                        hover: {
                          enable: true,
                        }
                    }
                },
                  events:{
                        click: function (event, i) {
                          location.href = 'https://samangoudarzi.github.io/mappingdkp_' +
                            event.point.sub;
                  }
              },
                stickyTracking: false,
            }
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br/>',
            pointFormat: '{point.y}',
            followPointer: true,
            hideDelay: 50
        },
        credits: {
        enabled: false,
        //  text: 'This graph was made using Highcharts JS',
        //  href: 'https://www.highcharts.com/',
       //   x: 10
       },
      });
    });
  });
   // Split data based on 'category' property; needed for correct legend display
   function categoriesIntoSeries(data) {
    rows = data.series[0].data;
    data.series = [];
    for (i = 0; i < rows.length; i++) {
      cat = rows[i].category;
      catExists = false;
      for (j = 0; j < data.series.length; j++) {
        if (data.series[j].name == cat) {
          //Add a data point to existing series
          data.series[j].data.push(rows[i]);
          catExists = true;
        }
      }
        if (!catExists) {
        // When category is encountered for the first time, create a series
        data.series.push({name: cat, data: [rows[i]]})
      }
    }
   }
  // Customize colors of series
  function changeSeriesColors(data) {
    colors = {
      'Development and Change': 'rgba(1, 36, 29, 0.6)', // to add transparency, define colors in rgba() model, where the last number is between 0 and 1 (opacity)
      'Journal of Development Studies': 'rgba(247, 144, 31, 0.6)',
      'Journal of Peasant Studies': 'rgba(1, 169, 161, 0.6)',
      'Third World Quarterly': 'rgba(20, 28, 100, 0.6)',
      'World Development': 'rgba(65, 166, 199, 0.6)'
    }
    for (i = 0; i < data.series.length; i++) {
      data.series[i].color = colors[data.series[i].name] || 'rgba(51, 102, 255, 0.5)';
    }
  }
  // Customize markers of scatter series. Possible options are:
  // 'circle', 'square', 'diamond', 'triangle', 'triangle-down'
  function changeSeriesMarkers(data) {
    markers = {
      'SampleCategory1': 'circle',
      'SampleCategory2': 'triangle'
    }
    for (i = 0; i < data.series.length; i++) {
      data.series[i].marker = {symbol: markers[data.series[i].name] || 'circle'};
    }
  }
  </script>
</body>
</html>