d3 pie chart not loading
Question: All I want is to load a basic pie/donut chart, (actually a few bar plots in
addition to that , too), but looks like there is some error in my . If I
comment the same, I am able to serve the bare-bones python rendered page(but
not the pie chart, though).

    
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>{{title}}</title>
        <link rel="stylesheet" href="/static/css/style.css">
        <style>
        .legend{
            font-size: : 12px;
        }
        rect{
            stroke-width: 2;
        }
        #chart_Imp,#chart_Bid{
            width: 50%;
        }
        .axis{
            font: 10px sans-serif;
        }
        .axis path,
        .axis line{
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }
        </style>
    </head>
    <body>
    <div style="max-width: 800px; border:2px black solid">
        <h1>{{haider_Imp}}</h1>
        <div id="chart_Imp"></div>
        <h1>{{haider_Bid}}</h1>
        <div id="chart_Bid"></div>
    </div>
    <div id="Bar-plots">
        <div id="Bar-plots 1st set">
            <h1>{{haider_cpa}}</h1>
            <div id="cpa"></div>
            <h1>{{haider_cpc}}</h1>
            <div id="cpc"></div>
            <h1>{{haider_cpm}}</h1>
            <div id="cpm"></div>
        </div>
        <div id="Bar-plots 2nd set">
            <h1>{{haider_avgbid}}</h1>
            <div id="avg_bid"></div>
            <h1>{{haider_winrate}}</h1>
            <div id="winrate"></div>
        </div>
    </div>
    <script src="/static/script/d3.min.js"></script>
    
    <script>
        (function(d3){
            'use strict';
    
            var width = 360;
            var height = 360;
            var radius = Math.min(width,height)/2;
            var donutWidth = 75;
            var legendRectSize = 18;
            var legendSpacing = 4;
    
            var color = d3.scale.category20b();
    
            var svg = d3.select('#chart_Imp')
            .append('svg')
            .attr('width',width)
            .attr('height',height)
            .append('g')
            .attr('transform','translate('+(width/2)+','+(height/2)+')');
    
            var arc = d3.svg.arc()
            .innerRadius(radius-donutWidth)
            .outerRadius(radius);
    
            var pie = d3.layout.pie()
            .value(function(d) { return d.impsplit; })
            .sort(null);
    
            d3.csv('./static/summary.csv',function(error,dataset){
                dataset.forEach(function(d) {
                    d.impsplit = +d.impsplit;
            });
    
            var path = svg.selectAll('path')
            .data(pie(dataset))
            .enter()
            .append('path')
            .attr('d',arc)
            .attr('fill',function(d,i)
            {
                return color(d.data.label);
            });
    
            var legend = svg.selectAll('.legend1')
                .data(color.domain())
                .enter()
                .append('g')
                .attr('class', 'legend')
                .attr('transform', function(d, i) {
                  var height = legendRectSize + legendSpacing;
                  var offset =  height * color.domain().length / 2;
                  var horz = -2 * legendRectSize;
                  var vert = i * height - offset;
                  return 'translate(' + horz + ',' + vert + ')';
                });
            legend.append('rect')
                .attr('width', legendRectSize)
                .attr('height', legendRectSize)
                .style('fill', color)
                .style('stroke', color);
    
            legend.append('text')
                .attr('x', legendRectSize + legendSpacing)
                .attr('y', legendRectSize - legendSpacing)
                .text(function(d) { return d; });
        });
        (window.d3);
    
        var margin = {top: 20,right:20, bottom: 70, left: 40},
        width = 600-margin.left-margin.right,
        height = 300 - margin.top - margin.bottom;
    </script>
    </body>
    </html>
    


Answer: It might be because you use your piechart dataset outside of the .csv callback
function. I am under the impression that, when using the d3.csv() or d3.tsv()
functions, you need to use the retrieved data in the callback function. You
however, use your data outside the callback function.

check out [this answer](http://stackoverflow.com/questions/15754035/importing-
data-from-csv-using-d3-js), it might help out.

