|
<!DOCTYPE html> |
|
<html> |
|
<meta charset="utf-8"> |
|
|
|
<head> |
|
</head> |
|
<!-- <script type="text/javascript" src="d3.min.js" charset="utf-8"></script> --> |
|
<body> |
|
|
|
<script src="https://d3js.org/d3.v4.js"></script> |
|
<!--<div id="chart" style="float:left"></div>--> |
|
<div id="d3space"></div> |
|
<script type="text/javascript"> |
|
|
|
var margin = {top: 10, right: 30, bottom: 30, left: 10}, |
|
width = 980 - (margin.left + margin.right); |
|
height = 400 - (margin.top + margin.bottom); |
|
|
|
var svg = d3.select("#d3space").append("svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
// var svg_legend = d3.select("#d3space").append("svg") |
|
// .attr("width", width+margin.left) |
|
// .attr("height", 250) |
|
// .append("g") |
|
// .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
var x0 = d3.scaleBand() |
|
.range([0, width]) |
|
.round(true) |
|
.padding(.1); |
|
|
|
var x1 = d3.scaleBand(); |
|
|
|
var xAxis = d3.axisBottom(x0); |
|
|
|
var y = d3.scaleLinear() |
|
.range([0,height]); |
|
|
|
// var yAxis = d3.axisLeft(y).tickFormat(d3.format(".2s")); |
|
|
|
|
|
d3.json("featureoverlaptestoutput2.json", function(error, json) { |
|
if (error) return console.warn(error) |
|
data=json |
|
|
|
maxgrouplength=Math.max(...[for (i of json["data"]) i["group"].split("--").length]) // new ecma 6 functionality like python list comprehensions |
|
|
|
|
|
var nd = d3.nest() |
|
.key(function(d) { return d.month; }) |
|
.entries(json["data"]); |
|
|
|
var outercolkey=[for (i of nd) i["key"]]; |
|
|
|
var innercolkey=json["maxcatstring"].split("--").sort() |
|
|
|
var leftmostkey=innercolkey[0]; |
|
|
|
// READ LEGEND ITEMS INTO D3 DEFAULT ARRAY OF 20 COLOURS |
|
var color = d3.scaleOrdinal(d3.schemeCategory20) |
|
.domain(innercolkey); |
|
|
|
greatestsum=[]; |
|
|
|
nd.forEach(function(d) { |
|
//http://stackoverflow.com/questions/1230233/how-to-find-the-sum-of-an-array-of-numbers |
|
keygroupvalslist=[]; |
|
ybegin=0; |
|
yend=0 |
|
|
|
d["values"].forEach(function(d) { |
|
console.log('d',d); |
|
d.categorysum=vsum; |
|
tempyend=parseInt(d["value"]); |
|
ybegin=yend; |
|
yend=yend+tempyend; |
|
keygroupvals = d["group"].split("--").map(function(name,i) |
|
|
|
{return {value:d.value,name: name, ybegin:ybegin, yend:yend, i:i, interrowflg:0, color:color(name)}; //stick a new grouping into data object |
|
}); //javascript stunt: the + sign "+d[name]" forces a type conversion to number |
|
keygroupvals.forEach(function(v,i) { |
|
keygroupvalslist.push(v); |
|
v2=[v].map(function(v){return {value:1,name:v.name, ybegin:v.yend, yend:v.yend+1, i:i, interrowflg:1, color:'#FFFFFF'};}); |
|
// console.log('v2',v2[0]); |
|
keygroupvalslist.push(v2[0]); |
|
}); |
|
yend=yend+1; |
|
|
|
}); |
|
|
|
var vsum = [for (v of d["values"]) +v["value"]].reduce((a, b) => a + b, 0); //javascript doesn't have a simple sum function, so you have to do this. |
|
vsum=vsum+((d["values"].length-1)*1); |
|
// console.log('vsum',vsum); |
|
greatestsum.push(vsum); |
|
|
|
d.keygroupvalslist=keygroupvalslist; |
|
}); |
|
|
|
greatestsum2=Math.max(...greatestsum); |
|
|
|
x0.domain(outercolkey); |
|
|
|
x1.domain(innercolkey) |
|
.range([0,x0.bandwidth()],2) |
|
.round(true); |
|
|
|
; //x1 domain is range of age names. divide these into even groups based on x0 domain range |
|
|
|
y.domain([greatestsum2,0]); |
|
|
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(xAxis); |
|
|
|
// svg.append("g") |
|
// .attr("class", "y axis") |
|
// .call(yAxis) |
|
// .append("text") |
|
// .attr("transform", "rotate(-90)") |
|
// .attr("y", 6) |
|
// .attr("dy", ".71em") |
|
// .style("text-anchor", "end"); |
|
|
|
var month = svg.selectAll(".month") |
|
.data(nd) |
|
.enter().append("g") |
|
.attr("class", "month") |
|
.attr("transform", function(d) { |
|
return "translate(" + x0(d.key) + ",0)"; |
|
}); |
|
|
|
month.selectAll("rect") |
|
.data(function(d) { |
|
return d.keygroupvalslist;}) |
|
.enter().append("rect") |
|
.attr("width", x1.bandwidth()) |
|
.attr("x", function(d) {return x1(d.name);}) |
|
.attr("y", function(d) {return y(d.yend);}) |
|
.attr("height", function(d) {return y(d.ybegin)-y(d.yend);}) |
|
.style("fill", function(d) {return d.color;}); |
|
|
|
month.selectAll("text") |
|
.data(function(d) { |
|
return d.keygroupvalslist;}) |
|
.enter().append("text") |
|
.attr("x", function(d) {return x1(leftmostkey)-35;}) |
|
.attr("y", function(d) {return y(d.yend)+(y(d.ybegin)-y(d.yend))/2;}) |
|
.attr("dy", ".35em") |
|
.attr("text-anchor", "start") |
|
.text(function(d) {if (d.i==0 && d.interrowflg==0) {return d.value;}} ); |
|
|
|
}); |
|
|
|
</script> |
|
</body> |
|
</html> |
