D3 Examples - BarChart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src= "https://cdnjs.com/libraries/d3-legend"></script>
  <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<style>
   body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
   svg { width:100%; height:100%;}
     
  .bar {fill: steelblue;}
     
  .bar:hover {fill: red}
     
  .axis path,
  .axis line {
    fill: black;
    stroke: #000;
    shape-rendering: crispEdges;
  }
​
  .x.axis path {
    display: none;
  }
     
     
  .my-text {
    font-size: 1em;
    font-family: 'Open Sans', cursive;
  } 
  
  
</style>
​
</head>
<body class="my-text">
  <H1>13-month Visit Trend</H1>
  <script>
   var formatDate = d3.time.format("%b-%y");
    var margin = {top: 20, right: 20, bottom: 30, left:80
                 },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
   // var x = d3.time.scale()
   // .range([0, width]);
    
   var x = d3.scale.ordinal()
   .rangeRoundBands([0, width], .2);
     
    var y = d3.scale.linear()
        .range([height,0]);
   
    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(formatDate);
​
    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(5)
    .tickFormat(d3.format("s"));
    
    var svg = d3.select("body").append("svg")
      .attr("width",width+ margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("class","viewport")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
     function render(data){
       var commaformatter = d3.format(",");
      x.domain(data.map(function(d) { return d.period; }));
       y.domain([0, d3.max(data, function(d) { return d.visits; })]);
     
      svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
     
      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("visits");
       
     svg.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.period); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.visits); })
      .attr("height", function(d) { return height - y(d.visits);});  
    
      var div = d3.select("body").append("div")
       .style("position", "absolute")
       .style("text-align","center")
       .style("width","150px")
       .style("height", "3.0 em")
       .style("font", "1em Open Sans")
       .style("color", "black")
       .style("background","white")
       .style("border-radius", "4px")
       .style("border", "solid 2px red")
       .style("opacity", 0);  
       
      function mouseover(d) {
       div.html ("Period: " + formatDate(d.period) + "<br />" 
                 + "Visits: " + commaformatter(d.visits))
                 .style("left", (x(d.period))+ 75 + "px")
                 .style ("top", (y(d.visits)) + 33 + "px")
                 .style("opacity",1);
      }
    
     function mouseout() {
        div.style("opacity", 1e-6)
           .style("left","1px")
           .style("top", height+100);
     }  
       
       d3.selectAll(".bar")
         .on("mouseover", mouseover)
         .on("mouseout", mouseout);
   }    
       
​
    function type(d){
        d.visits = +d.visits;
        d.period = formatDate.parse(d.period);
        return d;
    }
    
    d3.csv("visits.csv", type, render);
    console.log(data);
    
  </script>
</body>
​
    