script.js
var addGraph, getDimensions, getLabelColor, getMonthEnd, height, labels, loadJson, margin, monthFormat, msgErr, parseDate, registerRandomLabelColor, root, splitCamel, splitNationality, timeFormat, width, x, xAxis, xMonth, xYear, y, yAxis, yearFormat;
splitCamel = function(s) {
return s.replace(/([A-Z])/g, ' $1').replace(/^./, function(str) {
return str.toUpperCase();
});
};
splitNationality = function(s) {
return s.split('_').map(function(part) {
return splitCamel(part);
});
};
msgErr = function(text) {
return d3.select('.errors').append('li').text(text);
};
getDimensions = function(selection, prop) {
var box;
box = selection.node().getBBox();
if ((prop != null) && (box[prop] != null)) {
return box[prop];
} else {
return box;
}
};
root = d3.select('#root');
margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
};
width = 960 - margin.left - margin.right;
height = 450 - margin.top - margin.bottom;
d3.select('#root').attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom);
timeFormat = d3.time.format('%Y-%m-%d');
monthFormat = d3.time.format('%b');
yearFormat = d3.time.format('%Y');
parseDate = function(dstr) {
return timeFormat.parse(dstr);
};
getMonthEnd = function(date) {
var end;
if (!(date instanceof Date)) {
date = parseDate(date);
}
return end = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1);
};
loadJson = function(url, cb, errCb) {
return d3.json(url, function(err, json) {
if (err) {
msgErr("Error loading " + url + ": " + err);
errCb && errCb(url, err);
}
if (json) {
console.log('json?', json);
return cb(url, json);
}
});
};
x = d3.time.scale().range([0, width]);
y = d3.scale.linear().range([height, 0]);
xAxis = d3.svg.axis().scale(x).orient('bottom').tickFormat(monthFormat);
yAxis = d3.svg.axis().scale(y).tickSize(5, 0).orient('left');
xMonth = d3.svg.axis().scale(x).tickFormat(monthFormat).tickSize(5, 0).orient("bottom");
xYear = d3.svg.axis().scale(x).ticks(d3.time.years, 1).tickFormat(yearFormat).tickSize(5, 0).orient("bottom");
addGraph = function() {
return d3.select('#root').append('g').attr('class', 'graph');
};
labels = {};
registerRandomLabelColor = function(category, label) {
if (labels[category] == null) {
labels[category] = {};
}
return labels[category][label] = "hsl(" + Math.random() * 360 + ",100%,50%)";
};
getLabelColor = function(category, label) {
var ref;
return labels != null ? (ref = labels.category) != null ? ref.label : void 0 : void 0;
};
loadJson('registrations.json', function(url, json) {
var area, axisLabels, group;
axisLabels = {};
json.forEach(function(d) {
d.date = parseDate(d.date);
d.registrationCount = parseInt(d.count, 10);
axisLabels.x = 'Date';
return axisLabels.y = 'Registration Count';
});
x.domain(d3.extent(json, function(d) {
return d.date;
}));
y.domain([
0, d3.max(json, function(d) {
return d.registrationCount;
})
]);
area = d3.svg.area().x(function(d) {
return x(d.date);
}).y0(height).y1(function(d) {
return y(d.registrationCount);
});
group = d3.select('#root').append('g').attr('class', 'graph');
group.append("path").datum(json).attr("class", "area").attr("d", area);
group.append("text").attr('class', 'title').text('Syrian Refugee Registration').attr('x', 200).attr('y', 20);
group.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xMonth);
group.append("g").attr("class", "x axis").attr("transform", "translate(0," + (height + 25) + ")").call(xYear);
return group.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style("text-anchor", "end").text(axisLabels.y);
});
loadJson('cash-truncated.json', function(url, json) {
return json.forEach(function(d) {
var date, end, key, name, nationalityMemo, parts, start, value;
date = d.date;
start = parseDate(date);
end = getMonthEnd(start);
delete d.date;
nationalityMemo = {};
for (key in d) {
value = d[key];
parts = splitNationality(key);
if (nationalityMemo[name = parts[0]] == null) {
nationalityMemo[name] = [];
}
nationalityMemo[parts[0]].push({
count: parseInt(value, 10),
status: '',
nationality: parts[0],
status: parts[1],
title: parts.join(' ')
});
}
registerRandomLabelColor(url, parts.join(' '));
d.startDate = parseDate(date);
d.endDate = getMonthEnd(d.startDate);
return d;
});
});
cash-truncated.json
[{"date":"2014-07-01","syrian":"20411","syrian_waitlist":"8401","iraqi":"2003","otherNationalityCases":"223"},{"date":"2014-08-01","syrian":"20351","syrian_waitlist":"7490","iraqi":"1984","otherNationalityCases":"221"},{"date":"2014-09-01","syrian":"20273","syrian_waitlist":"6164","iraqi":"1950","otherNationalityCases":"230"},{"date":"2014-10-01","syrian":"20492","syrian_waitlist":"7828","iraqi":"1969","otherNationalityCases":"231"},{"date":"2014-11-01","syrian":"21000","syrian_waitlist":"4367","iraqi":"1959","otherNationalityCases":"234"},{"date":"2014-12-01","syrian":"21000","syrian_waitlist":"9971","iraqi":"1959","otherNationalityCases":"241","nonsyrian_waitlist":"1942","syrian_winterizeOnce":6070,"iraqi_winterizeOncePostIsis":6070},{"date":"2015-01-01","syrian":"21022","syrian_waitlist":"12011","iraqi":"1961","otherNationalityCases":"247","nonsyrian_waitlist":"2171","syrian_winterizeOnce":2070},{"date":"2015-02-01","syrian":"20349","syrian_waitlist":"15928","iraqi":"1929","otherNationalityCases":"276","nonsyrian_waitlist":"2125"},{"date":"2015-03-01","syrian":"21499","syrian_waitlist":"11642","iraqi":"1920","otherNationalityCases":"280","nonsyrian_waitlist":"952"},{"date":"2015-04-01","syrian":"22000","syrian_waitlist":"3196","iraqi":"2127","otherNationalityCases":"273","nonsyrian_waitlist":"647"},{"date":"2015-05-01","syrian":"22000","syrian_waitlist":"3196","iraqi":"2127","otherNationalityCases":"273","nonsyrian_waitlist":"647"},{"date":"2015-06-01","syrian":"22500","syrian_waitlist":"9753","iraqi":"2107","otherNationalityCases":"293","nonsyrian_waitlist":"248"},{"date":"2015-07-01","syrian":"22514","syrian_waitlist":"9753","iraqi":"2108","otherNationalityCases":"292","nonsyrian_waitlist":"248"}]