steckel/barchart.html

## barchart.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

</style>
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var data = [4, 8, 15, 16, 23, 42];

var width = 420,
    barHeight = 20;

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

var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", barHeight * data.length);

var bar = chart.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 1);

bar.append("text")
    .attr("x", function(d) { return x(d) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d; });

</script>

## one.swift
import UIKit

let data = [4, 8, 15, 16, 23, 42]

let barHeight : CGFloat = 20.0
let chartWidth : CGFloat = 420.0
let chartHeight : CGFloat = barHeight * CGFloat(data.count)

let maxValue : Int = data.reduce(0, { max($0, $1) })
func domain(datum: Int) -> CGFloat {
  let multiplier = chartWidth / CGFloat(maxValue)
  return CGFloat(datum) * multiplier
}

let chartFrame = CGRectMake(0, 0, chartWidth, chartHeight)
var chart = UIView(frame: chartFrame)

var groups : Array<UIView> = Array()
for (index, datum) in enumerate(data) {
  var width : CGFloat = domain(datum)
  let barFrame = CGRectMake(0, barHeight * CGFloat(index), width, barHeight)
  let group = UIView(frame: barFrame)
  chart.addSubview(group)
  groups.append(group)
}

for (index, datum) in enumerate(data) {
  var group : UIView = groups[index]
  var width : CGFloat = domain(datum)
  var frame = CGRectMake(0,0, width, CGRectGetHeight(group.frame) - 1)
  let rect = UIView(frame: frame)
  rect.backgroundColor = UIColor(
    red: 67/256,
    green: 129/256,
    blue: 182/256,
    alpha: 1.0
  )
  group.addSubview(rect)
}

for (index, datum) in enumerate(data) {
  var group : UIView = groups[index]
  var label = UILabel()
  label.text = String(datum)
  label.font = UIFont.systemFontOfSize(12.0)
  label.textAlignment = NSTextAlignment.Right
  label.textColor = UIColor.whiteColor()
  label.sizeToFit()
  label.frame = CGRectMake(
    CGRectGetMaxX(group.frame) - CGRectGetWidth(label.frame) - 3,
    0,
    CGRectGetWidth(label.frame),
    CGRectGetHeight(group.frame)
  )
  group.addSubview(label)
}

chart

## two.swift
import UIKit

let data = [4, 8, 15, 16, 23, 42]

let barHeight = 20
let chartWidth = 420
let chartHeight = barHeight * data.count
let maxValue = data.reduce(0, combine: {max($0, $1)})

let frame = CGRect(x: 0, y: 0, width: 500, height: chartHeight)
let chart = UIView(frame: frame)

let groups = (0..<data.count).map {
  (i: Int) -> UIView in
  let frame = CGRect(
    x: 0,
    y: i * barHeight,
    width: chartWidth,
    height: barHeight
  )
  let group = UIView(frame: frame)
  chart.addSubview(group)
  return group
}

let bars = (0..<groups.count).map {
  (i: Int) -> UIView in
  let group = groups[i]
  let datum = data[i]
  let frame = CGRect(
    x: 0,
    y: 0,
    width: (chartWidth / maxValue) * datum,
    height: barHeight - 1
  )
  let bar = UIView(frame:frame)
  bar.backgroundColor = UIColor(
    red: 67/256,
    green: 129/256,
    blue: 182/256,
    alpha: 1.0
  )
  group.addSubview(bar)
  return bar;
}

let labels = (0..<bars.count).map {
  (i: Int) -> UIView in
  let bar = bars[i]
  let datum = data[i]
  let label = UILabel()
  label.text = "\(datum)"
  label.font = UIFont.systemFontOfSize(12)
  label.textColor = UIColor.whiteColor()
  label.sizeToFit()
  let y = (CGRectGetHeight(bar.frame) - CGRectGetHeight(label.frame)) / 2
  label.frame = CGRect(
    x: CGRectGetMaxX(bar.frame) - CGRectGetWidth(label.frame) - 5,
    y: y,
    width: CGRectGetWidth(label.frame),
    height: CGRectGetHeight(label.frame)
  )
  bar.addSubview(label)
  return label;
}

chart
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.chart rect {
	fill: steelblue;
	}

	.chart text {
	fill: white;
	font: 10px sans-serif;
	text-anchor: end;
	}

	</style>
	<svg class="chart"></svg>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var data = [4, 8, 15, 16, 23, 42];

	var width = 420,
	barHeight = 20;

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

	var chart = d3.select(".chart")
	.attr("width", width)
	.attr("height", barHeight * data.length);

	var bar = chart.selectAll("g")
	.data(data)
	.enter().append("g")
	.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

	bar.append("rect")
	.attr("width", x)
	.attr("height", barHeight - 1);

	bar.append("text")
	.attr("x", function(d) { return x(d) - 3; })
	.attr("y", barHeight / 2)
	.attr("dy", ".35em")
	.text(function(d) { return d; });

	</script>
	import UIKit

	let data = [4, 8, 15, 16, 23, 42]

	let barHeight : CGFloat = 20.0
	let chartWidth : CGFloat = 420.0
	let chartHeight : CGFloat = barHeight * CGFloat(data.count)

	let maxValue : Int = data.reduce(0, { max($0, $1) })
	func domain(datum: Int) -> CGFloat {
	let multiplier = chartWidth / CGFloat(maxValue)
	return CGFloat(datum) * multiplier
	}

	let chartFrame = CGRectMake(0, 0, chartWidth, chartHeight)
	var chart = UIView(frame: chartFrame)

	var groups : Array<UIView> = Array()
	for (index, datum) in enumerate(data) {
	var width : CGFloat = domain(datum)
	let barFrame = CGRectMake(0, barHeight * CGFloat(index), width, barHeight)
	let group = UIView(frame: barFrame)
	chart.addSubview(group)
	groups.append(group)
	}

	for (index, datum) in enumerate(data) {
	var group : UIView = groups[index]
	var width : CGFloat = domain(datum)
	var frame = CGRectMake(0,0, width, CGRectGetHeight(group.frame) - 1)
	let rect = UIView(frame: frame)
	rect.backgroundColor = UIColor(
	red: 67/256,
	green: 129/256,
	blue: 182/256,
	alpha: 1.0
	)
	group.addSubview(rect)
	}

	for (index, datum) in enumerate(data) {
	var group : UIView = groups[index]
	var label = UILabel()
	label.text = String(datum)
	label.font = UIFont.systemFontOfSize(12.0)
	label.textAlignment = NSTextAlignment.Right
	label.textColor = UIColor.whiteColor()
	label.sizeToFit()
	label.frame = CGRectMake(
	CGRectGetMaxX(group.frame) - CGRectGetWidth(label.frame) - 3,
	0,
	CGRectGetWidth(label.frame),
	CGRectGetHeight(group.frame)
	)
	group.addSubview(label)
	}

	chart
	import UIKit

	let data = [4, 8, 15, 16, 23, 42]

	let barHeight = 20
	let chartWidth = 420
	let chartHeight = barHeight * data.count
	let maxValue = data.reduce(0, combine: {max($0, $1)})

	let frame = CGRect(x: 0, y: 0, width: 500, height: chartHeight)
	let chart = UIView(frame: frame)

	let groups = (0..<data.count).map {
	(i: Int) -> UIView in
	let frame = CGRect(
	x: 0,
	y: i * barHeight,
	width: chartWidth,
	height: barHeight
	)
	let group = UIView(frame: frame)
	chart.addSubview(group)
	return group
	}

	let bars = (0..<groups.count).map {
	(i: Int) -> UIView in
	let group = groups[i]
	let datum = data[i]
	let frame = CGRect(
	x: 0,
	y: 0,
	width: (chartWidth / maxValue) * datum,
	height: barHeight - 1
	)
	let bar = UIView(frame:frame)
	bar.backgroundColor = UIColor(
	red: 67/256,
	green: 129/256,
	blue: 182/256,
	alpha: 1.0
	)
	group.addSubview(bar)
	return bar;
	}

	let labels = (0..<bars.count).map {
	(i: Int) -> UIView in
	let bar = bars[i]
	let datum = data[i]
	let label = UILabel()
	label.text = "\(datum)"
	label.font = UIFont.systemFontOfSize(12)
	label.textColor = UIColor.whiteColor()
	label.sizeToFit()
	let y = (CGRectGetHeight(bar.frame) - CGRectGetHeight(label.frame)) / 2
	label.frame = CGRect(
	x: CGRectGetMaxX(bar.frame) - CGRectGetWidth(label.frame) - 5,
	y: y,
	width: CGRectGetWidth(label.frame),
	height: CGRectGetHeight(label.frame)
	)
	bar.addSubview(label)
	return label;
	}

	chart