180 lines
5.2 KiB
HTML
180 lines
5.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
|
||
|
|
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
</head>
|
||
|
|
<style>
|
||
|
|
|
||
|
|
form {
|
||
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
|
|
position: absolute;
|
||
|
|
left: 10px;
|
||
|
|
top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
text{
|
||
|
|
transform: rotate(90deg);
|
||
|
|
}
|
||
|
|
.grid .tick {
|
||
|
|
stroke: lightgrey;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
label {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<body>
|
||
|
|
<container>
|
||
|
|
<div class="columns">
|
||
|
|
|
||
|
|
<div class="column is-2">
|
||
|
|
<div class="content">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="target" class="column is-3">
|
||
|
|
<form>
|
||
|
|
<label><input type="radio" name="mode" value="grouped"> Grouped</label>
|
||
|
|
<label><input type="radio" name="mode" value="stacked" checked> Stacked</label>
|
||
|
|
</form>
|
||
|
|
<br>
|
||
|
|
<svg width="960" height="500"></svg>
|
||
|
|
<script src="https://d3js.org/d3.v4.min.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
|
||
|
|
// const invasive = JSON.parse("["+urlVars["colture"]+"]");
|
||
|
|
// const foreste = JSON.parse("["+urlVars["foreste"]+"]");
|
||
|
|
// console.log("Invasive: ",invasive);
|
||
|
|
var n = 2, // The number of series.
|
||
|
|
m = {{ length }} ; // The number of values per series.
|
||
|
|
|
||
|
|
// The xz array has m elements, representing the x-values shared by all series.
|
||
|
|
// The yz array has n elements, representing the y-values of each of the n series.
|
||
|
|
// Each yz[i] is an array of m non-negative numbers representing a y-value for xz[i].
|
||
|
|
// The y01z array has the same structure as yz, but with stacked [y₀, y₁] instead of y.
|
||
|
|
const words = {{ pwords|safe }};
|
||
|
|
yz = [{{ p1|safe }}, {{ p2|safe }}];
|
||
|
|
|
||
|
|
var xz = d3.range(m),
|
||
|
|
y01z = d3.stack().keys(d3.range(n))(d3.transpose(yz)),
|
||
|
|
yMax = d3.max(yz, function(y) { return d3.max(y); }),
|
||
|
|
y1Max = d3.max(y01z, function(y) { return d3.max(y, function(d) { return d[1]; }); });
|
||
|
|
|
||
|
|
var svg = d3.select("svg"),
|
||
|
|
margin = {top: 40, right: 10, bottom: 20, left: 10},
|
||
|
|
width = +svg.attr("width") - margin.left - margin.right,
|
||
|
|
height = +svg.attr("height") - margin.top - margin.bottom,
|
||
|
|
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||
|
|
console.log(margin)
|
||
|
|
|
||
|
|
var xvalori = d3.scaleBand() // questo lo usiamo per i ticks sull'asse x
|
||
|
|
.domain(d3.range(m))
|
||
|
|
.rangeRound([0, width])
|
||
|
|
.padding(0.08);
|
||
|
|
|
||
|
|
var x= d3.scaleBand() // questo lo usiamo per i valori dell'asse x
|
||
|
|
.domain(xz)
|
||
|
|
.rangeRound([0, width])
|
||
|
|
.padding(0.08);
|
||
|
|
|
||
|
|
var y = d3.scaleLinear()
|
||
|
|
.domain([0, y1Max])
|
||
|
|
.range([height, 0]);
|
||
|
|
|
||
|
|
var color = d3.scaleOrdinal()
|
||
|
|
.domain([5,4]) // colore verde, rosso
|
||
|
|
.range(d3.schemeCategory20c);
|
||
|
|
|
||
|
|
var series = g.selectAll(".series")
|
||
|
|
.data(y01z)
|
||
|
|
.enter().append("g")
|
||
|
|
.attr("fill", function(d, i) { return color(i); });
|
||
|
|
|
||
|
|
var rect = series.selectAll("rect")
|
||
|
|
.data(function(d) { return d; })
|
||
|
|
.enter().append("rect")
|
||
|
|
.attr("x", function(d, i) { return x(i); })
|
||
|
|
.attr("y", height)
|
||
|
|
.attr("width", x.bandwidth())
|
||
|
|
.attr("height", 0);
|
||
|
|
|
||
|
|
rect.transition()
|
||
|
|
.delay(function(d, i) { return i * 10; })
|
||
|
|
.attr("y", function(d) { return y(d[1]); })
|
||
|
|
.attr("height", function(d) { return y(d[0]) - y(d[1]); });
|
||
|
|
|
||
|
|
g.append("g")
|
||
|
|
.attr("class", "axis axis--x")
|
||
|
|
.attr("transform", "translate(0," + height + ")")
|
||
|
|
.call(d3.axisBottom(xvalori)
|
||
|
|
.tickSize(5)
|
||
|
|
.tickFormat(function(i) { return words[i]; })
|
||
|
|
.tickPadding(6));
|
||
|
|
|
||
|
|
d3.selectAll("input")
|
||
|
|
.on("change", changed);
|
||
|
|
|
||
|
|
// window.onload = function(){
|
||
|
|
// var svg = document.getElementsByTagName("svg")[0];
|
||
|
|
// document.getElementById("target").appendChild(svg);
|
||
|
|
// }
|
||
|
|
|
||
|
|
var timeout = d3.timeout(function() {
|
||
|
|
d3.select("input[value=\"grouped\"]")
|
||
|
|
.property("checked", true)
|
||
|
|
.dispatch("change");
|
||
|
|
}, 2000);
|
||
|
|
|
||
|
|
function changed() {
|
||
|
|
timeout.stop();
|
||
|
|
if (this.value === "grouped") transitionGrouped();
|
||
|
|
else transitionStacked();
|
||
|
|
}
|
||
|
|
|
||
|
|
function transitionGrouped() {
|
||
|
|
y.domain([0, yMax]);
|
||
|
|
|
||
|
|
rect.transition()
|
||
|
|
.duration(500)
|
||
|
|
.delay(function(d, i) { return i * 10; })
|
||
|
|
.attr("x", function(d, i) { return x(i) + x.bandwidth() / n * this.parentNode.__data__.key; })
|
||
|
|
.attr("width", x.bandwidth() / n)
|
||
|
|
.transition()
|
||
|
|
.attr("y", function(d) { return y(d[1] - d[0]); })
|
||
|
|
.attr("height", function(d) { return y(0) - y(d[1] - d[0]); });
|
||
|
|
}
|
||
|
|
|
||
|
|
function transitionStacked() {
|
||
|
|
y.domain([0, y1Max]);
|
||
|
|
|
||
|
|
rect.transition()
|
||
|
|
.duration(500)
|
||
|
|
.delay(function(d, i) { return i * 10; })
|
||
|
|
.attr("y", function(d) { return y(d[1]); })
|
||
|
|
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
|
||
|
|
.transition()
|
||
|
|
.attr("x", function(d, i) { return x(i); })
|
||
|
|
.attr("width", x.bandwidth());
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<div class="column">
|
||
|
|
<svg height="20" width="20">
|
||
|
|
<rect width="20" height="20" style="fill:rgb(158,202,225);stroke-width:3;stroke:rgb(0,0,0)"></rect>
|
||
|
|
</svg> {{ pol1|safe }}
|
||
|
|
<br>
|
||
|
|
<svg height="20" width="20">
|
||
|
|
<rect width="20" height="20" style="fill:rgb(198,219,239);stroke-width:3;stroke:rgb(0,0,0)"></rect>
|
||
|
|
</svg> {{ pol2|safe }}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</container>
|
||
|
|
</body>
|