diff --git a/src/equipo/equipo.css b/src/equipo/equipo.css
index ca2fe3f42778df3cdb6f4b4b1b40b048a93c4f92..e03661736f4cf1a3bacd4ae80ea6b1f9b06f4be9 100644
--- a/src/equipo/equipo.css
+++ b/src/equipo/equipo.css
@@ -256,3 +256,34 @@ option {
width: 100%;
}
+
+.toolTip {
+ pointer-events: none;
+ position: absolute;
+ display: none;
+ min-width: 50px;
+ height: auto;
+ background: none repeat scroll 0 0 #ffffff;
+ padding: 9px 14px 6px 14px;
+ border-radius: 2px;
+ text-align: center;
+ line-height: 1.3;
+ color: #5B6770;
+ box-shadow: 0px 3px 9px rgba(0, 0, 0, .15);
+ }
+ .toolTip:after {
+ content: "";
+ width: 0;
+ height: 0;
+ border-left: 12px solid transparent;
+ border-right: 12px solid transparent;
+ border-top: 12px solid white;
+ position: absolute;
+ bottom: -10px;
+ left: 50%;
+ margin-left: -12px;
+ }
+ .toolTip span {
+ font-weight: 500;
+ color: #081F2C;
+ }
diff --git a/src/equipo/equipo.html b/src/equipo/equipo.html
index 14a64874f6fbfd91950a19a35bb44588482314b1..4d9b0bf97c9dacf2d160934f2ea2682f582ed567 100644
--- a/src/equipo/equipo.html
+++ b/src/equipo/equipo.html
@@ -14,6 +14,7 @@
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="equipo.js" defer></script>
<script src="/src/ui/radarChart.js" defer></script>
+
</head>
<body>
diff --git a/src/equipo/equipo.js b/src/equipo/equipo.js
index ef8ec924eb3de555fed7d1b0425cbfea7916c10b..2563ec02ea64f8bae1f8a59bae7f9b6968dce965 100644
--- a/src/equipo/equipo.js
+++ b/src/equipo/equipo.js
@@ -1,7 +1,7 @@
document.addEventListener('DOMContentLoaded', function() {
var margin = {top: 70, right: 20, bottom: 30, left: 200},
- w = 800 - margin.left - margin.right,
- h = 800 - margin.top - margin.bottom;
+ w = 600 - margin.left - margin.right,
+ h = 600 - margin.top - margin.bottom;
@@ -39,26 +39,35 @@ document.addEventListener('DOMContentLoaded', function() {
// Manejador para evento de cambio de equipo del select
function onChangeTeam() {
document.getElementById("teamTitle").textContent = document.getElementById("teamSelect").value;
+ var selectedSeason = document.getElementById("seasonInput").value;
+ var selectedTeam = document.getElementById("teamSelect").value;
+ fetchData().then(function(data) {
+ var filteredData = data.filter(function(d) {
+ return d.season_end_year == selectedSeason && d.team == selectedTeam;
+ });
+ console.log(filteredData);
var data = [
[
- {axis: "strength", value: 80},
- {axis: "intelligence", value: 6},
- {axis: "charisma", value: 5},
- {axis: "dexterity", value: 9},
- {axis: "luck", value: 2}
+ {"area": "won", "value": filteredData[0].won},
+ {"area": "drawn", "value": filteredData[0].drawn},
+ {"area": "gf", "value": filteredData[0].gf},
+ {"area": "ga", "value": filteredData[0].ga},
+ {"area": "gf", "value": filteredData[0].gf},
+ {"area": "points", "value": filteredData[0].points}
]
];
var config = {
- w: w,
- h: h,
- maxValue: 100,
+ w: 500,
+ h: 500,
+ maxValue: filteredData[0].maxValue,
levels: 5,
- ExtraWidthX: 300
+ ExtraWidthX: 200
}
RadarChart.draw("#graph2", data, config);
+ });
}
// Inicializa la página con los datos por defecto
@@ -71,5 +80,25 @@ document.addEventListener('DOMContentLoaded', function() {
// Eventos
document.getElementById("seasonInput").addEventListener('input', onChangeSeason);
document.getElementById("teamSelect").addEventListener('input', onChangeTeam);
+
+ // Función para obtener los datos del equipo seleccionado
+ function fetchData() {
+ return d3.csv("/data/premier-tables.csv").then(function(data) {
+ data.forEach(function(d) {
+ d.won = +d.won;
+ d.drawn = +d.drawn;
+ d.gf = +d.gf;
+ d.ga = +d.ga;
+ d.points = +d.points;
+ });
+ return data;
+ });
+ }
+
});
+
+
+
+
+
diff --git a/src/ui/radarChart.js b/src/ui/radarChart.js
index 0822cf3c578abf16ae29558f9688a61907a661f6..9f1923a08565cfeb45a2825c5759de9e5ca89041 100644
--- a/src/ui/radarChart.js
+++ b/src/ui/radarChart.js
@@ -2,19 +2,19 @@ var RadarChart = {
draw: function(id, d, options){
var cfg = {
radius: 5,
- w: 600,
- h: 600,
+ w: 300,
+ h: 300,
factor: 1,
- factorLegend: .85,
- levels: 3,
+ factorLegend: 1,
+ levels: 1,
maxValue: 0,
radians: 2 * Math.PI,
opacityArea: 0.5,
ToRight: 5,
TranslateX: 80,
- TranslateY: 30,
- ExtraWidthX: 100,
- ExtraWidthY: 100,
+ TranslateY: 80,
+ ExtraWidthX: 300,
+ ExtraWidthY: 300,
color: d3.scaleOrdinal().range(["#6F257F", "#CA0D59"])
};
@@ -26,22 +26,21 @@ var RadarChart = {
}
}
- cfg.maxValue = 100;
+ cfg.maxValue = 110;
var allAxis = (d[0].map(function(i, j){return i.area}));
var total = allAxis.length;
- var radius = cfg.factor*Math.min(cfg.w/2, cfg.h/2);
- var Format = d3.format('%');
+ var radius = Math.min(cfg.w/2, cfg.h/2);
d3.select(id).select("svg").remove();
var g = d3.select(id)
- .append("svg")
- .attr("width", cfg.w+cfg.ExtraWidthX)
- .attr("height", cfg.h+cfg.ExtraWidthY)
- .append("g")
- .attr("transform", "translate(" + cfg.TranslateX + "," + cfg.TranslateY + ")");
-
- var tooltip;
+ .append("svg")
+ .attr("width", cfg.w+cfg.ExtraWidthX)
+ .attr("height", cfg.h+cfg.ExtraWidthY)
+ .append("g")
+ .attr("transform", "translate(" + cfg.TranslateX + "," + cfg.TranslateY + ")");
+
+ var tooltip;
//Circular segments
for(var j=0; j<cfg.levels; j++){
@@ -63,7 +62,7 @@ var RadarChart = {
//Text indicating at what % each level is
for(var j=0; j<cfg.levels; j++){
- var levelFactor = cfg.factor*radius*((j+1)/cfg.levels);
+ var levelFactor = radius*((j+1)/cfg.levels);
g.selectAll(".levels")
.data([1]) //dummy data
.enter()
@@ -93,15 +92,15 @@ var RadarChart = {
.attr("y2", function(d, i){return cfg.h/2*(1-cfg.factor*Math.cos(i*cfg.radians/total));})
.attr("class", "line")
.style("stroke", "grey")
- .style("stroke-width", "1px");
+ .style("stroke-width", "2px");
axis.append("text")
.attr("class", "legend")
.text(function(d){return d})
- .style("font-family", "sans-serif")
- .style("font-size", "11px")
+ .style("font-family", "aptos")
+ .style("font-size", "18px")
.attr("text-anchor", "middle")
- .attr("dy", "1.5em")
+ .attr("dy", "0.5em")
.attr("transform", function(d, i){return "translate(0, -10)"})
.attr("x", function(d, i){return cfg.w/2*(1-cfg.factorLegend*Math.sin(i*cfg.radians/total))-60*Math.sin(i*cfg.radians/total);})
.attr("y", function(d, i){return cfg.h/2*(1-Math.cos(i*cfg.radians/total))-20*Math.cos(i*cfg.radians/total);});