Mucking about with d3 nests to work out how to summarise data for a timeline viz.
Betterer nesting whatnot:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.1.0/d3-annotation.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<textarea id="out1" rows="35" cols="90"></textarea>
<textarea id="out2" rows="35" cols="90"></textarea>
<script>
var q = d3.queue()
.defer(d3.csv, 'professions.csv')
.await(visualize);
function visualize(errors, data) {
//data = data.filter(function(d) { return d.Use === '1' })
var nested_data = d3.nest()
.key(function(d) { return d['Median pay']; })
.rollup(function(leaves) { return {
'count':leaves.length,
'label':leaves.map(function(d) {return d['Category'] + ' (' + d['Sector'] +')'}).join(', '),
'leaves':leaves
};})
.entries(data);
//.map(data);
d3.select("#out1").
text(JSON.stringify(nested_data, null, 4));
const annotations = nested_data.map(function(d, i){
return {
note: {
title: d.key,
label: d.value.label,
wrap: 214,
align: 'left'
},
connector: {end: 'dot'},
//x: x(d.a),
//y: y(d.b),
dy: 90,
dx: 100,
color: 'red'
};
})
d3.select("#out2")
.text(JSON.stringify(annotations, null, 4));
}
</script>
</body>