Lewuathe/d3-check.html

## d3-check.html
<html>
<meta>
  <title>D3 Test</title>
  <style>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

  </style>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script type='text/javascript'>
  $(function(){
    function renderHistogram(dnData) {
      var data = [0.1, 0.2, 0.3, 0.1, 0.1, 0.2, 0.5, 0.6, 0.9, 0.2, 0.6, 0.5, 0.7];
      for (var i = 0; i < 100; i++) {
        data.push(Math.random() * i);
      }


      var formatCount = d3.format(",.0f");

      var widthCap = parseInt(d3.select("body")
        .style('width').slice(0, -2));

      // var widthCap = $("#datanode-usage-histogram").width();
      console.log(widthCap);

      var heightCap = 150;
      var margin = {top: 10, right: 60, bottom: 30, left: 30},
        width = widthCap - margin.left - margin.right,
        height = heightCap - margin.top - margin.bottom;

      var x = d3.scaleLinear()
        .domain([0, 100])
        .range([0, width - margin.right - margin.left - 10]);

      var bins = d3.histogram()
        .domain(x.domain())
        .thresholds(x.ticks(20))(data);

      var y = d3.scaleLinear()
        .domain([0, d3.max(bins, function(d) { return d.length; })])
        .range([height, 0]);

      var svg = d3.select("#datanode-usage-histogram").append("svg")
        .attr("width", width)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      console.log(bins);
      var bar = svg.selectAll(".bar")
        .data(bins)
        .enter().append("g")
        .attr("class", "bar")
        .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; });

      bar.append("rect")
        .attr("x", 1)
        .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
        .attr("height", function(d) { return height - y(d.length); });
      bar.append("text")
        .attr("dy", ".75em")
        .attr("y", 6)
        .attr("x", (x(bins[0].x1) - x(bins[0].x0)) / 2)
        .attr("text-anchor", "middle")
        .text(function(d) { return formatCount(d.length); });

      svg.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));
    }

    renderHistogram();
  });
  </script>
</meta>
<body>

<div id="datanode-usage-histogram"></div>
</body>
</html>
	<html>
	<meta>
	<title>D3 Test</title>
	<style>

	.chart div {
	font: 10px sans-serif;
	background-color: steelblue;
	text-align: right;
	padding: 3px;
	margin: 1px;
	color: white;
	}

	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
	<script type='text/javascript'>
	$(function(){
	function renderHistogram(dnData) {
	var data = [0.1, 0.2, 0.3, 0.1, 0.1, 0.2, 0.5, 0.6, 0.9, 0.2, 0.6, 0.5, 0.7];
	for (var i = 0; i < 100; i++) {
	data.push(Math.random() * i);
	}


	var formatCount = d3.format(",.0f");

	var widthCap = parseInt(d3.select("body")
	.style('width').slice(0, -2));

	// var widthCap = $("#datanode-usage-histogram").width();
	console.log(widthCap);

	var heightCap = 150;
	var margin = {top: 10, right: 60, bottom: 30, left: 30},
	width = widthCap - margin.left - margin.right,
	height = heightCap - margin.top - margin.bottom;

	var x = d3.scaleLinear()
	.domain([0, 100])
	.range([0, width - margin.right - margin.left - 10]);

	var bins = d3.histogram()
	.domain(x.domain())
	.thresholds(x.ticks(20))(data);

	var y = d3.scaleLinear()
	.domain([0, d3.max(bins, function(d) { return d.length; })])
	.range([height, 0]);

	var svg = d3.select("#datanode-usage-histogram").append("svg")
	.attr("width", width)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	console.log(bins);
	var bar = svg.selectAll(".bar")
	.data(bins)
	.enter().append("g")
	.attr("class", "bar")
	.attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; });

	bar.append("rect")
	.attr("x", 1)
	.attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
	.attr("height", function(d) { return height - y(d.length); });
	bar.append("text")
	.attr("dy", ".75em")
	.attr("y", 6)
	.attr("x", (x(bins[0].x1) - x(bins[0].x0)) / 2)
	.attr("text-anchor", "middle")
	.text(function(d) { return formatCount(d.length); });

	svg.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x));
	}

	renderHistogram();
	});
	</script>
	</meta>
	<body>

	<div id="datanode-usage-histogram"></div>
	</body>
	</html>