D3-v4-SimpleBarChart

by HemalathaThanigaivel

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.js"></script>
<pre id='data_csv'>
salesperson,sales
Bob,33
Robin,12
Anne,41
Mark,16
Joe,59
Eve,38
Karen,21
Kirsty,25
Chris,30
Lisa,47
Charles,13
Mary,29
</pre>

CSS

.bar {
  fill: steelblue;
}

pre {
  display:none;
}

.backbar {
  fill: rgba(255,55,42,0.1);
}


.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

JavaScript

// set the dimensions and margins of the graph
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

// set the ranges
var x = d3.scaleBand()
  .range([0, width])
  .padding(0.1);
var y = d3.scaleLinear()
  .range([height, 0]);


//define tooltip
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([20, 0])
  .html(function(d) {
    return "<strong>Sales:</strong> <span style='font-weight:normal;color:red'>" + d.sales + "</span>";
  });
  
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")")
    .call(tip);

// Add background color to the chart

svg.append("rect")
   .attr("x", 0)
   .attr("y", 0)
   .attr("width", width)
   .attr("height", height)
   .attr("class","backbar");
   
// get the data
//d3.csv("sales.csv", function(error, data) {
//  if (error) throw error;
var data = d3.csvParse(d3.select('#data_csv').text());
console.log(data);

// format the data
data.forEach(function(d) {
  d.sales = +d.sales;
});

// Scale the range of the data in the domains
x.domain(data.map(function(d) {
  return d.salesperson;
}));
y.domain([0, d3.max(data, function(d) {
 return d.sales;
})]);



  
  
// append the rectangles for the bar chart
svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) {
    return x(d.salesperson);
  })
  .attr("width", x.bandwidth())
  .attr("y", function(d) {
    return y(d.sales);
  })
  .attr("height", function(d) {
    return height - y(d.sales);
  })
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide);

// add the x Axis
svg.append("g")
 ...