D3.js horizontal bar chart and data from json file

Question

I have created a horizontal bar chart using d3.js,the data is also inside the js file only.

But now i want to have a separate json file,from there i need to retrieve the data and use in js file.

I have tried but did not able to access the data from json file.

Here is the code.

Html

 <head>    
 <title>Enjalot's Bar</title>

 <script src="d3.v3.min.js"></script>
 </head>

JavaScript

 <script type="text/javascript">

 var data= [{"label":"1990", "value":16}, 
        {"label":"1991", "value":56}, 
        {"label":"1992", "value":7},
        {"label":"1993", "value":60},
        {"label":"1994", "value":22}
        ];

  var data_max = 60,
  num_ticks = 6,

  left_margin = 60,
  right_margin = 60,
  top_margin = 30,
  bottom_margin = 0;


  var w = 200,                        //width
    h = 200,                        //height
    color = function(id) { return '#00b3dc' };

  var x = d3.scale.linear()
    .domain([0, data_max])
    .range([0, w - ( left_margin + right_margin ) ]),
    y = d3.scale.ordinal()
    .domain(d3.range(data.length))
    .rangeBands([bottom_margin, h - top_margin], .5);


var chart_top = h - y.rangeBand()/2 - top_margin;
var chart_bottom = bottom_margin + y.rangeBand()/2;
var chart_left = left_margin;
var chart_right = w - right_margin;


var vis = d3.select("body")
    .append("svg:svg")
        .attr("width", w)
        .attr("height", h)
    .append("svg:g")
        .attr("id", "barchart")
        .attr("class", "barchart")

var rules = vis.selectAll("g.rule")
    .data(x.ticks(num_ticks))
.enter()
    .append("svg:g")
    .attr("transform", function(d)
            {
            return "translate(" + (chart_left + x(d)) + ")";});
rules.append("svg:line")
    .attr("class", "tick")
    .attr("y1", chart_top)
    .attr("y2", chart_top + 4)
    .attr("stroke", "#939597");

rules.append("svg:text")
    .attr("class", "tick_label")
    .attr("text-anchor", "middle")
    .attr("y", chart_top + 3)
    .attr("fill","#939597")
    .attr("font-size","0.667em")
    .text(function(d)
    {
    return d;
    });
var bbox = vis.selectAll(".tick_label").node().getBBox();
vis.selectAll(".tick_label")
.attr("transform", function(d)
        {
        return "translate(0," + (bbox.height) + ")";
        });

var bars = vis.selectAll("g.bar")
    .data(data)
.enter()
    .append("svg:g")
        .attr("class", "bar")
        .attr("transform", function(d, i) { 
                return "translate(0, " + y(i) + ")"; });

bars.append("svg:rect")
    .attr("x", right_margin)
    .attr("width", function(d) {
            return (x(d.value));
            })
    .attr("height", y.rangeBand())
    .attr("fill", color(0))
    .attr("stroke", color(0));


//Labels
var labels = vis.select("g.bar")
    .append("svg:text")
        .attr("class", "label")
        .attr("x", 0)
        .attr("text-anchor", "right")
        .attr("transform", "rotate(270)")
        .attr("y", 40)
    .attr("x", -55)
        .attr("dy", ".71em")
        .text("Depts")
        .style({"text-anchor":"end","font-size":"0.667em","fill":"#939597"});

var bbox = labels.node().getBBox();



labels = vis.selectAll("g.bar")
    .append("svg:text")
    .attr("class", "value")
    .attr("fill","#fff")
    .attr("font-size","0.667em")
    .attr("x", function(d)
            {
            return 65;
            })
    .attr("text-anchor", "start")
    .text(function(d)
    {
    return "" + d.value + "%";
    });

bbox = labels.node().getBBox();
vis.selectAll(".value")
    .attr("transform", function(d)
    {
        return "translate(0, " + (y.rangeBand()/2 + bbox.height/4) + ")";
    });

//Axes
vis.append("svg:line")
    .attr("class", "axes")
    .attr("x1", chart_left)
    .attr("x2", chart_left)
    .attr("y1", chart_bottom)
    .attr("y2", chart_top)
    .attr("stroke", "#939597");
 vis.append("svg:line")
    .attr("class", "axes")
    .attr("x1", chart_left)
    .attr("x2", chart_right+120)
    .attr("y1", chart_top)
    .attr("y2", chart_top)
    .attr("stroke", "#939597");

</script>

dcodesmith · Accepted Answer · 2013-12-11 11:56:30Z

2

You'll need something like this to access a JSON file

d3.json("path/to/file.json", function(error, json) {
  // since this function is asynchronous,
  // you can't access data outside it
  // So do pass the json into the the function that needs it
  if (error) return console.warn(error);
  someFunc(json);
});

function someFunc(data) {
    ....
}

Read this wiki for xhr request in D3.

edited Dec 11, 2013 at 11:56

answered Dec 11, 2013 at 10:24

dcodesmith

9,6244 gold badges38 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Preethi Over a year ago

I have tried with the following code,But if i access the data it is undefined. var data= d3.json("bardata.json", function(error, data) { data.forEach(function(d) { d.frequency = +d.frequency; }); });

dcodesmith Over a year ago

Your code snippet is wrong. Declare data first and then assign json to data inside the function. @User1

dcodesmith Over a year ago

@User1. Also, make sure that the json file is in the same directory as the html file it's been used in

Preethi Over a year ago

var data; data=d3.json("bardata.json", function(error, data) { data.forEach(function(d) { d.frequency = +d.frequency; console.log(d.data); }); });

Preethi Over a year ago

Like this your telling, var data; data=d3.json("bardata.json", function(error, data) { data.forEach(function(d) { d.frequency = +d.frequency; console.log(d.data); }); }); And the json is also in the same directory only.

|

Collectives™ on Stack Overflow

D3.js horizontal bar chart and data from json file

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related