Skip to content

Instantly share code, notes, and snippets.

@oliverswitzer

oliverswitzer/barchart_update.rb

Created March 5, 2014 19:45
Show Gist options
  • Save oliverswitzer/9375040 to your computer and use it in GitHub Desktop.
Save oliverswitzer/9375040 to your computer and use it in GitHub Desktop.
Download ZIP
Updated working (sort of) barchart for BetaNYC Timeline Group!
Raw
barchart_update.rb
<html>
<head>
<style>
.bar {
fill: steelblue;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Barchart of Events</h1>
<svg class="barchart"></svg>
</div>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var data = [{
year: 1974,
value: 2
}, {
year: 1975,
value: 0
}, {
year: 1976,
value: 0
}, {
year: 1977,
value: 0
}, {
year: 1978,
value: 0
}, {
year: 1979,
value: 0
}, {
year: 1980,
value: 0
}, {
year: 1981,
value: 0
}, {
year: 1982,
value: 0
}, {
year: 1983,
value: 0
}, {
year: 1984,
value: 0
}, {
year: 1985,
value: 0
}, {
year: 1986,
value: 0
}, {
year: 1987,
value: 0
}, {
year: 1988,
value: 0
}, {
year: 1989,
value: 0
}, {
year: 1990,
value: 0
}, {
year: 1991,
value: 0
}, {
year: 1992,
value: 0
}, {
year: 1993,
value: 2
}, {
year: 1994,
value: 0
}, {
year: 1995,
value: 0
}, {
year: 1996,
value: 0
}, {
year: 1997,
value: 0
}, {
year: 1998,
value: 0
}, {
year: 1999,
value: 0
}, {
year: 2000,
value: 0
}, {
year: 2001,
value: 1
}, {
year: 2002,
value: 3
}, {
year: 2003,
value: 2
}, {
year: 2004,
value: 0
}, {
year: 2005,
value: 1
}, {
year: 2006,
value: 2
}, {
year: 2007,
value: 0
}, {
year: 2008,
value: 1
}, {
year: 2009,
value: 11
}, {
year: 2010,
value: 4
}, {
year: 2011,
value: 4
}, {
year: 2012,
value: 10
}, {
year: 2013,
value: 21
}];
xRange = ["1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"]
yRange = [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 3, 2, 0, 1, 2, 0, 1, 11, 4, 4, 10, 21]
var width = 1000,
height = 600;
var barWidth = width/xRange.length;
var x = d3.scale.ordinal()
.domain(xRange)
.range(yRange);
var y = d3.scale.linear()
.range([height, 0])
.domain([0, d3.max(data, function (d) {
return d.value;
})]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var chart = d3.select(".barchart")
.attr("width", width)
.attr("height", height);
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.call(yAxis);
chart.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d, i) {
return i*barWidth;
})
.attr("y", function (d) {
return y(d.value);
})
.attr("height", function (d) {
return height - y(d.value);
})
.attr("width", barWidth)
.attr("stroke", "black");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment