tournonsLaPage/themes/plain/templates/old_d3.js

<script type="text/javascript">
  var data = {{ data|json_encode|raw }};

  let now = Date.now();
  /*let year_now = new Date().getFullYear() + 0;
  let futur = new Date( year_now.toString() );
  
  now = futur.getTime();*/

  let lane_array = []
  data.forEach(function(e){
    lane_array.push(e.title)
  });
  let datum = new Date('19990');
  let sec =  datum.getTime();

  var lanes = lane_array,
      laneLength = lanes.length,
      items = data,
      timeBegin = sec ,
      timeEnd = now ;
      
  // get the d3 lib
  // append the d3 
  var m = [20, 15, 15, 120], //top right bottom left -> margin
      w = 960 - m[1] - m[3], // width
      h = (laneLength * 150) - m[0] - m[2], // height
      miniHeight = laneLength * 12 + 50, 
      mainHeight = h - miniHeight - 50;
 
    //scales
    var x = d3.scaleLinear()
        .domain([timeBegin, timeEnd])
        .range([0, w]);

    var x1 = d3.scaleLinear()
        .range([0, w]);

    var y1 = d3.scaleLinear()
        .domain([0, laneLength])
        .range([0, mainHeight]);

    var y2 = d3.scaleLinear()
        .domain([0, laneLength])
        .range([0, miniHeight]);

    

    //creat the chart body
    var w_box = w + m[1] + m[3];
    var h_box = h + m[0] + m[2];
    var chart = d3.select(".datavis")
          .append("svg")
          .attr("viewBox",'0 0 '+ w_box +' '+ h_box )
          /*.attr("width", w + m[1] + m[3])
          .attr("height", h + m[0] + m[2])*/
          .attr("class", "chart");


    var main = chart.append("g")
          .attr("transform", "translate(" + m[3] + "," + m[0] + ")")
          .attr("width", w)
          .attr("height", mainHeight)
          .attr("class", "main");


    // X axis 
    const xaxis = d3.scaleLinear()
          .domain([timeBegin, timeEnd])
          .range([0, w]);

        main.append("g")
          .attr("transform", "translate(0," + mainHeight + ")")
          .call(d3.axisBottom(xaxis).ticks(4).tickFormat(d3.timeFormat('%Y')))
          .selectAll("text")
            /*.attr("transform", "translate(-10,10)rotate(-45)")*/
            .style("text-anchor", "center")
            .style("font-size", 10)
            .style("fill", "black");


  
    
    //main lanes and texts
    main.append("g").selectAll(".laneLines")
      .data(items)
      .enter().append("line")
      .attr("x1", m[1])
      .attr("y1", function(d) {return y1(d.lane);})
      .attr("x2", w)
      .attr("y2", function(d) {return y1(d.lane);})
      .attr("stroke", "lightgray")

    main.append("g").selectAll(".laneText")
      .data(lanes)
      .enter().append("text")
      .text(function(d) {return d;})
      .attr("x", -m[1])
      .attr("y", function(d, i) {return y1(i + .5);})
      .attr("dy", ".5ex")

      .attr("text-anchor", "end")
      .attr("class", "laneText");

    // coalition 

    var coa = main.append("g").selectAll("rect")
                  .data(items)
                  .enter().append("rect")
                  .attr("class", "coalition")
                  .attr("x", function(d) {var date = new Date(d.start); console.log(d.start); return x(d.start);})
                  .attr("y", function(d) {return y1(d.lane) + 10;})
                  .attr("height", function(d) {return .8 * y1(1);})
                  .attr("width", function(d) { return x(d.end) - x(d.start);})
                  .attr("pos", function(d) {return d.lane });


    // labels
    /*labels = main.append("g").selectAll("text")
        .data(items, function (d) { return d.id; })
        .attr("x", function(d) {return x(d.start + 2);});

    labels.enter().append("text")
        .text(function(d) {return d.id;})
        .attr("fill", "White")
        .attr("x", function(d) {return x(d.start + 2);})
        .attr("y", function(d) {return y1(d.lane + .5);});*/


           
    //ok 
    var act = main.append("g").selectAll("activists")
            .data(items)
            .enter()
      act.selectAll("rects")
        .data(function(d){ return d.activist })
        .enter().append("rect")
            .attr("x", function (d) {  return x(d.start) } )
            .attr("y", function(d, i) { let l = items[d.lane].activist.length; let margin = y1(1)/(l+1) ; /*return y1(d.lane)*/  return y1( d.lane  ) + ( margin * (i+1)) - 10  })
            .attr("height", 15 )
            .attr("width", function(d) {return x(d.end) - x(d.start);} )
            .attr("class", "rectangle");

      act.selectAll("name")
           .data(function(d){ return d.activist })
        .enter().append("text")
            .text(function(d) {return d.name;})
            .attr("class", "name")
            .attr("x", function(d) {return x(d.start + .4) + 7;})
            .attr("y", function(d, i) {let l = items[d.lane].activist.length; let margin = y1(1)/(l+1) ; return y1( d.lane ) + ( margin * (i+1) ) + 1  });


      //adjust rect size 
      let rect_array = $(".rectangle");
      $(".name").each(function(i, e){
        var bbox = this.getBBox();
        let name_size = bbox.width;
        let rect_size = $(rect_array[i]).width();
        if( name_size+ 15 > rect_size){
          $(rect_array[i]).css("width", name_size + 15);
        }
      });





      //chart interaction 

      $(".rectangle").on("click", function(){
        $(".container_info").fadeIn("fast", function(){
          $(this).css("display", "grid");
        });
      });
      $(".container_info .button").on("click", function(){
        $(".container_info").fadeOut();
      });


</script>