Believe it or not, but picking the right car seat for your kids can be a complicated task. Not only does every brand and type differ from all other types and brands, the height and weight ranges also change when using the seat Rear Facing, Forward Facing or (when applicable) as a Booster Seat. To make deciding what child should be in what seat a little easier, and to further practise my D3 skills (ok, that is the real reason), below is a chart showing the ranges of the car seats we own.
Once I get more adept at using usr input my goal is to revisit this page and add the option to fill in weight and height which then draws a point at the approprite location, but for now I am going to just hard code the information for my two sons.
I also looked into the Textures.js library a bit to see if I could use the hatching from that library. It didn't seem too complicated and had a hatch fill in some polygon pretty quick. However when I got into different hatches for different usage-types it got somehwat more complicated so I'm leaving that for now.
I had some initial ideas worked out on paper, and it is just really a simple bar graph where the start point is at the minimum weight and heigth allowed, and the the width and height of the rectagles is calculated from the difference between maximum weight / height and minimum weigth / height.
Setting up the graphs was pretty fast but I then spend a lot of time (as in numerous hours) on figuring out how to set the height. The width worked fine and as expected but with svg starting from top left with 0,0 and going down while I wanted the graph's y-axis to start at 0 at the bottom and increase upward, I really ran into trouble. Often the result was almost there but just not quite. Very frustrating (and yes, I hear you all think "welcome to coding"...) but also very rewarding when you finally figure it out. In this case I just had to start the column at the top (max height) and then set the height of the rect to be minimal height - maximal height while using the scale on those values. A bit counter intuitive if you ask me but I get it know (sort of) and it works!