agent.html
4.02 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
{% extends "base_page.html" %}
{% block more_heads %}
<style type="text/css">
#charge_chart {
background-color: #fAfAfA;
border: 1pt solid black;
display: inline-block;
}
rect.bar:hover {
fill: dimgrey;
}
rect.bar {
fill: rgb(127,127,159);
}
</style>
{% endblock %}
{% block content %}
<div id="charge_div"></div>
<svg height="400" id="charge_chart" width="800"></svg>
{% endblock %}
{% block more_scripts %}
{% include 'd3js-includes.html' %}
<!-- <script>-->
<!-- // Update…-->
<!-- d3.json("{{url_for('main.charge_agent', agent_id=agent.id)}}").then(data => {-->
<!-- var charge = d3.select("#charge_div")-->
<!-- .selectAll("p")-->
<!-- .data(data)-->
<!-- .text(function (d) {-->
<!-- return d;-->
<!-- });-->
<!-- // Enter…-->
<!-- charge.enter().append("p")-->
<!-- .text(function (d) {-->
<!-- return d.periode + ", " + d.charge;-->
<!-- });-->
<!-- })-->
<!-- </script>-->
<script>
const margin = {top: 20, right: 20, bottom: 90, left: 120},
width = 800 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
const x = d3.scaleBand()
.range([0, width])
.padding(0.1);
const y = d3.scaleLinear()
.range([height, 0]);
const svg = d3.select("#charge_chart").append("svg")
.attr("id", "svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// On demande à D3JS de charger notre fichier
d3.json("{{url_for('main.charge_agent', agent_id=agent.id)}}").then(data => {
// Conversion des caractères en nombres
console.log(data)
data.forEach(d => d.charge = +d.charge);
// Mise en relation du scale avec les données de notre fichier
// Pour l'axe X, c'est la liste des pays
// Pour l'axe Y, c'est le max des charge
x.domain(data.map(d => d.periode));
y.domain([0, d3.max(data, d => d.charge)]);
// Ajout de l'axe X au SVG
// Déplacement de l'axe horizontal et du futur texte (via la fonction translate) au bas du SVG
// Selection des noeuds text, positionnement puis rotation
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickSize(0))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
// Ajout de l'axe Y au SVG avec 6 éléments de légende en utilisant la fonction ticks (sinon D3JS en place autant qu'il peut).
svg.append("g")
.call(d3.axisLeft(y).ticks(6));
// Ajout des bars en utilisant les données de notre fichier data.tsv
// La largeur de la barre est déterminée par la fonction x
// La hauteur par la fonction y en tenant compte de la charge
// La gestion des events de la souris pour le popup
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", d => x(d.periode))
.attr("width", x.bandwidth())
.attr("y", d => y(d.charge))
.attr("height", d => height - y(d.charge))
// .on("mouseover", function (d) {
// div.transition()
// .duration(200)
// .style("opacity", .9);
// div.html("Population : " + d.charge)
// .style("left", (d3.event.pageX + 10) + "px")
// .style("top", (d3.event.pageY - 50) + "px");
// })
// .on("mouseout", function (d) {
// div.transition()
// .duration(500)
// .style("opacity", 0);
// });
});
</script>
{% endblock %}