Question

I give up, I can’t figure it out.
I was trying to create a bar chart with 3d.js but I can’t get it working. Probably I don’t understand it enough to deal with my complicate associative array.

My array has the following structure:

{"January"=>{"fail"=>13, "success"=>6},  
 "February"=>{"success"=>10, "fail"=>4},  
 "March"=>{"success"=>9, "fail"=>13},  
 "April"=>{"success"=>16, "fail"=>5},   
 "May"=>{"fail"=>52, "success"=>23},   
 "June"=>{"fail"=>7, "success"=>2},   
 "July"=>{},  
 "August"=>{"fail"=>6, "success"=>3},  
 "September"=>{"success"=>54, "fail"=>59},   
 "October"=>{"success"=>48, "fail"=>78},  
 "November"=>{"fail"=>4, "success"=>6},  
 "December"=>{"fail"=>1, "success"=>0}}`

I got the displaying of the axis working:

The code looks really ugly because I converted the names to a “normal” array:

monthsNames = new Array();
i = 0;
for (key in data) {
  monthsNames[i] = key;
  i++;
}

x.domain(monthsNames);
y.domain([0, 100]); 

But I can’t figure it out how to deal with the data.

I tried things like, svg.selectAll(".bar").data(d3.entries(data))
What is a good beginning I guess but I can’t get the connection to the axis working.

What I want to create is a bar-chart that has the months as x-axis and every month has two bars (respectively one bar with two colours) – one for success and one for fail.

Can anybody please help me how to handle the data? Thanks in advance!

EDIT:

I cannot figure out how to scale x and y. If I use this code:

var x = d3.scale.ordinal()
   .domain(monthsNames)
   .range([0, width]);

var y = d3.scale.linear()
   .domain([0,100])
   .range([0, height]);

nothing is shown up then. If I print out the values that evaluate after using e.g. x(d.key) or x(d.value.fail) they are really strange numbers, sometimes even NaN.

EDIT:

d3.selectAll(".barsuccess")
      .on('mouseover', function(d){
                    svg.append('text')
                    .attr("x", x(d.key))
                    .attr("y", y(d.value.success))
                    .text(d.value.success+"%")
                    .attr('class','success')
                    .style("font-size","0.7em")
                })
                .on('mouseout', function(d){
                    d3.selectAll(".success").remove()
                });  


d3.selectAll(".barfail")
          .on('mouseover', function(d){
                        svg.append('text')
                        .attr("x", x(d.key)+x.rangeBand()/2)
                        .attr("y", y(d.value.fail))
                        .text(d.value.fail+"%")
                        .attr('class','fail')
                        .style("font-size","0.7em")
                    })
                    .on('mouseout', function(d){
                        d3.selectAll(".fail").remove()
                    });  

Answer 1

Be sure to check out the bar chart tutorials here and here. You have basically all you need already. The connection between the axes and the data are the functions that map input values (e.g. “March”) to output coordinates (e.g. 125). You (presumably) created these functions using d3.scale.*. Now all you need to do is use the same functions to map your data to coordinates in the SVG.

The basic structure of the code you need to add looks like

svg.selectAll(".barfail").data(d3.entries(data))
   .enter().append("rect")
   .attr("class", "barfail")
   .attr("x", function(d) { x(d.key) })
   .attr("width", 10)
   .attr("y", function(d) { y(d.value.fail) })
   .attr("height", function(d) { y(d.value.fail) });

and similar for success. If you use the same scale for the x axis for both types of bar, add a constant offset to one of them so the bars don’t overlap. Colours etc can be set in the CSS classes.