Skip to content
GitLab
Select Git revision
  • gh-pages
  • master default
Find file BlameHistoryPermalink
index.html 42.15 KiB
1
2 
<html>
3 
    <head>
4 
        <title>Various Bounded Confidence</title>
5 
        <meta charset="UTF-8">
6 
        <link href="css/bootstrap-3.3.6.min.css" rel="stylesheet">
7 
        <script type="text/javascript"  src="js/plotly-latest.min.js"></script>
8 
        <script type="text/javascript" src="js/population.js"></script>
9 
        <script type="text/javascript" src="js/plots.js"></script>
10 
        <script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
11 
        <script type="text/javascript" src="js/bootstrap-3.3.6.min.js"></script>
12 
        <script src="js/jquery.color-2.1.2.min.js"></script>
13 
        <style type="text/css">
14 
            body { margin-bottom: 60px; }
15 
        </style>
16 
    </head>
17 
    <body>
18 
        <script type="text/javascript">
19 
            // 'presets' contains all the parameters presets indexed by their id.
20 
            // each preset is an array containing first the name of the preset and then the parameter values
21 
            var presets = {};
22 
            /**
23 
             * if a valid preset's name is given, it will display (above the parameters tab)
24 
             * the name of this preset to recall to the user that it has been selected.
25 
             * As soon as a parameter will be modified (except popsize and nbsteps), the message
26 
             * will be cleared.
27 
             * @param {type} presetName
28 
             */
29 
            function updatePresetRecall(presetName) {
30 
                if ($('#presetRecall').attr('presetName') !== presetName) {
31 
                    if (presetName.length>0) {
32 
                        $('#presetRecall').text("Current preset: "+presetName);
33 
                        $("#presetRecall").delay(500).animate({ backgroundColor: "#d9edf7" }, 1500 );
34 
                        $("#presetRecall").delay(2000).animate({ backgroundColor: "#FFFFFF" }, 500 );
35 
                    } else {
36 
                        $('#presetRecall').html("<b>Leaving</b> preset: "+$('#presetRecall').attr('presetName')+" (parameters modified)");
37 
                        $("#presetRecall").animate({ backgroundColor: "#f2dede" }, 500 );
38 
                        $("#presetRecall").delay(3000).animate({ backgroundColor: "#FFFFFF" }, 1500 );
39 
                        setTimeout( function(){ $('#presetRecall').text(''); }, 5000 );
40 
                    }
41 
                    $('#presetRecall').attr('presetName', presetName);
42 
                }
43 
                //setTimeout( function(){ $('#presetRecall').removeClass("alert-info"); }, 4500 );
44 
            }
45 
            /**
46 
             * Fill a table with given parameters and add a button for using
47 
             *  these parameters in the simulator.
48 
             * @param {type} tableID
49 
             * @param {type} data
50 
             * @returns {undefined}
51 
             */
52 
            function add_presets(tableID, data) {
53 
                var table=document.querySelector("#"+tableID+" tbody");
54 
                // adding header
55 
                data = [["Configuration name", "Part of extremist on each dimension", "Part of highly self-engaged in dimension 1", "mu dimension 1", "mu dimension 2", "uncertainty on dimension 1", "uncertainty on dimension 2"]].concat(data);
56 
                //Converting rows to columns
57 
                var r = data[0].map(function(col, i) {
58 
                    return data.map(function(row) {
59 
                        return row[i];
60 
                    });
61 
                });
62 
                // filling array
63 
                r.forEach(function (row) {
64 
                    var tr = '<tr>';
65 
                    row.forEach(function (cell, i) {
66 
                        if (i === 0) {
67 
                            tr += '<th scope="row">' + cell + '</th>';
68 
                        } else {
69 
                            tr += '<td>' + cell + '</td>';
70 
                        }
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
}); table.innerHTML += tr + '</tr>'; }); // adding buttons var row = '<tr>'; data.forEach(function (elt, i) { if (i === 0) { row += '<th scope="row">Click for using these parameters</th>'; } else { var slug = elt[0].replace(/[^a-z0-9-]/gi, '-'); presets[slug] = elt; var id = "parameters" + slug; row += '<td><button id="' + id + '" type="button" class="btn btn-primary">' + elt[0] + '</button></td>'; $("#documentation").on("click", "button#" + id, function (clickEvent) { clickEvent.preventDefault(); setParametersInForm.apply(this, elt.slice(1)); $('html, body').animate({scrollTop: $('#simulator').position().top}, 500); updatePresetRecall(elt[0]); }); } }); table.innerHTML += row + '</tr>'; } </script> <div class="modal fade" id="confirm-stop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"><div class="modal-content"> <div class="modal-header"><h4 class="modal-title" id="myModalLabel">Confirmation</h4></div> <div class="modal-body">Are you sure to stop this simulation and to reset all the results?</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button id="stop-confirmed" type="button" class="btn btn-danger danger">Stop</button> </div> </div> </div> </div> <div class="container"> <div class="jumbotron text-center"> <h1>Various Bounded Confidence</h1> <p class="lead">Discover the dynamics of bounded confidence models</p> <button id="btnNavPlay" type="button" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> Play</button> <button id="btnNavLearn" type="button" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-education" aria-hidden="true"></span> Learn</button> <button id="btnNavAbout" type="button" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> About</button> </div> <div id="simulator"> <div class="input-group col-sm-12"> <label id="play-btn" class="btn btn-default input-group-addon"><span class="glyphicon glyphicon-play"></span></label> <span class="input-group-addon" id="iterationSlider-val">0</span> <input id="iterationSlider" class="form-control" type="range" min="0" value="0"/> <span class="input-group-addon" id="iterationSlider-max"></span> <label id="stop-btn" class="btn btn-default input-group-addon" data-toggle="modal" data-target="#confirm-stop"><span class="glyphicon glyphicon-stop"></span></label> </div> <form id="plots-frequency"> <div class="input-group col-sm-6"> <span class="input-group-addon" title="Sets the frequency of the computing and redrawing process for the plots."> Plots frequency </span> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default active" title="Computes a frequency giving low-priority for plots"> <input type="radio" name="options" value="auto" autocomplete="off" checked>Auto </label> <label class="btn btn-default" title="Every timestep"> <input type="radio" name="options" value="1" autocomplete="off">1 </label> <label class="btn btn-default" title="Every 10 timesteps"> <input type="radio" name="options" value="10" autocomplete="off">10 </label> <label class="btn btn-default" title="Every 100 timesteps"> <input type="radio" name="options" value="100" autocomplete="off">100 </label> <label class="btn btn-default" title="Disable the plots updating process">
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
<input type="radio" name="options" value="off" autocomplete="off">Off </label> </div> </div> </form> <!-- Nav tabs --> <ul id="tabs" class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#config" aria-controls="config" role="tab" data-toggle="tab">Config</a></li> <li role="presentation"><a href="#plots" aria-controls="plots" role="tab" data-toggle="tab">Plots</a></li> <a id="permalink" href="" class="btn glyphicon glyphicon-link" type="button" title="Permalink to current parameters, for sharing or bookmarking your experiment."></a> <button id="resetParameters" href="" class="btn glyphicon glyphicon-trash" type="button" title="Reset to default parameters."></button> <span id="presetRecall" role="alert" class="alert" style="margin-left:5px;"></span> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="config"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="args-pe" class="col-sm-4">Part of extremist on each dimension</label> <div class="col-sm-4"> <input type="number" class="form-control" id="args-pe" step="0.1" min="0" max="1"> </div> </div> <div class="form-group"> <label for="args-eip" class="col-sm-4">Part of highly self-engaged in dimension 1</label> <div class="col-sm-4"> <input type="number" class="form-control" id="args-eip" step="0.1" min="0" max="1"> </div> </div> <div class="form-group"> <label for="args-mu0" class="col-sm-4">mu dimension 1</label> <div class="col-sm-4"> <input type="number" class="form-control" id="args-mu0" step="0.1" min="0" max="1"> </div> </div> <div class="form-group"> <label for="args-mu1" class="col-sm-4">mu dimension 2</label> <div class="col-sm-4"> <input type="number" class="form-control" id="args-mu1" step="0.1" min="0" max="1"> </div> </div> <div class="form-group"> <label for="args-u0" class="col-sm-4">uncertainty on dimension 1</label> <div class="col-sm-4"> <input type="number" class="form-control" id="args-u0" step="0.1" min="0" max="1"> </div> </div> <div class="form-group"> <label for="args-u1" class="col-sm-4">uncertainty on dimension 2</label> <div class="col-sm-4"> <input type="number" class="form-control" id="args-u1" step="0.1" min="0" max="1"> </div> </div> <div class="form-group"> <label for="args-popsize" class="col-sm-4">Pop size</label> <div class="col-sm-4"> <input type="number" class="form-control" id="args-popsize"> </div> </div> <div class="form-group"> <label for="args-nbSteps" class="col-sm-4">Nb steps to run</label> <div class="col-sm-4"> <input type="number" class="form-control" id="args-nbSteps"> </div> </div> <!--div class="form-group"> <label for="typeRencontre" class="col-sm-4">Type rencontre</label> <div class="col-sm-4">
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
<select class="form-control" id="typeRencontre"> <option value="0">PBC JDM</option> <option value="1">BC simple</option> <option value="2">Relative Agreement</option> <option value="3">MouvARNonHierarchise</option> <option value="4" selected="selected">MouvARHierarchise</option> </select> </div> </div--> </form> </div> <div role="tabpanel" class="tab-pane" id="plots"> <div class="col-lg-6" id="plot-opinions"></div> <div class="col-lg-6" id="plot-indicators"></div> </div> </div> </div> <div id="documentation"> <h2><span class="glyphicon glyphicon-education" aria-hidden="true"></span> How it works?</h2> <p>We consider here one of the most popular continuous opinion models, the bounded confidence (BC) model (<abbr class="bib" bib="Huet2008"></abbr> ; <abbr class="bib" bib="Deffuant2001"></abbr> ; <abbr class="bib" bib="Weisbuch2002"></abbr>) (also proposed by (<abbr class="bib" bib="Hegselmann2002"></abbr> ; <abbr class="bib" bib="Krause2000"></abbr>) with a different communication regime). Its principles are very close to the theory of social comparison (<abbr class="bib" bib="Festinger1954"></abbr>) and to social judgment theory (<abbr class="bib" bib="Sherif1961"></abbr>). The agents are characterized by an initial opinion (generally supposed to be between -1 and 1 as in the present study, or between 0 and 1) and a threshold that can be interpreted as an uncertainty around this opinion.</p> <h3>The basic dynamic</h3> <p>The dynamics presented on this page (<abbr class="bib" bib="Deffuant2001"></abbr>) picks random pairs of agents that influence each other by slightly moving their opinions towards each other, but only if the distance between their opinions is lower than the uncertainty. When all the agents share the same uncertainty (on the one or on the two as presented here opinion dimensions), the opinions progressively converge to a set of opinion clusters, with all agents of a cluster sharing the same opinion and with an increasing number of clusters when the uncertainty decreases.</p> <table id="table1" class="table table-hover"> <tbody></tbody> </table> <script type="text/javascript"> add_presets("table1", [ ["4 clusters", 0, 0, 0.5, 0.5, 0.4, 0.4], ["1 cluster", 0, 0, 0.5, 0.5, 0.8, 0.8], ["26 clusters", 0, 0, 0.5, 0.5, 0.3, 0.1] ]); </script> <h3>Adding extremists (with extreme opinions and very low uncertainties)</h3> <p>With variants of this model, (<abbr class="bib" bib="Deffuant2006"></abbr> ; <abbr class="bib" bib="Mathias2016"></abbr>) study the impact of extremists on moderate agents. The extremists are initialized with extreme opinions (+1 or -1) and all share the same small uncertainty, whereas the moderates are initialized with an opinion uniformly drawn between -1 and +1 and the same larger uncertainty. By construction of the model, the extremists are more influential and less likely to change their opinions and uncertainties. Only for (<abbr class="bib" bib="Deffuant2006"></abbr>), both opinions and uncertainties are modified during interactions. The extremists tend to reduce the uncertainty of the moderates during interactions. This latter model is not presented here. For <abbr class="bib" bib="Mathias2016"></abbr>, the uncertainties remain constant. For a low uncertainty of moderates or a very small part of extremists, the model is equivalent to the basic dynamic.</p> <p>For the other values, depending on the initial number of extremists and the initial uncertainty of the moderates, three convergence types appear: central clusters, double extreme clusters, single extreme cluster.(<abbr class="bib" bib="Mathias2016"></abbr>) exhibit a new stationary state appears when the uncertainties are fixed, for large uncertainties of the moderates. In this stationary state, the opinions of moderate agents keep fluctuating without clustering, altogether forming a stable density which shape changes significantly when the parameters vary (called here metastable state).</p> <!--table id="table2" class="table table-hover"> <tbody></tbody> </table> <script type="text/javascript"> add_presets("table2", [ ]); </script--> <table id="table3" class="table table-hover table-condensed"> <tbody></tbody> </table> <script type="text/javascript"> add_presets("table3", [ ["Simple extreme", 0.3, 0, 0.5, 0.5, 0.8, 0.8], ["Central convergence", 0.6, 0, 0.5, 0.5, 0.8, 0.8], ["Double extreme", 0.6, 0, 0.5, 0.5, 1, 1], ["Double extreme metastable", 0.6, 0, 0.5, 0.5, 1.7, 1.7], ["Double extreme metastable and then single", 0.2, 0, 0.5, 0.5, 1.2, 1.2], ["Moderate metastable", 0.05, 0, 0.5, 0.5, 1.2, 1.2] ]); </script> <h3>Adding negative influence for self-engaged agents</h3> <p>Instead of adding extremists in their initial population, (<abbr class="bib" bib="Huet2010"></abbr>) study dynamics including a negative influence which can also lead to the emergence of polarization and extremism. They have proposed a modelling inspired from a set of experiments (<abbr class="bib" bib="Wood1996"></abbr>). These experiments show that highly self-engaged people in one group (ie considering it as highly self-relevant) have a different dynamics from other people: they are attracted without any conditions by members of their own group whatever the issue is and reject opinion on secondary issue if emitted by someone from another group. In the current program, we consider the dimension defining group membership in on abscissa while secondary issue are discussed on ordinate. One can notice that the presence of such agents in the population simplify the space, leading to less clusters, and can be responsible for cohesion as well polarisation.</p> <table id="table4" class="table table-hover table-condensed"> <tbody></tbody> </table> <script type="text/javascript"> add_presets("table4", [ ["26 clusters", 0, 0, 0.5, 0.5, 0.3, 0.1], ["3 clusters", 0, 1, 0.5, 0.5, 0.3, 0.1], ["9 clusters - polarisation", 0, 1, 0.5, 0.5, 0.1, 0.3], ["9/10 clusters - polarisation", 0, 1, 0.5, 0.5, 0.1, 0.5], ["8 clusters - polarisation", 0, 1, 0.5, 0.5, 0.1, 1.1] ]); </script>
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
<h3>References</h3> <dl id="references"> </dl> </p> </div> <script type="text/javascript"> var references = { "Huet2010":{ cite: "Huet and Deffuant, 2010", text: "Huet, S., & Deffuant, G. (2010). Openness leads to opinion stability and narrowness to volatility. Advances in Complex Systems, 13(3), 405-423.", link: "http://motive.cemagref.fr/_publication/PUB00029104.pdf"}, "Deffuant2006":{ cite:"Deffuant, 2006", text: "Deffuant, G. (2006). Comparing Extremism Propagation in Continuous Opinion Models. Journal of Artificial Societies and Social Simulation, 9(3).", link:"http://jasss.soc.surrey.ac.uk/9/3/8.html"}, "Huet2008":{cite:"Huet et al., 2008", text:"Huet, S., Deffuant, G., & Jager, W. (2008 d). Rejection Mechanism in 2D Bounded Confidence Provides More Conformity. Advances in Complex Systems, 11 (4), 1-21.", link:"http://arxiv.org/pdf/1404.7270.pdf"}, "Deffuant2001":{cite: "Deffuant et al., 2001", text: "Deffuant, G., Neau, D., Amblard, F., & Weisbuch, G. (2001). Mixing beliefs among interacting agents. Advances in Complex Systems(3), 87-98. ", link:"http://wwwlisc.clermont.cemagref.fr/imagesproject/finalreport/mixbel.pdf"}, "Festinger1954":{cite: "Festinger, 1954", text: "Festinger, L. (1954). A theory of social comparison processes. Human Relations, 7(2), 117-140.", link:"https://www.humanscience.org/docs/Festinger%20(1954)%20A%20Theory%20of%20Social%20Comparison%20Processes.pdf"}, "Hegselmann2002":{cite: "Hegselmann and Krause, 2002", text: "Hegselmann, R., & Krause, U. (2002). Opinion Dynamics and Bounded Confidence Models, Analysis and Simulation. Journal of Artificial Societies and Social Simulation, 5(3).", link:"http://jasss.soc.surrey.ac.uk/5/3/2/2.pdf"}, "Krause2000": {cite: "Krause, 2000", text: "Krause, U. (2000). A Discrete Nonlinear and Non-Autonomous Model of Consensus Formation. In S. Elyadi, G. Ladas, J. Popenda & J. Rakowski (Eds.), Communications in Difference Equations (pp. 227-236). Amsterdam: Gordon and Breach Pub.", link:"http://www.crcnetbase.com/doi/abs/10.1201/b16999-21"}, "Mathias2016": {cite: "Mathias et al., 2016", text: "Mathias, J.-D., Huet, S., & Deffuant, G. (2016). Bounded Confidence Model with Fixed Uncertainties and Extremists: The Opinions Can Keep Fluctuating Indefinitely. Journal of Artificial Societies and Social Simulation, 19(1), 6. doi: 10.18564/jasss.2967", link:"http://jasss.soc.surrey.ac.uk/19/1/6.html"}, "Sherif1961": {cite: "Sherif and Hovland, 1961", text:"Sherif, M., & Hovland, C. I. (1961). Social Judgment. Assimilation and contrast effects. Communication and attitude change: New Haven and London: Yale University Press."}, "Weisbuch2002": {cite: "Weisbuch et al., 2002", text:"Weisbuch, G., Deffuant, G., Amblard, F., & Nadal, J. P. (2002). Meet, discuss and segregate ! Complexity, 7(3), 55-63.",link:"http://simsoc.free.fr/ressources/articles/2002/WeisbuchDeffuantAmblardNadalComplexity2002.pdf"}, "Wood1996": {cite: "Wood et al., 1996", text: "Wood, W., Pool, G. J., Leck, K., & Purvis, D. (1996). Self-definition, defensive processing, and influence: the normative impact of majority and minority groups. Journal of Personality and Social Psychology(71), 1181-1193."} }; $("#documentation .bib").each(function(e){ var ref = references[$(this).attr('bib')]; //console.log($(this).attr('bib'), ref); $(this).text(ref.cite); if ('link' in ref) { $(this).attr('title', '<p>'+ref.text+'</p><p><a href="'+ref.link+'" target="_blank">Read online</a></p>'); $(this).tooltip({html:true, delay: {show:500, hide:800}}); } else { $(this).attr('title', ref.text); $(this).tooltip({delay: {show:500, hide:800}}); } }); var referencesList=$('#references'); $.each(references, function(i, ref){ if ('link' in ref) { referencesList.append('<dt>'+ref.cite+'</dt><dd>'+ref.text+' <a href="'+ref.link+'" target="_blank">Read online</a></dd>'); } else { referencesList.append('<dt>'+ref.cite+'</dt><dd>'+ref.text+'</dd>'); } }); </script> <div id="about" class="container"> <h2><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> About this application</h2> <div class="row"> <div class="col-xs-2"> <img class="pull-left img-responsive" src="logo_irstea.jpg"> </div> <div class="col-xs-8"> <p>This application has been produced by the <a href="http://motive.cemagref.fr/lisc/presentation">Laboratory of Engineering for Complex Systems</a> at the french institute <a href="http://www.irstea.fr/accueil">Irstea</a>. The source code of this webpage is <a href="https://gitlab.irstea.fr/nicolas.dumoulin/boundary-confidence">available</a> under the <a href="http://www.gnu.org/licenses/gpl.html">GNU Public License</a>.</p> <p>Authors: <ul> <li><a href="mailto:nicolas.dumoulin@irstea.fr">Nicolas Dumoulin</a>, technical contact for this webpage</li> <li><a href="mailto:sylvie.huet@irstea.fr">Sylvie Huet</a>, model realisation and documentation</li> </ul></p> <p>This application has been produced thanks to these javascript libraries: <a href="http://jquery.com/">jquery</a>, <a href="http://getbootstrap.com/">bootstrap</a> and <a href="https://plot.ly/javascript/">plotly</a>.</p> </div> <a href="#top" class="well well-sm" onclick="$('html,body').animate({scrollTop:0},'slow');return false;"> <i class="glyphicon glyphicon-chevron-up"></i> Back to Top </a> </div> </div> </div> <script type="text/javascript"> var simulationRun = true; var stopIteration = 0; var paused = false; var iteration = 0; var pop; var opinionsTs = []; // opinions time series var timeserieStep = 1; var extremistId = []; // extremist IDs
351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
var indicatorsRange = []; var indicatorsTs = {nbClusters: [], nbIsolatedInd: [], opAvg0: [], opAvg1: []}; var stepsDuration = 0; var plotDuration = -1; var nextPlotsTimestep = -1; var plotsToRefresh = -1; function loadURLArguments() { // load default parameters resetParameters(); // load URL arguments var params = (window.location.hash.substr(1)).split("&"); for (i = 0; i < params.length; i++) { var a = params[i].split("="); $('#args-' + a[0]).val(a[1]); } updatePermalink(); } function updatePermalink() { var urlHash = ""; $('#config input').each(function (input) { var name = $(this).attr('id').replace('args-', ''); urlHash += name + "=" + $(this).val() + "&"; }); $('#permalink').attr('href', "#" + urlHash.slice(0, -1)); } /** * Resets to default parameters */ function resetParameters() { $('#args-popsize').val(5000); $('#args-pe').val(0); $('#args-eip').val(0); $('#args-mu0').val(0.5); $('#args-mu1').val(0.5); $('#args-u0').val(0.3); $('#args-u1').val(0.1); $('#args-nbSteps').val(3000); // force slider update $('#args-nbSteps').trigger("input"); } function setParametersInForm(pe, eip, mu0, mu1, u0, u1) { $('#args-pe').val(pe); $('#args-eip').val(eip); $('#args-mu0').val(mu0); $('#args-mu1').val(mu1); $('#args-u0').val(u0); $('#args-u1').val(u1); // force slider update $('#args-nbSteps').trigger("input"); } $('#parametersBasic').click(function(e) { e.preventDefault(); setParametersInForm(0,0,0.5,0.5,0.3,0.1); }); $('#parametersExtremists').click(function(e) { e.preventDefault(); setParametersInForm(0.8,0,0.5,0.5,0.4,0.4); }); function initSimulation() { $('#plot-opinions').empty(); $('#plot-indicators').empty(); opinionsTs = []; timeserieStep = 1; extremistId = []; indicatorsRange = []; simulationRun = false; iteration = 0; stepsDuration = 0; plotDuration = -1; nextPlotsTimestep = -1;
421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
plotsToRefresh = -1; stopIteration = iteration + parseInt($('#args-nbSteps').val(), 10); itSlider.val(0); itSliderVal.text('0'); itSlider.attr('max', stopIteration); itSliderMax.text(stopIteration); updatePermalink(); } function storeInit() { var x = new Array(pop.parameters.taille); var y = new Array(pop.parameters.taille); var ids = []; for (var i = 0; i < pop.parameters.taille; i++) { x[i] = pop.population[i].sBavg[0][0]; y[i] = pop.population[i].sBavg[0][1]; if (pop.population[i].isExtremist()) { ids.push(i); } } opinionsTs.push([x, y]); extremistId.push(ids); } function storeStep() { var x = new Array(); var y = new Array(); var xHighlyEngaged = new Array(); var yHighlyEngaged = new Array(); for (var i = 0; i < pop.parameters.taille; i++) { if (pop.population[i].isHighlyEngaged()) { xHighlyEngaged.push(pop.population[i].sBavg[0][0]); yHighlyEngaged.push(pop.population[i].sBavg[0][1]); } else { x.push(pop.population[i].sBavg[0][0]); y.push(pop.population[i].sBavg[0][1]); } } // overriding last data in timeserie until we reach the next timeserieStep opinionsTs[Math.ceil(iteration / timeserieStep)] = [x, y, xHighlyEngaged, yHighlyEngaged]; } function simulationTest(nbSteps, store) { var startTime = new Date(); pop = new Population( parseInt($('#args-popsize').val(), 10), parseFloat($('#args-pe').val(), 10), parseFloat($('#args-eip').val(), 10), [parseFloat($('#args-mu0').val(), 10), parseFloat($('#args-mu1').val(), 10)], [parseFloat($('#args-u0').val(), 10), parseFloat($('#args-u1').val(), 10)] ); if (store) { storeInit(); } for (var i = 0;i<nbSteps;i++){ pop.iter(i); if (store) { storeStep(); } } var endTime = new Date(); return (endTime - startTime)/1000; } function benchmark() { simulationTimes = []; simulationStoredTimes = []; for (var r=0;r<2;r++){ console.log('simulation'); //simulationTimes.push(simulationTest(200, false)); console.log('simulation stored'); simulationStoredTimes.push(simulationTest(1000, true)); } console.log(simulationTimes);
491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
console.log(simulationStoredTimes); } function simulation() { if (simulationRun) { if (opinionsTs.length === 0) { // initialization step pop = new Population( parseInt($('#args-popsize').val(), 10), parseFloat($('#args-pe').val(), 10), parseFloat($('#args-eip').val(), 10), [parseFloat($('#args-mu0').val(), 10), parseFloat($('#args-mu1').val(), 10)], [parseFloat($('#args-u0').val(), 10), parseFloat($('#args-u1').val(), 10)] //parseInt($('#typeRencontre').val(), 10) ); var x = new Array(pop.parameters.taille); var y = new Array(pop.parameters.taille); var ids = []; for (var i = 0; i < pop.parameters.taille; i++) { x[i] = pop.population[i].sBavg[0][0]; y[i] = pop.population[i].sBavg[0][1]; if (pop.population[i].isExtremist()) { ids.push(i); } } opinionsTs.push([x, y]); extremistId.push(ids); initPlotIndicators(indicatorsTs); var start = new Date().getTime(); updatePlotIndicators(iteration); plotDuration = new Date().getTime() - start; } // regular step iteration = iteration + 1; var start = new Date().getTime(); pop.iter(iteration); stepsDuration = stepsDuration + new Date().getTime() - start; var x = new Array(); var y = new Array(); var xHighlyEngaged = new Array(); var yHighlyEngaged = new Array(); for (var i = 0; i < pop.parameters.taille; i++) { if (pop.population[i].isHighlyEngaged()) { xHighlyEngaged.push(pop.population[i].sBavg[0][0]); yHighlyEngaged.push(pop.population[i].sBavg[0][1]); } else { x.push(pop.population[i].sBavg[0][0]); y.push(pop.population[i].sBavg[0][1]); } } // overriding last data in timeserie until we reach the next timeserieStep opinionsTs[Math.ceil(iteration / timeserieStep)] = [x, y, xHighlyEngaged, yHighlyEngaged]; var frequency = $('#plots-frequency input:checked').attr('value'); if (frequency !== "off") { if (nextPlotsTimestep === -1) { computeNextPlotsTimestep(frequency); } if (iteration === nextPlotsTimestep) { updatePlotIndicators(iteration); computeNextPlotsTimestep(frequency); } } if (iteration === 1000) { // dumping 99% of conserved data timeserieStep = 100; itSlider.attr('step', timeserieStep); opinionsTs = opinionsTs.filter(function (elt, i) { return i % timeserieStep === 0; }); } itSlider.val(iteration);
561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630
itSliderVal.text(iteration); simulationRun = iteration < stopIteration; setTimeout(simulation, 0); } else { $('#play-btn span').removeClass('glyphicon-pause'); $('#play-btn span').addClass('glyphicon-play'); } } var playBtn = $('#play-btn'); var pauseBtn = $('#pause-btn'); var stopBtn = $('#stop-btn'); var itSlider = $("#iterationSlider"); var itSliderMax = $("#iterationSlider-max"); var itSliderVal = $("#iterationSlider-val"); // Controls events $('#btnNavPlay').click(function(){ $('html, body').animate({scrollTop: $('#simulator').position().top}, 500); }); $('#btnNavLearn').click(function(){ $('html, body').animate({scrollTop: $('#documentation').position().top}, 500); }); $('#btnNavAbout').click(function(){ $('html, body').animate({scrollTop: $('#about').position().top}, 500); }); $('#config input').on('change', function () { updatePermalink(); if (['args-nbSteps','args-popsize'].indexOf($(this).attr('id'))<0) { updatePresetRecall(''); } }); function pause() { $('#play-btn span').removeClass('glyphicon-pause'); $('#play-btn span').addClass('glyphicon-play'); simulationRun = false; paused = true; } playBtn.click(function () { /*$('#play-btn span').removeClass('glyphicon-play'); benchmark(); $('#play-btn span').addClass('glyphicon-play'); return;*/ if (simulationRun) { pause(); updatePlotIndicators(iteration); } else { $('html, body').animate({scrollTop: $('#simulator').position().top}, 500); $('#play-btn span').removeClass('glyphicon-play'); $('#play-btn span').addClass('glyphicon-pause'); $('#resetParameters').hide(); $('#config input').prop("disabled", true); $('#args-nbSteps').prop("disabled", false); $('#config select').prop("disabled", true); $('#tabs a[href="#plots"]').tab('show'); simulationRun = true; if (!paused) { stopIteration = iteration + parseInt($('#args-nbSteps').val(), 10); itSlider.attr('max', stopIteration); itSliderMax.text(stopIteration); } else { paused = false; } setTimeout(simulation, 0); setTimeout(refreshLoop, 200); } }); stopBtn.click(pause); $('#stop-confirmed').click(function () { initSimulation(); $('#config input').prop("disabled", false); $('#config select').prop("disabled", false);
631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687
$('#resetParameters').show(); $('#tabs a[href="#config"]').tab('show'); $('#confirm-stop').modal('hide'); }); $('#resetParameters').on('click', function () { resetParameters(); window.location.hash = ""; updatePermalink(); }); $('#args-nbSteps').on("input", function () { var step = iteration + parseInt(this.value, 10); itSlider.attr('max', step); itSliderMax.text(step); stopIteration = step; }); itSlider.on("change", function () { console.log(this.value); if (this.value <= iteration) { updatePlotIndicators(parseInt(this.value, 10)); refresh(parseInt(this.value, 10)); } }); itSlider.on("input", function () { if (this.value > iteration) { itSlider.val(iteration); } else { itSliderVal.text(this.value); } }); $('#plots-frequency input').on('change', function () { computeNextPlotsTimestep($(this).attr('value')); }); // Ok, we're ready initSimulation(); loadURLArguments(); // <!-- Piwik --> var _paq = _paq || []; _paq.push(["setDomains", ["*.motive.cemagref.fr"]]); _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "//motive.cemagref.fr/piwik/"; _paq.push(['setTrackerUrl', u + 'piwik.php']); _paq.push(['setSiteId', 2]); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.type = 'text/javascript'; g.async = true; g.defer = true; g.src = u + 'piwik.js'; s.parentNode.insertBefore(g, s); } )(); //<!-- End Piwik Code --> </script> </body> </html>