From 0ed8cb0725987c3ac576ee68f8cdb4f0e5e5116a Mon Sep 17 00:00:00 2001 From: Robin Kraft Date: Tue, 22 Oct 2013 18:26:24 -0700 Subject: [PATCH 1/2] Minor cleanup --- assets/js/graph.js | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/assets/js/graph.js b/assets/js/graph.js index 299d971..52b5a97 100644 --- a/assets/js/graph.js +++ b/assets/js/graph.js @@ -28,7 +28,7 @@ var parse = function(date_str) { }; var makeDataJSON = function(d) { - return {"date": parse(d.period), "color": d.color}}; + return {"iso":d.iso, "date": parse(d.period), "color": d.color}}; var setXDomain = function(data) { var max = d3.max(data, function(d) {return d.date}); @@ -46,7 +46,7 @@ var filter_data = function(rows, code) { }; var circles = function(dat) { - svg.selectAll("circle") + svg.selectAll(".circles") .data(dat) .enter() .append("svg:circle") @@ -94,23 +94,10 @@ d3.csv("assets/data/fcpr_final.csv", function(loadedRows) { dat = filter_data(loadedRows, "TRO"); // start with tropics updateName("TRO") // ditto circles(dat); + }); var svg = d3.select("#chart").append("svg:svg") .attr("width", w) .attr("height", h) .attr("id", "#chart-svg"); - -// svg.append("svg:rect") -// .attr("width", w-4).attr("height",h-4) -// .attr("fill", "rgb(255,255,255)"); - - -// xAxis = d3.svg.axis().scale(x).tickSize(-height).tickSubdivide(true); - - -// // Add the x-axis. -// svg.append("g") -// .attr("class", "x axis") -// .attr("transform", "translate(0," + height + ")") -// .call(xAxis); From ec75d04a0cf0bc96f556675949f62ae929917382 Mon Sep 17 00:00:00 2001 From: Robin Kraft Date: Tue, 22 Oct 2013 18:26:44 -0700 Subject: [PATCH 2/2] Gaudy graph list - ouch --- assets/js/graphlist.js | 137 +++++++++++++++++++++++++++++++++++++++++ index_list.html | 42 +++++++++++++ 2 files changed, 179 insertions(+) create mode 100644 assets/js/graphlist.js create mode 100644 index_list.html diff --git a/assets/js/graphlist.js b/assets/js/graphlist.js new file mode 100644 index 0000000..1f15f25 --- /dev/null +++ b/assets/js/graphlist.js @@ -0,0 +1,137 @@ +var color_map = {1:"red", + 2:"pink", + 3:"yellow", + 4:"green"}; + +var w=900, h=80, parser = d3.time.format("%Y-%m").parse; +x = d3.time.scale().range([0, w - 200]) + +var dat = []; +var rows, svg; +var countries = {}; + +var datedict = {0:"2008", 4:"2009", 8:"2010"}; + +var updateName = function(iso) { + d3.select("#namer").text(iso); +}; + +var parse = function(date_str) { + var year = date_str.slice(0, 4) + var quarter = parseInt(date_str.slice(-2, date_str.length)) + + // subtract two to get to first month of quarter + var start_month = (quarter * 3) - 2 + + return parser(year + "-" + start_month.toString()) +} + +var setXDomain = function(data) { + var max = d3.max(data, function(d) {return d.date}); + var min = d3.min(data, function(d) {return d.date}); + x.domain([min, max]); +} + +var setX = function(rows, code) { + // this is messy - goes through all data yet again + + var f = rows.filter(function(x) { return x.iso == code }) + var u = f.map(makeDataJSON); + setXDomain(u); + + return u +}; + +var makeDataJSON = function(d) { + return {"iso":d.iso, "date": parse(d.period), "color": d.color}} + + +var addCountryGraphDiv = function(iso) { + d3.select("#country-charts") + .append("div") + .attr("id", iso) + .append("div") + .text(countries[iso].name); +} + +var addAllCountries = function() { + Object.keys(countries).map(function(iso) { + addCountryGraphDiv(iso); + }) +} + +var addDataToCountries = function(data) { + data.map(function(d) { + d3.select("#" + d.iso) + .append("div") + .text(d.period); + }) +} + +var makeChart = function(iso) { + svg = d3.select("#" + iso).append("svg:svg") + .attr("width", w) + .attr("height", h) + .attr("id", "#" + iso + "-svg"); + + return svg +} + +var addCircles = function(d) { + svg.selectAll(".circles") + .data(d) + .enter() + .append("svg:circle") + .attr("class", d.iso + "-circle") + .attr("cx", function(d) { return x(d.date) + 10; }) + .attr("cy", function(d) { return 20; }) + .attr("r", 8) + .attr("fill", function(d) { return d.color }); +} + +var makeCircle = function(d) { + d3.select("#" + d.iso + "-svg") + .data(d) + .enter() + .append("svg:circle"); +} + +var updateCountriesData = function(d) { + //same as makeDataJSON + countries[d.iso].data.push({"iso":d.iso, "date": parse(d.period), "color": color_map[d.score]}) +} + +d3.csv("assets/data/fcpr_final.csv", function(loadedRows) { + loadedRows.map(function(d) { if (d.iso == "CIV") // fix circumflex on 'o' + { + d.country = "Côte d'Ivoire" + } + countries[d.iso] = {"name":d.country, "data":[]} +// updateCountriesData(d); + }); + loadedRows.map(function(d) {updateCountriesData(d)}); + rows = loadedRows; + rows.map(function(d) { + d.x = x(parse(d.period)); + d.color = color_map[d.score]; + }); +// dat = filter_data(loadedRows, "TRO"); // start with tropics +// updateName("TRO") // ditto +// circles(dat); + + addAllCountries(); +//addDataToCountries(rows); + setX(loadedRows, "AFR") +// svg = makeChart("AFR"); + + + Object.keys(countries).map(function(iso) { + svg = makeChart(iso); + addCircles(countries[iso].data); + }) + + + //addCircles(countries["AFR"].data); +//loadedRows.map(); + +}); diff --git a/index_list.html b/index_list.html new file mode 100644 index 0000000..6020c89 --- /dev/null +++ b/index_list.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+
+
+
+
+
+ + + + + +