D3 Examples - Projet (2)

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
<head>
​
​
    <link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
​
    <link href="https://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet">
​
    <style>
        .axis path {
            fill: none;
            stroke: #777;
            shape-rendering: crispEdges;
        }
        .axis text {
            font-family: Lato;
            font-size: 13px;
        }
    </style>
​
</head>
​
<body>
​
    <div class="container">
​
        <div class="jumbotron">
​
            <svg id="visualisation" width="2000" height="1000"></svg>
            <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
            <script>
                function InitChart() {
                    
                    var svg = d3.select("#visualisation"),
                        WIDTH = 500,
                        HEIGHT = 360,
                        MARGINS = {
                            top: 20,
                            right: 20,
                            bottom: 20,
                            left: 50
                        },
                        
                        xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([0, 25]),
                        yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([20, 1]),
                        
                       yAxis = d3.svg.axis()
                        .scale(yScale)
                        .orient("left");
        
                    svg.append("svg:g")
                        .attr("class", "y axis")
                        .attr("transform", "translate(" + (MARGINS.left) + ",0)")
                        .call(yAxis);
                    
                    
                    //Fonction génératrice de lignes//
                    var lineGen = d3.svg.line()
                        .x(function(d) {
                            return xScale(d.Numero);
                        })
                        .y(function(d) {
                            return yScale(d.AngersSCO);
                        })
                        .interpolate("basis");
                    
                    var lineGen1 = d3.svg.line()
                        .x(function(d) {
                            return xScale(d.Numero);
                        })
                        .y(function(d) {
                            return yScale(d.ASMonaco);
                        })
                        .interpolate("basis");  
                    
                   //  var journee = d3.svg.text()
                      //  .x(function(d) { return i+10; })
                       // .y(function(d) { return i+10; })
                       // .dy(function(d) { return ".35em"; })
                     //   .text(function(d) { return d.Journee; });
                    
                     
                    
                    
        d3.dsv(";")("2015_2016.csv", function(data) {
                    
                    //Génération des lignes //
             svg.append('svg:path')
                        .attr('d', lineGen(data))
                        .attr('stroke', 'green')
                        .attr('stroke-width', 2)
                        .attr('fill', 'none');
            
                   svg.append('svg:path')
                        .attr('d', lineGen1(data))
                        .attr('stroke', 'blue')
                        .attr('stroke-width', 2)
                        .attr('fill', 'none');
            
                  // svg.append('svg:path')
                     //   .attr("text",journee(data))
                 
                    console.log(data)
                    
            
                });
                }
                InitChart();
            </script>
        </div>
​
    </div>
​
</body>
​
</html>
    