HoffmannP/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="//d3js.org/d3.v3.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
<script src="script.js"></script>
</html>

## script.js
var margin = {top: 50, right: 20, bottom: 60, left: 70},
    width = 800 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .domain([0, 4])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, 60])
    .range([height, 0]);

var yVal = d3.scale.linear()
    .domain([60, 0])
    .range([height, 0]);

var yAxisMinor = d3.svg.axis()
    .scale(y)
    .ticks(13)
    .tickSize(width, 0)
    .orient('right');

var yAxisMajor = d3.svg.axis()
    .scale(y)
    .ticks(7)
    .tickSize(width, 0)
    .tickPadding(-(width + 5))
    .tickFormat(d3.format('d'))
    .orient('right');

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 + ')');

var xLabel = svg.append('g')
    .attr('class', 'x label')
    .attr('transform', 'translate(0, ' + height/2 + ') rotate(-90)')
  .append('text')
    .attr('text-anchor', 'middle')
    .attr('dy', '-40')
    .text('Prozent');

var gx = svg
    .append('g').attr('class', 'x axis');

gx.append('g')
    .attr('transform', 'translate(7, -15)')
  .append('line')
    .attr('x2', '0')
    .attr('y2', height + 15);

gx.append('g')
    .attr('transform', 'translate(0, -26) scale(0.15, 0.15)')
  .append('path')
    .attr('d', 'M0,86.6L50,0L100,86.6C50,75 50,75 0,86.6z');

var gyMinor = svg.append('g')
    .attr('class', 'y axis minor')
    .call(yAxisMinor);

gyMinor.selectAll('text').remove();

var gyMajor = svg.append('g')
    .attr('class', 'y axis major')
    .call(yAxisMajor);

gyMajor.selectAll('text')
    .style('text-anchor', 'end')
    .attr('dy', '7px');

var drawArea = svg.append('g')
    .attr('class', 'block')
    .attr('transform', 'translate(' + 20 + ', ' + height + ') scale(1, -1)');

var backBlocks = drawArea
    .selectAll('rect.back')
        .data([64, 64, 64, 64])
    .enter()
      .append('rect')
      .attr('class', 'back')
      .style('width', width/5)
      .style('height', yVal)
      .style('x', function (d, i) { return x(i); });

var frontBlocks = drawArea
    .selectAll('rect.front')
        .data([0,0,0,0])
    .enter()
      .append('rect')
      .attr('class', 'front')
      .style('width', width/5)
      .style('height', yVal)
      .style('x', function (d, i) { return x(i); });

var newHeight = function (d, i) {
    var y = d3.event.clientY;
    d3.select(frontBlocks[0][i % 4]).style('height', height + margin.bottom - y);
};

var currentActiveBlock = false;

drawArea.selectAll('rect')
    .on('mouseover', function (d, i) {
        d3.select(backBlocks[0][i % 4]).style('opacity', '0.5');
    })
    .on('mouseout', function () {
        backBlocks.style('opacity', '0');
    })
    .on('mousedown', function (d, i) {
        d3.select(backBlocks[0][i % 4]).style('opacity', '0.5');
        newHeight.call(this, d, i);
        currentActiveBlock = i % 4;
    })
    .on('mousemove', function (d, i) {
        if (currentActiveBlock === false) {
            return;
        }
        newHeight.call(this, d, currentActiveBlock);
    })
    .on('mouseup', function (d, i) {
        d3.select(frontBlocks[0][currentActiveBlock]).style('opacity', '1');
        newHeight.call(this, d, currentActiveBlock);
        currentActiveBlock = false;
    });

## style.css
body {
  font: 18px sans-serif;
}

svg {

}

.label text {
    font-weight: bold;
}

.y.axis path {
    display: none;
}

.x.axis path {
    fill: #333;
}

.axis line {
  shape-rendering: crispEdges;
  stroke: #333;
  stroke-width: 2px;
}

.axis.minor line {
  stroke-width: 1px;
}

.axis text {
  text-anchor: end;
}

.block rect {
    cursor: ns-resize;
}

.block rect.back {
    opacity: 0.0;
    fill: #ddd;
}
}

.block rect.front {
    fill: #222;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="//d3js.org/d3.v3.min.js"></script>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	</body>
	<script src="script.js"></script>
	</html>
	var margin = {top: 50, right: 20, bottom: 60, left: 70},
	width = 800 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.scale.linear()
	.domain([0, 4])
	.range([0, width]);

	var y = d3.scale.linear()
	.domain([0, 60])
	.range([height, 0]);

	var yVal = d3.scale.linear()
	.domain([60, 0])
	.range([height, 0]);

	var yAxisMinor = d3.svg.axis()
	.scale(y)
	.ticks(13)
	.tickSize(width, 0)
	.orient('right');

	var yAxisMajor = d3.svg.axis()
	.scale(y)
	.ticks(7)
	.tickSize(width, 0)
	.tickPadding(-(width + 5))
	.tickFormat(d3.format('d'))
	.orient('right');

	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 + ')');

	var xLabel = svg.append('g')
	.attr('class', 'x label')
	.attr('transform', 'translate(0, ' + height/2 + ') rotate(-90)')
	.append('text')
	.attr('text-anchor', 'middle')
	.attr('dy', '-40')
	.text('Prozent');

	var gx = svg
	.append('g').attr('class', 'x axis');

	gx.append('g')
	.attr('transform', 'translate(7, -15)')
	.append('line')
	.attr('x2', '0')
	.attr('y2', height + 15);

	gx.append('g')
	.attr('transform', 'translate(0, -26) scale(0.15, 0.15)')
	.append('path')
	.attr('d', 'M0,86.6L50,0L100,86.6C50,75 50,75 0,86.6z');

	var gyMinor = svg.append('g')
	.attr('class', 'y axis minor')
	.call(yAxisMinor);

	gyMinor.selectAll('text').remove();

	var gyMajor = svg.append('g')
	.attr('class', 'y axis major')
	.call(yAxisMajor);

	gyMajor.selectAll('text')
	.style('text-anchor', 'end')
	.attr('dy', '7px');

	var drawArea = svg.append('g')
	.attr('class', 'block')
	.attr('transform', 'translate(' + 20 + ', ' + height + ') scale(1, -1)');

	var backBlocks = drawArea
	.selectAll('rect.back')
	.data([64, 64, 64, 64])
	.enter()
	.append('rect')
	.attr('class', 'back')
	.style('width', width/5)
	.style('height', yVal)
	.style('x', function (d, i) { return x(i); });

	var frontBlocks = drawArea
	.selectAll('rect.front')
	.data([0,0,0,0])
	.enter()
	.append('rect')
	.attr('class', 'front')
	.style('width', width/5)
	.style('height', yVal)
	.style('x', function (d, i) { return x(i); });

	var newHeight = function (d, i) {
	var y = d3.event.clientY;
	d3.select(frontBlocks[0][i % 4]).style('height', height + margin.bottom - y);
	};

	var currentActiveBlock = false;

	drawArea.selectAll('rect')
	.on('mouseover', function (d, i) {
	d3.select(backBlocks[0][i % 4]).style('opacity', '0.5');
	})
	.on('mouseout', function () {
	backBlocks.style('opacity', '0');
	})
	.on('mousedown', function (d, i) {
	d3.select(backBlocks[0][i % 4]).style('opacity', '0.5');
	newHeight.call(this, d, i);
	currentActiveBlock = i % 4;
	})
	.on('mousemove', function (d, i) {
	if (currentActiveBlock === false) {
	return;
	}
	newHeight.call(this, d, currentActiveBlock);
	})
	.on('mouseup', function (d, i) {
	d3.select(frontBlocks[0][currentActiveBlock]).style('opacity', '1');
	newHeight.call(this, d, currentActiveBlock);
	currentActiveBlock = false;
	});
	body {
	font: 18px sans-serif;
	}

	svg {

	}

	.label text {
	font-weight: bold;
	}

	.y.axis path {
	display: none;
	}

	.x.axis path {
	fill: #333;
	}

	.axis line {
	shape-rendering: crispEdges;
	stroke: #333;
	stroke-width: 2px;
	}

	.axis.minor line {
	stroke-width: 1px;
	}

	.axis text {
	text-anchor: end;
	}

	.block rect {
	cursor: ns-resize;
	}

	.block rect.back {
	opacity: 0.0;
	fill: #ddd;
	}
	}

	.block rect.front {
	fill: #222;
	}