How to use data magic sources - worldoptimizer/HypeDataMagic GitHub Wiki

If you don't know how to set data with Hype Data Magic please read and follow the getting started guide. For this example, we will be using the following data:

HypeDataMagic.setData({
    items: [
        {
            location: 'Berlin',
            relation: 'This vibrant city is my current home'
        },
        {
            location: 'Formentera',
            relation: 'I grew up on this beautiful island'
        },
    ],
});


HypeDataMagic.setData({
    items: [
        {
            location: 'Crater',
            relation: 'Dark side of the moon'
        },
        {
            location: 'Rocket',
            relation: 'I love the inside of my spacesuit'
        },
    ],
}, 'spacejourney');

This example assumes you are familiar with assign ing data-magic-key and grouping rectangles in Tumult Hype. Now we will explore the possiilities when using the data-magic-source option.

1. Create a group from some data-magic-key rectangles. Select the group on stage and goto the Identity panel
2. Assign the data-magic-branch to the group set it to items[0]. You should see the data containing Berlin. If you now add data-magic-source and set it to spacejourney the same branch an magic key is picked from the second data source we created initially

Use cases for sources

The above example was set up to illustrate how we can switch a data source and hence had the same structur. In most cases data sources are more useful to:

• store different sets or origins of data that should stay seperated
• shortcut existing data structure into chunks for indexed access