189 lines
4.7 KiB
JavaScript
189 lines
4.7 KiB
JavaScript
(function() {
|
|
|
|
var commission_sex = [
|
|
{ key: "Male", color: '#aaa', values: [
|
|
[2010, 4],
|
|
[2011, 7],
|
|
[2012, 2],
|
|
[2013, 2],
|
|
[2014, 3],
|
|
[2015, 1],
|
|
[2016, 0]
|
|
] },
|
|
{ key: "Altersex", color: '#ccc', values: [
|
|
[2010, 0],
|
|
[2011, 3],
|
|
[2012, 4],
|
|
[2013, 0],
|
|
[2014, 0],
|
|
[2015, 0],
|
|
[2016, 0]
|
|
] },
|
|
{ key: "Genderless", color: '#fff', values: [
|
|
[2010, 0],
|
|
[2011, 0],
|
|
[2012, 4],
|
|
[2013, 14],
|
|
[2014, 18],
|
|
[2015, 6],
|
|
[2016, 1]
|
|
] },
|
|
{ key: "MtF", color: '#666', values: [
|
|
[2010, 0],
|
|
[2011, 0],
|
|
[2012, 0],
|
|
[2013, 0],
|
|
[2014, 0],
|
|
[2015, 36],
|
|
[2016, 24]
|
|
] },
|
|
{ key: "Female", color: '#44', values: [
|
|
[2010, 0],
|
|
[2011, 1],
|
|
[2012, 0],
|
|
[2013, 1],
|
|
[2014, 1],
|
|
[2015, 17],
|
|
[2016, 14]
|
|
] }
|
|
];
|
|
|
|
var commission_sex_chart;
|
|
nv.addGraph(function() {
|
|
commission_sex_chart = nv.models.stackedAreaChart()
|
|
.useInteractiveGuideline(true)
|
|
.x(function(d) { return d[0] })
|
|
.y(function(d) { return d[1] })
|
|
.showControls(false)
|
|
.style('expand')
|
|
.interpolate('monotone')
|
|
.pointActive(function() { return false; })
|
|
.duration(300);
|
|
commission_sex_chart.yAxis.tickFormat(d3.format(',.4f'));
|
|
d3.select('#commission_sex_chart')
|
|
.datum(commission_sex.reverse())
|
|
.transition().duration(1000)
|
|
.call(commission_sex_chart)
|
|
.each('start', function() {
|
|
setTimeout(function() {
|
|
d3.selectAll('#commission_sex_chart *').each(function() {
|
|
if(this.__transition__)
|
|
this.__transition__.duration = 1;
|
|
})
|
|
}, 0)
|
|
});
|
|
nv.utils.windowResize(commission_sex_chart.update);
|
|
d3.select('#commission_sex_chart .nv-area-2')
|
|
.style("fill", "url(#diagonal-stripe-1)")
|
|
.attr("x", 0)
|
|
.attr("y", 0)
|
|
.attr("height", 150)
|
|
.attr("width", 150);
|
|
return commission_sex_chart;
|
|
});
|
|
|
|
var raw_alignments = [
|
|
//Cisgender Non-cisgender It's complicated
|
|
{ key: "Masculine", values: [
|
|
["Cisgender", 2290],
|
|
["Non-cisgender", 94],
|
|
["It's complicated", 68]
|
|
] },
|
|
{ key: "Feminine", values: [
|
|
["Cisgender", 366],
|
|
["Non-cisgender", 94],
|
|
["It's complicated", 28]
|
|
] },
|
|
{ key: "Other", values: [
|
|
["Cisgender", 24],
|
|
["Non-cisgender", 116],
|
|
["It's complicated", 114]
|
|
] }
|
|
];
|
|
var n = 0;
|
|
var sexes = [{
|
|
key: "Sexes",
|
|
values: raw_alignments.map(function(d, i) {
|
|
var total = d.values[0][1] + d.values[1][1] + d.values[2][1];
|
|
n += total;
|
|
return {
|
|
label: d.key,
|
|
color: ['#444', '#666', '#888'][i],
|
|
value: total
|
|
}
|
|
})
|
|
}];
|
|
var alignments = [
|
|
{
|
|
key: "Cisgender",
|
|
values: raw_alignments.map(function(sex, i) {
|
|
return {
|
|
x: sex.key,
|
|
y: sex.values[0][1] /
|
|
(sex.values[0][1] + sex.values[1][1] + sex.values[2][1]) * 100
|
|
};
|
|
})
|
|
},
|
|
{
|
|
key: "Non-cisgender",
|
|
values: raw_alignments.map(function(sex, i) {
|
|
return {
|
|
x: sex.key,
|
|
y: sex.values[1][1] /
|
|
(sex.values[0][1] + sex.values[1][1] + sex.values[2][1]) * 100
|
|
};
|
|
})
|
|
},
|
|
{
|
|
key: "It's complicated",
|
|
values: raw_alignments.map(function(sex, i) {
|
|
return {
|
|
x: sex.key,
|
|
y: sex.values[2][1] /
|
|
(sex.values[0][1] + sex.values[1][1] + sex.values[2][1]) * 100
|
|
};
|
|
})
|
|
},
|
|
];
|
|
|
|
|
|
var alignments_chart_sexes, alignments_chart_alignments;
|
|
nv.addGraph(function() {
|
|
var alignments_chart_sexes = nv.models.discreteBarChart()
|
|
.x(function(d) { return d.label })
|
|
.y(function(d) { return d.value })
|
|
.showYAxis(false)
|
|
.showValues(true)
|
|
.valueFormat(function(d) {
|
|
return (d / n * 100).toFixed(1) + '%';
|
|
})
|
|
.duration(250);
|
|
d3.select('#alignments_chart_sexes')
|
|
.datum(sexes)
|
|
.call(alignments_chart_sexes);
|
|
nv.utils.windowResize(alignments_chart_sexes.update);
|
|
return alignments_chart_sexes;
|
|
});
|
|
|
|
nv.addGraph(function() {
|
|
var alignments_chart_alignments = nv.models.multiBarChart()
|
|
.duration(350)
|
|
.reduceXTicks(true)
|
|
.showYAxis(false)
|
|
.rotateLabels(0)
|
|
.stacked(true)
|
|
.showControls(false)
|
|
.color(['#444', '#888', '#ccc'])
|
|
.groupSpacing(0.1);
|
|
|
|
d3.select('#alignments_chart_alignments')
|
|
.datum(alignments)
|
|
.call(alignments_chart_alignments);
|
|
|
|
nv.utils.windowResize(alignments_chart_alignments.update);
|
|
|
|
return alignments_chart_alignments;
|
|
});
|
|
|
|
})();
|