block by nmu da1c086e30a0174232a9

d3.unconf 2015

Full Screen

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;
  });
});

//# sourceMappingURL=script.js.map

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="styles.css">

</head>
<body>
  <aside class="messages">
    <ul class="errors"></ul>
  </aside>
  <svg id="root"></svg>

  <footer>
    <strong>Sources:</strong>
    <ul>
      <li>
        <b>Registration</b><br/>
        "Registered Syrian Refugees - chart.csv"
        //data.unhcr.org/syrianrefugees/regional.php
      </li>
      <li>
        <b>Cash Assistance</b><br/>
        "CashAssistanceDashboard_JO_July2015.pdf"
        Scraped
        //data.unhcr.org/syrianrefugees/regional.php
      </li>
    </ul>
  </footer>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>

  <script src="script.js"></script>
</body>
</html>

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"}]

styles.css

body {
  margin: 20px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

#root {
  margin: 20px;
  padding: 0 20px 0 80px; }

.graph {
  width: 100%;
  height: 100%;
  fill: #666;
  margin: 0 20px 0 80px; }

.area {
  fill: #a1d99b; }

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges; }

.title {
  font-size: 1.5em;
  font-weight: bold;
  text-anchor: middle;
  transform: translate(100); }

footer {
  margin-top: 20px; }