146 lines
4.6 KiB
Plaintext
146 lines
4.6 KiB
Plaintext
=#-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);
|
|
|
|
|
|
|