ignorabilis/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>

</body>
</html>

## script.js
// to view and play just use jsbin - copy the url and replace 'github' with 'jsbin' to instantly view the code in action
// change width and height so that each chart adjusts automatically
// change dataset so that new values are automatically added
var w = 200;
var h = 100;
var padding = 2;
var simple_dataset = [5, 10, 15, 20, 25, 45];
var bar_chart = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
var step_chart = d3.select("body")
                    .append("div")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

var range_dataset = [{h: 5, r: 4}, {h: 10, r: 2}, {h: 15, r: 10},
                     {h: 20, r: 2}, {h: 25, r: 15}, {h: 45, r: 8}];
var range_chart = d3.select("body")
                    .append("div")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

function bar_factor (d) {
  return d * 1.5;
}

// simple bar chart
bar_chart.selectAll("rect")
    .data(simple_dataset)
    .enter()
    .append("rect")
    .attr("x", function (d, i){ return i * (w / simple_dataset.length); })
    .attr("y", function (d, i) { return h - bar_factor(d); })
    .attr("width", function (d, i){ return (w / simple_dataset.length) - padding; })
    .attr("height", function (d, i){ return bar_factor(d); });

// resembles a step chart
step_chart.selectAll("rect")
    .data(simple_dataset)
    .enter()
    .append("rect")
    .attr("x", function (d, i){ return i * (w / simple_dataset.length); })
    .attr("y", function (d, i) { return h - d; })
    .attr("width", function (d, i){ return (w / simple_dataset.length); })
    .attr("height", function (d, i){ return 2; });

// a "real" range chart
range_chart.selectAll("rect")
    .data(range_dataset)
    .enter()
    .append("rect")
    .attr("x", function (d, i){ return i * (w / range_dataset.length); })
    .attr("y", function (d, i) { return h - d.h; })
    .attr("width", function (d, i){ return (w / range_dataset.length) - padding * 2; })
    .attr("height", function (d, i){ return d.r; });
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>

	</body>
	</html>
	// to view and play just use jsbin - copy the url and replace 'github' with 'jsbin' to instantly view the code in action
	// change width and height so that each chart adjusts automatically
	// change dataset so that new values are automatically added
	var w = 200;
	var h = 100;
	var padding = 2;
	var simple_dataset = [5, 10, 15, 20, 25, 45];
	var bar_chart = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);
	var step_chart = d3.select("body")
	.append("div")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	var range_dataset = [{h: 5, r: 4}, {h: 10, r: 2}, {h: 15, r: 10},
	{h: 20, r: 2}, {h: 25, r: 15}, {h: 45, r: 8}];
	var range_chart = d3.select("body")
	.append("div")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	function bar_factor (d) {
	return d * 1.5;
	}

	// simple bar chart
	bar_chart.selectAll("rect")
	.data(simple_dataset)
	.enter()
	.append("rect")
	.attr("x", function (d, i){ return i * (w / simple_dataset.length); })
	.attr("y", function (d, i) { return h - bar_factor(d); })
	.attr("width", function (d, i){ return (w / simple_dataset.length) - padding; })
	.attr("height", function (d, i){ return bar_factor(d); });

	// resembles a step chart
	step_chart.selectAll("rect")
	.data(simple_dataset)
	.enter()
	.append("rect")
	.attr("x", function (d, i){ return i * (w / simple_dataset.length); })
	.attr("y", function (d, i) { return h - d; })
	.attr("width", function (d, i){ return (w / simple_dataset.length); })
	.attr("height", function (d, i){ return 2; });

	// a "real" range chart
	range_chart.selectAll("rect")
	.data(range_dataset)
	.enter()
	.append("rect")
	.attr("x", function (d, i){ return i * (w / range_dataset.length); })
	.attr("y", function (d, i) { return h - d.h; })
	.attr("width", function (d, i){ return (w / range_dataset.length) - padding * 2; })
	.attr("height", function (d, i){ return d.r; });