D3 dashboard chart data bind from json or csv

Question

I am new to D3 charts

i am using D3 dashboard chart following link

http://bl.ocks.org/diethardsteiner/3287802

here the datas are given by variables.

I don't want to get the value from variable and i want to get the value from json file.

Before the data are stored in a variable.

################ FORMATS ##################
-------------------------------------------
*/


var     formatAsPercentage = d3.format("%"),
        formatAsPercentage1Dec = d3.format(".1%"),
        formatAsInteger = d3.format(","),
        fsec = d3.time.format("%S s"),
        fmin = d3.time.format("%M m"),
        fhou = d3.time.format("%H h"),
        fwee = d3.time.format("%a"),
        fdat = d3.time.format("%d d"),
        fmon = d3.time.format("%b")
        ;

/*
############# PIE CHART ###################
-------------------------------------------
*/



function dsPieChart(){

    var dataset = [
            {category: "ACC", measure: 0.30},
          {category: "B56", measure: 0.25},
          {category: "MAB", measure: 0.15},

          ]
          ;

    var     width = 400,
           height = 400,
           outerRadius = Math.min(width, height) / 2,
           innerRadius = outerRadius * .999,   

           innerRadiusFinal = outerRadius * .5,
           innerRadiusFinal3 = outerRadius* .45,
           color = d3.scale.category20()    
           ;

    var vis = d3.select("#pieChart")
         .append("svg:svg")             
         .data([dataset])                  
             .attr("width", width)           
             .attr("height", height)
                .append("svg:g")                
             .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")
                ;

   var arc = d3.svg.arc()             
            .outerRadius(outerRadius).innerRadius(innerRadius);


   var arcFinal = d3.svg.arc().innerRadius(innerRadiusFinal).outerRadius(outerRadius);
    var arcFinal3 = d3.svg.arc().innerRadius(innerRadiusFinal3).outerRadius(outerRadius);

   var pie = d3.layout.pie()          
        .value(function(d) { return d.measure; });    

   var arcs = vis.selectAll("g.slice")     
        .data(pie)                          
        .enter()                           
            .append("svg:g")                
               .attr("class", "slice")   
               .on("mouseover", mouseover)
                    .on("mouseout", mouseout)
                    .on("click", up)
                    ;

        arcs.append("svg:path")
               .attr("fill", function(d, i) { return color(i); } )
               .attr("d", arc)    
                    .append("svg:title") 
                   .text(function(d) { return d.data.category + ": " + formatAsPercentage(d.data.measure); });          

        d3.selectAll("g.slice").selectAll("path").transition()
                .duration(750)
                .delay(10)
                .attr("d", arcFinal )
                ;

      arcs.filter(function(d) { return d.endAngle - d.startAngle > .2; })
            .append("svg:text")
          .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .attr("transform", function(d) { return "translate(" + arcFinal.centroid(d) + ")rotate(" + angle(d) + ")"; })

          .text(function(d) { return d.data.category; })
          ;

        function angle(d) {
            var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
            return a > 90 ? a - 180 : a;
        }


        // Pie chart title          
        vis.append("svg:text")
            .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .text("Building")
          .attr("class","title")
          ;         



    function mouseover() {
      d3.select(this).select("path").transition()
          .duration(750)

                    .attr("d", arcFinal3)
                    ;
    }

    function mouseout() {
      d3.select(this).select("path").transition()
          .duration(750)

                    .attr("d", arcFinal)
                    ;
    }

    function up(d, i) {


                updateBarChart(d.data.category, color(i));
                updateLineChart(d.data.category, color(i));

    }
}

dsPieChart();

now i am trying to get the data by folowing way.

I dont know this is correct way or not can anyone help me

################ FORMATS ##################
-------------------------------------------
*/


var     formatAsPercentage = d3.format("%"),
        formatAsPercentage1Dec = d3.format(".1%"),
        formatAsInteger = d3.format(","),
        fsec = d3.time.format("%S s"),
        fmin = d3.time.format("%M m"),
        fhou = d3.time.format("%H h"),
        fwee = d3.time.format("%a"),
        fdat = d3.time.format("%d d"),
        fmon = d3.time.format("%b")
        ;

/*
############# PIE CHART ###################
-------------------------------------------
*/



function dsPieChart(){



    var     width = 400,
           height = 400,
           outerRadius = Math.min(width, height) / 2,
           innerRadius = outerRadius * .999,   
           // for animation
           innerRadiusFinal = outerRadius * .5,
           innerRadiusFinal3 = outerRadius* .45,
           color = d3.scale.category20()    //builtin range of colors
           ;


});

    var vis = d3.select("#pieChart")
         .append("svg") 
        d3.json("readme.json", function(error, root) {
  if (error) throw error;
.data([root])                  
             .attr("width", width)           
             .attr("height", height)
                .append("g")            
             .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")    

})


                ;

   var arc = d3.svg.arc()            
            .outerRadius(outerRadius).innerRadius(innerRadius);


   var arcFinal = d3.svg.arc().innerRadius(innerRadiusFinal).outerRadius(outerRadius);
    var arcFinal3 = d3.svg.arc().innerRadius(innerRadiusFinal3).outerRadius(outerRadius);

   var pie = d3.layout.pie()        
        .value(function(d) { return d.measure; });   

   var arcs = vis.selectAll("g.slice")     
        .data(pie)                        
        .enter()                          
            .append("g")                
               .attr("class", "slice")   
               .on("mouseover", mouseover)
                    .on("mouseout", mouseout)
                    .on("click", up)
                    ;

        arcs.append("path")
               .attr("fill", function(d, i) { return color(i); } ) 
               .attr("d", arc)     
                    .append("title") 
                   .text(function(d) { return d.data.category + ": " + formatAsPercentage(d.data.measure); });          

        d3.selectAll("g.slice").selectAll("path").transition()
                .duration(750)
                .delay(10)
                .attr("d", arcFinal )
                ;


      arcs.filter(function(d) { return d.endAngle - d.startAngle > .2; })
            .append("text")
          .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .attr("transform", function(d) { return "translate(" + arcFinal.centroid(d) + ")rotate(" + angle(d) + ")"; })

          .text(function(d) { return d.data.category; })
          ;


        function angle(d) {
            var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
            return a > 90 ? a - 180 : a;
        }

        vis.append("text")
            .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .text("Building")
          .attr("class","title")
          ;         



    function mouseover() {
      d3.select(this).select("path").transition()
          .duration(750)

                    .attr("d", arcFinal3)
                    ;
    }

    function mouseout() {
      d3.select(this).select("path").transition()
          .duration(750)

                    .attr("d", arcFinal)
                    ;
    }

    function up(d, i) {


                updateBarChart(d.data.category, color(i));
                updateLineChart(d.data.category, color(i));

    }
}

dsPieChart();

can any one give a correct solution

Thanks,

Vinoth

Answer 1

Just create a JSON file with this structure:

[{
    "category": "ACC",
    "measure": 0.30
}, {
    "category": "B56",
    "measure": 0.25
}, {
    "category": "MAB",
    "measure": 0.15
}]

And use d3.json:

d3.json("data.json", function(dataset){
    //code here
});

Here is a plunker showing it: https://plnkr.co/edit/OUjPNY3W2aXXCSxvm4tZ?p=preview