PageSourceSearch

https://liveplasma.com/artist-Zara%20Larsson.html

html liveplasma.com collected 2026-09-24 09:31:21 UTC 101,865 bytes, 3,112 lines download raw bytes

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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
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>&nbsp;&nbsp;<a class="onglet selected" href="graph_explorer.php?type=artist">Music<a>&nbsp;&nbsp;<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 = ["&lt;", "&gt;", "<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                    &nbsp;&nbsp;&nbsp;&nbsp;<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 	&nbsp; &copy; Copyright 2023, liveplasma.com inc. All Rights Reserved</small>
3061 	&nbsp;
3062 	<a href="https://www.facebook.com/LiveplasmaDiscoveryEngine"><i class="fab fa-facebook-f"></i></i></a>
3063 	&nbsp;
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.