-
Notifications
You must be signed in to change notification settings - Fork 0
/
teste.html
117 lines (104 loc) · 5.11 KB
/
teste.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gráfico de Coordenadas Paralelas com D3.js</title>
<style>
/* Estilo para o SVG */
svg {
width: 100%;
height: auto;
}
/* Estilo para o fundo do gráfico */
.background {
fill: none;
stroke: #ddd; /* Cor do fundo das linhas */
stroke-opacity: 0.5; /* Opacidade do fundo das linhas */
}
</style>
<!-- Inclui a biblioteca D3.js -->
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<h1>Gráfico de Coordenadas Paralelas</h1>
<!-- Aqui será inserido o gráfico -->
<div id="chart"></div>
<script>
// Tamanho do gráfico
var margin = { top: 30, right: 10, bottom: 10, left: 50 },
width = 800 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Escalas para os eixos
var x = d3.scalePoint().range([0, width]).padding(1),
y = {};
var line = d3.line(),
axis = d3.axisLeft(),
background,
foreground;
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Dados
var data = [
{"products_int":0,"cultivation1":0.22,"cultivation2":2.0,"processing1":0.14,"processing2":1.5,"transportation1":0.17,"transportation2":261},
{"products_int":0,"cultivation1":0.38,"cultivation2":2.5,"processing1":1.34,"processing2":4.2,"transportation1":2.97,"transportation2":261},
{"products_int":1,"cultivation1":0.38,"cultivation2":1.13,"processing1":0.88,"processing2":7.69,"transportation1":0.04,"transportation2":65},
{"products_int":1,"cultivation1":0.53,"cultivation2":1.13,"processing1":1.33,"processing2":10.44,"transportation1":2.68,"transportation2":450},
{"products_int":2,"cultivation1":0.48,"cultivation2":0.06,"processing1":0.94,"processing2":0.2,"transportation1":0.11,"transportation2":65},
{"products_int":2,"cultivation1":0.48,"cultivation2":0.06,"processing1":0.94,"processing2":0.45,"transportation1":0.11,"transportation2":375},
{"products_int":3,"cultivation1":0.57,"cultivation2":0.08,"processing1":2.98,"processing2":0.2,"transportation1":0.05,"transportation2":65},
{"products_int":3,"cultivation1":1.3,"cultivation2":0.08,"processing1":2.98,"processing2":0.9,"transportation1":0.3,"transportation2":450},
{"products_int":4,"cultivation1":0.32,"cultivation2":0.05,"processing1":0.1,"processing2":0.3,"transportation1":0.27,"transportation2":75},
{"products_int":4,"cultivation1":0.32,"cultivation2":0.05,"processing1":0.5,"processing2":0.6,"transportation1":0.48,"transportation2":300},
{"products_int":5,"cultivation1":0.7,"cultivation2":1.39,"processing1":1.1,"processing2":5.5,"transportation1":0.08,"transportation2":75},
{"products_int":5,"cultivation1":0.7,"cultivation2":1.79,"processing1":5.0,"processing2":10.6,"transportation1":2.68,"transportation2":285},
{"products_int":6,"cultivation1":1.3,"cultivation2":1.47,"processing1":0.54,"processing2":5.0,"transportation1":0.07,"transportation2":100},
{"products_int":6,"cultivation1":1.3,"cultivation2":2.37,"processing1":0.54,"processing2":7.4,"transportation1":0.13,"transportation2":450},
{"products_int":7,"cultivation1":0.75,"cultivation2":0.5,"processing1":1.6,"processing2":0.1,"transportation1":0.08,"transportation2":25},
{"products_int":7,"cultivation1":0.75,"cultivation2":2.3,"processing1":1.6,"processing2":0.6,"transportation1":2.68,"transportation2":300}
];
// Extrai o nome das dimensões e cria as escalas
x.domain(dimensions = d3.keys(data[0]).filter(function(d) {
return d != "products_int" && (y[d] = d3.scaleLinear()
.domain(d3.extent(data, function(p) { return +p[d]; }))
.range([height, 0]));
}));
// Adiciona linhas para cada item no conjunto de dados
background = svg.append("g")
.attr("class", "background")
.selectAll("path")
.data(data)
.enter().append("path")
.attr("d", path);
// Adiciona linhas para cada item no conjunto de dados
foreground = svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(data)
.enter().append("path")
.attr("d", path);
// Adiciona um grupo para cada dimensão
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; });
// Adiciona um eixo e um título
g.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(axis.scale(y[d])); })
.append("text")
.attr("class", "title")
.attr("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; });
// Retorna o caminho para uma linha
function path(d) {
return line(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
}
</script>
</body>
</html>