1<!doctype html> 2<html> 3 <head> 4 5 <!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 5-6
5 6<script async src="https://www.googletagmanager.com/gtag/js?id=
6UA-384377-2
vendor: 12 bytes, line 6
6"></script>
7<script> 8
vendor: 134 bytes, lines 8-12
8window.dataLayer = window.dataLayer || []; 9 function gtag(){dataLayer.push(arguments);} 10 gtag('js', new Date()); 11 12 gtag('config', '
12UA-384377-2
vendor: 4 bytes, line 12
12');
13</script>
13 14 15 16 17 <title>Zara Larsson</title> 18 <meta name="description" content="Liveplasma discovery engine lets you discover artists similar to Zara Larsson like Camila Cabello, Normani, , Carly Rae Jepsen, Nicole Scherzinger, Bonnie McKee, Claudia Valentina, Katy Perry, Olivia Dean, Sabrina Carpenter" /> 19 <meta charset="utf-8"> 20 21 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"> 22 23 24
24<script> 25 function enableStylesheet(id) { 26 console.log("ok "+id) 27 document.getElementById(id).media="" ; 28 // node.media=""; 29 } 30 31 function disableStylesheet(id) { 32 console.log("no "+id) 33 document.getElementById(id).media="none" ; 34 } 35 36 37 </script>
37 38 39 40<!-- Jquery -->
41<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
41 42 43<!-- Google fonts --> 44<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&family=Roboto:wght@700&display=swap" rel="stylesheet"> 45 46<!-- Bootstrap --> 47<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
48<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
48 49<!--<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" >--> 50
51<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
51 52<!--
52<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
vendor: 1 bytes, line 52
52
53<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
vendor: 1 bytes, line 53
53
54<script src="https://unpkg.com/[email protected]/dist/extensions/export/bootstrap-table-export.min.js"></script>
54 --> 55 56<!--
56<script src="https://cdn.jsdelivr.net/npm/[email protected]/tableExport.min.js"></script>
vendor: 1 bytes, line 56
56
57<script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/jsPDF/jspdf.min.js"></script>
vendor: 1 bytes, line 57
57
58<script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
vendor: 1 bytes, line 58
58
59<script src="https://unpkg.com/[email protected]/dist/extensions/export/bootstrap-table-export.min.js"></script>
59 -->
60<script src="https://cdn.jsdelivr.net/gh/xcash/[email protected]/dist/latest/bootstrap-autocomplete.min.js"></script>
60 61 62 63 64 <!-- pure-css --> 65 <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd" crossorigin="anonymous"> 66 67 <!-- css --> 68 <link rel="stylesheet" href="css/main.css?&tt=67810003" media="" id="css_main"> 69 70 <link rel="stylesheet" href="css/light.css?&tt=411653905" media="" id="css_light"> 71 <link rel="stylesheet" href="css/dark.css?&tt=885366384" media="none" id="css_dark"> 72 <link rel="stylesheet" href="css/D3.css?&tt=126804546" > 73 74 75 <!-- <link rel="stylesheet" href="css/main.css"> --> 76 <!-- <link rel="stylesheet" href="css/modal.css"> --> 77 <!-- <link rel="stylesheet" href="css/select.css"> --> 78 <!-- <link rel="stylesheet" href="css/input_range.css"> --> 79 <link rel="stylesheet" href="css/header.css"> 80 81 <!-- <link rel="stylesheet" href="css/styles.css"> --> 82 83 <!-- google font --> 84 <!-- <link rel="preconnect" href="https://fonts.gstatic.com"> 85 <link href="https://fonts.googleapis.com/css2?family=Questrial&family=Roboto:wght@700&display=swap" rel="stylesheet"> --> 86 87 <!--font awesome --> 88 <link href="/FA/css/all.css" rel="stylesheet"> 89 90 91 <link rel="icon" type="image/png" sizes="16x16" href="img/favicon.ico/favicon-16x16.png"> 92 93 94 <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 64 bytes, lines 94-95
94 95<script async src="https://www.googletagmanager.com/gtag/js?id=
95G-B59TYV8Z4X
vendor: 13 bytes, lines 95-96
95"></script> 96
97<!-- adessense -->
98<script data-ad-client="ca-pub-6804558852802725" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
98 99 100
101<script> 102 103 104 105 var focus = "graph" ; 106 107 var user_name = "" ; 108 109 var user_name_map = "" ; 110 111
vendor: 134 bytes, lines 111-115
111window.dataLayer = window.dataLayer || []; 112 function gtag(){dataLayer.push(arguments);} 113 gtag('js', new Date()); 114 115 gtag('config', '
115G-B59TYV8Z4X
vendor: 7 bytes, lines 115-117
115'); 116 117
117var map_name = "Zara Larsson" ; 118 var map_id = "134e6410-6954-45d1-bd4a-0f2d2ad5471d" ; 119 var map_type = "artist" ; 120 var home = false ; 121 var book_url = "" ; 122 123 // var book_url = "" ; 124 125 function htmlEntities(str) { 126 return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); 127 } 128</script>
128 129 130 131<style> 132 .pure-g { 133 padding-top: 47px; 134} 135</style> 136 137 138 139 </head> 140 <body> 141
141<script> 142 143 jQuery( document ).ready(function( $ ) { 144 145 //Use this inside your document ready jQuery 146 $(window).on('popstate', function() { 147 location.reload(true); 148 }); 149 150}); 151 function click_user(option) { 152 if(option != 0 ) { 153 switch(option) { 154 case 1 : url="profile.php" ; break ; 155 case 2 : url="inc/logout.inc.php" ; break ; 156 } 157 window.location.href = url ; 158 } 159 } 160 </script>
160 161<div class="header"> 162 <div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed header"> 163 <a id="logo" href="index.php" >LivePlasma</a> 164 165 <ul class="pure-menu-list" id="menu" > 166 167 <!-- <li class="pure-menu-item "><a href="index.php" class="pure-menu-link">Home</a></li> --> 168 <li class="pure-menu-item " style="padding-right: 10px;" ><i class="fas fa-search"></i></li> <a class="onglet selected" href="graph_explorer.php?type=artist">Music<a> <li class="pure-menu-item " id="li_search" style="padding-right: 60px;" > 169 <form class="form-search form-inline" id="form_search" action="javascript:void(0);"> 170 <input type="text" id="input_search2" class="search-query form-control basicAutoComplete" size="28" placeholder="Search an artist you like" data-url="search.php?&type=artist" 171 autocomplete="off"/></form></li><li class="pure-menu-item"><a href="login.php" class="pure-menu-link ">Log In</a></li><li class="pure-menu-item"><a href="signup.php" class="pure-menu-link ">Sign Up</a></li> 172 173 174 175 <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"> 176 <div class="drop-down" id="countrylist" > 177 <select name="options" onchange="countrylist_select_event_handler()" > 178 <option value="en_US" style="background-image:url('img/flags/usa_30x20.png');">English</option><option value="ru_RU" style="background-image:url('img/flags/russia_30x20.png');">Ð ÑÑÑкий</option><option class="en" value="en_GB" style="background-image:url('img/flags/england_30x20.png');">English</option><option class="fr" value="fr_FR" style="background-image:url('img/flags/france_30x20.png');">Français</option><option class="de" value="de_DE" style="background-image:url('img/flags/Germany_30x20.png');">Deutsch</option><option class="es" value="es_ES" style="background-image:url('img/flags/spanish_30x20.png');">Español</option><option value="it_IT" style="background-image:url('img/flags/italia_30x20.png');">Italiano</option> </select> 179 </div> 180 </li> 181 </ul> 182 </div> 183</div>
184<script> 185 186 //detection resolution 187 var screen = {} ; 188 var timeout ; 189 screen.w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 190 screen.h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 191 192 console.log(screen) 193 194 $( ".selector" ).autoComplete({ autoFocus: true }); 195 196 197 198 $('.basicAutoComplete').autoComplete({ 199 200 minLength:1, 201 resolver: 'custom', 202 formatResult: function (item) { 203 204 var tt = item.name ; 205 /* 206 if (item.volumeInfo.hasOwnProperty('authors')) { 207 console.log(item.volumeInfo.authors[0]) ; 208 tt = tt+" "+item.volumeInfo.authors[0] ; 209 } 210 var img_src = "img/book-icon.png" ; 211 if (item.volumeInfo.hasOwnProperty('imageLinks')) { 212 if (item.volumeInfo.imageLinks.hasOwnProperty('thumbnail')) { 213 img_src = item.volumeInfo.imageLinks.thumbnail ; 214 } 215 } 216 */ 217 218 if(item.type == "book") tt = '<b>'+item.name+'</b>'+' - <span style="color:#F00;font-style: italic" >'+item.author+'</span>' ; 219 220 return { 221 value: item.id, 222 text: tt, 223 html: [tt] 224 }; 225 }, 226 events: { 227 search: function(qry, callback) { 228 229 if (timeout) { 230 clearTimeout(timeout); 231 } 232 233 timeout = setTimeout(function() { 234 console.log("search "+qry+" "+timeout); 235 // let's do a custom ajax call 236 $.ajax( 237 'search.php', 238 { 239 data: { 'q': qry, 240 'type': 'artist', 241 'lg': 'en' 242 } 243 } 244 ).done(function(res) { 245 callback(res) 246 }); 247 }, 700); 248 249 250 251 } 252 } 253 }); 254 255 256 $('.basicAutoComplete').on('autocomplete.select', function (evt, item) { 257 console.log('select', item); 258 map_id = item.id ; 259 book_url = item.url ; 260 // map_type = "artist" ; 261 map_name = item.name ; 262 263 // graph_getdata(map_id,map_type,"fr") ; 264 265 gTimer.attr("transform", function(d) {return "translate("+canvas.width/2+","+canvas.height/3+")";}) 266 267 gtag('event', 'select', {'event_category': 'search_content', 268 'event_label': item.name 269 }); 270 document.getElementById("input_search2").value = "" ; 271 272 273 if(screen.w >= 700) { 274 get_graph(nb0,fact_link,items_nb) ; 275 } 276 277 }); 278 279 280 281 jQuery().ready(function() { 282 283 jQuery('#countrylist').append('<div class="button" ></div>'); 284 jQuery('#countrylist').append('<ul class="select-list"></ul>'); 285 jQuery('#countrylist select option').each(function() { 286 var bg = jQuery(this).css('background-image'); 287 jQuery('.select-list').append('<li class="clsAnchor"><span value="' + jQuery(this).val() + '" class="' + jQuery(this).attr('class') + '" style=background-image:' + bg + '>' + jQuery(this).text() + '</span></li>'); 288 }); 289 jQuery('#countrylist .button').html('<span width="30" style=background-image:' + jQuery('#countrylist select').find(':selected').css('background-image') + ';background-repeat:no-repeat;padding-left:40px;margin-left:10px;background-size:contain;user-select:none;>' + jQuery('#countrylist select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link" style="font-size: 1.422em;"><img src="img/arrow_122x63.png" alt="arrow" height="12" width="15"></a>'); 290 jQuery('#countrylist ul li').each(function() { 291 if (jQuery(this).find('span').text() == jQuery('#countrylist select').find(':selected').text()) { 292 jQuery(this).addClass('active'); 293 } 294 }); 295 jQuery('#countrylist .select-list span').on('click', function() 296 { 297 var dd_text = jQuery(this).text(); 298 var dd_img = jQuery(this).css('background-image')+';background-repeat:no-repeat;padding-left:40px;margin-left:10px;'; 299 300 301 var dd_img2 = dd_img.split('\\').join('\\\\') 302 303 var dd_val = jQuery(this).attr('value'); 304 jQuery('#countrylist .button').html('<span width="30" style=background-image:' + dd_img + '>' + dd_text + '</span>' + '<a href="javascript:void(0);" class="select-list-link"><img src="img/arrow_128x128.png" alt="Smiley face" height="15" width="15"></a>'); 305 jQuery('#countrylist .select-list span').parent().removeClass('active'); 306 jQuery(this).parent().addClass('active'); 307 $('#countrylist select[name=options]').val( dd_val );
308 $('#countrylist .select-list li').slideUp(); 309 countrylist_select_event_handler(dd_val) ; 310 }); 311 jQuery('#countrylist .button').on('click','a.select-list-link', function() 312 { 313 jQuery('#countrylist ul li').slideToggle(); 314 }); 315 }); 316 317 function countrylist_select_event_handler(elt) { 318 console.log("countrylist_select_event_handler()",elt); 319 320 gtag('event', 'chgt_country_lg', {'event_category': 'user_config', 321 'event_label': elt 322 }); 323 324 325 var url = document.location.href.substr(0, document.location.href.lastIndexOf(".")); 326 327 var CheminComplet = document.location.href; 328 var CheminRepertoire = CheminComplet.substring( 0 ,CheminComplet.lastIndexOf( "/" ) ); 329 var NomDuFichier = CheminComplet.substring(CheminComplet.lastIndexOf( "/" )+1 ); 330 331 var directory=document.URL.substr(0,document.URL.lastIndexOf('/')) ; 332 var fichier=document.URL.substr(document.URL.lastIndexOf('/')+1) ; 333 334 //console.log("directory",directory); 335 // console.log("fichier",fichier); 336 337 // document.location.href=fichier+"?lg_CT="+elt ; 338 339 console.log("countrylist_select_event_handler() map_name",map_name); 340 341 var deb = window.location.href.split('?')[0]; ; 342 343 if(!map_name) { 344 //http://liveplasma.com/2018/ 345 url = "index.php?&lg_CT="+elt ; 346 url = deb+"?&lg_CT="+elt ; 347 } else { 348 url = deb+"?id="+map_id+"&type="+map_type+"&name="+map_name+"&lg_CT="+elt ; 349 url = "graph_explorer.php"+"?id="+map_id+"&type="+map_type+"&name="+map_name+"&lg_CT="+elt ; 350 } 351 console.log("countrylist_select_event_handler() url",url); 352 353 354 document.location.href=url ; 355 } 356 357 358 function click_user_favorites_event_handler() { 359 360 switch(focus) { 361 case "home" : 362 var url = "graph_explorer.php?type=user_artists" ; 363 window.location.href = url; 364 365 break ; 366 default : 367 user_name_map = user_name ; 368 369 get_user_graph("user_artists") ; break ; 370 } 371 } 372 373 function click_user_favorites_books_event_handler() { 374 375 switch(focus) { 376 case "home" : 377 var url = "graph_explorer.php?type=user_books" ; 378 window.location.href = url; 379 380 break ; 381 default : 382 user_name_map = user_name ; 383 384 get_user_graph("user_books") ; break ; 385 } 386 } 387 388 389 390 391</script>
391 392 393 394 395 396<style> 397 398 399 400 401 402 403 #div_param{ 404 position:fixed; 405 bottom:100px; 406 } 407 408 409 410 411 412 413 #player{ 414 position: absolute; 415 top:85px; 416 width:248px; 417 height: 250px; 418 background-color: #999 ; 419 } 420 421 #div_artist_cover{ 422 position:absolute; 423 top: 70px; 424 width:250px; 425 height: 250px; 426 background-size: cover; 427 428 } 429 430 #div_player_ctrl { 431 position:absolute; 432 top: 0px; 433 width:250px; 434 height: 550px; 435 background: linear-gradient(rgba(255,255,255,0),30%, #FFFFFF 80%); 436 437 } 438 439 .player_red { 440 fill: var(--main-red); 441 stroke: var(--main-red); 442 stroke-linecap: round ; 443 } 444 445 .player_red.focus { 446 fill: var(--main-red-focus); 447 stroke: var(--main-red-focus); 448 } 449 450 .player_grey { 451 fill: var(--main-grey); 452 stroke: var(--main-grey); 453 stroke-linecap: round ; 454 } 455 456 .player_grey.focus { 457 fill: var(--main-grey-focus); 458 stroke: var(--main-grey-focus); 459 } 460 461 #ad_google { 462 position:fixed; 463 top:535px; 464 left: 20px; 465 } 466 467 #track_artist_name { 468 font-family: 'Roboto', sans-serif; 469 font-size: 13px; 470 fill: grey; 471 text-anchor: middle ; 472 } 473 #track_title { 474 font-family: 'Roboto', sans-serif; 475 font-size: 15px; 476 fill: black; 477 text-anchor: middle ; 478 } 479 480 481 482 circle .halo_play{ 483 fill: #FF0000; 484 fill-opacity:0.1 ; 485 stroke-width:0 ; 486 } 487 488 .btplay{ 489 fill: #FFF; 490 stroke-width:2 ; 491 stroke: var(--node_color); 492 } 493 494 .btplay_focus { 495 496 stroke-width:2 ; 497 fill: #FF0000; 498 } 499 500 501 502 503 </style> 504 505
505<script src="./js/youtube_player.js?288"></script>
505 506 507<body> 508 509 <div id="div_graph"></div> 510 <div id="div_param" style="display: none" > 511 nb0 <input type="number" min="5" max="50" value="10" class="slider" id="nb0"> 512 fact_link <input type="number" min="1" max="3" value="1.5" step="0.1" class="slider" id="fact_link"> 513 items_nb <input type="number" min="15" max="200" value="40" class="slider" id="nb1"> 514 </div> 515 <div id ="div_mobile_search"> 516<form class="form-search form-inline" action="javascript:void(0);" > 517 <input type="text" id="form_search" class="search-query form-control basicAutoComplete" size="100%" placeholder="Search an artist you like" data-url="search.php?&type=artist" 518 autocomplete="off"/></form></div> 519 <div id="music_player"> 520 <div id="div_player_ctrl" > 521 <svg height="500px" width="248px" id="svg_player"> 522 </svg> 523 </div> 524 <div id="player"></div> 525 <div id="div_artist_cover"></div> 526 </div> 527 <div id="div_book_info"> 528 </div> 529 530 531 <div id="ad_google"> 532
532<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
532 533 <!-- ad_250x250 --> 534 <ins class="adsbygoogle" 535 style="display:inline-block;width:250px;height:250px" 536 data-ad-client="ca-pub-6804558852802725" 537 data-ad-slot="9284631338"></ins> 538
538<script> 539 (adsbygoogle = window.adsbygoogle || []).push({}); 540 </script>
540 541 </div> 542 543 544 545<body> 546 547<style> 548 549 550 551</style> 552 553 554
555<script> 556 557var user_connect = false; 558var array_favorites = [] ; 559 560document.getElementById('music_player').style.display = "none" ; 561 562/* 563switch(map_type) { 564 case "artist" :document.getElementById('music_player').style.display = "block" ; break ; 565 default : document.getElementById('music_player').style.display = "none" ; break ; 566} 567*/ 568 569 570function extractUrlParams(){ 571 console.log("location.search",location.search); 572 var t = location.search.substring(1).split('&'); 573 var f = []; 574 for (var i=0; i<t.length; i++){ 575 var x = t[ i ].split('='); 576 f[x[0]]=x[1]; 577 } 578 return f; 579 } 580 581 582 583 584 585 586 587 588 589 590var nb0=14 ; 591var fact_link=1.8 ; 592var items_nb=50; 593 594document.getElementById("nb0").value = nb0 ; 595document.getElementById("fact_link").value = fact_link ; 596document.getElementById("nb1").value = items_nb ; 597 598 599document.getElementById("nb0").oninput = function() { 600 nb0 = this.value ; 601 get_graph(nb0,fact_link,items_nb) 602} 603document.getElementById("fact_link").oninput = function() { 604 fact_link = this.value ; 605 get_graph(nb0,fact_link,items_nb) 606} 607document.getElementById("nb1").oninput = function() { 608 items_nb = this.value ; 609 get_graph(nb0,fact_link,items_nb) 610} 611 612var playlist =[]; 613 614var loading = false ; 615 616 617 618 619 let version = 5; 620 621 let loader = 'document.write("<' + 'script src=\\"https://d3js.org/d3.v' + version + '.min.js\\"></' + 622 'script>' + 623 '");'; 624 eval(loader); 625 626 627 var map_img_url = "" ; 628 629 var map_type = "artist" ; 630 631 var items_nb_to_complete = 0 ; 632 633 console.log("map type: "+map_type) ; 634 console.log("map_id: "+map_id) ; 635 636 var user_id = 2 ; 637 var items_nb_max = 100 ; 638 639 var scale_lift_width ; 640 var scale_distance_width ; 641 var scale_item_nb_radius ; 642 var scale_stroke_opacity ; 643 var scale_lift_nb_color ; 644 var scale_lift_strength ; 645 646 var scale_lift_min ; 647 var zoom_handler ; 648 var ggraph ; 649 650 var hotness_color_scale ; 651 652 let 653 fill, simulation, svg,svg_legend, 654 glegends,gnodes,glinks, 655 nodes, links, node, link, cursor, 656 nodeElements, linkElements, 657 legendItems, 658 i = false, 659 canvas = {}, 660 playing_artist = {}, 661 dataset = {}, 662 data = {}, 663 dataviz = {}, 664 display = {}; 665 field_id_color = {}; 666 667 var gTimer ; 668 var gTimer_player ; 669 670 671 672 playing_artist = {id:"",name:"",img_url:""}; 673 674 var radio = {radio_artist_mbid:"",radio_artist_name:"",playing_artist_mbid:"",playing_artist_name:"",playing_track_title:"",img_url:""}; 675 676 canvas = { 677 width: 1600, 678 height: 1300 679 }; 680 681 // - - - - - - - - - - 682 // 2. Functions 683 // - - - - - - - - - - 684 // 2.1. Eventhandler functions 685 // - - - - - - - - - - 686 var dragCanvas = false ; 687 688 dataset.links = []; 689 dataset.nodes = []; 690 691 window.addEventListener('load', init,{passive: true}); 692 693//http://bl.ocks.org/ericcoopey/6c602d7cb14b25c179a4 694 695function main() { 696 697 698 setSvg(); 699 init_timer() ; 700 701 init_color("light") 702 703 set_svg_player_ctrl() 704 // setSvg_legend() ; 705 setSimulation(); 706 // setCursor(); 707 // setColorScheme(); 708 709 // get_graph() ; 710 711 712 var array_parameters = extractUrlParams() ; 713 714 console.log(" array_parameters", array_parameters); 715 716 // if(array_parameters["mbid"] != "") { 717 // map_id = array_parameters["id"] ; 718 /* 719 if((map_name !="") && !user_connect ) { 720 if(screen.w >= 700) { 721 722 gtag('event', 'landing_page', {'event_category': 'graph', 723 'event_label': map_name 724 }); 725 get_graph(nb0,fact_link,items_nb) ; 726 } 727 } 728 729 */ 730 /* 731 if(home) { 732 $("#myModal").modal("show"); 733 } */ 734 /* 735 else { 736 737 //on lance un graph qui servira d'accueil 738 map_name = "queen" ; 739 map_id = "420ca290-76c5-41af-999e-564d7c71f1a7" ; 740 get_graph(nb0,fact_link,items_nb) ; 741 742 743 744 } */ 745 746 747 if(user_connect) { 748 //on recherche les favoris de l'utilisateurs avant le launch_map_test() 749 get_favorites() ; 750 } else { 751 752 launch_map_test() ;
753 754 } 755 756 757 } 758 759 function launch_map_test() { 760 761 console.log("launch_map_test()?"+map_type+" "+map_id) 762 763 if(screen.w >= 700) { 764 765 switch(map_type) { 766 case "user_artists" : 767 map_id = user_name_map ; 768 get_graph(nb0,fact_link,items_nb) ; 769 break ; 770 case "user_books" : 771 map_id = user_name_map ; 772 get_graph(nb0,fact_link,items_nb) ; 773 break ; 774 case "artist" : 775 if(map_id !="") { 776 get_graph(nb0,fact_link,items_nb) ; 777 } 778 779 break ; 780 case "book" : 781 items_nb = 40 ; 782 if(map_id != "") { 783 get_graph(nb0,fact_link,items_nb) ; 784 } 785 break ; 786 case "serie" : 787 if(map_id != "") { 788 get_graph(nb0,fact_link,items_nb) ; 789 } 790 break ; 791 } 792 } else { 793 radio.radio_artist_name = map_name ; 794 radio.radio_artist_mbid = map_id ; 795 update_music_player() ; 796 } 797 798 799 } 800 801 802 803 // 804 //.range(["#CACACA","#BABABA","#808080", "#676767","#FE5800","#FF7300"]) 805 function init() { 806 main(); 807/* 808 hotness_color_scale = d3.scaleLinear().domain([0,20,40,60,80]) 809 .range(["#fdf542","#fbd808","#ff9005", "#f9530b","#ff0000"]) 810 811 hotness_color_scale = d3.scaleLinear().domain([0,50,100]) 812 .range(["#dddddd","#BABABA","#ffa600"]) 813 814 hotness_color_scale = d3.scaleOrdinal().domain([0,100]) 815 .range(["#dddddd","#BABABA","#ffa600"]) 816 */ 817 818 // hotness_color_scale = d3.scaleOrdinal().domain([0,110]) 819 // .range(["#dddddd","#e7d5c3","#efcda9", "#f5c58e","#f9bd74","#fcb558","#feae39"]) 820 }; 821 822 function init_color(state) { 823 switch(state) { 824 case "light": 825 hotness_color_scale = d3.scaleLinear().domain([0,100]) 826 .range(["#FFF","#ffa600"]) 827 break ; 828 case "dark": 829 hotness_color_scale = d3.scaleLinear().domain([0,50,100]) 830 .range(["#959595","#FFA553"]) 831 break ; 832 } 833/* 834 d3.selectAll(".node").selectAll("circle_halo") 835 .attr("stroke", function(d){ return hotness_color_scale(d.hotness);}) 836 837 gtag('event', 'chgt_dark_mode', {'event_category': 'user_config', 838 'event_label': state 839 }); 840 */ 841 842 843 //dataset.links = []; 844 //dataset.nodes = []; 845 //data = []; 846 847 //get_graph(nb0,fact_link,items_nb) ; 848 849 850 } 851 852 853 854 855 function setSimulation() { 856 switch (version) { 857 case 3: 858 859 break; 860 case 4: 861 case 5: 862 simulation = d3.forceSimulation() 863 // .nodes(dataset.nodes) 864 //.distance(200) 865 .force('link', d3.forceLink() 866 .strength(function (d) {var str =1 ; return 1;}) //var str =scale_lift_strength(d.lift) ; 867 ) 868 .force('charge', 869 d3.forceManyBody() 870 .strength(-2500) 871 ) 872 //.force('collision', 873 // d3.forceCollide().radius(function (d) {var radius = d.id.length/2*14;
873 return radius;})) 874 .force("x", d3.forceX(0).strength(0.15)) 875 .force("y", d3.forceY(0).strength(0.15)) 876 .on('tick', onTicked) 877 .force('center', d3.forceCenter().x(canvas.width / 2).y(canvas.height / 3)) 878 break; 879 } 880 881 } 882 883 function startSimulation() { 884 // console.log("startSimulation() "+simulation.alpha() ) 885 886 var strength ; 887 888 switch(map_type) { 889 case "book" : strength = -25000 ; break ; 890 case "user_books" : strength = -25000 ; break ; 891 case "serie" : strength = -25000 ; break ; 892 default : strength = -2500 ; break ; 893 } 894 895 simulation.force('charge', 896 d3.forceManyBody() 897 .strength(strength) 898 ) 899 900 901 // - - - - - - - - - - 902 // NODES 903 // - - - - - - - - - - 904 switch (version) { 905 case 3: break; 906 case 4: break; 907 case 5: 908 D3node_create_nodes(gnodes,dataset) ; 909 D3node_update_favorite() ; 910 simulation.nodes(dataset.nodes) ; 911 simulation.force("link").links(dataset.links) ; 912 break; 913 } 914 // - - - - - - - - - - 915 // LINKS 916 // - - - - - - - - - - 917 switch (version) { 918 case 3: break; 919 case 4: break; 920 case 5: 921 D3link_create_links(glinks,dataset); 922 break; 923 } 924 925 switch (version) { 926 case 3: 927 simulation.start(); 928 break; 929 case 5: 930 simulation.alphaTarget(0.01) 931 .alphaMin(0.011) 932 .restart(); 933 break; 934 } 935 } 936/* 937 function onCanvasMousemove() { 938 939 // cursor.attr("transform", "translate(" + d3.mouse(this) + ")"); 940 941 console.log("onCanvasMousemove()") 942 console.log(d3.mouse(this)) 943 944 945 946 if(dragCanvas) { 947 d3.select("#ggraph") 948 .attr("transform", "translate(" + (d3.mouse(this)[0]-deltaX) + ","+(d3.mouse(this)[1]-deltaY)+")"); 949 950 951 } 952 } 953 */ 954 955 956 var deltaX ; 957 var deltaY ; 958 function onCanvasMousedown(){ 959 960 dragCanvas = !dragCanvas ; 961 // console.log("onCanvasMousedown() "+d3.mouse(this)[0]+" "+(d3.mouse(this)[1])) 962 963 document.body.style.cursor="move"; 964 } 965 966 function onSvgMouseUp() { 967 // console.log("onSvgMouseUp()") 968 // d3.event.stopPropagation(); 969 document.body.style.cursor="auto"; 970 } 971 972 973 974 function setSvg() { 975 console.log("setSvg()") 976 svg = d3.select("#div_graph") 977 .append("svg") 978 .attr("width", "100%") 979 .attr("height", canvas.height) 980 .on("mousedown", onCanvasMousedown) 981 .on("zoom", onSvgMouseUp) 982 983 984 ggraph = svg.append("g") 985 .attr("id","ggraph") 986 987 glinks = d3.select("#ggraph").append("g") 988 .attr("id","glinks") 989 990 gnodes = d3.select("#ggraph").append("g") 991 .attr("id","gnodes") 992 993 //add zoom capabilities 994 zoom_handler = d3.zoom() 995 .on("zoom", zoom_actions) 996 .on("end", zoomend_actions); 997 998 zoom_handler(svg); 999 1000 } 1001 1002 function update_progress_bar(current_time,total_time) { 1003 1004 t = current_time ; 1005 1006 var cc = new Date(t * 1000).toISOString().substr(14, 5); 1007 if (current_time <= 599) {cc = new Date(t * 1000).toISOString().substr(15, 4);} 1008 // if (current_time <= 59) {cc = new Date(t * 1000).toISOString().substr(17, 2);} 1009 1010 d3.select("#current_time").style("visibility","visible") 1011 d3.select("#current_time").text(cc) ; 1012 1013 t = total_time ; 1014 1015 var cc = new Date(t * 1000).toISOString().substr(14, 5); 1016 if (current_time <= 599) {cc = new Date(t * 1000).toISOString().substr(15, 4);} 1017 // if (current_time <= 59) {cc = new Date(t * 1000).toISOString().substr(17, 2);} 1018 1019 d3.select("#duration").style("visibility","visible") 1020 d3.select("#duration").text(cc) ; 1021 1022 var rap = current_time/total_time ; 1023 d3.select(".progress_bar_cursor").style("visibility","visible") 1024 d3.select(".progress_bar").style("visibility","visible") 1025 d3.select(".progress_bar_cursor").attr("width",170*rap) 1026 } 1027 1028 1029 function set_svg_player_ctrl() { 1030 1031 largeur_player = 248 1032 1033 //radio title 1034 largeur = 170 ; 1035 yref = 20 1036 x = 0 1037 1038 var title = d3.select("#div_player_ctrl").select("svg") 1039 .append("text") 1040 .attr("id","radio_title") 1041 .attr("x",x) 1042 .attr("y",yref) 1043 .text("") 1044 1045 1046 //play artist 1047 var bt_play = d3.select("#div_player_ctrl").select("svg") 1048 .append("g") 1049 .attr("id","music_player_bt_play_artist") 1050 .attr("transform", "translate(0 35)") 1051 1052 bt_play.append("rect") 1053 .attr("class", "bt") 1054 .attr("width",80).attr("height",30) 1055 .attr("rx",30/2).attr("ry",30/2) 1056 .style("stroke-width",2) 1057 .style("stroke","#DDD") 1058 .on( 'mouseenter', function() { 1059 d3.select(this).classed("focus", true); 1060 }) 1061 .on( 'mouseleave', function() { 1062 d3.select(this).classed("focus", false); 1063 }) 1064 .on( 'click', function(d,i) { 1065 click_node_btplay_event_handler(map_id,map_name,"playlist") 1066 }) 1067 1068 bt_play.append("g") 1069 .attr("transform", "translate(20 -5)")
1070 .append("polygon") 1071 .attr("class", "bt_play_launch_radio") 1072 .attr("points",(-20/2+3)+", "+(-20/2+20)+","+(-20/2+3)+","+(20/2+20)+" "+(+20/2+3)+",20") 1073 .on( 'click', function(d,i) { 1074 // console.log("click btplay ") ; 1075 click_node_btplay_event_handler(map_id,map_name,"playlist") 1076 }) 1077 .on( 'mouseenter', function() { 1078 d3.select(this).classed("btplay_focus",true) ; 1079 }) 1080 .on( 'mouseleave', function() { 1081 d3.select(this).classed("btplay_focus",false) ; 1082 }) 1083 bt_play.append("text") 1084 .attr("class","bt_label") 1085 .attr("x",40) 1086 .attr("y",19) 1087 .text("play") 1088 1089 //play similar 1090 var bt_play_similar = d3.select("#div_player_ctrl").select("svg") 1091 .append("g") 1092 .attr("id","music_player_bt_play_similar_artist") 1093 .attr("transform", "translate(118 35)") 1094 1095 bt_play_similar.append("rect") 1096 .attr("class", "bt") 1097 .attr("width",130).attr("height",30) 1098 .attr("rx",30/2).attr("ry",30/2) 1099 .style("stroke-width",2) 1100 .style("stroke","#DDD") 1101 .on( 'mouseenter', function() { 1102 d3.select(this).classed("focus", true); 1103 }) 1104 .on( 'mouseleave', function() { 1105 d3.select(this).classed("focus", false); 1106 }) 1107 .on( 'click', function(d,i) { 1108 click_node_btplay_event_handler(map_id,map_name,"similar_playlist") 1109 }) 1110 1111 bt_play_similar.append("g") 1112 .attr("transform", "translate(20 -5)") 1113 .append("polygon") 1114 .attr("class", "bt_play_launch_radio") 1115 .attr("points",(-20/2+3)+", "+(-20/2+20)+","+(-20/2+3)+","+(20/2+20)+" "+(+20/2+3)+",20") 1116 .on( 'click', function(d,i) { 1117 // console.log("click btplay ") ; 1118 click_node_btplay_event_handler(map_id,map_name,"similar_playlist") 1119 }) 1120 .on( 'mouseenter', function() { 1121 d3.select(this).classed("btplay_focus",true) ; 1122 }) 1123 .on( 'mouseleave', function() { 1124 d3.select(this).classed("btplay_focus",false) ; 1125 }) 1126 bt_play_similar.append("text") 1127 .attr("class","bt_label") 1128 .attr("x",40) 1129 .attr("y",19) 1130 .text("play similar") 1131 1132 1133 1134 //icon play artist 1135 /* 1136 x = 20 ; 1137 y = 12 ; 1138 var largeur = 16 ; 1139 var hauteur = 16 ; 1140 // var y = 220 ; 1141 var play = d3.select("#div_player_ctrl").select("svg") 1142 .append("g") 1143 .attr("class", "player_red") 1144 .attr("id", "icon_play_bt") 1145 .attr("transform","translate("+x+","+y+")") 1146 .on( 'mouseenter', function() { 1147 d3.select(this).classed("focus", true); 1148 }) 1149 .on( 'mouseleave', function() { 1150 d3.select(this).classed("focus", false); 1151 }) 1152 .on( 'click', function(d,i) { 1153 click_play_bt_event_handler() ; 1154 })
1155 play.append("polygon") 1156 .attr("points",(-largeur/2)+", "+(-hauteur/2)+","+(-largeur/2)+","+(hauteur/2)+" "+(+largeur/2)+",0") 1157 */ 1158 1159 //bt play similar artists to artist map 1160 /* 1161 yref += 10 1162 largeur = 200 ; 1163 hauteur = 30 ; 1164 var ep = 2 ; 1165 x = 0 ; 1166 y = yref 1167 var tt = d3.select("#div_player_ctrl").select("svg") 1168 .append("rect") 1169 .attr("class", "bt") 1170 .attr("id", "bt_play_similar") 1171 .attr("x",x) 1172 .attr("y",y) 1173 .attr("rx",hauteur/2) 1174 .attr("ry",hauteur/2) 1175 .attr("width",largeur) 1176 .attr("height",hauteur) 1177 .on( 'mouseenter', function() { 1178 d3.select(this).classed("focus", true); 1179 }) 1180 .on( 'mouseleave', function() { 1181 d3.select(this).classed("focus", false); 1182 }) 1183 .on( 'click', function(d,i) { 1184 click_play_similar_artist_event_handler() 1185 }) 1186 1187 var tt = d3.select("#div_player_ctrl").select("svg") 1188 .append("text") 1189 .attr("id", "bt_launch_similar_radio") 1190 .attr("x",35) 1191 .attr("y",y+hauteur*2/3) 1192 .text("similar artists") 1193 1194 //icon play similar 1195 x = 20 ; 1196 y += 15 ; 1197 var largeur = 16 ; 1198 var hauteur = 16 ; 1199 // var y = 220 ; 1200 var play = d3.select("#div_player_ctrl").select("svg") 1201 .append("g") 1202 .attr("class", "player_red") 1203 .attr("id", "icon_play_bt_similar") 1204 .attr("transform","translate("+x+","+y+")") 1205 .on( 'mouseenter', function() { 1206 d3.select(this).classed("focus", true); 1207 }) 1208 .on( 'mouseleave', function() { 1209 d3.select(this).classed("focus", false); 1210 }) 1211 .on( 'click', function(d,i) { 1212 click_play_similar_artist_event_handler() 1213 }) 1214 play.append("polygon") 1215 .attr("points",(-largeur/2)+", "+(-hauteur/2)+","+(-largeur/2)+","+(hauteur/2)+" "+(+largeur/2)+",0") 1216 1217 */ 1218 1219 1220 1221 1222 //text track 1223 yref = 365 1224 xref = largeur_player/2 1225 1226 var text_loading = d3.select("#div_player_ctrl").select("svg") 1227 .append("text") 1228 .attr("id","track_title") 1229 .attr("x",xref) 1230 .attr("y",yref) 1231 .text("track title") 1232 1233 1234 //text artist 1235 yref += 20 1236 1237 var text_loading = d3.select("#div_player_ctrl").select("svg") 1238 .append("text") 1239 .attr("id","track_artist_name") 1240 .attr("x",xref) 1241 .attr("y",yref) 1242 .text("track_artist_name") 1243 1244 1245 //barre progress 1246 largeur = 170 ; 1247 hauteur = 6 ; 1248 yref += 10 ; 1249 x = largeur_player/2-largeur/2 1250 1251 var progress = d3.select("#div_player_ctrl").select("svg") 1252 .append("rect") 1253 .attr("class","progress_bar") 1254 .attr("x",248/2-largeur/2) 1255 .attr("y",yref) 1256 .attr("rx",hauteur/4) 1257 .attr("ry",hauteur/4) 1258 .attr("width",largeur) 1259 .attr("height",hauteur) 1260 .style("visibility","hidden") 1261 1262 //barre progress cursor 1263 1264 var progress = d3.select("#div_player_ctrl").select("svg") 1265 .append("rect") 1266 .attr("class","progress_bar_cursor") 1267 .attr("x",x) 1268 .attr("y",yref-1) 1269 .attr("rx",hauteur/4) 1270 .attr("ry",hauteur/4) 1271 .attr("width",5) 1272 .attr("height",hauteur) 1273 .style("visibility","hidden") 1274 1275 var progress = d3.select("#div_player_ctrl").select("svg") 1276 .append("text") 1277 .attr("id","current_time") 1278 .attr("class","text_chrono") 1279 .attr("x",0) 1280 .attr("y",yref+hauteur+1) 1281 .attr("width",largeur) 1282 .attr("height",hauteur) 1283 .style("visibility","hidden") 1284 1285 1286 var progress = d3.select("#div_player_ctrl").select("svg") 1287 .append("text") 1288 .attr("id","duration") 1289 .attr("class","text_chrono") 1290 .attr("x",largeur_player) 1291 .attr("y",yref+hauteur+1) 1292 .attr("width",largeur) 1293 .attr("height",hauteur) 1294 .style("visibility","hidden") 1295 1296 1297 var largeur = 16 ; 1298 var hauteur = 16 ; 1299 1300 1301 1302 1303 yref +=50 1304 var x = 125 ; 1305 var y = yref ; 1306 1307 //halo 1308 var halo = d3.select("#div_player_ctrl").select("svg") 1309 .append("g") 1310 .attr("transform","translate("+x+","+y+")") 1311 1312 halo.append("circle") 1313 .attr("class","halo_play") 1314 .style("fill","#F00") 1315 .style("fill-opacity",0.1) 1316 .style("stroke-width",0) 1317 .attr("r", 35) 1318 .append("animate") 1319 .attr("attributeType","css") 1320 .attr("id","halo_anim") 1321 .attr("attributeName","r") 1322 .attr("values","35;39;37;39;35") 1323 .attr("dur","4s") 1324 .attr("begin","0s") 1325 .attr("repeatCount","indefinite") 1326 1327 halo.append("circle") 1328 .attr("class","halo_play") 1329 .style("fill","#F00") 1330 .style("fill-opacity",0.2) 1331 .style("stroke-width",0) 1332 .attr("r", 25) 1333 .append("animate") 1334 .attr("attributeType","css") 1335 .attr("id","halo_anim2") 1336 .attr("attributeName","r") 1337 .attr("values","25;26;25;28;25") 1338 .attr("dur","2s") 1339 .attr("begin","0s") 1340 .attr("repeatCount","indefinite") 1341 1342 1343 1344 1345 //bt play 1346 var x = 128 ; 1347 // var y = 220 ; 1348 var play = d3.select("#div_player_ctrl").select("svg") 1349 .append("g") 1350 .attr("class", "player_red") 1351 .attr("id", "play_bt") 1352 .attr("transform","translate("+x+","+y+")") 1353 .on( 'mouseenter', function() { 1354 d3.select(this).classed("focus", true); 1355 }) 1356 .on( 'mouseleave', function() { 1357 d3.select(this).classed("focus", false); 1358 }) 1359 .on( 'click', function(d,i) { 1360 1361 1362 click_play_bt_event_handler() ; 1363 1364 })
1365 play.append("polygon") 1366 .attr("points",(-largeur/2)+", "+(-hauteur/2)+","+(-largeur/2)+","+(hauteur/2)+" "+(+largeur/2)+",0") 1367 1368 1369 1370 1371 //pause_bt 1372 var ep = 6 ; 1373 var largeur = 12 ; 1374 hauteur = 12 ; 1375 // var y = 198 ; 1376 x = 124 ; 1377 1378 1379 1380 var pause = d3.select("#div_player_ctrl").select("svg") 1381 .append("g") 1382 .attr("class", "player_red") 1383 .attr("id", "pause_bt") 1384 .attr("transform","translate("+x+","+y+")") 1385 .style("visibility", "hidden") 1386 .on( 'mouseenter', function() { 1387 d3.select(this).classed("focus", true); 1388 }) 1389 .on( 'mouseleave', function() { 1390 d3.select(this).classed("focus", false); 1391 }) 1392 .on( 'click', function(d,i) { 1393 click_pause_artist_event_handler() ; 1394 }) 1395 1396 pause.append("rect") 1397 .attr("x",-largeur/2) 1398 .attr("y",-hauteur/2) 1399 .attr("width",ep*3) 1400 .attr("height",hauteur) 1401 .attr("fill-opacity",0) 1402 .attr("stroke-width",0) 1403 1404 pause.append("rect") 1405 .attr("x",-largeur/2) 1406 .attr("y",-hauteur/2-1) 1407 .attr("width",ep) 1408 .attr("height",hauteur+4) 1409 .style("fill", "#F00") 1410 .style("stroke", "none") 1411 .attr("stroke-width",0) 1412 1413 pause.append("rect") 1414 .attr("x",ep/2) 1415 .attr("y",-hauteur/2-1) 1416 .attr("width",ep) 1417 .attr("height",hauteur+4) 1418 .style("fill", "#F00") 1419 .style("stroke", "none") 1420 .attr("stroke-width",0) 1421 1422 1423 1424 //bt next 1425 largeur = 11 ; 1426 hauteur = 11 ; 1427 var ep = 2 ; 1428 x = 180 ; 1429 // y = 200 ; 1430 //https://weareoutman.github.io/rounded-polygon/ 1431 //<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"><path stroke="none" fill="#20be86" d="M10.401923788647 3.0096189432334a3 3 0 0 1 5.1961524227066 0l9.8038475772934 16.980762113533a3 3 0 0 1 -2.5980762113533 4.5l-19.607695154587 0a3 3 0 0 1 -2.5980762113533 -4.5"></path></svg> 1432 1433 var tt = d3.select("#div_player_ctrl").select("svg") 1434 .append("g") 1435 .attr("class", "player_grey") 1436 .attr("transform","translate("+x+","+y+")") 1437 .on( 'mouseenter', function() { 1438 d3.select(this).classed("focus", true); 1439 }) 1440 .on( 'mouseleave', function() { 1441 d3.select(this).classed("focus", false); 1442 }) 1443 .on( 'click', function(d,i) { 1444 click_next_event_handler() 1445 }) 1446 1447 tt 1448 .append("rect") 1449 .attr("x",-largeur/2-ep*3) 1450 .attr("y",-hauteur/2-ep*4) 1451 .attr("width",largeur+7*ep) 1452 .attr("height",hauteur+ep*8) 1453 .attr("fill-opacity",0.0) 1454 .attr("stroke-width",0) 1455 1456 tt 1457 .append("polygon") 1458 .attr("points",(-largeur/2)+", "+(-hauteur/2)+","+(-largeur/2)+","+(hauteur/2)+" "+(+largeur/2)+",0") ; 1459 1460 tt 1461 .append("rect") 1462 .attr("x",+largeur/2+ep) 1463 .attr("y",-hauteur/2) 1464 .attr("width",ep) 1465 .attr("height",hauteur) ; 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 init_timer_player() ; 1478 1479 1480 1481 } 1482 1483 1484 1485 1486 function init_timer_player() { 1487 gTimer_player = d3.select("#div_player_ctrl").select("svg") 1488 .append("g").style("opacity", 0) 1489 1490 .attr("transform", function(d){return "translate("+124+","+445+")";}) 1491 1492 var elt = gTimer_player.append("g").attr("id","timer_player").style("opacity", 1) 1493 1494 //.data(lines_data) 1495 var lines_data = [300,200,40,50,90,100,300,200,40,50,90,100]; 1496 1497 elt.selectAll("line") 1498 .data(lines_data) 1499 .enter() 1500 .append("line") 1501 .attr("x1", 0) 1502 .attr("y1", 30) 1503 .attr("x2", 0) 1504 .attr("y2", function(d,i){return 20;}) 1505 .attr("transform", function(d,i){return "rotate("+i*360/12+")";}) 1506 .style("stroke","#FF0000") 1507 .style("stroke-opacity",function(d,i){return i/13+1/6;}) 1508 .style("stroke-width",4) 1509 .style("stroke-linecap","round") ; 1510 1511 elt.append("animateTransform") 1512 .attr("attributeType","xml") 1513 .attr("id","timeranim_player") 1514 .attr("attributeName","transform") 1515 .attr("type","rotate") 1516 .attr("from","0") 1517 .attr("to","380") 1518 .attr("dur","0.85s") 1519 .attr("repeatCount","indefinite") 1520 } 1521 1522 1523 1524 1525 //Zoom functions 1526 function zoom_actions(){ 1527 1528 // console.log("zoom_actions()") 1529 if(!dragCanvas) document.body.style.cursor="zoom-in"; 1530 ggraph.attr("transform", d3.event.transform) ; 1531 1532 var strength ; 1533 1534 switch(map_type) { 1535 case "serie" : strength = -25000 ; break ; 1536 case "book" : strength = -25000 ; break ; 1537 case "user_books" : strength = -25000 ; break ; 1538 default : strength = -2500 ; break ; 1539 } 1540 1541 var string_tt = Math.min(strength,strength*Math.pow(d3.zoomTransform(ggraph.node()).k,2)) ;//svg.select("#ggraph").attr("transform"); 1542 1543 simulation.force('charge', 1544 d3.forceManyBody() 1545 .strength(string_tt) 1546 ) 1547 1548 1549 /* 1550 simulation.alpha(.05) 1551 startSimulation() ; 1552 */ 1553 1554 simulation.alpha(.05) 1555 .alphaMin(0.011) 1556 .restart(); 1557 } 1558 function zoomend_actions(){ 1559 // onSvgMouseUp() 1560 document.body.style.cursor="auto"; 1561 dragCanvas = false ; 1562 } 1563 1564 1565 function init_timer() { 1566 gTimer = ggraph.append("g").style("opacity", 1) 1567 .attr("id","g_timer") 1568 .attr("visibility","hidden") 1569 .attr("transform", function(d){return "translate("+canvas.width/2+","+canvas.height/3+")";}) 1570 1571 var visualTimer = gTimer.append("g").attr("id","timer").style("opacity", 1) 1572 1573 //.data(lines_data) 1574 var lines_data = [300,200,40,50,90,100,300,200,40,50,90,100]; 1575 1576 visualTimer.selectAll("line") 1577 .data(lines_data) 1578 .enter() 1579 .append("line") 1580 .attr("x1", 0) 1581 .attr("y1", 30) 1582 .attr("x2", 0) 1583 .attr("y2", function(d,i){return 60;}) 1584 .attr("transform", function(d,i){return "rotate("+i*360/12+")";}) 1585 .style("stroke","#FF0000") 1586 .style("stroke-opacity",function(d,i){return i/13+1/6;}) 1587 .style("stroke-width",6) 1588 .style("stroke-linecap","round") ; 1589 1590 visualTimer.append("animateTransform") 1591 .attr("attributeType","xml") 1592 .attr("id","timeranim") 1593 .attr("attributeName","transform") 1594 .attr("type","rotate") 1595 .attr("from","0") 1596 .attr("to","380") 1597 .attr("dur","0.85s") 1598 .attr("repeatCount","indefinite") 1599 } 1600 var start_time ; 1601 1602 function get_user_graph(favorite_type) { 1603 1604 map_type = favorite_type ; 1605 map_id = user_name_map ; 1606 1607 console.log("get_user_graph() "+map_type+" "+map_id ) 1608 get_graph() ; 1609 } 1610 1611 function get_graph(level0_items_nb=5,fact_links_nb=1,items_nb=40) { 1612 1613 1614 1615 switch(map_type) { 1616 1617 case "user_artists" : 1618 1619 //user_name = map_id ; 1620 var newurl = "user_artists"+"-"+encodeURIComponent(user_name_map)+".html" ; 1621 1622 var stateObj = { type: map_type,id: user_name_map,name: map_name }; 1623 history.pushState(stateObj, "page 2", newurl); 1624 // } 1625 break ; 1626 case "user_books" : 1627 1628 //user_name = map_id ; 1629 var newurl = "user_books"+"-"+encodeURIComponent(user_name_map)+".html" ; 1630 1631 var stateObj = { type: map_type,id: user_name_map,name: map_name }; 1632 history.pushState(stateObj, "page 2", newurl); 1633 // } 1634 break ; 1635 default : 1636 var newurl = map_type+"-"+encodeURIComponent(map_name)+".html" ; 1637 1638 var stateObj = { type: map_type,id: map_id,name: map_name }; 1639 history.pushState(stateObj, "page 2", newurl); 1640 break ; 1641 } 1642 1643 1644 1645 1646 var url = "graph.php?id="+map_id+"&type="+map_type+"&catalogue=fr"+"&fact_links_nb="+fact_links_nb+"&level0_items_nb="+level0_items_nb+"&items_nb="+items_nb+"&home="+home+"&book_url="+book_url+"&items_nb_to_complete="+items_nb_to_complete ; 1647 1648 // var url = "bug_json.json" ; 1649 start_time = new Date().getTime(); 1650 1651 console.log(url) 1652 1653 if(home) { 1654 gtag('event', 'get_graph_home', {'event_category': 'graph', 1655 'event_label': map_name 1656 }); 1657 } else { 1658 gtag('event', 'get_graph', {'event_category': 'graph', 1659 'event_label': map_name 1660 }); 1661 } 1662 1663 1664 d3.json(url).then(function(data) { 1665 1666 dataset_event(data) ; 1667 }); 1668 1669 loading = true ; 1670 1671 document.getElementById('timeranim').beginElement(); 1672 gTimer.style("opacity",1) 1673 gTimer.attr("visibility","visible") 1674 } 1675 1676 function dataset_event(data_result) { 1677 1678 var load_time = new Date().getTime() - start_time ; 1679 1680 1681 gtag('event', 'dataset_event', {'event_category': 'graph', 1682 'value': load_time 1683 }); 1684 console.log("DATASET_EVENT() time: "+load_time+ "ms"); 1685 console.log(data_result); 1686 1687 map_id = data_result.info.id ; 1688 1689 1690 console.log("timer "+gTimer.attr("visibility")); 1691 document.getElementById('timeranim').endElement(); 1692 gTimer.style("opacity",0) 1693 gTimer.attr("visibility","hidden") ; 1694 loading = false ; 1695 1696 console.log("timer "+gTimer.attr("visibility")); 1697 1698/* 1699 if(((playing_artist.img_url == "") || (playing_artist.id == "") ) && (map_type == "artist")) { 1700 playing_artist.img_url = data_result.info.img_url ; 1701 d3.select("#text_artist").text(data_result.info.name) ; 1702 set_artist_cover(data_result.info.img_url) ; 1703 } 1704 */ 1705 1706 map_img_url = data_result.info.img_url ; 1707 map_name = data_result.info.name ; 1708 1709 1710 switch(map_type) { 1711 case "artist" : break ; 1712 case "book" : set_book_info(map_img_url) ; 1713 } 1714 // set_artist_cover(map_img_url) ; 1715 1716 if(radio.radio_artist_name == "") { 1717 radio.radio_artist_name = data_result.info.name ; 1718 radio.img_url = data_result.info.img_url ; 1719 } 1720 1721 if (typeof player.getPlayerState() !== "undefined") { 1722 if(player.getPlayerState() != 1) { 1723 radio.radio_artist_name = data_result.info.name ; 1724 radio.img_url = data_result.info.img_url ; 1725 } 1726 } 1727 1728 if(map_type == "artist") { 1729 update_music_player() ; 1730 } 1731 1732 1733 1734 data = data_result ; 1735 dataviz = data.dataviz; 1736 1737 display = {} ; 1738 1739 // set_lift_max(data.lift.max) 1740 1741 //on determine la pop max 1742 var i = -1 ; 1743 popularity_max = -10 ; 1744 var arr_test ={} ; 1745 var cpt_field = 0 ;
1746 data.nodes.forEach(function(pnode) { 1747 i++ ; 1748 console.log(pnode) 1749 // pnode.id = pnode.mbid ; 1750 // pnode.type = pnode.type ; 1751 //favoris ou non? 1752 if(user_connect) { 1753 pnode.favorite = is_favorite(pnode) ; 1754 } 1755 1756 popularity_max = Math.max(pnode.popularity,popularity_max) ; 1757 if(!(pnode.id in arr_test)) {cpt_field++ ; arr_test[pnode.id] = cpt_field ; } 1758 1759 }) 1760 items_nb_to_complete = 0 ; 1761 if(map_type == "book") { 1762 if(dataset.nodes.length <= items_nb && data_result.info.nodes_to_add_nb>=1) { 1763 items_nb_to_complete = 2 ; //15-data.nodes.length ; 1764 console.log("items_nb_to_complete :"+items_nb_to_complete) 1765 get_graph(nb0,fact_link,items_nb) ; 1766 } else { 1767 console.log("no items to complete :"+items_nb_to_complete) 1768 } 1769 } 1770 1771 // console.log(data); 1772 1773 fields_nb = cpt_field ; 1774 1775 // console.log("popularity_max : "+popularity_max) ; 1776 1777 scale_item_nb_radius = d3.scaleSqrt() 1778 .domain([0, popularity_max]) 1779 .range([12, 45]); 1780 1781 scale_stroke_opacity = d3.scaleSqrt() 1782 .domain([0, 100]) 1783 .range([0.1, 1]); 1784 1785 // on vide les liens 1786 dataset.links = []; 1787 // dataset.nodes = []; 1788 1789 //initialisation du lift_min 1790 // lift_min = data.dataset.lift_set ; 1791 1792 // d3.select("#liftmin").attr("value",lift_min) ; 1793 // d3.select("#labellift").html((lift_min/100).toFixed(2)) ; 1794 1795 1796 //on initialize les display des champs et les couleurs_index 1797 // field_id_color = {} ; 1798 var i=-1 ; 1799 1800 // console.log("dataviz.length") ; 1801 1802 1803 // console.log("field_id_color") 1804 // console.log(field_id_color) 1805 // console.log(dataviz) 1806 //on initialize les display des links et les target et source 1807 i = -1 ; 1808 data.links.forEach(function(plink) { 1809 i++ ; 1810 data.links[i].display = 0 ; 1811 console.log(plink) 1812 plink.source = get_node_from_data(data,plink.source_id) ; 1813 plink.target = get_node_from_data(data,plink.target_id) ; 1814 }) 1815 //console.log("datanodes length: "+data.nodes.length ) 1816 //console.log("datalink length: "+data.links.length ) 1817 1818 1819 // D3legend_item_create(glegends,dataviz) ; 1820 /* 1821 console.log("data") 1822 console.log(data) ; 1823 */ 1824 // console.log("dataset") 1825 // console.log(dataset) ; 1826 1827 1828 1829 1830 1831 1832 if(update_dataset()) { 1833 simulation.alpha(.7) ; 1834 startSimulation(); 1835 1836 // console.log(simulation) 1837 } 1838 //update_dataset2() ; 1839 1840 // D3lift_item_create(gLifts,data) ; 1841 1842 // simulation.alpha(.7) ; 1843 // startSimulation(); 1844 1845 // console.log(dataset) ; 1846 1847 } 1848 1849 function get_node_from_data(pdata,nodetest_id) { 1850 var result = false ; 1851 pdata.nodes.forEach(function(pnode) { 1852 if(pnode.id == nodetest_id) {result = pnode ; } 1853 }) 1854 return result ; 1855 } 1856 1857 function update_dataset() { 1858 1859 1860 console.log(" UPDATE_DATASET()") ; 1861 // console.log(" lift_min : "+lift_min) ; 1862 /* console.log(data) ; 1863 console.log("dataset") 1864 console.log(dataset) ;*/ 1865 1866 var dataviz_item1 1867 var dataviz_item2 1868 1869 //si node du dataset n'existe pas dans le data => DESTRUCTION 1870 // console.log("for each dataset") 1871 for (var i = dataset.nodes.length-1; i >= 0 ; i--) { 1872 node = dataset.nodes[i] ; 1873 // console.log("exist in data? "+node.name) 1874 if(!get_node_from_data(data,node.id)) { 1875 dataset_removeNode_by_id(node.id) ; 1876 dataset_remove_all_Links_to(node.id) ; 1877 } 1878 } 1879 1880 // console.log(" nodes du data => delete ou creation ds dataset") ; 1881 // parcour data.nodes => determination si display= true or false 1882 1883 // console.log("for each data")
1884 data.nodes.forEach( 1885 function(pnode) { 1886 // console.log(pnode) 1887 pnode.display = true ; 1888 /* 1889 switch(pnode.node_type) { 1890 case "modalite" : 1891 1892 if(show_modalities) { 1893 dataviz_item1 = get_dataviz_from_field_id(pnode.field_id) ; 1894 pnode.display = (dataviz_item1.visible == 1)? true:false ; 1895 pnode.label = dataviz_item1.field_name ; 1896 1897 if((dataviz_item1.field_type == "quantitative") && pnode.display ) { 1898 //si quantitative il faut aussi que la classe soit affichée 1899 classe_p = get_classe_from_classe_id(dataviz_item1.classes,pnode.classe_id) 1900 pnode.display = (classe_p.classe_visible == 1)? true:false ; 1901 } 1902 1903 } else { 1904 pnode.display = false ; 1905 } 1906 break ; 1907 case "individu" : 1908 pnode.display = true ; 1909 break ; 1910 } //switch 1911 */ 1912 //si node de la carte , il ne bouge pas 1913 if(pnode.id == map_id) { 1914 pnode.fixed = true ; 1915 pnode.fx = canvas.width/2 ; 1916 pnode.fy = canvas.height/3 ; 1917 } 1918 1919 // console.log("test "+pnode.id) 1920 var test_exist = dataset_node_exist(pnode.id) ; 1921 1922 // console.log("exist in dataset? "+pnode.id+" "+pnode.name+" => "+test_exist) 1923 1924 if(test_exist == "FALSE" ) { 1925 //si le node du data nexiste pas => CREATION 1926 pnode.x = Math.random()*400+canvas.width/2 ; 1927 pnode.y = Math.random()*400+canvas.height/3 ; ; 1928 pnode.vx = 0 ; 1929 pnode.vy = 0 ; 1930 1931 // console.log("create "+pnode.name) 1932 dataset.nodes.push(pnode); 1933 } 1934 else { 1935 //si le node du data existe => MAJ 1936 // console.log("MAJ "+pnode.id+" "+test_exist) 1937 var x = dataset.nodes[test_exist].x ; 1938 var y = dataset.nodes[test_exist].y ; 1939 dataset.nodes[test_exist]=pnode; 1940 dataset.nodes[test_exist].x = x ; 1941 dataset.nodes[test_exist].y = y ; 1942 1943 } 1944 /* 1945 if(!pnode.display && test_exist ) { 1946 //si le node ne doit plus etre affiché alors qu'il existe => DELETE 1947 dataset_removeNode_by_id(pnode.id) ; 1948 dataset_remove_all_Links_to(pnode.id) ; 1949 // console.log("delete "+pnode.id) 1950 } 1951 */ 1952 1953 } //function(pnode) { 1954 1955 ) //data.nodes.forEach( 1956 1957 // console.log("dataset links") 1958 dataset.links.forEach( 1959 function(plink) { 1960 console.log(plink.source.name+" - "+plink.target.name) 1961 } 1962 ) 1963 1964 1965 //suprresion des liens obsoletes 1966 // console.log("delete des liens obsoletes") 1967 1968 for (var i = dataset.links.length-1; i >= 0 ; i--) { 1969 plink = dataset.links[i] ; 1970 if(!get_link_in_array(data,plink.source.id,plink.target.id)) { 1971 // console.log("delete "+plink.source.name+" - "+plink.target.name) 1972 dataset_removeLink(plink.source.id, plink.target.id) ; 1973 } 1974 } 1975 1976 var lift_max_temp = -100 ; 1977 var display_link = true ; 1978 var test_link_exist ; 1979 1980 // gestion des liens : creation ou suppression 1981 // console.log("gestion des liens : creation ou delete") 1982 data.links.forEach( 1983 function(plink) { 1984 // console.log(plink) 1985 plink.link_type = plink.source.type+" - "+plink.target.type 1986 plink.id = plink.source.id+" - "+plink.target.id 1987 1988 switch(plink.link_type) { 1989 case "artist - artist" : display_link = true ; break ; 1990 case "book - book" : display_link = true ; break ; 1991 case "serie - serie" : display_link = true ; break ; 1992 /* 1993 case "modalite - modalite" : display_link = (plink.lift >= lift_min)? true:false ; break ; 1994 case "individu - modalite" : display_link = true ; 1995 plink.indiv_nb = 1 ; 1996 plink.lift = 200 ; break ; 1997 break ; 1998 case "individu - individu" : display_link = true; plink.index = i ; 1999 plink.indiv_nb = 1 ; 2000 plink.lift = lift_max/plink.distance ; 2001 distance_max = Math.max(distance_max,plink.distance) 2002 break ; 2003 */ 2004 } 2005 /* 2006 if(plink.source.display && plink.target.display && display_link && plink.link_type == "modalite - modalite") { 2007 lift_max_temp = Math.max(lift_max_temp,plink.lift); 2008 } 2009 */ 2010 // console.log(plink) 2011 // test_link_exist = link_exist(plink.source.id,plink.target.id) ; 2012 test_link_exist = get_link_in_array(dataset,plink.source.id,plink.target.id) 2013 // console.log("test "+plink.source.name+"-"+plink.target.name+" "+test_link_exist) 2014 2015 2016 if(plink.source.display && plink.target.display && display_link && !test_link_exist) { 2017 // => creation du lien 2018 plink.display = 1 ; 2019 2020 dataset.links.push(plink) ; 2021 // console.log(" => create "+plink.source.name+"-"+plink.target.name+" "+dataset.links.length) 2022 // console.log(plink) 2023 // console.log(plink.source.id+" - "+plink.target.id+" "+plink.source.display+" "+plink.target.display+" "+plink.lift+" E "+test_link_exist+" => create") 2024 /* 2025 if(plink.link_type == "modalite - modalite" ) { 2026 lift_max_temp = Math.max(lift_max_temp,plink.lift); 2027 } 2028 */ 2029 } else { 2030 if((!plink.source.display || !plink.target.display || !display_link) && test_link_exist) { 2031 // => destruction du lien 2032 // console.log(plink.source.id+" - "+plink.target.id+" "+plink.source.display+" "+plink.target.display+" "+plink.lift+" E "+test_link_exist+" => delete") 2033 dataset_removeLink(plink.source.id, plink.target.id) 2034 plink.display=0 ; 2035 } else { 2036 plink.display = 1 ; 2037 // console.log(" => keep "+plink.source.name+"-"+plink.target.name+" "+dataset.links.length) 2038 } 2039 2040 } 2041 2042 2043 2044 } 2045 ) 2046 console.log(dataset) 2047 2048 //si focus_field_id 2049 /* 2050 if(focus_field_id) { 2051 var nodes_to_keep = new Array() ; 2052 data.links.forEach( 2053 function(plink) { 2054 //console.log(plink) ; 2055 //console.log((plink.display==1)) ; 2056 if((plink.target.field_id == focus_field_id ) || (plink.source.field_id == focus_field_id ) && plink.target.display && plink.source.display) { 2057 2058 // console.log(plink.target.field_id+" "+plink.source.field_id+" "+plink.lift+" "+plink.display+" "+(plink.display==1)) ; 2059 if(plink.display==1) { 2060 nodes_to_keep.push(plink.source.id) ; 2061 nodes_to_keep.push(plink.target.id) ; 2062 // console.log("ok"+" "+plink.source.id+" "+plink.source.label+" "+plink.source.value) ; 2063 // console.log("ok"+" "+plink.target.id+" "+plink.target.label+" "+plink.target.value) ; 2064 } 2065 } 2066 } 2067 ) 2068 //console.log(nodes_to_keep) ; 2069 //on retire les nodes du dataset qui ne sont pas dans nodes_to_keep 2070 } 2071 2072 if(focus_node_id) { 2073 var nodes_to_keep = new Array() ; 2074 data.links.forEach( 2075 function(plink) { 2076 // console.log(plink) ; 2077 // console.log((plink.display==1)) ; 2078 if((plink.target.id == focus_node_id ) || (plink.source.id == focus_node_id ) && plink.target.display && plink.source.display) { 2079 2080 // console.log(plink.target.field_id+" "+plink.source.field_id+" "+plink.lift+" "+plink.display+" "+(plink.display==1)) ; 2081 if(plink.display==1) { 2082 nodes_to_keep.push(plink.source.id) ; 2083 nodes_to_keep.push(plink.target.id) ; 2084 // console.log("ok"+" "+plink.source.id+" "+plink.source.label+" "+plink.source.value) ; 2085 // console.log("ok"+" "+plink.target.id+" "+plink.target.label+" "+plink.target.value) ; 2086 } 2087 } 2088 } 2089 ) 2090 //console.log(nodes_to_keep) ; 2091 //on retire les nodes du dataset qui ne sont pas dans nodes_to_keep 2092 2093 2094 } 2095 */ 2096 //on retire les nodes inutiles du graph 2097 /* 2098 if(focus_node_id || focus_field_id ) {
2099 data.nodes.forEach( 2100 function(pnode){ 2101 2102 test_id = pnode.id ; 2103 test = false ; 2104 nodes_to_keep.forEach( 2105 function(node_id) { 2106 if(test_id == node_id ) {test= true ; } 2107 }) 2108 if(!test) { 2109 dataset_removeNode_by_id(pnode.id) ; 2110 dataset_remove_all_Links_to(pnode.id) ; 2111 } 2112 }) 2113 }*/ 2114 2115 2116 2117 // if(lift_max_temp != -100) { lift_max = lift_max_temp ; set_lift_max(lift_max) ; } 2118 2119 // console.log("distance_max: "+distance_max) 2120 scale_distance_width = d3.scalePow() 2121 .exponent(0.5) 2122 .domain([0, 1.5]) 2123 .range([6, 0.1]); 2124 2125 2126 2127 //console.log(data) ; 2128 // console.log(dataset) ; 2129 2130 d3.select("#ggraph").attr("transform","translate(0,0)") 2131 2132 return true ; 2133 2134 2135 2136 } 2137 2138 function dataset_removeNode_by_id(id) { 2139 // console.log("dataset_removeNode_by_id() "+id) ; 2140 for (var i = dataset.nodes.length-1; i >= 0 ; i--) { 2141 if (dataset.nodes[i].id == id ) { 2142 dataset.nodes.splice(i, 1); 2143 } 2144 } 2145 } 2146 2147 function dataset_remove_all_Links_to(source_id) { 2148 for (var i = dataset.links.length-1; i >= 0 ; i--) { 2149 if (dataset.links[i].source.id == source_id || dataset.links[i].target.id == source_id) { 2150 //console.log("remove link dataset "+dataset.links[i].source.id+" - "+dataset.links[i].target.id ) ; 2151 dataset.links.splice(i, 1); 2152 } 2153 } 2154 } 2155 2156 function dataset_node_exist(nodetest_id) { 2157 // var result = false ; 2158 var j = dataset.nodes.length ; 2159 for(var i=j-1;i>=0;i--) { 2160 pnode = dataset.nodes[i] ; 2161 if (pnode.id == nodetest_id) { 2162 return i ; 2163 } 2164 } 2165 return "FALSE" ; 2166 } 2167 2168 function get_link_in_array(parray,source_id,target_id) { 2169 var result = false ; 2170 parray.links.forEach( 2171 function(plink) { 2172 if((plink.source.id == source_id && plink.target.id == target_id ) || (plink.source.id == target_id && plink.target.id == source_id )) {result = plink ; } 2173 } 2174 ) 2175 return result; 2176 } 2177 2178 function dataset_removeLink(source_id, target_id) { 2179 2180 for (var i = dataset.links.length-1; i >= 0 ; i--) { 2181 if (dataset.links[i].source.id == source_id && dataset.links[i].target.id == target_id) { 2182 dataset.links.splice(i, 1); 2183 // console.log("dataset_removeLink() "+source_id+" - "+target_id) ; 2184 break; 2185 } 2186 } 2187 } 2188 2189 function onTicked() { 2190 2191 let nodeElements = svg.selectAll('.node'); 2192 let linkElements = svg.selectAll('.D3link'); 2193 2194 linkElements 2195 .attr("x1", function (d) { 2196 return d.source.x; 2197 }).attr("y1", function (d) { 2198 return d.source.y; 2199 }) 2200 .attr("x2", function (d) { 2201 return d.target.x; 2202 }).attr("y2", function (d) { 2203 return d.target.y; 2204 }); 2205 2206 nodeElements 2207 .attr("transform", function(d) { return "translate(" + Math.round(d.x*10)/10 + "," + Math.round(d.y*10)/10 + ")"; }); 2208 2209 /* 2210 if(loading) { 2211 var ii = '[id="'+map_id+'"]' 2212 var tt = d3.select(ii).attr("transform") ; 2213 2214 // console.log(tt) ; 2215 gTimer.attr("transform",tt ) ; 2216 } 2217 */ 2218 2219 2220 2221 2222 2223 2224 /* 2225 .attr("cx", function (d) { 2226 if (i === false) { 2227 console.log(typeof node); 2228 console.log(typeof d); 2229 i = true; 2230 } 2231 return d.x; 2232 }).attr("cy", function (d) { 2233 return d.y; 2234 });*/ 2235 } 2236 2237 2238 function click_node_event_handler(d) { 2239 2240 var ii = '[id="'+map_id+'"]' 2241 2242 d3.select(ii).classed("focus", false) 2243 2244 2245 2246 map_id = d.id ; 2247 2248 map_name = d.name ; 2249 2250 map_type = d.type ; 2251 2252 2253 2254 2255 2256 2257 var ii = '[id="'+map_id+'"]' 2258 2259 d3.select(ii).classed("focus", true) 2260 2261 // console.log(ii) ; 2262 2263 var tt = d3.select(ii).attr("transform") ; 2264 2265 console.log(tt) ; 2266 2267 console.log(d3.select("#ggraph").attr("transform")) ; 2268 2269 //d3.select("#ggraph").attr("transform","translate(0,0)") 2270 2271 deltaX = -d.x+canvas.width/2 ; 2272 deltaY = -d.y+canvas.height/3 ; 2273 2274 //d3.select("#ggraph").attr("transform","translate("+(deltaX)+","+(deltaY)+")") 2275 2276 // pnode.fx = canvas.width/2 ; 2277 // pnode.fy = canvas.height/3 ; 2278 2279 2280 gTimer.attr("transform",tt ) ; 2281 2282 2283 // update_dataset() ; 2284 2285 2286 items_nb_to_complete = 0 ; 2287 get_graph(nb0,fact_link,items_nb) ; 2288 2289 gtag('event', 'click_artist', {'event_category': 'graph', 2290 'event_label': map_name 2291 }); 2292 2293 2294 document.getElementById("input_search2").value = "" ; 2295 2296 /* 2297 gtag('event', 'graph', {'event_category': 'select_content',
2298 'event_label': name 2299 }); 2300 */ 2301 2302 2303 //on enleve la selction de l'artiste fixé 2304 /* 2305 _.each(nodesdata, function(d) { 2306 if(d.mbid == map_id) { 2307 2308 d3.select("#g"+map_id).classed("focus", true) 2309 2310 d3.select("#g"+map_id) 2311 .transition() 2312 .duration(200) 2313 .attr("transform", "translate("+w/2+", "+h/2.5+")"); 2314 2315 d3.select("#T"+map_id) 2316 .transition() 2317 .duration(200) 2318 .attr("transform", "translate("+w/2+", "+h/2.5+")"); 2319 2320 } 2321 }); 2322 2323 force.start(); 2324 2325 graph_updatedata(); 2326 */ 2327 2328 } 2329 2330 2331function toggle_playbt(state) { 2332 2333 d3.select("#pause_bt").style("visibility",function(){return (state)? "hidden":"visible"}) 2334 d3.select("#play_bt").style("visibility",function(){return (state)? "visible":"hidden"}) 2335} 2336 2337function click_pause_artist_event_handler(){ 2338 toggle_playbt(true) ; 2339 player.pauseVideo(); 2340} 2341function click_next_event_handler() { 2342 console.log("click_next_event_handler()") 2343 2344 DB_update_track_skip(playlist[player.playerInfo.playlistIndex].video_id,playing_artist.id) ; 2345 2346 2347 player.nextVideo() ; 2348 toggle_playbt(false) ; 2349 gtag('event', 'load_playlist', {'event_category': 'audio', 2350 'event_label': playing_artist.name 2351 }); 2352 } 2353 2354function click_play_artist_event_handler(mbid,name) { 2355 2356 radio.radio_artist_name = name ; 2357 2358 update_music_player() ; 2359 2360 console.log("click_play_artist_event_handler() "+mbid+" "+name) 2361 2362 /* gtag('event', 'play', {'event_category': 'play_video', 2363 'event_label': name 2364 }); */ 2365 toggle_playbt(false) ; 2366 if(player.getPlayerState() == 2) { 2367 player.playVideo() ; 2368 } else { 2369 playing_artist.id = mbid 2370 playing_artist.name = name 2371 youtube_player_load_playlist(playing_artist.id, name, "playlist", 25); 2372 } 2373 // document.getElementById("volet_YT_clos").display = "block"; 2374} 2375 2376function click_play_similar_artist_event_handler() { 2377 2378 document.getElementById('timeranim_player').beginElement(); 2379 toggle_playbt(false) 2380 gTimer_player.style("opacity",1) 2381 gTimer_player.attr("visibility","visible") 2382 2383 // console.log("click_play_similar_artist_event_handler() "+map_id+" "+map_name) 2384 youtube_player_load_playlist(map_id, map_name, "similar_playlist", 25); 2385 2386} 2387/* 2388String.prototype.replaceArray = function(find, replace) { 2389 var replaceString = this; 2390 var regex; 2391 for (var i = 0; i < find.length; i++) { 2392 regex = new RegExp(find[i], "g"); 2393 replaceString = replaceString.replace(regex, replace[i]); 2394 } 2395 return replaceString; 2396}; 2397*/ 2398 2399function set_playing_artist(id,name,track_name) { 2400 if(id!="") playing_artist.id = id ; 2401 if(name!="") playing_artist.name = name ; 2402 playing_artist.track_name = track_name ; 2403 2404 //le nom d'artiste affiché 2405 2406 d3.select("#text_artist").text(playing_artist.name) ; 2407 2408 //le titre du morceau 2409 2410 if ( track_name === track_name.toUpperCase()) { 2411 track_name = track_name.toLowerCase() ; 2412 } 2413 2414 //on enleve le nom de l'artiste 2415 /* 2416 var textarea = $(this).val(); 2417 var find = ["<", ">", "\n"]; 2418 var replace = ["<", ">", "<br/>"]; 2419 textarea = textarea.replaceArray(find, replace); 2420 */ 2421 2422 //var textarea = $(this).val(); 2423 var replace = ''; 2424 2425 var find = playing_artist.name+" - "; /(official video)/i ; 2426 track_name = track_name.replace(find, replace); 2427 2428 var find = /(official video)/i ; 2429 track_name = track_name.replace(find, replace); 2430 var find = /(official music video)/i ; 2431 track_name = track_name.replace(find, replace); 2432 var find = '()'; 2433 track_name = track_name.replace(find, replace); 2434 var find = '[]'; 2435 track_name = track_name.replace(find, replace); 2436 2437 track_name = track_name.trim() 2438 2439 2440 2441 2442 track_name = (track_name.length > 28) ? track_name.slice(0, 27) + '...' : track_name; 2443 2444 d3.select("#text_track").text(track_name) ; 2445 2446 //l'image 2447 set_artist_cover 2448 if(map_id != playing_artist.id) { 2449 2450 //il faut afficher une autre image ; 2451 set_artist_cover(false) ; 2452 // document.getElementById("div_artist_cover").style.visibility='hidden' ; 2453 } 2454 2455} 2456 2457function click_node_btplay_event_handler(id,name,playlist_type) { 2458 console.log("click_node_btplay_event_handler() ") 2459 2460 radio.radio_artist_name = name ; 2461 radio.radio_artist_mbid = id ; 2462 2463 radio.img_url = "" ; 2464 2465 // set_playing_artist(id,name,"") ; 2466 2467 youtube_player_load_playlist(id,name,playlist_type, 25); 2468 2469 // toggle_playbt(false) ; 2470 /* 2471 if(map_id != id) { 2472 //il faut afficher une autre image ; 2473 document.getElementById("div_artist_cover").style.visibility='hidden' ; 2474 } 2475 */ 2476 update_music_player() ; 2477} 2478 2479function click_node_favorite_event_handler(id,name,favorite,type) { 2480 2481 //map_name = name ; 2482 2483 if(user_connect) { 2484 2485 2486 2487 2488 var url = "user.php?fct=update_favorite&id="+id+"&favorite="+favorite+"&type="+type ; 2489 2490 console.log(url) 2491 2492 d3.json(url).then(function(data_result) { 2493 2494 2495 favo = new Object() ;
2496 favo.id = id ; 2497 favo.favorite = favorite ; 2498 favo.type = type 2499 2500 array_favorites.push(favo) ; 2501 2502 data.nodes.forEach(function(pnode) { 2503 2504 if(pnode.id == id) {pnode.favorite = favorite ; console.log(pnode) ;} 2505 }) 2506 2507 2508 2509 2510 D3node_update_favorite() 2511 2512 2513 2514 2515 2516 if(map_type == "user_artists") { 2517 //on active le timer sur le node mis en favoris 2518 var ii = '[id="'+id+'"]' 2519 var tt = d3.select(ii).attr("transform") ; 2520 gTimer.attr("transform",tt ) 2521 get_user_graph() ; 2522 } 2523 2524 if(map_type == "user_books") { 2525 //on active le timer sur le node mis en favoris 2526 var ii = '[id="'+id+'"]' 2527 var tt = d3.select(ii).attr("transform") ; 2528 gTimer.attr("transform",tt ) 2529 get_user_graph() ; 2530 } 2531 2532 2533 2534 2535 2536 2537 // console.log("favorite") 2538 }); 2539 2540 } else { 2541 //popup 2542 $("#myModalToConnect").modal("show"); 2543 } 2544 2545 2546 2547 2548 2549} 2550 2551function get_favorites() { 2552 var url = "user.php?fct=get_favorites" ; 2553 2554 //console.log(url) 2555 2556 d3.json(url).then(function(data_result) { 2557 2558 array_favorites = data_result.favorites ; 2559 console.log("get_favorites()") ; 2560 console.log(array_favorites) ; 2561 2562 2563 launch_map_test() ; 2564 2565 /* 2566 if((map_id !="")) { 2567 if(screen.w >= 700) { 2568 2569 gtag('event', 'landing_page', {'event_category': 'graph', 2570 'event_label': map_name 2571 }); 2572 get_graph(nb0,fact_link,items_nb) ; 2573 } 2574 } 2575 if(map_type == "user_artists") { 2576 get_user_graph() ; 2577 } */ 2578 2579 }); 2580} 2581 2582function is_favorite(pnode) { 2583 2584 2585 // console.log("is_favorite") ; 2586 // console.log(array_favorites) ; 2587 // console.log(pnode.type) ; 2588 2589 result = 0 ; 2590 2591 let array_to_search,id_to_search ; 2592 2593 switch(pnode.type) { 2594 case "artist" : 2595 array_to_search = array_favorites.artists ; 2596 id_to_search = pnode.mbid 2597 break ; 2598 case "book" : 2599 array_to_search = array_favorites.books ; 2600 id_to_search = pnode.id ; 2601 break ; 2602 case "serie" : 2603 array_to_search = array_favorites.series ; 2604 id_to_search = pnode.id ; 2605 break ; 2606 } 2607 2608 let shouldSkip = false; 2609 result = 0 ; 2610 array_to_search.forEach(function(favorite_item){ 2611 if (shouldSkip) { return ;} 2612 if(favorite_item.id == id_to_search) { 2613 2614 result = favorite_item.favorite ; 2615 shouldSkip = true ; 2616 return ; 2617 } 2618 }); 2619 2620 return result ; 2621} 2622 2623function click_play_bt_event_handler() { 2624 2625 document.getElementById('timeranim_player').beginElement(); 2626 gTimer_player.style("opacity",1) 2627 gTimer_player.attr("visibility","visible") 2628 2629 toggle_playbt(false) ; 2630 2631 // console.log(click_play_bt_event_handler()+" player.getPlayerState() "+player.getPlayerState() ) 2632 2633 //player.playVideo() ; 2634 2635 if(player.getPlayerState() == 2) { 2636 player.playVideo() ; 2637 } else { 2638 if(playing_artist.id == "") { 2639 // playing_artist.id = map_id ; 2640 // playing_artist.name = map_name ; 2641 2642 set_playing_artist(map_id,map_name,"") 2643 console.log("click_play_bt_event_handler() "+playing_artist.id+" "+player.getPlayerState()+" "+map_id) 2644 youtube_player_load_playlist(playing_artist.id, playing_artist.name, "playlist", 25); 2645 2646 gtag('event', 'load_playlist', {'event_category': 'audio', 2647 'event_label': playing_artist.name 2648 }); 2649 } 2650 } 2651 2652} 2653 2654 2655 var playlist =[]; 2656 2657 function youtube_player_load_playlist(mbid,q,playlist_type,maxResults) { 2658 2659 var url = "videos.php?fct="+playlist_type+"&mbid="+mbid+"&q="+q+"&maxResults="+maxResults; 2660 2661 //http://liveplasma.com/2018/ 2662 2663 console.log("youtube_player_load_playlist() url:",url) ; 2664 2665 // d3.json(url, function(error, videodata) { 2666 d3.json(url).then(function(videodata){ 2667 // if (!error) { 2668 2669 playlist = videodata ; 2670 //console.log("isArray ",Array.isArray(playlist)) 2671 2672 2673 //console.log("isArray",Array.isArray(playlist)) 2674 2675 //on sotcke les videos de la playlist dans le player 2676 2677 new_playlist_event_handle(); 2678 //render(dataset) ; 2679 /* } else { 2680 console.error(error); 2681 }*/ 2682 }); 2683 2684 } 2685 2686 function show_hide_hotness(show_hotness) { 2687 2688 console.log("show_hide_hotness "+show_hotness) ; 2689 2690 switch(show_hotness) { 2691 case true : 2692 d3.selectAll(".circle_halo") 2693 .attr("stroke-opacity",1) 2694 .style("visibility","visible") 2695 break ; 2696 case false : 2697 d3.selectAll(".circle_halo") 2698 .attr("stroke-opacity",0) 2699 .style("visibility","hidden") 2700 break ; 2701 } 2702 2703 gtag('event', 'show_hotness', {'event_category': 'user_config', 2704 'event_label': show_hotness 2705 }); 2706 2707 } 2708 2709 String.prototype.toHtmlEntities = function() { 2710 return this.replace(/./gm, function(s) {
2711 // return "&#" + s.charCodeAt(0) + ";"; 2712 return (s.match(/[a-z0-9\s]+/i)) ? s : "&#" + s.charCodeAt(0) + ";"; 2713 }); 2714}; 2715 2716 2717 function DB_update_track_name(video_id,title) { 2718 2719 2720 // console.log("DB_update_track_name() to complete "+video_id+" "+title) ; 2721 2722 2723 var url = "inc/videos.inc.php?fct=update_track_name&video_id="+video_id+"&title="+title.toHtmlEntities() ; 2724 2725 //http://liveplasma.com/2018/ 2726 2727 console.log("DB_update_track_name() url:",url) ; 2728 2729 // d3.json(url, function(error, videodata) { 2730 d3.json(url).then(function(result){ 2731 console.log("ok") 2732 2733 }); 2734 2735 } 2736 function DB_update_track_skip(video_id,mbid,radio_mbid = "") { 2737 2738 2739 // console.log("DB_update_track_skip() to complete "+video_id) ; 2740 2741 2742 var url = "inc/videos.inc.php?fct=update_track_skip&video_id="+video_id+"&mbid="+mbid+"&radio_mbid="+mbid ; 2743 2744 //http://liveplasma.com/2018/ 2745 2746 console.log("DB_update_track_skip() url:",url) ; 2747 2748 // d3.json(url, function(error, videodata) { 2749 d3.json(url).then(function(result){ 2750 console.log("ok") 2751 2752 }); 2753 2754 } 2755 2756 function DB_update_track_duration(video_id,duration,mbid) { 2757 2758 2759 // console.log("DB_update_track_duration() to complete "+video_id+" "+duration) ; 2760 2761 2762 var url = "inc/videos.inc.php?fct=update_track_duration&video_id="+video_id+"&duration="+duration+"&mbid="+mbid ; ; 2763 2764 //http://liveplasma.com/2018/ 2765 2766 console.log("DB_update_track_duration() url:",url) ; 2767 2768 // d3.json(url, function(error, videodata) { 2769 d3.json(url).then(function(result){ 2770 // console.log("ok") 2771 }); 2772 2773 } 2774 2775 2776 2777 function new_playlist_event_handle() { 2778 2779 2780 console.log("new_playlist_event_handle() playlist", playlist); 2781 d3.shuffle(playlist) ; 2782 2783 var array_yt_id = new Array(); 2784 2785 playlist.forEach(track => array_yt_id.push(track['video_id']) ) 2786 2787 2788 // array_yt_id.push("vW60tdTcUEg"); 2789 // array_yt_id.push("6DQJPL9Yuq0"); 2790 2791 2792 console.log("new_playlist_event_handle() array_yt_id "); 2793 2794 console.log(array_yt_id); 2795 2796 // console.log(player) 2797 2798 2799 //if(player.cuePlaylist(array_yt_id, 0, 0, 'small')) console.log("new_playlist_event_handle() getPlaylist()",player.getPlaylist()); 2800 2801 // if(player.cuePlaylist(array_yt_id, 0, 0, 'small')) console.log("new_playlist_event_handle() getPlaylist()",player.getPlaylist()); 2802 2803 // 2804 2805 2806 2807 // 2808 player.cuePlaylist(array_yt_id, 0, 0, 'small') 2809 setTimeout( function(){ 2810 player.cuePlaylist(array_yt_id, 0, 0, 'small') 2811 player.playVideo(); 2812 } 2813 , 500); 2814 2815 2816 // setTimeout(function(){ console.log("new_playlist_event_handle() getPlaylist()",player.getPlaylist()); }, 1000); 2817 2818 2819 /* 2820 if(player.getPlayerState() != 1) { 2821 console.log("new_playlist_event_handle()", "player.nextVideo()"); 2822 player.nextVideo() ; 2823 } 2824 */ 2825 2826 2827 /* 2828 playlist.forEach(function (d) { 2829 console.log("ew_playlist_event_handle()", d); 2830 player.cueVideoById(d) ; 2831 }) 2832 */ 2833 2834 } 2835 2836 function set_artist_cover(img_url = false) { 2837 2838 console.log("set_artist_cover() "+img_url) 2839 2840 switch(map_type) { 2841 case "artist" :document.getElementById('music_player').style.display = "block" ; break ; 2842 // case "book" :document.getElementById('music_player').style.display = "block" ; break ; 2843 default : document.getElementById('music_player').style.display = "none" ; break ; 2844 } 2845 2846 if(img_url) document.getElementById("div_artist_cover").style.backgroundImage = 'url(' + img_url + ')'; 2847 document.getElementById("div_artist_cover").style.visibility = (img_url)? 'visible':'hidden' ; 2848 // document.getElementById("music_player").style.display = (img_url)? 'block':'none' ; 2849 2850 //document.getElementById("div_artist_cover").style.background = 'linear-gradient(#004092, #020202, transparent), url(' + img_url + ') cover'; 2851 } 2852 2853 function set_book_info(img_url = false) { 2854 2855 console.log("set_book_info()") 2856 2857 document.getElementById('music_player').style.display = "none" ; 2858 document.getElementById('div_book_info').style.display = "block" ; 2859 2860 document.getElementById("div_book_info").style.backgroundImage = 'url(' + img_url + ')'; 2861 2862 } 2863 2864 2865 function update_music_player(display = true, playing = true) { 2866 2867 document.getElementById('music_player').style.display = (display)? "block":"none" ; 2868 2869 2870 console.log("update_music_player() "+display+" "+playing) 2871/*
2872 d3.select("#current_time").style("visibility",d => (playing)? "visible":"hidden" ) 2873 d3.select("#duration").style("visibility",d => (playing)? "visible":"hidden" ) 2874 d3.selectAll(".progress_bar_cursor").style("visibility",d => (playing)? "visible":"hidden" ) 2875 d3.selectAll(".progress_bar").style("visibility",d => (playing)? "visible":"hidden" ) 2876 */ 2877 2878 console.log("update_music_player()") 2879 console.log(radio) 2880 d3.select("#radio_title").text(radio.radio_artist_name.substring(0,19)) ; 2881 2882 if(radio.img_url != "") { 2883 document.getElementById("div_artist_cover").style.backgroundImage = 'url(' + radio.img_url + ')'; 2884 document.getElementById("div_artist_cover").style.display = "block" ; 2885 2886 } else { 2887 document.getElementById("div_artist_cover").style.display = "none" ; 2888 } 2889 2890 /* 2891 if(radio.playing_track_title != "") { 2892 d3.select("#track_title").text(radio.playing_track_title) ; 2893 } */ 2894 2895 d3.select("#play_bt").style("visibility",d => ((radio.playing_track_title != "") && ( !playing))? "visible":"hidden" ) 2896 d3.select("#pause_bt").style("visibility",d => ((radio.playing_track_title != "") && ( playing))? "visible":"hidden" ) 2897 d3.selectAll(".halo_play").style("visibility",d => (radio.playing_track_title != "")? "visible":"hidden" ) 2898 d3.selectAll(".player_grey").style("visibility",d => (radio.playing_track_title != "")? "visible":"hidden" ) 2899 2900 d3.select("#track_title").text(radio.playing_track_title.substring(0,32)) ; 2901 d3.select("#track_artist_name").text(radio.playing_artist_name.substring(0, 45)) ; 2902 2903 2904 2905 if(radio.playing_artist_name != "") d3.select("#track_artist_name").text(radio.playing_artist_name) ; 2906 2907 2908 2909 } 2910 2911</script>
2911 2912<div id="myModal" class="modal" tabindex="-1" role="dialog" > 2913 <div class="modal-dialog" role="document" style="max-width: 800px;"> 2914 <div class="modal-content"> 2915 <div class="modal-body"> 2916 <h1 class="splash-head">Search, Explore, Discover</h1> 2917 <p><b>Liveplasma</b> lets you discover new artists based on what you already like...</p> 2918 <p><b><i class="fas fa-search"></i> Search</b> an artist or click on any artist to <b>explore</b> the graph then <b><i class="fas fa-play"></i> listen</b> your discovery</p> 2919 <button type="button" class="btn btn-secondary" data-dismiss="modal">Got it!</button> 2920 </div> 2921 </div> 2922 </div> 2923</div> 2924<div id="myModalToConnect" class="modal" tabindex="-1" role="dialog" > 2925 <div class="modal-dialog" role="document" style="max-width: 600px;"> 2926 <div class="modal-content" style="padding: 0px 60px;"> 2927 <div class="modal-header"> 2928 <h1 class="splash-head" style="font-size: 32px">Unleash your experience!</h1> 2929 <span aria-hidden="true" class="close"><i class="fas fa-times" onclick="$('#myModalToConnect').modal('hide');"></i></span> 2930 </div> 2931 <div class="modal-body"> 2932 <p>You need to create an account to save all your preferences</p> 2933 <section > 2934 <form action="inc/signup.inc.php" method="post" class="pure-form pure-form-stacked"> 2935 <fieldset> 2936 2937 2938 2939 <input type="text" name="name" placeholder="Full name... " required /> 2940 <input type="text" name="email" placeholder="E-mail..." required /> 2941 2942 <input type="text" name="username" placeholder="Username (will be public)" required /> 2943 <input type="password" name="pwd" id="myPw" placeholder="Your password..." data-lpignore="true" required /> 2944 <input type="password" name="pwdrepeat" id="myPwagain" placeholder="Repeat Password" data-lpignore="true" required /> 2945 <br><br><p><button type="submit" name="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign Up</button> 2946 <a href="login.php" >Allready a user? Log In</a></p> 2947 </fieldset> 2948 </form> 2949 2950 </section> 2951 </div> 2952 </div> 2953 </div> 2954</div> 2955 2956
2956<script> 2957 2958 $( ".selector" ).autoComplete({ autoFocus: true }); 2959 2960 $('.basicAutoComplete').autoComplete({ 2961 2962 minLength:1, 2963 resolver: 'custom', 2964 formatResult: function (item) { 2965 2966 var tt = item.name ; 2967 2968 if(item.type == "book") tt = '<b>'+item.name+'</b>'+' - <span style="color:#F00;font-style: italic" >'+item.author+'</span>' ; 2969 2970 return { 2971 value: item.id, 2972 text: tt, 2973 html: [tt] 2974 }; 2975 }, 2976 events: { 2977 search: function(qry, callback) { 2978 2979 map_type = 'artist' 2980 if(window.matchMedia("(max-width:1000px)").matches) { 2981 map_type='artist'; 2982 } 2983 2984 console.log(qry); 2985 if (timeout) { 2986 clearTimeout(timeout); 2987 } 2988 timeout = setTimeout(function() { 2989 // let's do a custom ajax call 2990 $.ajax( 2991 'search.php', 2992 { 2993 data: { 'q': qry, 2994 'type': map_type, 2995 'lg': 'en' 2996 } 2997 } 2998 ).done(function(res) { 2999 callback(res) 3000 }); 3001 }) 3002 } 3003 } 3004 }); 3005 3006 3007 $('.basicAutoComplete').on('autocomplete.select', function (evt, item) { 3008 3009 console.log('select', item); 3010 map_id = item.id ; 3011 book_url = item.url ; 3012 // map_type = "artist" ; 3013 map_name = item.name ; 3014 3015 radio.artist_name = map_name ; 3016 3017 update_music_player() ; 3018 3019 d3.select("#text_artist").text(item.name) ; 3020 3021 get_graph(nb0,fact_link,items_nb) ; 3022 3023 gtag('event', 'select_home', {'event_category': 'search_content', 3024 'event_label': item.name 3025 }); 3026 3027 3028 3029 }); 3030 3031</script>
3031 3032 3033 3034
3035<script type="text/javascript" src="D3/D3node.inc.js"></script>
vendor: 1 bytes, line 3035
3035
3036<script type="text/javascript" src="D3/D3link.inc.js"></script>
3036 3037 3038 3039 3040 <div class="clear"></div> 3041 <div class="footer l-box is-center"> 3042 3043 <footer> 3044 <small> 3045 <!-- <a href="#" id="dark_link" onclick="enableStylesheet('css_light');disableStylesheet('css_dark');init_color('light'); return false;"> Light Mode</a> onclick=" return false;"--> 3046 3047 <a href="" id="hotness_link" ><i class="far fa-circle legend"></i> Hide hotness</a> - 3048 <a href="" id="dark_link" ><i class="far fa-moon"></i> Dark Mode</a> - 3049 <a href="terms_of_service.php">Terms of service</a> - 3050 <a href="privacy_policy.php">Privacy</a> - 3051 <!-- <a href="termsofuse.php" >terms of use</a> - 3052 <a href="rgpd.php" >rgpd policy</a> - 3053 <a href="privacy.php" >privacy</a> - 3054 <a href="gcs.php" >GCS</a> - --> 3055 <a href="sending.php?page=bug">Report a bug</a> - 3056 <a href="sending.php">Contact</a> - 3057 <a href="artists.php">Artists</a> - 3058 <a href="book_index.php">Books</a> - 3059 <a href="author_index.php">Authors</a> - 3060 © Copyright 2023, liveplasma.com inc. All Rights Reserved</small> 3061 3062 <a href="https://www.facebook.com/LiveplasmaDiscoveryEngine"><i class="fab fa-facebook-f"></i></i></a> 3063 3064 <a href="https://twitter.com/liveplasma"><i class="fab fa-twitter"></i></a> 3065 <small> 3066 <a href="artist-Camila Cabello.html">Camila Cabello</a>, <a href="artist-Normani.html">Normani</a>, <a href="artist-.html"></a> 3067 </small> 3068 </footer> 3069
3069<script> 3070 $('#dark_link').click(function() { 3071 var more = $(this); 3072 3073 console.log(more.text()) ; 3074 3075 if(more.text() == ' Dark Mode') { 3076 enableStylesheet('css_dark');disableStylesheet('css_light'); 3077 more.html('<i class="fas fa-sun"></i> Light Mode') ; 3078 init_color('dark'); 3079 3080 gtag('event', 'chgt_dark_mode', {'event_category': 'user_config', 3081 'event_label': 'dark' 3082 }); 3083 } else { 3084 enableStylesheet('css_light');disableStylesheet('css_dark'); 3085 more.html('<i class="far fa-moon"></i> Dark Mode') ; 3086 init_color('light'); 3087 gtag('event', 'chgt_dark_mode', {'event_category': 'user_config', 3088 'event_label': 'light' 3089 }); 3090 } 3091 return false; 3092 }); 3093 3094 $('#hotness_link').click(function() { 3095 var more = $(this); 3096 3097 console.log(more.text()) ; 3098 3099 if(more.text() == ' Hide hotness') { 3100 more.html('<i class="far fa-circle legend"></i> Show hotness') ; 3101 show_hide_hotness(false); 3102 } else { 3103 more.html('<i class="far fa-circle legend"></i> Hide hotness') ; 3104 show_hide_hotness(true); 3105 } 3106 return false; 3107 }); 3108 </script>
3108 3109 </div> 3110</div> 3111</body> 3112</html>
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.