Changeset 8057 for plugins_spip


Ignore:
Timestamp:
01/06/14 23:47:01 (6 years ago)
Author:
kent1
Message:

Afficher le dégradé pour le CO2

Location:
plugins_spip/terraeco_infographie/trunk
Files:
3 edited

Legend:

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

    r8052 r8057  
    516516}
    517517
    518 path.area.perspective1_haute{
     518path.area.perspective1_haute,.co2 path.area.perspective_trou{
    519519        fill: url( #gradient_perspective1 );
    520520}
     
    522522.gradient_perspective1_stop1 {stop-color: #a40000;}
    523523.gradient_perspective1_stop2 {stop-color: #F29100;}
     524.co2 .gradient_perspective1_stop1 {stop-color: #174f48;}
     525.co2 .gradient_perspective1_stop2 {stop-color: #67c7b6;}
    524526
    525527@media (max-width: 800px) and (orientation: portrait) {
  • plugins_spip/terraeco_infographie/trunk/infographie.html

    r8055 r8057  
    1717[<link rel="stylesheet" href="(#CHEMIN{css/infographie.css}|direction_css)" type="text/css" />]
    1818<style type="text/css">
    19         path.area.perspective1_haute,path.area.perspective2_haute{
     19        path.area.perspective1_haute,.co2 path.area.perspective_trou{
    2020                fill: url( #gradient_perspective1 );
    2121        }
  • plugins_spip/terraeco_infographie/trunk/javascript/infographie.js

    r8054 r8057  
    164164                date_aujourdhui = parseInt(values[values.length-1].axe_x);
    165165                climat_draw(translate_defaut);
     166                climat_draw_dots();
    166167                climat_drawlines_interaction(translate_defaut);
    167168                climat_infographie_interactions();
     
    349350                        d3.select("#clip_perspective rect")
    350351                                .transition().duration(vitesse)
    351                                 .attr("width",x(date_actuelle)-x(values_perspective1_haute[0].axe_x));
     352                                .attr("width",x(date_actuelle)-x(values_perspective1_mediane[0].axe_x));
    352353                }
    353354               
     
    437438        svg.append("text").attr("y",height+55).attr("class","legende").style("text-anchor", "start")
    438439                .text(infographie_lang.axe_y);
    439 
     440       
     441        if(date_naissance > parseInt(values[0].axe_x)){
     442                // Ajout du groupe qui contiendra les éléments de la date de naissance
     443                ligne_naissance_groupe = svg.select('.paths').append("g").attr("class", "birth-line");
     444
     445                // Ajout de la ligne de naissance
     446                ligne_naissance = ligne_naissance_groupe
     447                        .datum(value_origine)
     448                        .append("line")
     449                                .attr('class','ligne_naissance second_plan')
     450                                .attr("x1", function( d ) { return x(d.axe_x); })
     451                                .attr("x2",function( d ) { return x(d.axe_x); }) // vertical line so same value on each
     452                                .attr("y1",image_naissance.height+10).attr("y2", height);
     453
     454                // Ajout de l'image de la bougie
     455                ligne_naissance_groupe
     456                        .datum(value_origine)
     457                        .append("svg:image")
     458                                .attr("xlink:href", image_naissance.url)
     459                                .attr("x", function(d){return x(value_origine.axe_x)-(image_naissance.width/2);})
     460                                .attr("width", image_naissance.width).attr("height", image_naissance.height);
     461        }
     462       
     463        // Ajout du groupe pour le depart
     464        ligne_depart_groupe = svg.select('.paths').append("g").attr("class", "start-line");
     465
     466        // Ajout de la ligne de depart
     467        ligne_depart_aujd = ligne_depart_groupe
     468                .datum(values[0])
     469                .append("line")
     470                        .attr("class","ligne_depart second_plan")
     471                        .attr("x1", function(d){ return x(d.axe_x); })
     472                        .attr("x2",function(d){ return x(d.axe_x); })
     473                        .attr("y1",image_depart.height+10).attr("y2", height);
     474
     475        // Ajout de l'image de depart
     476        ligne_depart_groupe
     477                .datum(values[0])
     478                .append("svg:image")
     479                        .attr("xlink:href", image_depart.url)
     480                        .attr("x", function(d){ return x(d.axe_x)-(image_depart.width/2);})
     481                        .attr("width", image_depart.width).attr("height", image_depart.height);
     482
     483        // Ajout du groupe pour Aujourd'hui
     484        ligne_aujd_groupe = svg.select('.paths').append("g").attr("class", "today-line");
     485
     486        // Ajout de la ligne d'aujourd'hui
     487        ligne_aujd = ligne_aujd_groupe
     488                .datum(values2[values2.length-1])
     489                .append("line")
     490                        .attr("class","ligne_aujd second_plan")
     491                        .attr("x1", function(d){ return x(d.axe_x);})
     492                        .attr("x2",function(d){ return x(d.axe_x);})
     493                        .attr("y1",image_aujd.height+10).attr("y2", height);
     494
     495        // Ajout de l'image de la bougie
     496        ligne_aujd_groupe
     497                .datum(values2[values2.length-1])
     498                .append("svg:image")
     499                        .attr("xlink:href", image_aujd.url)
     500                        .attr("x", function(d){return x(d.axe_x)-(image_aujd.width/2);})
     501                        .attr("width", image_aujd.width).attr("height", image_aujd.height);
     502}
     503
     504/**
     505 * Afficher le bloc d'interaction
     506 *
     507 * @param translatex
     508 */
     509function climat_drawlines_interaction(translatex){
     510        d3.selectAll(".interaction").remove();
     511       
     512        ligne_interactive_groupe = svg.append("g")
     513                .attr("class", "interaction").attr("transform","translate(0,1)");
     514               
     515        /**
     516         * Ajouter la ligne d'interaction
     517         */
     518        ligne_interactive =  ligne_interactive_groupe
     519                .datum(value_actuelle)
     520                        .append("line")
     521                                .attr('class', 'ligne_interactive')
     522                                .attr("x1", function(d) { return x(d.axe_x)+parseFloat(translatex);})
     523                                .attr("x2",function(d) { return x(d.axe_x)+parseFloat(translatex);})
     524                                .attr("y1",image_naissance.height+10).attr("y2", height);
     525        /**
     526         * Ajouter le triangle
     527         */
     528        ligne_interactive_groupe.append('path').attr('class','triangle')
     529                .attr('d', function(d) {
     530                        var x1 = (x( value_actuelle.axe_x )+parseFloat(translatex)-14), x2 = x( value_actuelle.axe_x)+parseFloat(translatex)+14,x3 = x( value_actuelle.axe_x )+parseFloat(translatex);
     531                        var x4 = 'M '+ x1 +' '+height+' L '+x2+' '+height+' L '+x3+' '+(height-25)+' z';
     532                        return x4;
     533                });
     534}
     535
     536function climat_draw_dots(){
    440537        var dots = svg.select('.paths').append("g").attr("class", "dots");
    441538        // Ajout des points d'Anecdotes cliquables
     
    460557                                );
    461558                        });
    462        
    463         if(date_naissance > parseInt(values[0].axe_x)){
    464                 // Ajout du groupe qui contiendra les éléments de la date de naissance
    465                 ligne_naissance_groupe = svg.select('.paths').append("g").attr("class", "birth-line");
    466 
    467                 // Ajout de la ligne de naissance
    468                 ligne_naissance = ligne_naissance_groupe
    469                         .datum(value_origine)
    470                         .append("line")
    471                                 .attr('class','ligne_naissance second_plan')
    472                                 .attr("x1", function( d ) { return x(d.axe_x); })
    473                                 .attr("x2",function( d ) { return x(d.axe_x); }) // vertical line so same value on each
    474                                 .attr("y1",image_naissance.height+10).attr("y2", height);
    475 
    476                 // Ajout de l'image de la bougie
    477                 ligne_naissance_groupe
    478                         .datum(value_origine)
    479                         .append("svg:image")
    480                                 .attr("xlink:href", image_naissance.url)
    481                                 .attr("x", function(d){return x(value_origine.axe_x)-(image_naissance.width/2);})
    482                                 .attr("width", image_naissance.width).attr("height", image_naissance.height);
    483         }
    484        
    485         // Ajout du groupe pour le depart
    486         ligne_depart_groupe = svg.select('.paths').append("g").attr("class", "start-line");
    487 
    488         // Ajout de la ligne de depart
    489         ligne_depart_aujd = ligne_depart_groupe
    490                 .datum(values[0])
    491                 .append("line")
    492                         .attr("class","ligne_depart second_plan")
    493                         .attr("x1", function(d){ return x(d.axe_x); })
    494                         .attr("x2",function(d){ return x(d.axe_x); })
    495                         .attr("y1",image_depart.height+10).attr("y2", height);
    496 
    497         // Ajout de l'image de depart
    498         ligne_depart_groupe
    499                 .datum(values[0])
    500                 .append("svg:image")
    501                         .attr("xlink:href", image_depart.url)
    502                         .attr("x", function(d){ return x(d.axe_x)-(image_depart.width/2);})
    503                         .attr("width", image_depart.width).attr("height", image_depart.height);
    504 
    505         // Ajout du groupe pour Aujourd'hui
    506         ligne_aujd_groupe = svg.select('.paths').append("g").attr("class", "today-line");
    507 
    508         // Ajout de la ligne d'aujourd'hui
    509         ligne_aujd = ligne_aujd_groupe
    510                 .datum(values2[values2.length-1])
    511                 .append("line")
    512                         .attr("class","ligne_aujd second_plan")
    513                         .attr("x1", function(d){ return x(d.axe_x);})
    514                         .attr("x2",function(d){ return x(d.axe_x);})
    515                         .attr("y1",image_aujd.height+10).attr("y2", height);
    516 
    517         // Ajout de l'image de la bougie
    518         ligne_aujd_groupe
    519                 .datum(values2[values2.length-1])
    520                 .append("svg:image")
    521                         .attr("xlink:href", image_aujd.url)
    522                         .attr("x", function(d){return x(d.axe_x)-(image_aujd.width/2);})
    523                         .attr("width", image_aujd.width).attr("height", image_aujd.height);
    524559}
    525 
    526 /**
    527  * Afficher le bloc d'interaction
    528  *
    529  * @param translatex
    530  */
    531 function climat_drawlines_interaction(translatex){
    532         d3.selectAll(".interaction").remove();
    533        
    534         ligne_interactive_groupe = svg.append("g")
    535                 .attr("class", "interaction").attr("transform","translate(0,1)");
    536                
    537         /**
    538          * Ajouter la ligne d'interaction
    539          */
    540         ligne_interactive =  ligne_interactive_groupe
    541                 .datum(value_actuelle)
    542                         .append("line")
    543                                 .attr('class', 'ligne_interactive')
    544                                 .attr("x1", function(d) { return x(d.axe_x)+parseFloat(translatex);})
    545                                 .attr("x2",function(d) { return x(d.axe_x)+parseFloat(translatex);})
    546                                 .attr("y1",image_naissance.height+10).attr("y2", height);
    547         /**
    548          * Ajouter le triangle
    549          */
    550         ligne_interactive_groupe.append('path').attr('class','triangle')
    551                 .attr('d', function(d) {
    552                         var x1 = (x( value_actuelle.axe_x )+parseFloat(translatex)-14), x2 = x( value_actuelle.axe_x)+parseFloat(translatex)+14,x3 = x( value_actuelle.axe_x )+parseFloat(translatex);
    553                         var x4 = 'M '+ x1 +' '+height+' L '+x2+' '+height+' L '+x3+' '+(height-25)+' z';
    554                         return x4;
    555                 });
    556 }
    557 
    558560function climat_infographie_interactions(){
    559561        jQuery('.arrows_nav').on('taphold',function(event){
     
    942944                                .attr("d", line(values_perspective2_mediane));
    943945
     946                        climat_draw_dots();
    944947                        climat_drawline_demain();
    945948                       
     
    995998                        // On ajoute la ligne de données pour la période aprÚs naissance
    996999                        parsedCSV.forEach(function(row, i){
     1000                                if(parseFloat(row[1]).toFixed(2) <= values_perspective1_mediane[i].axe_y){
     1001                                        values_perspective_trou.push({
     1002                                                                                        'axe_x':parseFloat(row[0]).toFixed(),
     1003                                                                                        'axe_y':values_perspective1_mediane[i].axe_y,
     1004                                                                                        'axe_y1':parseFloat(row[1]).toFixed(2)
     1005                                                                                });
     1006                                }
    9971007                                values_perspective2_mediane.push({'axe_x':parseFloat(row[0]).toFixed(),'axe_y':parseFloat(row[1]).toFixed(2)});
    9981008                        });
     
    10071017                         * On ajoute les perspectives
    10081018                         */
    1009                         svg.selectAll('.paths').append("path")
     1019                        /**
     1020                         * On ajoute les perspectives
     1021                         */
     1022                        var perspectives = svg.selectAll('.paths').append("g").attr('class','perspectives');
     1023                        perspectives.append("path")
    10101024                                        .attr("class", "line perspective perspective1_mediane")
    10111025                                        .attr("d", line(values_perspective1_mediane));
    1012                         svg.selectAll('.paths').append("path")
     1026                        perspectives.append("path")
    10131027                                        .attr("class", "line perspective perspective2_mediane")
    10141028                                        .attr("d", line(values_perspective2_mediane));
     1029                        perspectives.append("clipPath")
     1030                                .attr("id", "clip_perspective")
     1031                                .append("rect")
     1032                                        .attr("width",x(date_actuelle)-x(values_perspective1_mediane[0].axe_x))
     1033                                        .attr("height",height)
     1034                                        .attr("transform", "translate(" + x(values_perspective1_mediane[0].axe_x) + ",0)");
     1035                        perspectives.append("path")
     1036                                .attr("class", "area perspective perspective_trou")
     1037                                .attr("clip-path", "url(#clip_perspective)")
     1038                                .attr("d", area(values_perspective_trou));
    10151039                       
     1040                        climat_draw_dots();
    10161041                        climat_drawline_demain();
    10171042                       
Note: See TracChangeset for help on using the changeset viewer.