CODEWITHSUNDEEP
javascriptd3.jslocalhost
lydias
lydias

Reputation: 841

D3js pie chart not showing up on localhost

still brand new to D3.js. I'm trying to test out a very simple D3.js donut graph on my local server with a Mac. I opened by localhost by using 

       python -m http.server

then a message appears:

       Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

I then opened the page on chrome by pointing to http://localhost:8000/final%20project/

Note: the folder that contains index.html and data, js and css folders is named as "final project"

On inspector, I received the following error for d3.min.js:

d3.min.js:2 Uncaught (in promise) SyntaxError: Unexpected token / in JSON at position 0 at Re (d3.min.js:2)

My index.html code:

<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
    <!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="shortcut icon" href="icons8-bookmark-40.png">    

</head>

<body>
     <div class="col-md-9" id="pie-chart-area"></div>  

    <!-- JS libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="js/d3-tip.js"></script>

<!-- Custom JS -->
<script src="main.js"></script>
</body>
</html>

Main.js:

function getGenderColor(genderColor) {
    var fill;
    switch(genderColor) {
      case "Teen Boys":
         fill = "#0079BB";
         break;
      case "Teen Girls":
         fill = "#9E519F";
         break;
      default:
         fill = "blue";
    }
    return fill;
}


function pieChart(chartArea) {
     var margin = {left:40, right:40, top:40, bottom:40};
     var width = 500 - margin.top - margin.bottom,
         height = 800 - margin.left - margin.right;
     var radius = Math.min(width, height) / 2;
     var donutWidth = 75;


     // color range
    var color = d3.scaleOrdinal()
        .range(["#0079BB", "#9E519F"]);

    // entire canvas
    var canvas = d3.select(chartArea)
                 .append("svg")
                 .attr("width", width + margin.left + margin.right)
                 .attr("height", height + margin.top + margin.bottom)
                 .append("g")
                 .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    //define arc
    var arc = d3.arc()
         .innerRadius(radius - donutWidth)
         .outerRadius(radius);

    // import pie chart and data
     var pie = d3.pie()
    .value(function(d) { return d.count; })
    .sort(null);


    d3.json("data/s_gender.json", function(error,data) {
        /*if (error) return console.error(error);
          console.log('mockdata',data);*/

          data.forEach(function(d) {
            d.count = +d.count; 
    });

     var path = svg.selectAll('path')
            .data(pie(data))
            .enter()
            .append('path')
            .attr('d', arc)
            .attr('fill', function(d, i) {
              return color(d.data.gender);
     });

     }); //d3.json

}

pieChart("#pie-chart-area");

Json file (s_gender.json):

[
{
 "gender":"F",
 "count":533
},
{
  "gender":"M",
  "count":260
}
]

There are no errors, but the chart does not show up. Could anyone help me to solve the issue?

Upvotes: 2

Views: 675

Answers (1)

Coola
Coola

Reputation: 3142

The problem with your code was mainly:

  1. The code was built using D3.js v4. If you use D3.js v5 you will have to use the Promise method to parse files. Otherwise you can simply src the D3.js v4 library.

  2. There were some other bugs in it such as code placement vs script source. Libraries are best loaded in the header while the Javascript which manipulates the DOM should be placed after the div which it would append to.

  3. Your getGenderColor function was not getting called properly in your code to perform the fill.

Here is a working block showing the pie chart. https://bl.ocks.org/akulmehta/183847663739b944038ad973e0b7d5b4/

Please feel free to ask for any clarification in the comments below.

Upvotes: 1

Related Questions