D3 Examples - Bar Graph

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<head>
 <style>
/*Font Style*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700|Exo+2:300,600);
 
/*Source: Eric Meyer's Reset CSS v2.0 - https://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
 
 
 /* PBO Report Template Colour Palette ----------
 By Usage Order (Top to Bottom)
 1--
  dark blue                 : #1A4581;
  very soft orange          : #DAB97A;
  
 2---
  very dark blue            : #1C2654;
  dark moderate orange      : #AE8254;
  
 3--
  mauve                     : #8d6b81;
  dusty green               : #95ab64;
  
4--
 desaturated blue           : #6281C0;
 very soft orange           : #EBCD95;
 
5- 
 dark grayish pink          : #4b333e;
 desaturated dusty green    : #628e5d;
 
6-
  grayish blue              : #bbc0e1;
  light grayish pink        : #efe1c8;
  
7 -
  dark grayish magenta      : #9b869f;
  graysih green         : #adc4a4;
  ____
  blue           : #2176C7;
  cyan           : #259286;
  green          : #738A05; */
 
body {
  font-family: "Exo 2", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 300;
  font-size: 1.2em;
  line-height: 1.2em;
  background: white;
  color: #475B62;
}
 
strong {
  font-weight: 600;
}
​
 /*headers and titles*/
h1, h2, h3, h4, h5, h6 { 
  font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  color: #1C2654; /* very dark blue*/
  font-size: 1.75em;
  margin-bottom: .4em;
}
 
p {
  margin-bottom: .5em;
}
 
.container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top:10px;
}
 
@media all and (max-width: 500px) {
  h2 {
    padding-left: 10px;
    text-align: center;
  }
  .container {
    width: 100%;
  }
}
 
#graphic {
  margin: 0 auto;
}
 </style>
</head>
​
<body>
 
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<script>
​
​
​
var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;
​
// Parse the year/ time
var parseDate = d3.time.format("%Y").parse;
​
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
​
var y = d3.scale.linear().range([height, 0]);
​
var tempcolour;
var colours = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.value; })])
.range(['#1A4581', '#1C265', '#8D6B81', '#49b869f','#BBC0E1'])
​
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%Y"));
​
tooltip = d3.select.ordinal()
    .domain([0, d3.max(data, function(d) { return d.value; })])
    .style('position', 'aboslute')
    .style('padding', '0 10px')
    .style('background', 'white')
    .style('opacity', 50)
​
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);
​
var barGraph = d3.select("body").append("svg")
    .style('background', 'white')
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")")
      svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
      .style("fill", function(d,i) {
                return colours(i)})
      .attr("x", function(d) { return x(d.year); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .on('mouseover', function(d) {
​
        tooltip.transition()
            .style('opacity', .9)
​
        tooltip.html(d)
            .style('left', (d3.event.pageX - 35) + 'px')
            .style('top',  (d3.event.pageY - 30) + 'px')
​
        tempColor = this.style.fill;
        d3.select(this)
            .style('opacity', .5)
            .style('fill', 'yellow')
    })
​
    .on('mouseout', function(d) {
        d3.select(this)
            .style('opacity', 1)
            .style('fill', tempColor)
    });
      
    barGraph.transition()
        .attr('height', function(d)) {
        return y(d.value);
        })
        .attr('y', function(d) {
            return height - y(d.value);
        })
        .delay(function(d,i) {
            return i*35;
        })
        .duration(3000)
        .ease('elastic')
      
​
d3.csv("data.csv", function(error, data) {
​
    if (error) return console.error(error);
    data.forEach(function(d) {
        d.year = parseDate(d.year);
        d.value = +d.value;
    });
 
  x.domain(data.map(function(d) { return d.year; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);
​
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );
​
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Value ($)");
​
​
​
});
​
</script>
<p><em>Fig 1</em> test paragraph</em></p>
  </div>
​
</body>
</html>
    