d3 Donut chart does not render

Question

I'm trying to execute the Donut chart referred from http://bl.ocks.org/mbostock/3887193 . When i execute it , the chart does not render and it shows me blank page .Please help . Banging my head from two days . Appreciate the help.

<apex:includeScript value="{!URLFOR($Resource.jquery1)}"/>     
<apex:includeScript value="{!URLFOR($Resource.D3)}"/>
<apex:includeScript value="{!URLFOR($Resource.nvD3)}"/> 
 <apex:includeScript value="{!URLFOR($Resource.data)}"/> 

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.min.js"></script>  -->

<script>
var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var pie = d3.layout.pie().sort(null)
    .x(function(d){return d.age;});
    .y(function(d){return d.population;});

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

d3.csv("data.csv", function(error, data) {

 console.log(data); 
 data.forEach(function(d) {
    if (isNaN(+d.age)) console.log(d.population);
    d.age = +d.age;
    d.population = +d.population;

  });

  var g = svg.selectAll(".arc")
      .data(pie(data))
    .enter().append("g")
      .attr("class", "arc");

  g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.age); });

  g.append("text")
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
      .attr("dy", ".35em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.data.age; });

});

</script>

</apex:page>

See e.g. [this question](http://stackoverflow.com/questions/18972460/d3-bar-graph-example-not-working-locally). — Lars Kotthoff, Jul 01 '14 at 15:00

score 0 · Accepted Answer · answered Jul 01 '14 at 07:55

0

first, you should check the reference to the d3-library, i'm getting an error there. try using

<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>

second, you must position your body-div before the script, so the start of your code should look like

<div id="body" height="50%" width="500px" ></div> 
<script>
var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;
//...and so on

answered Jul 01 '14 at 07:55

Herbert Hubert

418
1
6
8

I tried the same but still no luck. Giving me errors 1) Error: Invalid value for attribute d="M0,-240A240,240 0 1,1 NaN,NaNL0,0Z" 2) Error: Invalid value for attribute d="MNaN,NaNA240,240 0 1,1 NaN,NaNL0,0Z" 3) Error: Invalid value for attribute transform="translate(NaN,NaN)" . Its showing me the above 3 errors on pressing F12 . :( – sfdc_user27 Jul 01 '14 at 08:40
I do not know whats wrong out there . Still displaying me the blank page. I will highly appreciate the help. – sfdc_user27 Jul 01 '14 at 08:55
what does your data-file look like? this sounds like there might be an error in there. just to check the rest of the code, have you tried it with the example data.csv from the link you provided? – Herbert Hubert Jul 01 '14 at 09:04
to add to the comment, you could add `if (isNaN(+d.population)) console.log(d.population);` directly before `d.population = +d.population;` which should show you problematic values – Herbert Hubert Jul 01 '14 at 09:32
It is showing "referenceError : age is not defined" error as well as all the above 3 errors . I've created data.csv file with age and population field and gave a path in my code but stil no luck :( – sfdc_user27 Jul 01 '14 at 12:25
hm, i cannot reproduce your errors, so i'm still guessing the problem lies with the data.csv. the file contains in line one `age,population`, in line two `<5,2704659` and so on? you could log the data-file to the console using `console.log(data)` before your `data.foreach' - what does it say? – Herbert Hubert Jul 01 '14 at 13:10
I've made little modifications in my code . Its now giving me errors : Uncaught SyntaxError: Unexpected token , data:1 Uncaught SyntaxError: Unexpected token . Pie_Chart 68 . I think d.age was not declared and so i added it. – sfdc_user27 Jul 01 '14 at 13:19
ok, i don't think your modifications of the pie-variable can work as there are no x/y-values. the pie-variable was fine as you had it before. i put the code in a fiddle and added the data-variable as array in the beginning, maybe you can find your error there: [http://jsfiddle.net/kPN9h/2/](http://jsfiddle.net/kPN9h/2/) – Herbert Hubert Jul 01 '14 at 13:44
I'm really thankful to you . Highly appreciate your expertise .This worked . – sfdc_user27 Jul 01 '14 at 14:06

d3 Donut chart does not render

1 Answers1

Linked