eggheadio-projects/use-d3-v3-to-build-interactive-charts-with-javascript: null

.DS_Store

# use-d3-v3-to-build-interactive-charts-with-javascript


    body {
      padding-top: 50px;
      padding-left: 100px;
    }

    #chartArea {
      width: 400px;
      height: 300px;
      background-color: #CCC;
    }

    .bar {
      display: inline-block;
      margin-right: 2px;
      fill: teal;
    }

<!DOCTYPE html>
<html>
<head>
	<title>D3 - Data Driven Documents</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
	<link rel="stylesheet" href="./app.css">
</head>
<body>
<div id="chartArea"></div>
<script src="script.js"></script>
</body>
</html>

var dataset = _.map(_.range(750), function (i ) {
    return Math.random() * 500;
  });
var w = 400, h = 300;

var svg = d3.select('#chartArea').append('svg')
.attr('width', w)
.attr('height', h);

var xScale = d3.scale.ordinal()
.domain(dataset)
.rangeBands([0, w], 0.1, 0.3);

var yScale = d3.scale.linear()
.domain([0, d3.max(dataset) * 1.1])
.range([0, h]);

var multiplier = 5;

svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', function (d, i) {
  return xScale(d);
})
.attr('y', function (d) {
  return h - yScale(d);
})
.attr('width', xScale.rangeBand())
.attr('height', function (d) {
  return yScale(d);
});