port -> primer grafico

9b4ed57c · Pablo Martin · 5acde6c6 · 9b4ed57c · 9b4ed57c · 9b4ed57c
Commit 9b4ed57c authored 4 months ago by Pablo Martin
--- a/practica.html
+++ b/practica.html
@@ -12,7 +12,9 @@
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+    <!-- D3 -->
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="clasificacion.js" defer></script>
 </head>
 <body>
        <div class="header">
@@ -35,13 +37,10 @@
                            <label id="seasonNumber"">2023/24</label>   
                        </div>
                    </div>
-                    <div class="graph">
+                    <div id="graph"></div>
-                        <!-- graf -->
-                    </div>
                </div>
            </div>
        </div>
 </body>
 </html>
\ No newline at end of file
--- a/clasificacion.js
+++ b/clasificacion.js
+document.addEventListener('DOMContentLoaded', function() {
+    var margin = {top:70, right:20, bottom:30, left:200},
+    w = 1000 - margin.left - margin.right,
+    h = 800 - margin.top - margin.bottom;
+    // var color = d3.scaleOrdinal(d3.schemeCategory10);
+    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 svg = d3.select("#graph").append("svg")
+        .attr("width", w + margin.left + margin.right)
+        .attr("height", h + margin.top + margin.bottom)
+        .append("g")
+        .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
+    var selectedSeason = 2024;
+    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")
+            .attr("class","y axis")
+            .call(yAxis)
+            .selectAll("text")
+            .style("text-anchor", "end")  
+            .style("font-size", "30px")
+            .style("font-family", "PremierSans")
+            .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");
+    });
+});
\ No newline at end of file
--- a/data/premier-tables.csv
+++ b/data/premier-tables.csv
--- a/practica.css
+++ b/practica.css
@@ -109,7 +109,6 @@ h3 {
    margin-top: 40px;
    margin-left: 100px;
    margin-right: 100px;
-    margin-bottom: 20px;
    border-radius: 30px;
 }
@@ -139,7 +138,29 @@ h3 {
    display: flex; 
 }
-.graph {
+#graph {
-    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
    height: 100%;
+}
+.bar {
+    fill: steelblue;
+}
+.bar:hover {
+    fill: red;
+}
+.axis text {
+    font: 20px sans-serif;
+}
+.axis path,
+.axis line {
+    fill: none;
+    shape-rendering: crispEdges;
 }
\ No newline at end of file
--- a/practica.js
+++ b/practica.js