xxxxxxxxxx
<meta charset="utf-8">
<script src="//use.edgefonts.net/cabin.js"></script>
<style type="text/css">
table {
border-collapse: collapse;
font-size: 10px;
font-family: cabin, sans-serif;
width: 1000px;
}
th {
font-weight: normal;
text-align: right;
padding-right: 6px;
min-width: 43px;
}
thead td {
cursor: s-resize;
}
tbody tr:first-child td {
padding-top: 2px;
}
tbody td {
padding: 0;
border-left: solid 1px #000;
}
tbody rect {
fill: LightSeaGreen;
}
tbody tr:hover rect {
fill: orange;
}
</style>
<table>
<thead>
<tr>
<th>Country</th>
<td>Implementation Science</td>
<td>Impact Evaluations</td>
<td>Evaluation Studies</td>
<td>Economic Evaluations</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
//LOAD DATA
d3.csv("EvalRes.csv", function(error, EvalRes) {
if (error) throw error;
var ages = d3.keys(EvalRes[0]).filter(function(key) {
return key != "Country" && key != "Total";
});
d3.selectAll("thead td").data(ages).on("click", function(k) {
tr.sort(function(a, b) { return (b[k] / b.Total) - (a[k] / a.Total); });
});
var tr = d3.select("tbody").selectAll("tr")
.data(EvalRes)
.enter().append("tr");
tr.append("th")
.text(function(d) { return d.Country; });
tr.selectAll("td")
.data(function(d) { return ages.map(function(k) { return d[k] / d.Total; }); })
.enter().append("td").append("svg")
.attr("width", 100)
.attr("height", 20)
.append("rect")
.attr("height", 20)
.attr("width", function(d) { return d * 100; });
});
</script>
https://use.edgefonts.net/cabin.js
https://d3js.org/d3.v3.min.js