Old school D3 from simpler times

All examples By author By category About

clhenrick

Full window Github gist

Data Nesting Demo for Tom

Work in progress...

Built with blockbuilder.org

<!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/lodash.js/4.17.4/lodash.min.js"></script>
  <style>
    body {margin:0; padding: 0;}

.deleted {color: #ff0000;}

div.container {
      width: 1200px; height: 500px;
      position:relative;
    }

div.row {
      position: absolute;
      width: 100%;
      height: 60px;
      overflow: hidden;
    }

div.cell {
      position: absolute;
      width: 70px;
      height: 56px;
      text-align:center;
      line-height: 56px;
    }

div.cell.chart {
      width:1130px;
    }

div.chartcells {
      position:absolute;
      width: 19px; height: 19px;
    }

div.chartcells.minus {
      background: #D7067C;
    }

div.chartcells.plus {
      background: #309223;
    }

div.chartcells.neutral {
      background: #FACB57;
    }

div.chartcells.weak {
      opacity: 0.5;
    }
  </style>
</head>

<body>
    <script src="https://d3js.org/d3-queue.v3.min.js"></script>
  <svg width="960" height="500"></svg>
  <script>
    
  var countriesKeyed;
  var dataByTheme;
  var dataByVariable;
  
  var margins = { top: 20, left: 75, bottom: 20, right: 20 };

var svg = d3.select('svg'),
      width = +svg.attr('width') - margins.left - margins.right,
      height = +svg.attr('height') - margins.top - margins.bottom;
  
  var squareWidth; // to do: set the square width based on chart width & number of data points
    
  var yScale = d3.scaleOrdinal().range([height, 0]);
    
  d3.queue()
    .defer(d3.csv, 'countries.csv')
    .defer(d3.csv, 'data.csv')
    .await(main);
  
  function main(error, countries, data) {
    if (error) throw error;
    
    // parse country data
    countries = countries.map(function(d) {
      return {
        lat: +d.latitude,
        lon: +d.longitude,
        abrev: d.country,
        count: 0,
        name: d.name
      }
    });
    
    // parse our valence value into a number
    data.forEach(function(d) {
      d.valence = +d.valence;
      d.variable = d.variable.split(',').map(v => v.trim())
    })
    
    // create a d3 map, not the same as Array.prototype.map
    countriesKeyed = d3.map(countries, function(d) {
      return d.name;
    });
    
    // unique list of "themes"
    var themes = data.reduce(function(acc, d) {
      if (acc.indexOf(d.theme) === -1) {
        acc.push(d.theme);
      }
      
      return acc;
    }, [])
    .sort();
    
    // unique variable names
    var variables = data.reduce(function(acc, d) {
      d.variable.forEach(function(v) {
        if (acc.indexOf(v) === -1) acc.push(v);
      })
      
      return acc;
    }, [])
    .sort();    
    
    // nest our data on theme, then either "plus" or "minus" depending on value of "valence"
    dataByTheme = d3.nest()
      .key(function(d) { return d.theme })
      .key(function(d) {  if (d.valence > 0) { return 'plus'; } return 'minus'; })
      .entries(data);
    
    dataByTheme = d3.map(dataByTheme, function(d) {
      return d.key;
    });
    
    console.log(dataByTheme);
    
    // nest our data by variable, then either "plus" or "minus"
    dataByVariable = variables.map(function(v) {
      var x = { name: '', values: [] };
      
      data.forEach(function(d) {
        if (d.variable.indexOf(v) !== -1) {
          x.name = v;
          x.values.push(d);
        }
      });
      
      return x;
    });
    
    dataByVariable = d3.map(dataByVariable, function(d) {
      return d.name;
    });
    
   
    // set our y scale domain
    yScale.domain(themes);
    
  }

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js

https://d3js.org/d3-queue.v3.min.js