diff --git a/src/clasificacion/clasificacion.css b/src/clasificacion/clasificacion.css
index 0d9b8d2521064cdd8578ff7e02fd25170f3d8f3c..00eb79d81bc46d6c5d92026674cec80f218b1818 100644
--- a/src/clasificacion/clasificacion.css
+++ b/src/clasificacion/clasificacion.css
@@ -115,22 +115,23 @@ h3 {
#tableTitle{
margin-left: 100px;
- font-family: "PremierSans";
- font-size: 40px;
+ font-family: "bebas Neue";
+ font-size: 50px;
}
#season {
margin-right: 50px;
- margin-top: 40px;
+ margin-top: 60px;
font-family: "PremierSans", Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 35px;
}
#seasonNumber {
- margin-top: 30px;
+ margin-top: 40px;
margin-right: 100px;
font-size: 50px;
- font-family: "PremierSans", Arial, Helvetica Neue, Helvetica, sans-serif;
+ font-family: "Bebas Neue", Arial, Helvetica Neue, Helvetica, sans-serif;
+ color: red;
}
.seasonInfo{
@@ -140,27 +141,68 @@ h3 {
#graph {
display: flex;
justify-content: center;
- align-items: flex-start;
+ align-items: center;
height: 100%;
-
+ margin-top: 20px;
+}
+
+svg {
+ display: block;
}
.bar {
- fill: steelblue;
-
+ fill: #00FF85;
}
.bar:hover {
fill: red;
}
-.axis text {
- font: 20px sans-serif;
+
+
+
+
+#graphContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.axis path,
-.axis line {
- fill: none;
- shape-rendering: crispEdges;
+
+.slider {
+ -webkit-appearance: slider-vertical;
+ width: 8px;
+ height: 500px;
+}
+.sliderContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-left: 10px;
+ background-color: #38003C;
+ border: solid 3px black;
+ border-radius: 20px;
+ padding: 20px;
+}
+
+#seasonLabel {
+ font-family: "Bebas Neue";
+ font-size: 25px;
+ margin-bottom: 10px;
+ color: white;
+}
+
+.tooltip {
+ position: absolute;
+ text-align: center;
+ width: auto;
+ height: auto;
+ padding: 5px;
+ font: 12px sans-serif;
+ background: lightsteelblue;
+ border: 0px;
+ border-radius: 8px;
+ pointer-events: none;
+ opacity: 0;
}
\ No newline at end of file
diff --git a/src/clasificacion/clasificacion.html b/src/clasificacion/clasificacion.html
index 4a044c7c4f555efedd0a770012c0d2af63ea9c61..32b1d071dcba45a646503bf554a32391a9d65447 100644
--- a/src/clasificacion/clasificacion.html
+++ b/src/clasificacion/clasificacion.html
@@ -24,7 +24,7 @@
<div class="sideNav">
<h3>Menu</h4>
<button class="navButton">Clasificacion</button>
- <button class="navButton">Equipo</button>
+ <button class="navButton" onclick="window.location.href='/src/equipo/equipo.html'">Equipo</button>
</div>
<div class="mainContent">
<div class="table">
@@ -32,10 +32,17 @@
<h2 id="tableTitle">Tabla</h2>
<div class="seasonInfo">
<label id="season">temporada</label>
- <label id="seasonNumber"">2023/24</label>
+ <label id="seasonNumber"">2023/2024</label>
</div>
</div>
- <div id="graph"></div>
+ <div id="graphContainer">
+ <div id="graph"></div>
+ <div class="sliderContainer">
+ <label id="seasonLabel" for="verticalSlider">Temporada:</label>
+ <input type="range" min="1993" max="2024" value="2024" class="slider" id="verticalSlider" orient="vertical" onchange="onChangeSeason()">
+ </div>
+
+ </div>
</div>
</div>
</div>
diff --git a/src/clasificacion/clasificacion.js b/src/clasificacion/clasificacion.js
index b24d65df870e094ee9425352d9ed4759b833880c..845aa0d04e55534bb41df3364a57e49b50ee5e13 100644
--- a/src/clasificacion/clasificacion.js
+++ b/src/clasificacion/clasificacion.js
@@ -1,6 +1,6 @@
document.addEventListener('DOMContentLoaded', function() {
- var margin = {top:70, right:20, bottom:30, left:200},
- w = 1000 - margin.left - margin.right,
+ var margin = {top:70, right:30, bottom:30, left:240},
+ w = 1150 - margin.left - margin.right,
h = 800 - margin.top - margin.bottom;
// var color = d3.scaleOrdinal(d3.schemeCategory10);
@@ -8,8 +8,12 @@ document.addEventListener('DOMContentLoaded', function() {
var x = d3.scaleLinear().range([0,w]);
var y = d3.scaleBand().rangeRound([0,h]).padding(0.1);
- var xAxis = d3.axisTop(x);
- var yAxis = d3.axisLeft(y);
+ var xAxis = d3.axisTop(x)
+ .ticks(10)
+ .tickSize(0);
+ var yAxis = d3.axisLeft(y)
+ .tickSize(0)
+ .tickPadding(25);
var svg = d3.select("#graph").append("svg")
.attr("width", w + margin.left + margin.right)
@@ -17,42 +21,115 @@ document.addEventListener('DOMContentLoaded', function() {
.append("g")
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
+ var tooltip = d3.select("body").append("div")
+ .attr("class", "tooltip");
+
var selectedSeason = 2024;
+ drawBarChart(selectedSeason);
- d3.csv("/data/premier-tables.csv").then(function(data){
- data.forEach(function(d) {
- d.points = +d.points;
- });
+
- // Filtra los datos según la temporada seleccionada
- var filteredData = data.filter(function(d) {
- return d.season_end_year == selectedSeason;
- });
+ function onChangeSeason(){
+ var selectedSeason = document.getElementById("verticalSlider").value;
+ document.getElementById("seasonNumber").innerHTML = parseInt(selectedSeason)-1 + "/" + selectedSeason;
+ drawBarChart(selectedSeason);
+ }
- x.domain([0, d3.max(filteredData, function(d) {return d.points})+5]);
- y.domain(filteredData.map(function(d) {return d.team}));
+ function drawBarChart(selectedSeason){
+ d3.csv("/data/premier-tables.csv").then(function(data){
+ data.forEach(function(d) {
+ d.points = +d.points;
+ });
+
+ // Filtra los datos según la temporada seleccionada
+ var filteredData = data.filter(function(d) {
+ return d.season_end_year == selectedSeason;
+ });
+
+ x.domain([0, d3.max(filteredData, function(d) {return d.points})+5]);
+ y.domain(filteredData.map(function(d) {return d.team}));
- svg.append("g")
- .attr("class", "x axis")
- .call(xAxis);
-
- svg.append("g")
+ // Borra todo el contenido del svg antes de redibujar
+ svg.selectAll("*").remove();
+
+ // Grid Vertical
+ svg.selectAll("line.vertical-grid")
+ .data(x.ticks(10))
+ .enter()
+ .append("line")
+ .attr("class", "vertical-grid")
+ .attr("x1", function(d) { return x(d); })
+ .attr("x2", function(d) { return x(d); })
+ .attr("y1", 0)
+ .attr("y2", h)
+ .style("stroke", "#ccc")
+ .style("stroke-width", "2px")
+ .style("stroke-dasharray", ("3, 3"));
+
+ // Eje X
+ svg.append("g")
+ .attr("class", "x axis")
+ .style("font-size", "15px")
+ .call(xAxis)
+ .call(g => g.select(".domain").remove());
+
+ // Barras
+ svg.selectAll(".bar")
+ .data(filteredData)
+ .enter().append("rect")
+ .attr("class","bar")
+ .attr("x",0)
+ .attr("y", function(d) {return y(d.team); })
+ .attr("width", function(d) { return x(d.points); })
+ .attr("height", y.bandwidth())
+ .on("mouseover", function(event, d) {
+ tooltip.transition()
+ .duration(200)
+ .style("opacity", .9);
+ tooltip.html(d.team + "<br/>" + d.points + " puntos")
+ .style("left", (event.pageX + 5) + "px")
+ .style("top", (event.pageY - 28) + "px");
+ })
+ .on("mouseout", function(d) {
+ tooltip.transition()
+ .duration(500)
+ .style("opacity", 0);
+ });
+
+ // Eje Y
+ svg.append("g")
.attr("class","y axis")
+ .style("font-size", "18px")
.call(yAxis)
- .selectAll("text")
- .style("text-anchor", "end")
+ .selectAll("path")
+ .style("stroke-width", "4px");
+
+ svg.selectAll(".y.axis .tick text")
+ .text(function(d) {
+ return d.toUpperCase();
+ });
+
+ svg.selectAll(".label")
+ .data(filteredData)
+ .enter().append("text")
+ .attr("x", function(d) { return x(d.points) + 10; })
+ .attr("y", function(d) { return y(d.team) + y.bandwidth() / 2; })
+ .attr("dy", ".35em")
.style("font-size", "20px")
.style("font-family", "aptos")
- .attr("dx", "-.5em")
-
- svg.selectAll(".bar")
- .data(filteredData)
- .enter().append("rect")
- .attr("class","bar")
- .attr("x",0)
- .attr("y", function(d) {return y(d.team); })
- .attr("width", function(d) { return x(d.points); })
- .attr("height", 30)
- .attr("fill", "grey");
- });
+ .style("font-weight", "bold")
+ .style("fill", "black")
+ .text(function(d) { return d.points; });
+
+ svg.append("text")
+ .attr("transform", "translate(" + (margin.left - 435) + " ," + (margin.top - 120) + ")")
+ .style("text-anchor", "start")
+ .style("font-size", "20px")
+ .style("font-family", "aptos")
+ .style("font-weight", "bold")
+ .text("Clasificación final de los equipos Premier League");
+ });
+ }
+
+ document.getElementById("verticalSlider").addEventListener("input", onChangeSeason);
});
\ No newline at end of file
diff --git a/src/equipo/equipo.html b/src/equipo/equipo.html
index 4d9b0bf97c9dacf2d160934f2ea2682f582ed567..f14da3d515c82931d250b953b302fed6db1de3c5 100644
--- a/src/equipo/equipo.html
+++ b/src/equipo/equipo.html
@@ -26,7 +26,7 @@
<div class="content">
<div class="sideNav">
<h3>Menu</h4>
- <button class="navButton">Clasificacion</button>
+ <button class="navButton" onclick="window.location.href='/src/clasificacion/clasificacion.html'">Clasificacion</button>
<button class="navButton">Equipo</button>
</div>
<div class="mainContent">
diff --git a/src/ui/radarChart.js b/src/ui/radarChart.js
index 9f1923a08565cfeb45a2825c5759de9e5ca89041..2c5cc0df3b291d5ca942488caf734b9580c359ad 100644
--- a/src/ui/radarChart.js
+++ b/src/ui/radarChart.js
@@ -1,7 +1,7 @@
var RadarChart = {
draw: function(id, d, options){
var cfg = {
- radius: 5,
+ radius: 8,
w: 300,
h: 300,
factor: 1,
@@ -173,13 +173,15 @@ var RadarChart = {
.style("fill", "#fff")
.style("stroke-width", "2px")
.style("stroke", cfg.color(series)).style("fill-opacity", .9)
- .on('mouseover', function (d){
+ .on('mouseover', function (event,d){
+ console.log(d);
console.log(d.area)
tooltip
- .style("left", d3.event.pageX - 40 + "px")
- .style("top", d3.event.pageY - 80 + "px")
+ .style("left", event.pageX - 40 + "px")
+ .style("top", event.pageY - 80 + "px")
+ .style("font-family", "aptos")
.style("display", "inline-block")
- .html((d.area) + "<br><span>" + (d.value) + "</span>");
+ .html((d.area) + "<br><b>" + (d.value) + "</b>");
})
.on("mouseout", function(d){ tooltip.style("display", "none");});