Skip to content

Instantly share code, notes, and snippets.

@tmcw
Created September 19, 2012 16:01
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save tmcw/3750490 to your computer and use it in GitHub Desktop.
Active Contributors to OSM Per Month
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
path.area {
fill: #c6dbef;
}
path.line {
stroke: steelblue;
fill: transparent;
}
text.title {
font:20px sans-serif;
fill: #222;
}
</style>
<body>
<script src="http://d3js.org/d3.v2.min.js?2.10.0"></script>
<script>
d3.json('unique.json', function(values) {
values = values.filter(function(v) {
return v[1] > 0;
}).map(function(v) {
return {
x: new Date(v[0] * 1000),
y: v[1]
};
});
var formatCount = d3.format(",.0f");
var margin = {top: 10, right: 50, bottom: 30, left: 30},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([
d3.min(values, function(d) { return d.x }),
d3.max(values, function(d) { return d.x })])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, d3.max(values, function(d) { return d.y; })])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.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 area = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return x(d.x); })
.y0(height)
.y1(function(d) { return y(d.y); });
var line = d3.svg.line()
.interpolate("monotone")
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
svg.append("text")
.attr({ x: 10, y: 20, 'class': 'title' })
.text('Active contributors to OpenStreetMap per Month');
svg.append("path")
.attr("class", "area");
svg.append("path")
.attr("class", "line");
d3.selectAll('path.area')
.data([values])
.attr('d', area);
d3.selectAll('path.line')
.data([values])
.attr('d', line);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + width + ", 0)")
.call(yAxis);
});
</script>
[[1072933200,0],[1075611600,0],[1078117200,0],[1080795600,0],[1083384000,0],[1086062400,0],[1088654400,0],[1091332800,0],[1094011200,0],[1096603200,0],[1099285200,0],[1101877200,0],[1104555600,0],[1107234000,0],[1109653200,0],[1112331600,4],[1114920000,5],[1117598400,8],[1120190400,16],[1122868800,21],[1125547200,11],[1128139200,21],[1130821200,37],[1133413200,42],[1136091600,49],[1138770000,47],[1141189200,52],[1143867600,81],[1146456000,97],[1149134400,90],[1151726400,104],[1154404800,123],[1157083200,129],[1159675200,148],[1162357200,189],[1164949200,241],[1167627600,269],[1170306000,321],[1172725200,418],[1175400000,490],[1177992000,598],[1180670400,821],[1183262400,869],[1185940800,1007],[1188619200,1276],[1191211200,1856],[1193889600,2105],[1196485200,2149],[1199163600,2565],[1201842000,2866],[1204347600,3196],[1207022400,3588],[1209614400,4825],[1212292800,5903],[1214884800,6466],[1217563200,7765],[1220241600,7131],[1222833600,6853],[1225512000,6828],[1228107600,6551],[1230786000,7779],[1233464400,7342],[1235883600,8851],[1238558400,10928],[1241150400,13920],[1243828800,12264],[1246420800,13396],[1249099200,15805],[1251777600,16409],[1254369600,14452],[1257048000,13701],[1259643600,11467],[1262322000,13338],[1265000400,12406],[1267419600,13680],[1270094400,14536],[1272686400,14237],[1275364800,14019],[1277956800,13620],[1280635200,15429],[1283313600,14338],[1285905600,13786],[1288584000,13894],[1291179600,14167],[1293858000,14828],[1296536400,14859],[1298955600,15842],[1301630400,17398],[1304222400,17342],[1306900800,18447],[1309492800,18239],[1312171200,16931],[1314849600,15437],[1317441600,16319],[1320120000,15659],[1322715600,15619],[1325394000,18314],[1328072400,15965],[1330578000,24487],[1333252800,21797],[1335844800,20536],[1338523200,20890],[1341115200,20374],[1343793600,21331],[1346472000,12312],[1349064000,0],[1351742400,0],[1354338000,0]]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment