.viz-container { font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;}.chart { width: 100%; height: 600px;}.grid { width: 100%; margin: 0;}.table-striped { position: relative; width: 100%; font-size: 14px; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; margin-bottom: 1em;}.table-striped th,td { padding: 0.5em 1em;}.table-striped thead th { border-bottom: 1px solid #e6e6e6;}.table-striped tbody tr:nth-child(odd) td { background: #f9f9f9;}.table-striped tbody td { border-bottom: 1px solid #e6e6e6; text-align: left; vertical-align: top;}.footer { margin: 10px 0 0 0; font-size: 0.9em;}.altered-select-item { font-size: 1em; float: left; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; font-weight: 700; width: 100%;}.altered-select-item dt { padding-right: 0.5em; color: #666666 !important; margin-left: 0; text-transform: none; margin: 0 0 0.25em 0;}.option-select { font-size: 17px; line-height: 145%; color: rgb(34, 34, 34); border: 1px solid rgb(204, 204, 204); padding: 2px 4px;}.definitions { font-size: 0.8em; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;}.definitions dt { font-weight: bold; margin: 0 0 1px 0;}.definitions dd { margin: 0 0 6px 0;}.flatpage-footer { font-size: 0.95em; display: block; margin: 10px 0 0 0;}@media screen and (max-width: 799px) { input[type=”text”] { margin-bottom: 5px; } .altered-select-item { float: none; } .altered-select-item dt { margin-top: 0.5em; }}@media screen and (max-width: 767px) { .option-select { width: 100%; }}

(function(data) {var cocModel = Backbone.Model.extend({ parse: function(res) { res.id = +res.id; _.each(res, function(v,k) { if (k.indexOf(‘total’) !== -1) { res[k] = +v; } }); return res; }, getTotalsByType: function(type) { var self = this; var range = _.range(2007, 2014); return _.map(range, function(r) { return +self.get(type + ‘_’ + r); }); }, getTotalsByYear: function(year) { var data = this.toJSON(); return { total_homeless: _.isNaN(data[‘total_homeless_’ + year]) ? ‘N/A’ : data[‘total_homeless_’ + year], total_sheltered: _.isNaN(data[‘total_sheltered_’ + year]) ? ‘N/A’ : data[‘total_sheltered_’ + year], total_unsheltered: _.isNaN(data[‘total_unsheltered_’ + year]) ? ‘N/A’ : data[‘total_unsheltered_’ + year], total_chronically_homeless: _.isNaN(data[‘total_chronically_homeless_’ + year]) ? ‘N/A’ : data[‘total_chronically_homeless_’ + year], }; }}); var cocCollection = Backbone.Collection.extend({ model: cocModel, comparator: ‘name’, url: ‘../data.json’}); var OptionControlView = Backbone.View.extend({ el: ‘#option-select’, events: { ‘change’: ‘changeDisplay’ }, initialize: function() { this.currentVal = this.$el.val(); }, changeDisplay: function(e) { var val = this.currentVal = this.$el.val(); var model = cocs.findWhere({name: val}); activeModel.set(model); }, getCurrentVal: function() { return this.currentVal; }});var ChartControlView = Backbone.View.extend({ el: ‘#type-select’, events: { ‘change’: ‘changeType’ }, initialize: function() { this.currentVal = this.$el.val(); }, changeType: function(e) { var val = this.currentVal = this.$el.val(); chartView.render(); }, getCurrentVal: function() { return this.currentVal; }});var RowView = Backbone.View.extend({ tagName: ‘tr’, template: _.template($(‘#row-template’).html()), initialize: function(options) { this.year = options.year; }, render: function() { var data = _.extend({}, {year: this.year}, this.model.getTotalsByYear(this.year)); this.$el.html(this.template(data)); return this; }});var TableView = Backbone.View.extend({ el: ‘#data-container’, initialize: function() { this.listenTo(activeModel, ‘add’, this.render); }, render: function() { var payload = []; var years = _.range(2007, 2014); _.each(years, function(year) { var view = new RowView({model: activeModel.at(0), year: year}); payload.push(view.render().el); }); this.$el.html(payload); }});var ChartView = Backbone.View.extend({ el: ‘#chart’, labels: [‘2007’, ‘2008’, ‘2009’, ‘2010’, ‘2011’, ‘2012’, ‘2013’], initialize: function() { this.listenTo(activeModel, ‘add’, this.render); }, render: function() { var data = activeModel.at(0).getTotalsByType(chartControlView.getCurrentVal()); this.prepareChart(data); }, prepareChart: function(data) { var parentWidth = this.$el.parent().width(); this.$el.attr({width: parentWidth, height: 300}); this.chart = new Chart(this.el.getContext(‘2d’)); var top = ceiling(_.max(data)); this.chart.Line({ labels: _.first(this.labels, _.filter(data, function(d) { return d; }).length), datasets: [{ fillColor: “rgba(177, 33, 37, 0.5)”, strokeColor: “rgb(177, 33, 37)”, pointColor: “rgb(177, 33, 37)”, pointStrokeColor : “#fff”, data: data }] },{ scaleFontFamily: “‘Helvetica’, ‘Arial’, sans-serif”, scaleOverride: true, scaleStartValue: 0, scaleSteps: 10, scaleStepWidth: top/10 }); }});function ceiling(n) { var mixin = 1000; if (n < 1000) { mixin = 100; } if (n < 100) { mixin = 10; } var rounded = Math.ceil(n/mixin) * mixin; return rounded;}var cocs = new cocCollection();cocs.reset(data);var activeModel = new Backbone.Collection();var tableView = new TableView();var optionView = new OptionControlView();var chartControlView = new ChartControlView();var chartView = new ChartView({collection: cocs});// ze bootstrapactiveModel.set(cocs.findWhere({name: optionView.getCurrentVal()}));})(data);function commas(x) { return x.toString().replace(/B(?=(d{3})+(?!d))/g, “,”);}