Reputation: 186
queue()
.defer(d3.json, "/uganda/report")
.defer(d3.json, "static/geojson/uganda_districts.json")
.await(makeGraphs);
function makeGraphs(error, reportJson,districtsJson){
//Clean reportJson data
var ugandaReport = reportJson;
var dateFormat = d3.time.format("%d/%m/%Y");
ugandaReport.forEach(function(d) {
d["EVENT_DATE"] = dateFormat.parse(d["EVENT_DATE"]);
d["EVENT_DATE"].setDate(1);
d["FATALITIES"] = +d["FATALITIES"];
});
//Create a Crossfilter instance
var ndx = crossfilter(ugandaReport);
//Define Dimensions
var dateDim = ndx.dimension(function(d) { return d["EVENT_DATE"]; });
var actorsDim = ndx.dimension(function(d) { return d["ACTOR1"]; });
var sourceDim = ndx.dimension(function(d) { return d["SOURCE"]; });
var DistrictDim = ndx.dimension(function(d) { return d["LOCATION"]; });
var totalFatalitiesDim = ndx.dimension(function(d) { return d["FATALITIES"];
});
//Calculate metrics
var numActorsByDate = dateDim.group();
var numFatalitiesByActorsType = actorsDim.group();
var numReportsBySource = sourceDim.group();
var totalFatalitiesByDistrict = DistrictDim.group().reduceSum(function(d) {
return d["FATALITIES"];
});
var all = ndx.groupAll();
var totalfatalities = ndx.groupAll().reduceSum(function(d) {return d["FATALITIES"];});
var max_dist = totalFatalitiesByDistrict.top(1)[0].value;
//Define values (to be used in charts)
var minDate = dateDim.bottom(1)[0]["EVENT_DATE"];
var maxDate = dateDim.top(1)[0]["EVENT_DATE"];
//Charts
var timeChart = dc.barChart("#time-chart");
var actorsTypeChart = dc.rowChart("#actors-type-row-chart");
var sourceLevelChart = dc.rowChart("#source-level-row-chart");
var ugChart = dc.geoChoroplethChart("#ug-chart");
var numberActorsND = dc.numberDisplay("#actors-projects-nd");
var totalFatalitiesND = dc.numberDisplay("#total-fatalities-nd");
numberActorsND
.formatNumber(d3.format("d"))
.valueAccessor(function(d){return d; })
.group(all);
totalFatalitiesND
.formatNumber(d3.format("d"))
.valueAccessor(function(d){return d; })
.group(totalfatalities)
.formatNumber(d3.format(".3s"));
timeChart
.width(600)
.height(160)
.margins({top: 10, right: 50, bottom: 30, left: 50})
.dimension(dateDim)
.group(numActorsByDate)
.transitionDuration(500)
.x(d3.time.scale().domain([minDate, maxDate]))
.elasticY(true)
.xAxisLabel("Year")
.yAxis().ticks(4);
actorsTypeChart
.width(300)
.height(250)
.dimension(actorsDim)
.group(numFatalitiesByActorsType)
.xAxis().ticks(4);
sourceLevelChart
.width(300)
.height(250)
.dimension(sourceDim)
.group(numReportsBySource)
.xAxis().ticks(4);
ugChart.width(1000)
.height(330)
.dimension(stateDim)
.group(totalFatalitiesByDistrict)
.colors(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"])
.colorDomain([0, max_dist])
.overlayGeoJson(districtsJson["features"], "districts", function (d) {
return d.properties.name;
})
.projection(d3.geo.albers()
.scale(600)
.translate([340, 150]))
.title(function (p) {
return "District: " + p["key"]
+ "\n"
+ "Total Fatalities: " + Math.round(p["value"]) + " $";
})
dc.renderAll();
};
That's my js file. It get's the json data from the url("/uganda/report") above. When i navigate to the url i can see the json but for some reason the app has failed to display the graphs or map and is pushing out
Uncaught TypeError: Cannot read property 'forEach' of undefined
to the console. Am newbie to d3 so any assistance would be greatly appreciated.
This is some of the json i get for my "/uganda/report"
[{"SOURCE": "Africa Research Bulletin Vol. 34 No. 1, 1997", "FATALITIES": 4, "LOCATION": "Gulu", "ACTOR1": "Military Forces of Uganda (1986-)", "YEAR": 1997, "EVENT_DATE": "01/01/1997"}, {"SOURCE": "Africa Research Bulletin Vol. 34 No. 1, 1997", "FATALITIES": 5, "LOCATION": "Buganda", "ACTOR1": "Military Forces of Uganda (1986-)", "YEAR": 1997, "EVENT_DATE": "01/01/1997"}, {"SOURCE": "BBC Monitoring Service: Africa (10/01/97)", "FATALITIES": 5, "LOCATION": "Nyabani", "ACTOR1": "Military Forces of Uganda (1986-)", "YEAR": 1997, "EVENT_DATE": "07/01/1997"}, {"SOURCE": "BBC Monitoring Service: Africa (11/01/97)", "FATALITIES": 2, "LOCATION": "Kasese", "ACTOR1": "Military Forces of Uganda (1986-)", "YEAR": 1997, "EVENT_DATE": "08/01/1997"}, {"SOURCE": "The New York Times (5/3/97)", "FATALITIES": 0, "LOCATION": "Acholi-Bur", "ACTOR1": "LRA: Lord's Resistance Army", "YEAR": 1997, "EVENT_DATE": "11/01/1997"}, {"SOURCE": "Africa Research Bulletin Vol. 34 No. 1, 1997", "FATALITIES": 16, "LOCATION": "Kitgum", "ACTOR1": "LRA: Lord's Resistance Army", "YEAR": 1997, "EVENT_DATE": "01/02/1997"}, {"SOURCE": "Africa Research Bulletin Vol. 34 No. 2, 1997", "FATALITIES": 8, "LOCATION": "Pader", "ACTOR1": "LRA: Lord's Resistance Army", "YEAR": 1997, "EVENT_DATE": "01/02/1997"}, {"SOURCE": "BBC Monitoring Service: Africa (17/2/97)", "FATALITIES": 0, "LOCATION": "Moyo", "ACTOR1": "Military Forces of Sudan (1989-)", "YEAR": 1997, "EVENT_DATE": "13/02/1997"}, {"SOURCE": "Reuters News (16/2/97)", "FATALITIES": 3, "LOCATION": "Gulu", "ACTOR1": "LRA: Lord's Resistance Army", "YEAR": 1997, "EVENT_DATE": "16/02/1997"}]
Upvotes: 0
Views: 2594