Git Preact Demo
Todo: overcome problems creating production deployment image.
Data Driven Floaters
- Absolutely positioned elements float inside the first non-static parent element containing them. That's their x/y box.
- I use this technique when trying to represent data on a time or distance axis
- Left/right position is set on the element by the style tag; e.g 'left: 400px;'
- The text string is stored in each component's state data; e.g. label: "Haven", distance: "left: 400px;",
- Use the Controls below to update the left position of the floaters; observe the value of left changing.
------- C o n t r o l s -------------
Data Driven Floaters 2d
Beach LT
left: 10px;top:20px;
Bay ST
left: 80px;top:-20px;
Coast XT
left: 300px;top:0px;
Haven
left: 400px;top:10px;
------- C o n t r o l s -------------
Data Driven Floaters 3d
------- C o n t r o l s -------------
Data Driven Floaters 3df
------- C o n t r o l s -------------
Data Driven Floaters 3dfr
------- C o n t r o l s -------------
Data Driven Floaters 3dfrb
------- C o n t r o l s -------------