Changeset 7991


Ignore:
Timestamp:
12/20/13 16:46:54 (6 years ago)
Author:
kent1
Message:

En fait rien n'est cumulé

On place le logo terraeco en bas à droite quand on est sur l'infographie

On autorise des naissances avant 1951, on le prend en compte dans le code JS

Améliorations CSS

On conserve un peu d'espace en haut du diagrame en fakant une plus grosse valeur max

Location:
plugins_spip/terraeco_infographie/trunk
Files:
1 added
3 edited

Legend:

Unmodified
Added
Removed
  • plugins_spip/terraeco_infographie/trunk/css/infographie.css

    r7990 r7991  
    4040        z-index:20;
    4141}
    42 .infographie{padding-bottom:3em;}
    4342
    4443.page_infographie .formulaire_spip{
     
    151150}
    152151.co2 .description_donnees, .co2 .description_donnees .texte{
    153         color:#327f75;
     152        color:#3E9B8B;
    154153}
    155154
     
    188187
    189188.co2 .interaction line.ligne_interactive{
    190         stroke :#327f75;
     189        stroke :#3E9B8B;
    191190}
    192191
     
    205204}
    206205.co2 .circle_aujd_main{
    207         stroke:#327f75;
     206        stroke:#3E9B8B;
    208207}
    209208
    210209.co2 .circle_aujd_small{
    211         fill:#327f75;
     210        fill:#3E9B8B;
    212211}
    213212.co2 .circle_naissance{
    214         fill:#327f75;
     213        fill:#3E9B8B;
    215214}
    216215.texte_naissance,.texte_aujd{
     
    223222
    224223.co2 .texte_naissance,.co2 .texte_aujd{
    225         fill:#327f75;
    226 }
    227 
    228 path.area {
    229   fill: #e7e7e7;
    230 }
    231 path.area.avtnaissance {
    232   fill: rgba(231,231,231,.4);
     224        fill:#3E9B8B;
    233225}
    234226
     
    242234
    243235.co2 .tick{
    244         fill:#327f75;
     236        fill:#3E9B8B;
    245237}
    246238.co2 .tickold,.tickold{
     
    248240}
    249241.co2 .triangle{
    250         fill:#327f75;
     242        fill:#3E9B8B;
    251243}
    252244
     
    261253
    262254.co2 .x.axis .tick line{
    263         stroke: #327f75;
    264         fill:#327f75;
     255        stroke: #3E9B8B;
     256        fill:#3E9B8B;
    265257}
    266258
     
    302294
    303295.co2 .infos_dots{
    304         stroke:#327f75;
     296        stroke:#3E9B8B;
    305297}
    306298.infos_dots:hover{
     
    313305        font-size:1.8em;
    314306        padding: 8px 12px;
    315         background-color:rgba(242,145,0,.8);
     307        background-color:#f29100;
    316308        color: #fff;
    317         border-radius: 2px;
    318309}
    319310
    320311.co2 div.tooltip {
    321         background-color:rgba(50,127,117,.8);
     312        background-color:#3E9B8B;
    322313}
    323314/* Creates a small triangle extender for the tooltip */
     
    333324        left: 100%;
    334325        font-size:1.8em;
    335         color:rgba(242,145,0,.8);
     326        color:#f29100;
    336327}
    337328
    338329.co2 div.tooltip:after{
    339         color:rgba(50,127,117,.8);
     330        color:#3E9B8B;
    340331}
    341332/* Style northward tooltips differently */
     
    374365}
    375366
     367
     368.infobox .contenu_fin{
     369        width: 100%;
     370        float: none;
     371        text-align: center;
     372}
     373
    376374.infobox .close_box{
    377375        float:right;
     
    406404        background-color:#D74B0B;
    407405}
     406
    408407.co2 .arrows_nav > div{
     408        background-color:#3E9B8B;
     409}
     410
     411.co2 .arrows_nav > div:hover{
    409412        background-color:#327f75;
    410413}
     414
     415.logo_terraeco{
     416        position:absolute;
     417        right:2%;
     418        bottom:2%;
     419        margin:1em;
     420}
  • plugins_spip/terraeco_infographie/trunk/infographie.html

    r7990 r7991  
    5050                        </BOUCLE_si_pas_naissance>
    5151                        </B_si_pas_naissance>
    52                                 <BOUCLE_si_naissance_1951(CONDITION){si#ENV{naissance}|<{1951}|oui}>
     52                                <BOUCLE_si_naissance_1951(CONDITION){si#ENV{naissance}|<{1951}|et{#ENV{donnees}|ou{#ENV{avt_naissance}}|non}|oui}>
    5353                                <div class="formulaire_spip">
    5454                                        <form  action="[(#SELF)]" method="get">
    5555                                                [(#SELF|form_hidden)]
    56                                                 <input type="hidden" name="naissance" value="1951" />
     56                                                <input type="hidden" name="avt_naissance" value="oui" />
    5757                                                <div class="champ">#SET{nb,#ENV{naissance}|moins{1951}|replace{'-',''}}
    5858                                                [<p>(#GET{nb}|singulier_ou_pluriel{terraeco:texte_1951_singulier,terraeco:texte_1951})</p>]
     
    9090                                        #SET{naissance_min,#AXE_X}
    9191                                        </BOUCLE_naissance_min>
    92                                         <div id="graph1" class="aGraph" style="position:relative;width:100%;height:400px"></div>
     92                                        <div id="graph1" class="aGraph" style="position:relative;width:100%;"></div>
    9393                                        <script>
    9494                                                var containerid='graph1',values = [],values1 = [], values2 = [],values_commentaire= [], value_naissance = [], value_origine = [],container,tip,ligne_naissance_groupe,ligne_naissance,ligne_interactive;
     
    9999                                                        step = parseInt(width/22),
    100100                                                        width = 22*step,
    101                                                         compte_depuis_naissance = 0,
    102101                                                        height = 450 - margin.top - margin.bottom,
    103                                                         moving = false,
    104                                                         cumule = [(#ENV{donnees}|=={1}|?{true,false})];
     102                                                        moving = false;
    105103
    106104                                                $('#'+containerid).on('mousewheel', function(event) {
     
    146144                                                        $('.tooltip').html(+d.axe_y+'#UNITE');
    147145                                                        var left = x(value_naissance.axe_x)-translate_defaut-$('.tooltip').outerWidth()-14;
    148                                                         var top = y(d.axe_z) - ($('.tooltip').outerHeight()/2);
     146                                                        var top = y(d.axe_y) - ($('.tooltip').outerHeight()/2);
    149147                                                        if($('.tooltip').is(':hidden'))
    150148                                                                $('.tooltip').css({'top':top,'left':left}).show();
     
    176174                                                                        moving = false;
    177175                                                                });
     176
     177                                                        // Afficher le message de fin de données actuelles
     178                                                        if(date_origine == values[values.length-1].axe_x){
     179                                                                var show_info = function(){
     180                                                                        if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 1){
     181                                                                                var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
     182                                                                                var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance, la température à la surface du globe a augmenté de "+degres+" degrés.";
     183                                                                        }
     184                                                                        else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 1){
     185                                                                                var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
     186                                                                                var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
     187                                                                                var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans, la température à la surface du globe a augmenté de "+degres+" degrés.";
     188                                                                        }
     189                                                                        else if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 2){
     190                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
     191                                                                                var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance, la concentration de CO2 dans l'atmosphÚre a augmenté de "+ppm+" PPM (en particules par millions).";
     192                                                                        }
     193                                                                        else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 2){
     194                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
     195                                                                                var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
     196                                                                                var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans, la concentration de CO2 dans l'atmosphÚre a augmenté de "+ppm+" PPM (en particules par millions).";
     197                                                                        }
     198
     199                                                                        if(texte_fin){
     200                                                                                infobox
     201                                                                                        .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_fin+'</div>')
     202                                                                                                .transition()
     203                                                                                                .duration(800)
     204                                                                                                .style("display", 'block').each("end", function(){
     205                                                                                                        d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
     206                                                                                                                infobox
     207                                                                                                                        .transition()
     208                                                                                                                        .duration(500)
     209                                                                                                                                .style("display", 'none');
     210                                                                                                        });
     211                                                                                                });
     212                                                                                }
     213                                                                        }
     214                                                                setTimeout(show_info,400);
     215                                                        }
    178216                                                }
    179217                                               
     
    182220                                                        y = d3.scale.linear().range([height, 0]),
    183221                                                        xAxis = d3.svg.axis().scale(x).ticks(56).tickFormat(d3.format(".0f")).orient("bottom");
    184                                                         yAxis = d3.svg.axis().scale(y).ticks(4).orient("left");
    185222                                               
    186223                                                // A line generator, for the dark stroke.
    187224                                                var line = d3.svg.line()
    188                                                         //.interpolate("monotone")
    189225                                                        .x(function(d) { return x(d.axe_x); })
    190                                                         .y(function(d) { return y(d.axe_z); });
     226                                                        .y(function(d) { return y(d.axe_y); });
    191227                                               
    192228                                                // Add an SVG element with the desired dimensions and margin.
     
    208244                                                infobox = d3.select('#'+containerid).append("div")
    209245                                                        .attr("class", "infobox")
    210                                                         .style("display", 'none').html('<div class="logo"></div><div class="contenu"></div>');
     246                                                        .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>');
    211247                                               
    212248                                                // Au click sur le graph, on cache l'infobox si visible
     
    223259                                                // Au click sur les fleches on avance d'un cran ou on recule
    224260                                                $('.arrows_nav > div').on('click',function(){
    225                                                         if(moving == false){
     261                                                        if($('.infobox').is(':hidden') && moving == false){
    226262                                                                if($(this).is('.left'))
    227263                                                                        graph_replace(-1);
     
    230266                                                        }
    231267                                                });
    232                                                
    233                                                 // Add the clip path.
    234                                                 svg.append("clipPath")
    235                                                         .attr("id", "clip")
    236                                                         .append("rect")
    237                                                         .attr("width", width)
    238                                                         .attr("height", height);
    239268
    240269                                                /**
     
    248277                                                        values.forEach(function(row, i){
    249278                                                                row.axe_x = parseFloat(row.axe_x).toFixed();
    250                                                                 row.axe_y = parseFloat(row.axe_y.replace(',','.')).toFixed(2);
    251                                                                 if(cumule)
    252                                                                         origine = row.axe_z = parseFloat(parseFloat(origine)+parseFloat(row.axe_y)).toFixed(2);
    253                                                                 else
    254                                                                         origine = row.axe_z = parseFloat(row.axe_y).toFixed(2);
     279                                                                origine = row.axe_y = parseFloat(row.axe_y.replace(',','.')).toFixed(2);
    255280                                                                if(row.axe_x <= naissance)
    256281                                                                        values1.push(row);
     
    265290                                                        xmin = values[0].axe_x;
    266291                                                        xmax = values[values.length-1].axe_x;
     292                                                        if(#ENV{donnees} == 1)
     293                                                                ymax = parseFloat('4.89');
     294                                                        else
     295                                                                ymax = 936;
     296                                                               
     297                                                        ymin = d3.min(values, function(d) { return parseFloat(d.axe_y); });
     298                                                        ymax = d3.max(values, function(d) { return parseFloat(d.axe_y); });
     299                                                       
     300                                                        ymax = ymax + ((ymax-ymin)/3);
    267301                                                        /**
    268302                                                         * Si naissance - 7 ans est dans la visu, on part de là
     
    283317                                                        // Utilisation de every pour couper lorsque l'on a trouvé
    284318                                                        values.every(function(row,i){
    285                                                                 console.log(i);
    286319                                                                if(parseInt(row.axe_x) == origine){
    287320                                                                        d = row;
     
    293326                                                        real_width = (width/22)*(xmax-xmin);
    294327                                                        x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
    295                                                         y.domain([d3.min(values, function(d) { return parseFloat(d.axe_z); }), d3.max(values, function(d) { return parseFloat(d.axe_z); })]).nice();
     328                                                        y.domain([ymin, ymax]).nice();
    296329                                                        translate_defaut = x(d.axe_x);
    297330                                                       
     
    354387                                                                        .attr("class","infos_dots")
    355388                                                                        .attr("cx", function(d) { return x(d.axe_x); })
    356                                                                         .attr("cy",function(d) { return y(d.axe_z); })
     389                                                                        .attr("cy",function(d) { return y(d.axe_y); })
    357390                                                                        .attr('r',6)
    358391                                                                        .on('click',function(d){
     
    390423                                                                                return x( d.axe_x );
    391424                                                                        }) // vertical line so same value on each
    392                                                                         .attr("y1",100).attr("y2", height);
     425                                                                        .attr("y1",80).attr("y2", height);
    393426       
    394427                                                        // Ajout du cercle en haut de la ligne de naissance
     
    401434                                                                                return x( d.axe_x );
    402435                                                                        })
    403                                                                         .attr("cy",40);
     436                                                                        .attr("cy",20);
    404437
    405438                                                        // Ajout du texte "Votre naissance"
     
    412445                                                                                return x(d.axe_x);
    413446                                                                        })
    414                                                                         .attr("y",80);
     447                                                                        .attr("y",60);
    415448                                                       
    416449                                                        // Ajout de l'image de la bougie
     
    422455                                                                                return x(value_naissance.axe_x)-17;
    423456                                                                        })
    424                                                                         .attr("y", "22")
     457                                                                        .attr("y", "2")
    425458                                                                        .attr("width", "35")
    426459                                                                        .attr("height", "35");
     
    441474                                                                                return x( d.axe_x );
    442475                                                                        }) // vertical line so same value on each
    443                                                                         .attr("y1",100).attr("y2", height);
     476                                                                        .attr("y1",80).attr("y2", height);
    444477       
    445478                                                        // Ajout du cercle en haut de la ligne de naissance
     
    452485                                                                                return x( d.axe_x );
    453486                                                                        })
    454                                                                         .attr("cy",40);
     487                                                                        .attr("cy",20);
    455488                                                       
    456489                                                        // Ajout du cercle en haut de la ligne de naissance
     
    463496                                                                                return x( d.axe_x );
    464497                                                                        })
    465                                                                         .attr("cy",40);
     498                                                                        .attr("cy",20);
    466499                                                        // Ajout du texte "Aujourd'hui"
    467500                                                        ligne_aujd_groupe
     
    473506                                                                                return x(d.axe_x);
    474507                                                                        })
    475                                                                         .attr("y",80);
     508                                                                        .attr("y",60);
    476509                                                       
    477510                                                }
     
    510543                                                </script>
    511544                                </div>
     545                                [<div class="logo_terraeco">
     546                                        <a href="http://www.terraeco.net">(#CHEMIN{images/logo_terraeco_normal.jpg}|image_reduire{100,20})</a>
     547                                </div>]
    512548                                </BOUCLE_jeu_selectionne>
    513549                                </B_jeu_selectionne>
     
    526562                </div>
    527563        </div>
    528         [<footer class="footer clearfix">
     564        [(#ENV{donnees}|non)[<footer class="footer clearfix">
    529565                (#CREDITS|image_reduire{100,100})
    530         </footer>]
     566        </footer>]]
    531567</div>
    532568</body>
  • plugins_spip/terraeco_infographie/trunk/lang/terraeco_fr.php

    r7984 r7991  
    44
    55$GLOBALS[$GLOBALS['idx_lang']] = array(
     6        // A
     7        'anecdote_scroll' => 'Utilisez le scroll ou les flÚches pour avancer',
    68       
    79        // L
Note: See TracChangeset for help on using the changeset viewer.