27:null 28:["$","title",null,{"children":"Land guzzlers - Technical Exercise, p2 | Data Visualization | Observable"}] 2d:Tbaf,2e:Tb67,I've given you a template here to get started, with several basic syntax tricks already in place. Use these (copy them) and figure out how to use them well to replicate the rest. #### A suggested process: 1. Fork this notebook (network node icon top-right) to make a copy of it for yourself. 2. Fix the names, titles, colors, stroke-widths, and other things that I've clearly made wrong, but you just need to choose the right value. 3. The largest rectangle is positioned and sized properly. The title and footprint text are also. They are precise. - How did I calculate these numbers? What rules are positioning them? What is the equation that gets them there? - **HINT**: these rectangles are squares, and the Hectare footprint values are area of the square. - How are these similar or different from your proposed rules? (my way is not the only way, but I've tried to make it pretty easy to reverse-engineer) - Use your rules or my rules, or some combination of them to expand on this and replicate it forward to the rest. But have rules. Don't just position in a looks-about-right way. How do we actually get them there? - Don't overthink this. It's really not hard. You also don't need to get it perfect. Structure and organization matters more than pixel-perfect look. - Yes this is a little tedious, but it's only 6 data objects, and I hope that it helps you understand and structure how rules work for 6000 or 6-million data objects (not by hand). #### Notes: - SVG 0,0 is in the top-left corner (how we read), not bottom-left (cartesian math). This is tricky to get used to. - `