-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstacked_column.html
131 lines (121 loc) · 4.16 KB
/
stacked_column.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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<title>Gráfica de Barras Apiladas con D3.js</title>
<meta charset="utf-8" />
<meta http-equiv="Permissions-Policy" content="interest-cohort=()" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
/>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<svg id="chart" width="970" height="60" style="padding: 0px"></svg>
<script>
// Carga el archivo CSV
d3.csv("data.csv")
.then((data) => {
// Obtener la cantidad en cada grupo
const ageGroups = {
"-17": 0,
"18-24": 0,
"25-34": 0,
"35-44": 0,
"+44": 0,
};
data.forEach((d) => {
const age = calculateAge(d.Nacimiento);
if (age < 17) {
ageGroups["-17"]++;
} else if (age >= 18 && age <= 24) {
ageGroups["18-24"]++;
} else if (age >= 25 && age <= 34) {
ageGroups["25-34"]++;
} else if (age >= 35 && age <= 44) {
ageGroups["35-44"]++;
} else {
ageGroups["+44"]++;
}
});
// Convertir el objeto de conteo en un arreglo de objetos
const ageData = Object.keys(ageGroups).map((group) => ({
group,
count: ageGroups[group],
}));
// Calcular el total
const totalUsers = data.length;
// Crear la gráfica de barras apiladas horizontal
const width = 970;
const height = 60;
const svg = d3.select("#chart");
const xScale = d3
.scaleLinear()
.domain([0, totalUsers])
.range([0, width]);
svg
.selectAll("rect")
.data(ageData)
.enter()
.append("rect")
.attr("x", (d, i) =>
i === 0
? 0
: xScale(d3.sum(ageData.slice(0, i), (item) => item.count))
)
.attr("y", 0)
.attr("width", (d) => xScale(d.count))
.attr("height", height)
.attr("fill", (d) => getGroupColor(d.group))
.append("title") // Añadir tooltip con el conteo en cada grupo
.text((d) => `Edad: ${d.group}, Usuarios: ${d.count}`);
svg
.selectAll("text")
.data(ageData)
.enter()
.append("text")
.attr("x", (d, i) =>
i === 0
? xScale(d.count) / 2
: xScale(d3.sum(ageData.slice(0, i), (item) => item.count)) +
xScale(d.count) / 2
)
.attr("y", height / 2)
.attr("fill", "white")
.attr("text-anchor", "bold")
.attr("dominant-baseline", "bold")
.style("font-size", "16px")
.style("font-family", "Montserrat, sans-serif")
.text((d) => d.group);
// Función para calcular la edad a partir de la fecha de nacimiento
function calculateAge(birthDate) {
const today = new Date();
const birthDateObj = new Date(birthDate);
let age = today.getFullYear() - birthDateObj.getFullYear();
const monthDiff = today.getMonth() - birthDateObj.getMonth();
if (
monthDiff < 0 ||
(monthDiff === 0 && today.getDate() < birthDateObj.getDate())
) {
age--;
}
return age;
}
// Función para obtener el color correspondiente a cada grupo
function getGroupColor(group) {
const colors = {
"-17": "#FF7EA4",
"18-24": "#3E73B9",
"25-34": "#9040c8",
"35-44": "#4FABB2",
"+44": "#FF7EA4",
};
return colors[group];
}
})
.catch((error) =>
console.error("Error al cargar el archivo CSV:", error)
);
</script>
</body>
</html>