D3-v4-SimpleBarChart

by Nayana Das

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'>
name,sales
100%_Bran,33
100%_Natural_Bran	,12
All-Bran_with_Extra_Fiber,41
Apple_Cinnamon_Cheerios,16
Apple_Jacks,59
Cinnamon_Toast_Crunch,38
Cream_of_Wheat_(Quick),21
Crispy_Wheat_&_Raisins,25
Golden_Grahams,30
Just_Right_Crunchy__Nuggets,47
Maypo,13
Post_Nat._Raisin_Bran,29
</pre>

<div id="box">
<button type="button" id="expandbtn" class="show">expand</button>
<button type="button" id="compressbtn" class="hide">compress</button>

<div id="container" style="height:480px;width:100%;overflow-y:scroll;">

</div>
</div>

CSS

.panel-fullscreen {
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}

.show{
  display:block;
}

.hide{
  display:none;
}

.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: 10,
    right: 20,
    bottom: 120,
    left: 40
  },
  width = 550 - margin.left - margin.right,
  height = 300 - 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("#container").append("svg")
  //.attr("width", width + margin.left + margin.right)
  //.attr("height", height + margin.top + margin.bottom)
  .attr("preserveAspectRatio", "xMinYMin meet")
		.attr("viewBox", "0 0 550 300")
  .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.name;
}));
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.name);
  })
  .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)
...