bar-chart-with-word-clouds.js

const nameData = d3.csvParse("word,gender,count\n" + textFile).map(d => ({
    text: d.word,
    size: +d.count
  })).sort((a,b) => d3.descending(a.size,b.size))

const letters = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
const letterNames = {"other":[]};
const letterCounts = [];

letters.forEach((letter)=>{
  letterNames[letter] = [];
  letterCounts.push({"letter": letter, "count": 0})
})

nameData.forEach((d)=>{
    const letter = d.text.slice(0,1);
    letterNames[letter].push(d);
    letterCounts.find(d => d.letter === letter).count += d.size;
})   

letterCounts.sort((a,b)=> d3.ascending(a.count, b.count))

// letterNames = {"A":
//    [{"text":"Ava", "size":13084},
//     {"text":"Amelia", "size":12704}
//    ...],
//  "B":  ...
// }

// letterCounts = [{"letter": "A", "count": 449194},
//      {"letter": "J", "count": 278747},
//      {"letter": "M", "count": 267776}
//    ...]
// }