Crear un gráfico de barras pero no obtener valor del archivo CSV Error al obtener NaN

Question

Mar 26, 2016, 08:09 AM

Crear un gráfico de barras pero no obtener valor del archivo CSV Error al obtener NaN

Cree un gráfico de barras usando D3 y obteniendo valor del archivo csv de la misma carpeta

Pero obteniendo error en la consola como 15NaN

Abajo está mi código

/*
define margin followed by height & width for svg
*/
//define margin
var margin = {
    top:20,right:10,bottom:100,left:40
}
//define w & h
var w = 700 - margin.left - margin.right;
var h = 500 - margin.top - margin.bottom;
/*
define svg by selecting the body and append the svg to body with proper 
height and width then appen it to g
*/
var svg = d3.select("body").
    append("svg").
    attr({
        "width": w + margin.left + margin.right,
        "height": h + margin.top + margin.bottom
    }).
    append("g").
    attr("transform", "translate(" + margin.left + "," + margin.right + ")");
/*
define scale then followed by axis
*/
//define x & y scale
var xScale = d3.scale.ordinal().
    rangeRoundBands([0, w], 0.2, 0.2);
var yScale = d3.scale.linear().
    range([h, 0]);
//define x& y axis
var xAxis = d3.svg.axis().
    scale(xScale).
    orient("bottom");
var yAxis = d3.svg.axis().
    scale(yScale).
    orient("left");
/*
import the data here we have csv data
*/
d3.csv("data.csv", function(error,data) {
    if(error) console.log("Error: data not loaded!");

    data.forEach(function(d) {
        d.country = d.country;
        d.gdp = +d.gdp;       
        console.log(d.gdp);  
    });

});

svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<!DOCTYPE html>
<html>
<head>
    <title>D3 Tutorial Demo</title>
    <meta charset="utf-8" />
    <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/d3/d3.min.js"></script>
    <link href="demo.css" rel="stylesheet" />
</head>
<body>
    
    <div class="container-fluid text-center">
        <h1>Bar Graph - 2015 GDP Based On PPP Valuation</h1>
    </div>
    <script src="../Scripts/jquery-2.2.1.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="demo.js"></script>
</body>
</html>

Y aquí están mis valores data.csv

country	gdp
Brazil	3.20
Italy	2.17
India	8.02
Saudi Arebia	1.13
Russa	3.47
Italy	2.17
Australia	1.13
Spain	1.68
Korea	1.84
United States	17.9
China	19.51
Japan	4.84
Germany	3.84
Turkey	1.57
United Kingdom	2.66

No estoy seguro de lo que está mal Gracias por ayudar