bar-chart-with-word-clouds-2.js

const chartSVG = d3.select("#chartSVG")

const yScale = d3.scaleBand()
    .domain(letterCounts.map(d => d.letter))
    .range([0, 3200])       // my chart is 3200px high
    .paddingInner(0.1)
    .paddingOuter(0.1);

const xScale = d3.scaleLinear()
    .domain([0,450000])     // the most popular letter (A) has about 450000 babies
    .range([0,1600 - 150])  // my chart is 1600px wide (minus 150px for the label)

chartSVG.selectAll(".bar")
    .data(letterCounts)
    .join("rect")
        .classed("bar",true)
        .attr("fill", "white")
        .attr("stroke","black")
        .attr("x", 0)
        .attr("y", d => yScale(d.letter))
        .attr("height", yScale.bandwidth())
        .attr("width", d => xScale(d.count));

chartSVG.selectAll(".label")
    .data(letterCounts)
    .join("text")
        .classed("label",true)
        .text(d => `${d.letter}: ${Math.round(100*d.count/totalBabies)}%` + (d.letter === "other" ? ` (${d.otherLetters.slice(0,-1)})`: ""))
        .style("font-size",35)
        .style("font-weight", 700)
        .attr("fill", "black")
        .attr("stroke","none")
        .attr("x", d => xScale(d.count) + 10)
        .attr("y", d => yScale(d.letter) + yScale.bandwidth() / 2 + 5);