1 2 3var weeks = [{"num":1,"text":"1 â 7 Jan"},{"num":2,"text":"8 â 14 Jan"},{"num":3,"text":"15 â 21 Jan"},{"num":4,"text":"22 â 28 Jan"},{"num":5,"text":"29 Jan â 4 Feb"},{"num":6,"text":"5 â 11 Feb"},{"num":7,"text":"12 â 18 Feb"},{"num":8,"text":"19 â 25 Feb"},{"num":9,"text":"26 Feb â 4 Mar"},{"num":10,"text":"5 â 11 Mar"},{"num":11,"text":"12 â 18 Mar"},{"num":12,"text":"19 â 25 Mar"},{"num":13,"text":"26 Mar â 1 Apr"},{"num":14,"text":"2 â 8 Apr"},{"num":15,"text":"9 â 15 Apr"},{"num":16,"text":"16 â 22 Apr"},{"num":17,"text":"23 â 29 Apr"},{"num": 418,"text":"30 Apr â 6 May"},{"num":19,"text":"7 â 13 May"},{"num":20,"text":"14 â 20 May"},{"num":21,"text":"21 â 27 May"},{"num":22,"text":"28 May â 3 June"},{"num":23,"text":"4 â 10 June"},{"num":24,"text":"11 â 17 June"},{"num":25,"text":"18 â 24 June"},{"num": 526,"text":"25 June â 1 July"},{"num":27,"text":"2 â 8 July"},{"num":28,"text":"9 â 15 July"},{"num":29,"text":"16 â 22 July"},{"num":30,"text":"23 â 29 July"},{"num":31,"text":"30 July â 5 Aug"},{"num":32,"text":"6 â 12 Aug"},{"num":33,"text":"13 â 19 Aug"},{"num": 634,"text":"20 â 26 Aug"},{"num":35,"text":"27 Aug â 2 Sep"},{"num":36,"text":"3 â 9 Sep"},{"num":37,"text":"10 â 16 Sep"},{"num":38,"text":"17 â 23 Sep"},{"num":39,"text":"24 â 30 Sep"},{"num":40,"text":"1 â 7 Oct"},{"num":41,"text":"8 â 14 Oct"},{"num":42,"text":"15 â 21 Oct"},{"num":43,"text":"22 â 28 Oct"},{"num":44,"text":"29 Oct â 4 Nov"},{"num":45,"text":"5 â 11 Nov"},{"num":46,"text":"12 â 18 Nov"},{"num":47,"text":"19 â 25 Nov"},{"num":48,"text":"26 Nov â 2 Dec"},{"num":49,"text":"3 â 9 Dec"},{"num":50,"text":"10 â 16 Dec"},{"num":51,"text":"17 â 23 Dec"},{"num":52,"text":"24 â 30 Dec" 7}]; 8 9 10var pheno = { 11 12 data:{ 13 14 left: {'chart_1': new Array(52),'chart_2': new Array(52),'chart_3': new Array(52), 15 'chart_4': new Array(52),'chart_5': new Array(52),'chart_6':new Array(52), 16 'chart_7': new Array(52), 'chart_8': new Array(52) 17 }, 18 right:{'chart_1': new Array(52),'chart_2': new Array(52),'chart_3': new Array(52), 19 'chart_4': new Array(52),'chart_5': new Array(52),'chart_6':new Array(52), 20 'chart_7': new Array(52), 'chart_8': new Array(52) 21 }, 22 23 }, 24 25 /* "double_c_1x"->"dc_1", 26 "double_f_1x"->"df_1", 27 "double_c_15x"->"dc_15", 28 "double_f_15x"->"df_15", 29 "unique"->"s_1" 30 31 */ 32 33 pos: 34 { 35 'chart_1' : {'dc_1' : {'longitude': 18.648, 'latitude' : 5.04 }, 36 'df_1' : {'longitude': 12.1212, 'latitude' : 3.276 }, 37 's_1' : {'longitude': 10.3896, 'latitude' : 2.808 } 38 }, 39 'chart_2' : {'dc_1' : {'longitude': 18.648, 'latitude' : 11.088 }, 40 'df_1' : {'longitude': 12.1212, 'latitude' : 7.2072 }, 41 's_1' : {'longitude': 10.3896, 'latitude' : 6.1776 } 42 }, 43 'chart_3' : {'dc_1' : {'longitude': 18.648, 'latitude' : 17.136 }, 44 'df_1' : {'longitude': 12.1212, 'latitude' : 11.1384 }, 45 's_1' : {'longitude': 10.3896, 'latitude' : 9.5472 } 46 }, 47 'chart_4': {'dc_1' : {'longitude': 18.648, 'latitude' : 23.184 }, 48 'df_1' : {'longitude': 12.1212, 'latitude' : 15.0696 }, 49 's_1' : {'longitude': 10.3896, 'latitude' : 12.9168 } 50 }, 51 'chart_5': {'dc_1' : {'longitude': 32.256, 'latitude' : 5.04 }, 52 'df_1' : {'longitude': 20.9664, 'latitude' : 3.276}, 53 's_1' : {'longitude': 17.9712, 'latitude' : 2.808 } 54 }, 55 'chart_6': {'dc_1' : {'longitude': 32.256, 'latitude' : 11.088 }, 56 'df_1' : {'longitude': 20.9664, 'latitude' : 7.2072 }, 57 's_1' : {'longitude': 17.9712, 'latitude' : 6.1776 } 58 }, 59 'chart_7': {'dc_1' : {'longitude': 32.256, 'latitude' : 17.136 }, 60 'df_1' : {'longitude': 20.9664, 'latitude' : 11.
601384 }, 61 's_1' : {'longitude': 17.9712, 'latitude' : 9.5472 } 62 }, 63 'chart_8': {'dc_1' : {'longitude': 32.256, 'latitude' : 23.184 }, 64 'df_1' : {'longitude': 20.9664, 'latitude' : 15.0696 }, 65 's_1' : {'longitude': 17.9712, 'latitude' : 12.9168 } 66 }, 67 }, 68 69 70 pos_right: 71 // { 'dc_1': 27.546, 'df_1': 27.546, 's_1': 0, 'dc_15': 42.144, 'df_15': 41.319 }, 72 // { 'dc_1': 37.029, 'df_1': 28.182, 's_1': 0, 'dc_15': 55.543, 'df_15': 41.319 }, 73 74 { 'dc_1': 28.082, 'df_1': 27.630, 's_1': 0, 'dc_15': 55.543, 'df_15': 41.319 }, 75 76 shown: false, 77 78 baselayer: '', 79 80 max_y: {'left' : 0, 'right' : 0}, 81 82 initChart: function(url, baselayer, side){ 83 84 $.getJSON(url, function(data_j) { 85 86 $.each(data_j.rows, function(key, val) { 87 var sp = Object.keys(val)[0]; 88 // console.log(this.max_y); 89 if (data_j.rows[key].value > pheno.max_y[side]) pheno.max_y[side] = data_j.rows[key].value; 90 91 pheno.prepareTableData(parseInt(data_j.rows[key].sector),data_j.rows[key].value,data_j.rows[key].mean,parseInt(data_j.rows[key].week),side); 92 93 }); 94 pheno.buildChart(baselayer,side); 95 96 }); 97 98 99 }, 100 prepareTableData: function(sector,value,mean,week,side){ 101 102 var obj={'value':value,'mean':mean,'week':week}; 103 104 if (side == 'both') { 105 this.data['left']['chart_'+sector][week-1]=obj; 106 this.data['right']['chart_'+sector][week-1]=obj; 107 } else { 108 this.data[side]['chart_'+sector][week-1]=obj; 109 } 110 111 }, 112 buildChart: function(baselayer,side) { 113 114 this.shown=true; 115 116 117 map._initPathRoot(); 118 119 var svg = d3.select('#map').select('svg') 120 .attr('class','pheno-svg'); 121 122 var maxWidth = 220; 123 var maxHeight = 80; 124 125 126 var phenoPos = this.getPosition(); 127 128 129 // Tooltip container 130 131 var tooldiv = d3.select(map.getPanes().overlayPane) 132 .append("div") 133 .attr("id", "tooltips") 134 .style('left', phenoPos[0] +'px') 135 .style('top', phenoPos[1] + 'px'); 136 137 138 var tooltip_hover = tooldiv.append('div') 139 .attr('class','tooltip_hover'); 140 141 142 if (side == 'both') { 143 this.drawChart(baselayer,'left'); 144 this.drawChart(baselayer,'right'); 145 } else { 146 this.drawChart(baselayer,side); 147 } 148}, 149 150 drawChart: function(baselayer, position) { 151 152 this.baselayer = baselayer; 153 154 var maxWidth = 160; 155 var maxHeight = 60; 156 157 d3.select('.pheno-svg') 158 .append('g') 159 .attr('class', position); 160 161 d3.select('#tooltips') 162 .append('div') 163 .attr('class','chart-tooltip tooltips-'+position); 164 165 166 var tooltip_factor = this.tooltipFactor(baselayer); 167 d3.select('.tooltip_hover') 168 .style('font-size', +tooltip_factor[0]+'em'); 169 170 171 $.each(this.data[position], function(index,value) { 172 173 174 175 var chart = d3.select('.'+position) 176 .append('g') 177 .attr('class',index); 178 179 180 181 182 var x = d3.scaleBand() 183 .domain([1,53]) 184 .range([0,maxWidth]) 185 .padding(0.5); 186 187 var y = d3.scaleLinear() 188 .range([maxHeight, 0]) 189 .domain([0,pheno.max_y[position]]); 190 191 // Mean line 192 193 var line = d3.line() 194 .x(function(d) { return x(d.week); }) 195 .y(function(d) { return y(d.mean); }); 196 197 // Tooltip 198 199 200 var tooltip = d3.select('.tooltips-'+position) 201 .append("div") 202 .attr("class", "pheno-tooltip") 203 .attr("id", index) 204 .style("z-index", "100"); 205 206 207 208 $.each(value, function(subindex,subvalue) { 209 210 x.domain(value.map(function(d) { return d.week })); 211 // y.domain([0, d3.max(value, function(d) { return d.value; })]); 212 213 chart.selectAll(".bar") 214 .data(value) 215 .enter().append("rect") 216 .attr("class", "bar") 217 .attr("id",function(d,i) { return i+1 }) 218 .attr("value", function(d) {return Math.round(d.value)}) 219 .attr("x", function(d,i) { return x(d.week); }) 220 .attr("y", function(d,i) { return y(d.value);}) 221 .attr("height", function(d) {return maxHeight - y(d.value);}) 222 .attr("width", x.bandwidth()) 223 .on("mouseover", function(d) { 224 225 var xforms = d3.select('.'+position).select('.'+index).attr('transform'); 226 var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms); 227 var firstX = parts[1], 228 firstY = parts[2]; 229 230 d3.select('.tooltip_hover').transition().duration(0) 231 .style("opacity", .9) 232 .text(function() { 233 var i = d.week -1; 234 var ind = i; 235 236 if (ui_config.isInterval()) { 237 ind= (i+26)%52; 238 } 239 240 if(ui_config.isLastWeeks()) { 241 ind=((i+ui_config.last_week)%52); 242 } 243 244 var textweek = weeks[ind].text; 245 246 return d.value + ' ('+ weeks[ind].text +')'; 247 }) 248 .style("left", parseInt(parts[1]) + x(d.week)*pheno.getScale() - d3.select('.tooltip_hover').node().getBoundingClientRect().width/2 + "px") 249 .style("top", parseInt(parts[2]) + y(d.value)*pheno.getScale() - 30 + "px") 250 .style("white-space", "nowrap"); 251 252 }) 253 .on("mouseout", function(d) { 254 d3.select('.tooltip_hover').transition() 255 .style("opacity", 0) 256 .duration(200); 257 }); 258 259 260 261 }); 262 263 chart.append("path") 264 .attr("class", "line") 265 .style("stroke", "#000") 266 .attr("d", line(value)); 267 268 var chartWidth = d3.select('.'+index).node().getBBox().width;
269 // var chartHeight = d3.select('.'+index).node().getBBox().height; 270 var chartHeight = maxHeight; 271 var scale = 1; 272 273 chart.attr('transform', function() { 274 275 var base_l = baselayer; 276 if (pheno.isBigger(baselayer)) { 277 if (baselayer == 'dc_15') base_l = 'dc_1' 278 else if (baselayer == 'df_15') base_l = 'df_1' 279 } 280 281 if (position == 'right') var offset = pheno.pos_right[base_l]; 282 else var offset = 0; 283 284 var latitude = pheno.pos[index][base_l].latitude; 285 var longitude = pheno.pos[index][base_l].longitude; 286 287 // var scale_factor = pheno.scaleFactor(baselayer); 288 // 289 // // chartWidth *= scale_factor; 290 // // chartHeight *= scale_factor; 291 // 292 // if (baselayer == 's_1') scale = pheno.calcZoom(map.getZoom()); 293 // else scale = scale_factor * pheno.calcZoom(map.getZoom()); 294 var scale = pheno.getScale(baselayer); 295 296 if (pheno.isBigger(baselayer)) { 297 latitude *= 1.5; 298 longitude *= 1.5; 299 offset *= 1.5; 300 } 301 302 var latlng = new L.LatLng(latitude, longitude+offset); 303 return "translate(" + (map.latLngToLayerPoint(latlng).x - chartWidth*scale / 2) + "," + (map.latLngToLayerPoint(latlng).y - chartHeight*scale / 2) + ") scale("+ scale +")"; 304 305 }); 306 307 // var tooltip_factor; 308 // 309 // if (baselayer == 's_1') tooltip_factor = pheno.tooltipFactor(map.getZoom()); 310 // else pheno.tooltipFactor(baselayer); 311 // 312 // $('.pheno-tooltip').css('transform', 'scale('+tooltip_factor+')'); 313 314 // tooltip 315 // .text(Math.round(d.value.mean)) 316 // .style("left", 100 + parseInt(d3.select('.'+index+' rect[id="1"]').attr('x')) + pos[index].left - 17.5 + "px") 317 // .style("top", y(d.value.mean) + pos[index].top - 40 + "px"); 318 319 320 321}); 322 323 pheno.chartGuides(position); 324 325 }, 326 327 328 329 reDraw: function(baselayer, position) { 330 331 d3.select('.pheno-svg').selectAll('g').remove(); 332 $('.chart-tooltip').remove(); 333 334 if (position == 'both') { 335 this.drawChart(baselayer,'left'); 336 this.drawChart(baselayer,'right'); 337 } else { 338 this.drawChart(baselayer,position); 339 } 340
341 pheno.setStep($('.ui-slider-pip-selected .ui-slider-label').data('value') - 1); 342 343 344 }, 345 346 setStep: function(step) { 347 348 // var phenoPos = this.getPosition(); 349 var week = step+1; 350 // var scale; 351 // if (this.isBigger(this.baselayer)) scale = 1.5; 352 // else scale = 1; 353 var tooltip_factor = []; 354 var scale = pheno.getScale(this.baselayer); 355 356 if (this.baselayer == 's_1') { 357 tooltip_factor = pheno.tooltipFactor(map.getZoom()); 358 } else { 359 tooltip_factor = [1,13.8]; 360 } 361 362 363 $('.pheno-svg g').each(function() { 364 var position = $(this).attr('class'); 365 366 $('g', this).each(function() { 367 368 var this_week = $("#"+week, this); 369 370 this_week.attr('class', 'bar current').siblings('rect').attr('class','bar'); 371 372 var barY = this_week.attr('y'); 373 var barX = this_week.attr('x'); 374 var val = this_week.attr('value'); 375 var g_id = $(this).attr('class'); 376 // var trans = $(this).attr('transform'); 377 378 var xforms = $(this).attr('transform'); 379 var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)\)/.exec(xforms); 380 381 var firstX = parseInt(parts[1]), 382 firstY = parseInt(parts[2]); 383 384 $('#tooltips .tooltips-'+position+' #' + g_id).html(val) 385 // .css("left", parseInt(barX)*scale + firstX - 12.75 + "px") 386 .css("left", parseInt(barX)*scale + firstX - tooltip_factor[1] + "px") 387 .css("top", parseInt(barY)*scale + firstY - 35*tooltip_factor[0] + "px"); 388 389 }); 390 }); 391 392 393 }, 394 scale: function(zoom) { 395 d3.select('.pheno-svg').selectAll('line').remove(); 396 397 d3.selectAll('.pheno-svg g') 398 .each(function() { 399 $('g', this).each(function() { 400 var index = d3.select(this).attr('class'); 401 var pheno_pos=pheno.pos[index]; 402 var chartWidth = d3.select('.'+index).node().getBBox().width; 403 var chartHeight = d3.select('.'+index).node().getBBox().height; 404 var trans = d3.select(this).attr('transform'); 405 var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)\)/.exec(trans); 406 var firstX = parts[1], 407 firstY = parts[2]; 408 409 var scale = pheno.getScale(pheno.baselayer); 410 var tooltip_factor = pheno.tooltipFactor(zoom); 411 412 var latlng = new L.LatLng(pheno_pos['s_1'].latitude, pheno_pos['s_1'].longitude); 413 414 d3.select(this).attr("transform", "translate(" + (map.latLngToLayerPoint(latlng).x - chartWidth*scale / 2) + "," + (map.latLngToLayerPoint(latlng).y - chartHeight*scale / 2) + ") scale("+scale+")"); 415 416 417 $('.pheno-tooltip').css('transform', 'scale('+tooltip_factor[0]+')'); 418 419 420 421 }); 422 }); 423 pheno.setStep($('.ui-slider-pip-selected .ui-slider-label').data('value') - 1); 424 425 pheno.chartGuides(); 426 427 }, 428 429 getPosition: function() { 430 431 var map_pos = $('.leaflet-map-pane').attr('style').split(';'); // Select style attribute of the map 432 //var match = map_pos[0].match(/\(([+|-].+px[\s]?){1},([+|-]?.+px[\s]?){1}[\)|,([+|-]?.+px\){1}]?/); // Get and split only the first one (which is transform) 433 434 var match=map_pos[0].replace(' ','').replace(',','').split('(')[1].split('px'); 435 var valueX = parseInt(match[0]) * (-1); // Get the second value of the array given, which is the X coordinate 436 var valueY = parseInt(match[1]) * (-1); 437 return new Array(valueX,valueY); 438 }, 439 removeChart: function(){ 440 441 if(this.shown) { 442 443 d3.select('.pheno-svg').selectAll('g').remove(); 444 $('.chart-tooltip').remove(); 445 this.shown = false; 446 } 447 448 449 }, 450 isShown: function(){ 451 452 return this.shown; 453 454 }, 455 isBigger: function(baselayer) { 456 457 if (baselayer == 'dc_15' || baselayer == 'df_15') { 458 return true; 459 } else { 460 return false; 461 } 462 463 }, 464 465 getScale: function(baselayer) { 466 467 var scale = 1; 468 if (baselayer == 'df_1') scale = 1; 469 else if (baselayer == 'df_15') scale = 1.5; 470 else if (baselayer == 'dc_1') scale = 1.5; 471 else if (baselayer == 'dc_15') scale = 2.01; 472 else if (baselayer == 's_1') scale = 1; 473 474 var zoom = map.getZoom(); 475 if (zoom == 4) scale *= 0.5; 476 else if (zoom == 5) scale *= 0.67; 477 else if (zoom == 6) scale *= 1.34; 478 else if (zoom == 7) scale *= 2.68; 479 else if (zoom == 8) scale *= 5.36; 480 481 return scale; 482 483 }, 484 485 tooltipFactor: function(zoom) { 486 487 if (zoom == 4) return new Array(0.5,14); 488 else if (zoom == 5) return new Array(0.8,14.5); 489 else if (zoom == 6) return new Array(1,12.8); 490 else if (zoom == 7) return new Array(1.2,11.5); 491 else if (zoom == 8) return new Array(1.4,11); 492 else return new Array(1,13); 493 494 }, 495 496 chartGuides: function(position) { 497 498 if (('.guides_'+position).length > 0) d3.select('.guides_'+position).remove(); 499 500 501 var base_l = this.baselayer; 502 var bigger = 1; 503 504 if (this.baselayer == 'dc_15') base_l = 'dc_1' 505 else if (this.baselayer == 'df_15') base_l = 'df_1'
506 507 if (position == 'right') var offset = pheno.pos_right[base_l]; 508 else var offset = 0; 509 510 if (pheno.isBigger(this.baselayer)) { 511 bigger = 1.5; 512 offset *= 1.5; 513 } 514 515 516 517 var factor; 518 if (this.baselayer == 's_1') var factor = 0.58; 519 else var factor = pheno.getScale(this.baselayer); 520 521 var chart_1 = new L.LatLng(pheno.pos['chart_1'][base_l].latitude*bigger, pheno.pos['chart_1'][base_l].longitude*bigger+offset); 522 var chart_2 = new L.LatLng(pheno.pos['chart_2'][base_l].latitude*bigger, pheno.pos['chart_2'][base_l].longitude*bigger+offset); 523 var chart_3 = new L.LatLng(pheno.pos['chart_3'][base_l].latitude*bigger, pheno.pos['chart_3'][base_l].longitude*bigger+offset); 524 var chart_4 = new L.LatLng(pheno.pos['chart_4'][base_l].latitude*bigger, pheno.pos['chart_4'][base_l].longitude*bigger+offset); 525 var chart_8 = new L.LatLng(pheno.pos['chart_8'][base_l].latitude*bigger, pheno.pos['chart_8'][base_l].longitude*bigger+offset); 526 527 var lng_c1 = map.latLngToLayerPoint(chart_1).x; 528 var lng_c8 = map.latLngToLayerPoint(chart_8).x; 529 530 531 // vertical line 532 533 var x_ = lng_c1 + (lng_c8 - lng_c1)/2; 534 var y1 = map.latLngToLayerPoint(new L.LatLng(pheno.pos['chart_8'][base_l].latitude*bigger+3.5*factor, pheno.pos['chart_8'][base_l].longitude*bigger+offset)).y; 535 var y2 = map.latLngToLayerPoint(new L.LatLng(pheno.pos['chart_1'][base_l].latitude*bigger-3.5*factor, pheno.pos['chart_1'][base_l].longitude*bigger+offset)).y; 536 537 // first horizontal 538 539 540 var h_x1 = map.latLngToLayerPoint(new L.LatLng(pheno.pos['chart_1'][base_l].latitude*bigger, (pheno.pos['chart_1'][base_l].longitude-5.4*factor)*bigger+offset)).x; 541 var h_x2 = map.latLngToLayerPoint(new L.LatLng(pheno.pos['chart_8'][base_l].latitude*bigger, (pheno.pos['chart_8'][base_l].longitude+5.3*factor)*bigger+offset)).x; 542 var h1_y = map.latLngToLayerPoint(chart_1).y - (map.latLngToLayerPoint(chart_1).y - map.latLngToLayerPoint(chart_2).y)/2; 543 544 // second horizontal 545 546 var h2_y = map.latLngToLayerPoint(chart_2).y - (map.latLngToLayerPoint(chart_2).y - map.latLngToLayerPoint(chart_3).y)/2; 547 548 // third horizontal 549 550 var h3_y = map.latLngToLayerPoint(chart_3).y - (map.latLngToLayerPoint(chart_3).y - map.latLngToLayerPoint(chart_4).y)/2; 551 // var line1 = new L.LatLng(pheno.pheno_lines['1'].y0*pheno.scaleFactor(baselayer), pheno.pheno_lines['1'].x*pheno.scaleFactor(baselayer)); 552 // var x_ = map.latLngToLayerPoint(line1).x; 553 554 var svg = d3.select('.pheno-svg').append('g').attr('class','guides_'+position); 555 556 svg.append("line") 557 .attr("x1", x_) 558 .attr("y1", y1) 559 .attr("x2", x_) 560 .attr("y2", y2); 561 562 svg.append("line") 563 .attr("x1", h_x1) 564 .attr("y1", h1_y) 565 .attr("x2", h_x2) 566 .attr("y2", h1_y); 567 568 svg.append("line") 569 .attr("x1", h_x1) 570 .attr("y1", h2_y) 571 .attr("x2", h_x2) 572 .attr("y2", h2_y); 573 574 svg.append("line") 575 .attr("x1", h_x1) 576 .attr("y1", h3_y) 577 .attr("x2", h_x2) 578 .attr("y2", h3_y); 579 580 } 581 582 583 584}; 585 586 587 588$(document).ready(function() { 589 590 591});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.