estk/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.container {
  height: 400px;
  display: flex;
  justify-content:center;
  align-items: center
}

.chart g rect {
  fill: steelblue;
  stroke: white;
}
.chart g text {
  fill: black;
}
</style>
<body>
  <div class="container"></div>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="script.js"></script>
</body>

## script.js
var data = [
    {name: 'Recording', value: .6},
    {name: 'Analysis', value: .8},
    {name: 'Insight', value: .7},
    {name: 'Communication', value: .5},
  ];

var w = 80, h = 200, xPad = 80, yPad = 50;

var x = d3.scale.linear()
.domain([0, data.length])
.range([0, w*data.length]);

var y = d3.scale.linear()
.domain([0, 1])
.rangeRound([0, h]);

var chart = d3.select('.container').append('svg')
    .attr('class', 'chart')
    .attr('width', w * data.length - 1 + yPad)
    .attr('height', h+xPad);

var g = chart.selectAll('g')
    .data(data)
  .enter().append('g');
g.append('text')
    .attr('x', function(d, i){ return x(i); })
    .attr('y', function(d,i){ return h - 5 - y(d.value);})
    .attr('text-align', 'center')
    .text(function(d,i){ return d.value; });
g.append('rect')
    .attr('x', function(d, i){ return x(i); })
    .attr('y', function(d){ return h - y(d.value); })
    .attr('width', w*.8)
    .attr('height', function(d){ return y(d.value); });
g.append('text')
    .attr('dx', function(d, i){ return x(i) +10; })
    .attr('dy', h + 10)
    .attr('transform', function(d,i){ return 'rotate(30,'+x(i)+','+(h+10)+')'; })
    .text(function(d){ return d.name; });

chart.append('line')
    .attr('x1', 0)
    .attr('x2', w * data.length)
    .attr('y1', h - 0.5)
    .attr('y2', h - 0.5)
    .style('stroke', '#000');
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.container {
	height: 400px;
	display: flex;
	justify-content:center;
	align-items: center
	}

	.chart g rect {
	fill: steelblue;
	stroke: white;
	}
	.chart g text {
	fill: black;
	}
	</style>
	<body>
	<div class="container"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="script.js"></script>
	</body>
	var data = [
	{name: 'Recording', value: .6},
	{name: 'Analysis', value: .8},
	{name: 'Insight', value: .7},
	{name: 'Communication', value: .5},
	];

	var w = 80, h = 200, xPad = 80, yPad = 50;

	var x = d3.scale.linear()
	.domain([0, data.length])
	.range([0, w*data.length]);

	var y = d3.scale.linear()
	.domain([0, 1])
	.rangeRound([0, h]);

	var chart = d3.select('.container').append('svg')
	.attr('class', 'chart')
	.attr('width', w * data.length - 1 + yPad)
	.attr('height', h+xPad);

	var g = chart.selectAll('g')
	.data(data)
	.enter().append('g');
	g.append('text')
	.attr('x', function(d, i){ return x(i); })
	.attr('y', function(d,i){ return h - 5 - y(d.value);})
	.attr('text-align', 'center')
	.text(function(d,i){ return d.value; });
	g.append('rect')
	.attr('x', function(d, i){ return x(i); })
	.attr('y', function(d){ return h - y(d.value); })
	.attr('width', w*.8)
	.attr('height', function(d){ return y(d.value); });
	g.append('text')
	.attr('dx', function(d, i){ return x(i) +10; })
	.attr('dy', h + 10)
	.attr('transform', function(d,i){ return 'rotate(30,'+x(i)+','+(h+10)+')'; })
	.text(function(d){ return d.name; });

	chart.append('line')
	.attr('x1', 0)
	.attr('x2', w * data.length)
	.attr('y1', h - 0.5)
	.attr('y2', h - 0.5)
	.style('stroke', '#000');