After creating an animated square pie chart using basic CSS to display it in a grid format, I am now looking to transform the larger squares into a state map grid. Any ideas on how to achieve this?
In my JavaScript code snippet below, I believe there is a way to reorganize the blocks with CSS by translating coordinates to fixed pixel positioning, but I'm struggling to make that connection:
<script id="field_details">
var field_details = {
"ME" : { "state": "ME", "row": 0, "col": 10 },
...
The challenge lies in integrating the existing "field_details" setup which generates a grid from state data onto a canvas and using it to rearrange the grid as per the state map layout.
...If you have any insights or guidance on this transition, I would greatly appreciate your help!
UPDATE 2
HTML
</style>
</head>
<div id="main-wrapper">
... (omitted for brevity)
Javascript
var valfields = d3.keys(field_details);
// Make data accessible by grp key
data.forEach(function(o) {
grp_vals["grp" + o.agegrp] = o;
});
...
CSS
#charts {
position: relative;
margin-top: 20px;
width: 100%;
}
#map {
position: relative;
width: 100%;
height: 100%
}
... (additional CSS rules omitted for brevity)