Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: graphs for all countries #13

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

WIP: graphs for all countries #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0ed8cb0
Minor cleanup
robinkraft Oct 23, 2013
ec75d04
Gaudy graph list - ouch
robinkraft Oct 23, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 3 additions & 16 deletions assets/js/graph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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});
Expand All @@ -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")
Expand Down Expand Up @@ -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);
137 changes: 137 additions & 0 deletions assets/js/graphlist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();

});
42 changes: 42 additions & 0 deletions index_list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">

<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="assets/css/globestyle.css" rel="stylesheet">
</head>

<body>

<!-- style="border-style:solid;" -->
<div class="row show-grid pageheader" style="margin: 20px;">
<!-- <h2 style="font-weight:bold;">Forest Conservation Performance Index -->
<!-- <small> -->
<!-- <i class="icon-github"></i> -->
<!-- <i class="icon-twitter"></i> -->
<!-- <i class="icon-envelope"></i> -->
<!-- </small> -->
<!-- </h2> -->
<!-- <div id="desc"> -->
<!-- <p style="width:900px;"> -->
<!-- The goal of fCPR is to indicate problem areas where focused -->
<!-- attention may promote more rapid progress against -->
<!-- deforestation. Reports will be published annually as working -->
<!-- papers; interim findings and updates to the data will be -->
<!-- posted to this page and announced to subscribers through our -->
<!-- climate change newsletter. -->
<!-- </p> -->
<!-- </div> -->
<div id="chart">
<div id="namer"></div>
</div>
<div id="map"></div>
<div id="country-charts"></div>
</div>
</body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="assets/js/graphlist.js"></script>