Nan of a csv file in D3.js

Question

        var margin = {top: 20, right: 10, bottom: 100, left: 40};
        var width = 700 - margin.right - margin.left;
        var height = 500 - margin.top - margin.bottom;

        // o g para agrupar objetos juntos, agrupar as barras
        var svg = d3.select('body')
            .append('svg')
                .attr({"width" : width + margin.right + margin.left,
                    "height" : height + margin.top + margin.bottom
                })
            .append("g")
            .attr("transform", "translate(" + margin.left +"," + margin.right + ")");

        //definição do eixo xx e yy
        var x_scale =  d3.scale.ordinal()
            .rangeRoundBands([0, width], 0.2, 0.2);

        var y_scale = d3.scale.linear()
            //.range([height, 0]);
            .range([height, 8]);

        //axis
        var x_axis = d3.svg.axis()
            .scale(x_scale)
            .orient("bottom");

        var y_axis = d3.svg.axis() 
            .scale(y_scale)
            .orient("left");

      //ficheiro csv dos distritos
        d3.csv("melhoresLisboa.csv", function(error, data){
            if(error) console.log("Erro no ficheiro csv");

            data.forEach(function(d){
                d.media = +d.media;
                d.escola = d.escola;

                console.log(d.media);
            });

             //"gerir" os eixos, o dominio e contradominio
            x_scale.domain(data.map(function(d){return d.escola;}));
            y_scale.domain([0, d3.max(data, function(d){ return d.media;})]);

            //grafico (representação dos valores)
            svg.selectAll('rect')
                .data(data)
                .enter()
                .append('rect')
                .attr("height", 0)
                .attr("y", height)
                .transition().duration(3000)
                .delay(function(d,i) {return i * 200;})
                .attr({
                    'x': function(d){ return x_scale(d.escola);},
                    'y': function(d){ return y_scale(d.media);},
                    "width": x_scale.rangeBand(),
                    "height": function(d) { return height - y_scale(d.media);}
                })
                //para termos um gradiente de cor
                .style("fill", function(d,i) { return 'rgb(20, 20, ' + ((i*30) + 100) + ')'});

            //apresenta em cada bar a media para cada distrito, de forma que seja mais fácil entender
            svg.selectAll('text')
                .data(data)
                .enter()
                .append('text')
                .text(function(d) { return d.media;})
                .attr('x', function(d) { return x_scale(d.escola) + x_scale.rangeBand()/2; })
                .attr('y', function(d) { return y_scale(d.media) + 12; })
                .style("fill", "white")
                .style("text-anchor", "middle")
                .style("font-size", "12px");

            //desenhar os eixos (axis x e y)
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(x_axis)
                //colocar o nome do distrito numa posição mais favoravel
                .selectAll('text')
                .attr("transform", "rotate(-60)")
                .attr("dx", "-.8em")
                .attr("dy", ".25em")
                .style("text-anchor", "end")
                .style("font-size", "14px");
            
            svg.append("g")
                .attr("class", "y axis")
                .call(y_axis)
                .style("font-size", "14px");
            
        });

 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        }

        li {
        float: left;
        }

        li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        }

        /* Change the link color to #111 (black) on hover */
        li a:hover {
        background-color: #111;
        }


        /* The navigation menu links */
        .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 11px;
        color: #818181;
        display: inline;
        }

        /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
        color: #f1f1f1;
        }

        svg{
            /*background-color: rgb(160, 204, 189); */
            margin-left: auto;
            margin-right: auto;
            display: block;
        }

        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;

        }   

        h1 {
            color: #069;
        }     

<!DOCTYPE html>
    <meta charset="utf-8">
    <style>
       

    </style>

    <ul>
        <li><a href="index.html">Ranking das escolas de Portugal:                     </a></li>
        <li><a href="mapa.html">Mapa de Portugal</a></li>
        <li><a href="barras.html">Gráfico de Barras</a></li>
    </ul>

    <!-- Side navigation -->
    <div class="sidenav">
        <a href="barrasPorto.html">Porto</a>
        <a href="barrasCoimbra.html">Coimbra</a>
        <a href="barrasLisboa.html">Lisboa</a>
        <a href="barrasBraga.html">Braga</a>
        <a href="barrasSetubal.html">Setúbal</a>
        <a href="barrasVilaReal.html">Vila Real</a>
        <a href="barrasAveiro.html">Aveiro</a>
        <a href="barrasSantarem.html">Santarém</a>
        <a href="barrasLeiria.html">Leiria</a>
        <a href="barrasFaro.html">Faro</a>
        <a href="barrasViseu.html">Viseu</a>
        <a href="barrasBeja.html">Beja</a>
        <a href="barrasCasteloBranco.html">Castelo Branco</a>
        <a href="barrasVianaCastelo.html">Viana do Castelo</a>
        <a href="barrasGuarda.html">Guarda</a>
        <a href="barrasEvora.html">Évora</a>
        <a href="barrasAcores.html">Açores</a>
        <a href="barrasBraganca.html">Bragança</a>
        <a href="barrasMadeira.html">R.A. Madeira</a>
        <a href="barrasPortalegre.html">Portalegre</a>
      </div>

    <body><br><br>
        <h1 style="text-align: center">Visão geral da média mais alta dos distritos</h1>
        <script src="http://d3js.org/d3.v3.js"></script>
 
    <script>
    </script>
    </body>
</html>

I have this code that should fetch the file below indicated the school and the average. File improvements:

escola;tipo;concelho;media;
Colégio do Sagrado Coração de Maria;Particular e Cooperativo;Lisboa;14,2;
Escola Técnica e Liceal Salesiana Santo António, Estoril;Particular e Cooperativo;Cascais;14,0;
Colégio São João de Brito;Particular e Cooperativo;Lisboa;14,0;
Colégio Moderno;Particular e Cooperativo;Lisboa;13,7;
Colégio Valsassina;Particular e Cooperativo;Lisboa;13,7;

But you’re not getting those values. What’s wrong?

Answer 1

As far as I can tell, it’s an error in the .csv. Instead of separating the items with ;, should separate with a comma, so:

escola,tipo,concelho,media
Colégio do Sagrado Coração de Maria,Particular e Cooperativo,Lisboa,14.2
Escola Técnica e Liceal Salesiana Santo António, Estoril,Particular e Cooperativo,14.0
Colégio São João de Brito,Particular e Cooperativo,Lisboa,14.0
Colégio Moderno,Particular e Cooperativo,Lisboa,13.7
Colégio Valsassina,Particular e Cooperativo,Lisboa,13.7

Note that the column value media must have the decimal separated by a point and not by a comma, because the comma delimits the columns.

In the second line of its CSV also had a higher value (Cascais), which gives problem in the number of columns:

Escola Técnica e Liceal Salesiana Santo António, Estoril;Particular e Cooperativo;Cascais;14,0;

With the above changes, the code will work correctly (see print):