Old school D3 from simpler times

All examples By author By category About

fogonwater

Full window Github gist

nest tests

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>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.1.0/d3-annotation.min.js