# Animated treemap

This [treemap](/content/@d3/treemap/index.html) of U.S. population uses [d3.treemapResquarify](https://d3js.org/d3-hierarchy/treemap#treemapResquarify) for a stable layout with changing node values. Data: [U.S. Census Bureau](https://www.census.gov/population/www/censusdata/pop1790-1990.html)

## Population Data

| Year | Population |
|------|------------|
| 1830 | 12,860,702 |
| 1840 | 17,063,353 |
| 1850 | 23,191,876 |
| 1860 | 31,443,321 |
| 1870 | 38,558,371 |
| 1880 | 50,189,209 |
| 1890 | 62,979,766 |
| 1900 | 76,212,168 |
| 1910 | 92,228,496 |
| 1920 | 106,021,537 |
| 1930 | 123,202,624 |
| 1940 | 132,164,569 |
| 1950 | 151,325,798 |
| 1960 | 179,323,175 |
| 1970 | 203,211,926 |
| 1980 | 226,545,805 |
| 1990 | 248,709,873 |

## D3 Code
```javascript
import { Scrubber } from "@mbostock/scrubber";

// Creating a chart using D3
const chart = {
    const width = 928;
    const height = width;
    const initialIndex = viewof index.value;
    // Data manipulation and treemap layout initialization code here
};

return Object.assign(svg.node(), {
    update(index, duration) {
        box.transition()
            .duration(duration)
            .attr("opacity", ({ i }) => i >= index ? 1 : 0);
        leaf.data(layout(index)).transition()
            .duration(duration)
            .ease(d3.easeLinear)
            .attr("transform", d => `translate(${d.x0},${d.y0})`);
    }
});
```

## Further Implementation
- Expose an update method on the chart that allows the caller to initiate a transition. 
- Use appropriate data formats and methods as demonstrated in the D3 library.

This snippet includes the necessary components to create and control an animated treemap visualizing U.S. population changes over time.