D3 js : Bar Chart 2

In the previous post we made a bar graph with a data in a simple array. Lets pick up on where we left  Most cases your data is going to be array of object. Changing index.html


<!DOCTYPE html>
<html>
<head>
<title>D3 Bar Chart</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var data = [
{key: "key 1", value: 10},
{key: "key 2", value: 30},
{key: "key 3", value: 50},
{key: "key 4", value: 34},
{key: "key 5", value: 65},
{key: "key 6", value: 87},
{key: "key 7", value: 65},
{key: "key 8", value: 23},
{key: "key 9", value: 45},
{key: "key 10", value: 14}
];
var width=800;
var height=450;
var margin = {
top: 20,
bottom: 20,
left: 20,
right: 20
};
var widthBar = width - margin.left - margin.right;
var heightBar = height - margin.top - margin.bottom;
var x=d3.scale.linear()
.domain([0,d3.max(data,function(d,i){
return d.value;
})])
.range([0,widthBar]);
var y=d3.scale.linear()
.domain([0,data.length])
.range([0,heightBar]);
var svg=d3.select("body").append("svg")
.attr("id","chart")
.attr("width",width)
.attr("height",height)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.classed("bar",true)
.attr("x",0)
.attr("y",function(d,i){
return y(i);
})
.attr("width",function(d,i){
return x(d.value);
})
.attr("height",function(d,i){
return y(1)-1;
});
</script>
</body>
</html>

Note the changes in d3.max method change, svg bar width attribute. Both these cases we have to tell d3 what property d3 need to take as value. Our style.css


body.html{
margin: 0;
padding:0;
font-family:'Arial';
text-align: center;
}

#chart{
background-color: lightyellow;
border: 1px solid #ccc;
}

.bar{
fill: teal;
shape-rendering: crispEdges;
}

d3BarChart3-1

Lets ass text to the values. Adding at the end of our javascript


svg.selectAll(".bar-label")
.data(data)
.enter()
.append("text")
.classed("bar-label", true)
.text(function(d,i){
return d.value;
});

Above we made appended text to our svg and in the text told what are we going to use as text.

d3BarChart3-2

As you can see all the text are overlapped. Lets separate them just like we did while creating bar


svg.selectAll(".bar-label")
.data(data)
.enter()
.append("text")
.classed("bar-label", true)
.attr("x",0)
.attr("y",function(d,i){
return y(i);
})
.text(function(d,i){
return d.value;
});

d3BarChart3-3

As you can see, the position of the text by default is at the top left corner of each bar. We can effect the position of y by just changing the return statement of y say y(i)-4, but thats not an elegant way to do it. Instead there is a attribute called ‘dy‘ that can be used to nudge the positioning of your text on y axis.


svg.selectAll(".bar-label")
.data(data)
.enter()
.append("text")
.classed("bar-label", true)
.attr("x",0)
.attr("y",function(d,i){
return y(i);
})
.attr("dy", function(d,i){
return y(1)/1.5+2;
})
.text(function(d,i){
return d.value;
});

For dy attribute to make it center , we divided the height of 1 bar with 1.5 and added 2 px to it.

d3BarChart3-4

What if we want our text to be at the end of the boxes. For that we have to change the x attribute of our lable.


svg.selectAll(".bar-label")
.data(data)
.enter()
.append("text")
.classed("bar-label", true)
.attr("x", function(d){
return x(d.value);
})
.attr("y",function(d,i){
return y(i);
})
.attr("dy", function(d,i){
return y(1)/1.5+2;
})
.text(function(d,i){
return d.value;
});

d3BarChart3-5

To put the text inside use css. Add to the existing style.css


.bar-label{
fill: white;
text-anchor: end;
font-size: 18px;
}

To leave a little spacing between the text and the end of the bar use dx.


svg.selectAll(".bar-label")
.data(data)
.enter()
.append("text")
.classed("bar-label", true)
.attr("x", function(d){
return x(d.value);
})
.attr("dx", -4)
.attr("y",function(d,i){
return y(i);
})
.attr("dy", function(d,i){
return y(1)/1.5+2;
})
.text(function(d,i){
return d.value;
});

d3BarChart3-6

 

Advertisements
%d bloggers like this: