bar chart – complete code – d3.js

D3 bar chart complete code (svg, axis, hover, random data, transition, delay, click)

view demo

barchar-svg-complete

structure

barchar-svg-complete-folder

bar-chart.html code


<!doctype html>
<html>
<head>
<title>D3 Bar Chart</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>

<div id="tooltip">
<img src="img/g3n1k.jpg" id="pic" style='width:4em;'/> &nbsp;
<span id="alfabet" style='line-height:3em; font:2em sans-serif;'>A</span>
<p><span id="value">100</span></p>
</div>

<svg></svg>
<br />
<button>Random Data</button>

<style>

#tooltip {
position: absolute;
width: 220px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}

#tooltip.hidden {
display: none;
}

#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}

.axis text {
font: 10px sans-serif;
}

.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}

.x.axis path {
display: none;
}

rect {
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.5s;
cursor:pointer;
}

</style>

<script>

var margin = {top: 20, right: 30, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);

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

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var chart = d3.select(".chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data;

d3.json("data/data.json", function(error, json) {

if (error) return console.warn(error);

data = json;

x.domain(data.map(function(d) { return d.letter; }));

y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

chart.append("g")
.attr("class", "y axis")
.call(yAxis);

chart.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("id", function(d) { return 'bar'+d.letter;})
.attr("x", function(d) { return x(d.letter); })
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); })
.attr("width", x.rangeBand())
.attr("fill", function(d) { return "rgb(" + Math.round(d.frequency * 1000) + ",10, 100)"; })

.on("click", function(d){
window.open(d.fb, '_blank', 'location=yes,height=600,width=960,scrollbars=yes,status=yes');
})

.on("mouseover", function(d) {
d3.select(this)
.transition()
.duration(50)
.attr("fill", "#CC0000");

//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + x.rangeBand() / 2;
var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + height / 2;

//Update the tooltip position and value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(d.frequency);

d3.select("#alfabet")
.text(d.name);

d3.select("#pic")
.attr("src","img/"+d.pic);

//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
})

.on("mouseout", function() {
d3.select(this)
.transition()
.delay(100)
.duration(250)
.attr("fill", function(d) { return "rgb(" + Math.round(d.frequency * 1000) + ",10, 100)"; })

//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);

})
.append("title")
.text(function(d) {  return d.letter + " value is " + d.frequency;});
;

});

// function generate bar
function random_bar(data){

d3.selectAll(".bar")
.data(data)
.transition()
//.delay(500)
.duration(1000)
.ease("linear")
.attr("fill", function(d) { return "rgb(" + Math.round(d.frequency * 1000) + ",10, 100)"; })
.attr("x", function(d) { return x(d.letter); })
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); })
;
}

// random data
d3.select("button")
.on("click", function() {

//console.log(data.length);
var numValues = data.length;

for (var i = 0; i < numValues; i++) {

var newNumber = Math.random() * 0.12 ; //New random integer (0-25)
data[i].frequency = newNumber;//Add new number to array
}

//console.log(data);
random_bar(data);
});

</script>
</body>
</html>

data.json


[
{
"letter": "A",
"frequency": 0.08167,
"pic":"barian-f.jpg",
"name":"Monyet",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "B",
"frequency": 0.01492,
"pic":"banu-ad.jpg",
"name":"Banu",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "C",
"frequency": 0.02782,
"pic":"coeopa.jpg",
"name":"Coepa",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "D",
"frequency": 0.04253,
"pic":"denly-m.jpg",
"name":"Denly",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "E",
"frequency": 0.12702,
"pic":"kazuya-nh.jpg",
"name":"Kazuya",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "F",
"frequency": 0.02288,
"pic":"galeh-rd.jpg",
"name":"Galeh",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "G",
"frequency": 0.02015,
"pic":"g3n1k.jpg",
"name":"Gw",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "H",
"frequency": 0.06094,
"pic":"iwan-sn.jpg",
"name":"Iwan",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "I",
"frequency": 0.06966,
"pic":"indradhi-nm.jpg",
"name":"Indradhi",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "J",
"frequency": 0.00153,
"pic":"oki-nr.jpg",
"name":"Oki",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "K",
"frequency": 0.00772,
"pic":"kazuya-nh.jpg",
"name":"Kazuya",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "L",
"frequency": 0.04025,
"pic":"oki-nr.jpg",
"name":"Oki",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "M",
"frequency": 0.02406,
"pic":"g3n1k.jpg",
"name":"Gw",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "N",
"frequency": 0.06749,
"pic":"siti-m.jpg",
"name":"Siti",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "O",
"frequency": 0.07507,
"pic":"oki-nr.jpg",
"name":"Oki",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "P",
"frequency": 0.01929,
"pic":"indradhi-nm.jpg",
"name":"Indradhi",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "Q",
"frequency": 0.00095,
"pic":"banu-ad.jpg",
"name":"Banu",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "R",
"frequency": 0.05987,
"pic":"coeopa.jpg",
"name":"Dwi",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "S",
"frequency": 0.06327,
"pic":"siti-m.jpg",
"name":"Siti",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "T",
"frequency": 0.09056,
"pic":"indradhi-nm.jpg",
"name":"Indradhi",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "U",
"frequency": 0.02758,
"pic":"iwan-sn.jpg",
"name":"Iwan",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "V",
"frequency": 0.00978,
"pic":"iwan-sn.jpg",
"name":"Iwan",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "W",
"frequency": 0.0236,
"pic":"barian-f.jpg",
"name":"Barian",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "X",
"frequency": 0.0015,
"pic":"banu-ad.jpg",
"name":"Banu",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "Y",
"frequency": 0.01974,
"pic":"indradhi-nm.jpg",
"name":"Indradhi",
"fb":"https://www.facebook.com/g3n1k"
},
{
"letter": "Z",
"frequency": 0.00074,
"pic":"kazuya-nh.jpg",
"name":"Kazuya",
"fb":"https://www.facebook.com/g3n1k"
}
]

Published by

G3n1k

just to remember what i had known :)

4 thoughts on “bar chart – complete code – d3.js”

  1. Hi,,, I tried to execute the above code..But the chart doesnt diplayed . Could you post the full code with zip file please. I want to add an tooltip with image to my bar chart.

    1. Mr. varadha:

      what kind of edit platform you play with this example? I use VS2010, But it won’t work – the chart does’nt displayed.

      Would you tell me what was my problem?

      Josh Liang

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s