=#-if @admin 


=link_to "/fr/les-usages.html" do
  <div id="cloud"></div>
  
  
-words = []
-words << ["Des m2 supplémentaires, tout simplement.", 80, "/fr/les-usages.html"]
-words << ["Crèche", 15, "/fr/les-usages.html"]
-words << ["Rentabiliser du foncier", 25, "/fr/les-usages.html"]
-words << ["Inovation", 25, "/fr/les-usages.html"]
-words << ["Créer un atelier", 30, "/fr/les-usages.html"]
-words << ["Location", 30, "/fr/les-usages.html"]
-words << ["Bois", 40, "/fr/les-usages.html"]
-words << ["Logement adapté", 10, "/fr/les-usages.html"]
-words << ["Biosourcé", 20, "/fr/les-usages.html"]
-words << ["Hors-sol", 20, "/fr/les-usages.html"]
-words << ["Logement d'urgence", 25, "/fr/les-usages.html"]
-words << ["accueillir un parent", 30, "/fr/les-usages.html"]
-words << ["Construction hors-site", 25, "/fr/les-usages.html"]
-words << ["Lodge", 60, "/fr/les-usages.html"]
-words << ["Vestiaire", 25, "/fr/les-usages.html"]
-words << ["Tourisme", 60, "/fr/les-usages.html"]
-words << ["Confort", 30, "/fr/les-usages.html"]
-words << ["Bureau", 30, "/fr/les-usages.html"]
-words << ["Surrélever un immeuble", 15, "/fr/les-usages.html"]
-words << ["Bureau", 20, "/fr/les-usages.html"]
-words << ["Confort thermique", 20, "/fr/les-usages.html"]
-words << ["Réversible", 25, "/fr/les-usages.html"]
-words << ["Village Urbain", 38, "/fr/les-usages.html"]
-words << ["Logement pour saisonniers", 15, "/fr/les-usages.html"]
-words << ["Espace de télétravail", 15, "/fr/les-usages.html"]
-words << ["Flexibilité", 25, "/fr/les-usages.html"]
-words << ["Qualité", 50, "/fr/les-usages.html"]
-words << ["école", 45, "/fr/les-usages.html"]
-words << ["Recyclé", 30, "/fr/les-usages.html"]
-words << ["Rapidité", 80, "/fr/les-usages.html"]
-words << ["Design", 50, "/fr/les-usages.html"]
-words << ["Eco", 70, "/fr/les-usages.html"]

-words << ["Réversible", 40, "/fr/les-usages.html"]
-words << ["Economie circulaire", 25, "/fr/les-usages.html"]




-words_to_show = ""
-words.each do |w|
  -words_to_show += raw("{ text: \"#{escape_javascript(w[0]).upcase}\", url: \"#{escape_javascript(w[2])}\", size: #{w[1]}},")
:scss
  #cloud svg{
    display:block;
    margin: 15px auto;
    max-width:900px;
    width:100%;
  }
:javascript
    // First define your cloud data, using `text` and `size` properties:
    var skillsToDraw = [
      #{raw(words_to_show)}
   
    ];
    
    function getRandomInt(max) {
      return Math.floor(Math.random() * Math.floor(max));
    }
    
    // Next you need to use the layout script to calculate the placement, rotation and size of each word:
    var colors = ["#306667", "#1b415d", "#2f6566", "#DBC089", "#6aa1a0"]
    var width = 1200;
    var height = 500;
    var fill = d3.scale.category20();
    
    d3.layout.cloud()
    .size([width, height])
    .words(skillsToDraw)
    .rotate(function() {
    return ~~(Math.random() * 2) * 90;
    }) //function() { return (~~(Math.random() * 6) - 3) * 30; }
    .font("Lato")
    .fontWeight("900")
    .fontSize(function(d) {
    return d.size;
    })
    .on("end", drawSkillCloud)
    .start();
    
    // Finally implement `drawSkillCloud`, which performs the D3 drawing:
    
    // apply D3.js drawing API
    function drawSkillCloud(words) {
    d3.select("#cloud").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + ~~(width / 2) + "," + ~~(height / 2) + ")")
    .selectAll("text")
    .data(words)
    .enter().append("text")
    .style("font-size", function(d) {
    return d.size + "px";
    })
    .style("-webkit-touch-callout", "none")
    .style("-webkit-user-select", "none")
    .style("-khtml-user-select", "none")
    .style("-moz-user-select", "none")
    .style("-ms-user-select", "none")
    .style("user-select", "none")
    .style("cursor", "default")
    .style("font-family", "Lato")
    .style("font-weight", "900")
    .style("fill", function(d, i) {
      
      color_index = getRandomInt(colors.length);


      return colors[parseInt(color_index)];
    //return d.color;
    })
    .attr("text-anchor", "middle")
    .attr("transform", function(d) {
    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
    })
    .text(function(d) {
    return d.text;
    })
    .on("click", function (d, i){
        window.open(d.url, "_blank");
    });
    
    

    

    }
    
    // set the viewbox to content bounding box (zooming in on the content, effectively trimming whitespace)
    
    var svg = document.getElementsByTagName("svg")[0];
    var bbox = svg.getBBox();
    var viewBox = [bbox.x, bbox.y, bbox.width, bbox.height].join(" ");
    svg.setAttribute("viewBox", viewBox);