d3-Map-SmallMultiples

An animated data visualization for showing the household income threshhold for different states in the U.S through the year 2009 to 2016.

Each Grid is a histogram,

the x-axis representing 16 bands of annual household income from low to high.

Each income band is represented by a color picked from the red-blue oridnal colorscale.

the y-axis representing the range to state-total percentage.

use d3.each for drawing small multiples on a map grids
referencing https://bl.ocks.org/mbostock/29cc3cc4078091fd2115
use requestAnimationFrame() to animate the frames by year

<title></title>
  <style>
  
body{
    background-color: #1B2429;
    font-family: monospace;
}

.canvas{
    position:fixed; 
}

text{
    fill:white;
    text-align: center;
}
.bars{
    opacity: 0.7;
}
.year{
    margin-left: 10%;
/*     margin-top: 1%; */
    color:white;
    font-size: 80px;
    position:absolute;  
}
  
  </style>
</head>
    
    
<body>
  <div class="year"></div>  
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>

//set up the divs and svgs
const w=960,
      h=600;

// const w=$("body").width(),
//       h=$("body").height();
    
const margin = {top: 10, right: 10, bottom: 10, left: 10},
            width = w - margin.left - margin.right,
            height = h - margin.top - margin.bottom;

const gap=2,
      stateWidth=60,
      barChartWidth=stateWidth-gap;

//set up the scale for bar charts
var x = d3.scaleBand().rangeRound([0, barChartWidth]).padding(0.1),
    y = d3.scaleLinear().rangeRound([barChartWidth, 0]);

//set up a color scale for bars
var color = d3.scaleLinear().range(["#FF5CB3","#2846E8"]).domain([0,16]);

const canvas = d3.select("body").append("svg").attr("class","canvas")
             .attr("width", w).attr("height",h).append("g")
             .attr("class","plot").attr("width",width).attr("height",height)
             .attr("transform", "translate(" + width /2 + "," + height /2.3 + ")");

//load in the datasets
d3.queue()
    .defer(d3.json,"data.json")
    .await(ready);

}

//draw small multiples function
 function update (d){
        
     
     canvas.selectAll(".state").select(".barChart").remove();

x.domain(d[3].values.map(function(d) { return d.income; }));
     y.domain([0, 0.3]);  
     
    const gridWidth = d3.max(d, function(d) { return d.col; }) + 1,
          gridHeight = d3.max(d, function(d) { return d.row; }) + 1;
     
    const state = canvas.selectAll(".state")
                  .data(d)
                  .enter().append("g").attr("class", "state").attr("id",(d)=>{return d.abbr})
                  .attr("transform", (d)=> { 
         return "translate(" + (d.col - gridWidth / 2) * stateWidth + "," + (d.row - gridHeight / 2) * stateWidth + ")"; });

//append text to each "g"
     const text=state.append("text").text((d)=>{return d.abbr}).style("opacity",.3)
                  .attr("transform", "translate("+-10+","+50+")" );    
    
     //append g with class barchart
     const barChart=canvas.selectAll(".state").append('g').attr("class","barChart")
                   .attr("transform", "translate("+-stateWidth/2+","+-stateWidth/2+")" )
                   .each(bars);
                    
     function bars(d,i){
         
              d3.select(this).selectAll("rect")
                .data((d)=>{return d.values })
                .enter().append("rect").attr("class","bars")
                .attr("x", (d) => { return x(d.income); })
                .attr("y", (d) => { return y(d.percent); })
                .attr("width", x.bandwidth())
                .attr("height", (d) => { return barChartWidth- y(d.percent); })
                .style("fill",(d)=>{ return color(d.index)})
                .style("stroke","none")
                .style("pointer-events","all")  
                .on("click",(d)=>{return console.log(d)});
     }
     
     
 }

</script>

</body>
</html>

https://code.jquery.com/jquery-1.12.4.js

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