Skip to content

Instantly share code, notes, and snippets.

@steckel
Last active August 29, 2015 14:17
Show Gist options
  • Save steckel/22abb041c3dcd1569a66 to your computer and use it in GitHub Desktop.
Save steckel/22abb041c3dcd1569a66 to your computer and use it in GitHub Desktop.
Swift playgrounds inspired by http://bost.ocks.org/mike/bar/2/
<!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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment