In addition to the older example showing how to use the fetch supported JSON format, here is the same example using fetch to load external data and parse it from a CSV format:
Example with basic CSV processing based on splitting text at the delimiter:
fetch_hype_data_magic_advanced_CSV_version.hype.zip (46,6 KB)*
This example uses a parsing example and allows quoted content and detects line endings and separators. They also can be manually specified:
fetch_hype_data_magic_advanced_CSV_parser_comma.hype.zip (47,8 KB)
In this variation, the only difference is that the data is semicolon separated. This is the case when exporting from Apple Numbers:
fetch_hype_data_magic_advanced_CSV_parser_semicolon.hype.zip (46,7 KB)
This example uses a public Google Docs table as a data source. Just create a table and make it public. Take the link for the table and replace /edit?usp=sharing with /export?format=csv and then fetch the data from that endpoint.
fetch_hype_data_magic_advanced_CSV_parser_google_docs.hype.zip (46,4 KB)
Would it in theory also be possible to change element colors etc through this? or even load different scenes or timelines depending on the feed?
text and imageswapping are builtin.
for advanced usage – like changing colors – have a look at the wiki:
One can also use Hype Data Magic to bind a rectangle to a variable in a data source. The default data source is used when using HypeDataMagic.setData(({lorem:'ipsum'}), but one can use arbitrary source names like HypeDataMagic.setData({lorem:'ipsum'}, 'myData'). It is even possible to use hypeDocument.customData with the keyword customData as seen in the following example:
Example_Hype_Data_Magic_bind_customData_to_rectangle.hype.zip (20,6 KB)
↑ look at project
1.3.5 Function in data constructs are now resolved, new handler 'variables' resolves to customData, exposed default 'handler', to change use HypeDataMagic.setDefault('handler', 'text'), new default 'customData' is used to init hypeDocument.customData (in addition to old 'customDataForPreview'), new default 'allowDataFunctions' is set to true and allows for functions in data, new default 'allowVariables' is set to true and allows for variables in default handlers image and text, exposed low-level functions resolveVariablesInString, resolveVariablesInObject and cloneObject
This release adds another layer of data in form of custom data variables (can also be tweaked to use other sources using the default 'variables'). Given some data like:
HypeDataMagic.setData({
greeting: 'Hello ${userName}, welcome!',
});
You can assign greeting as usual to a rectangle by assigning it with data-magic-key set to greeting. New is the possibility to update partial strings with variables.
The variable ${userName} will be substituted from the default variable source hypeDocument.customData. So, if you set hypeDocument.customData.userName = 'Max' and subsequently refresh using hypeDocument.refresh() the display will be updated.
Variables are mapped to hypeDocument.customData and can also be set from outside Hype using the already established
HypeDataMagic.setDefault('customDataForPreview', {
userName: 'Max'
})
and the now new
HypeDataMagic.setDefault('customData', {
userName: 'Max'
})
The difference being that the new option sets the custom data beyond only the preview.
The new variable allows nested notation. Given some custom data like:
HypeDataMagic.setDefault('customData', {
user: {
name: 'Max',
age: 46,
gender: 'male',
loves: [
"Tumult Hype",
"classical music"
]
},
})
variables can reference the data as follows, ${user.name}, ${user.age}, ${user.gender}, ,${user.loves[0]}, ${user.loves[1]}. As you can see, you can mix object and array notation just like in magic keys.
Another new thing is that data can contain functions. This is totally optional and can also be disallowed if you feel strongly about it. Given you assign your data through JavaScript, defining a branch using a function allows creating data or sub-branches dynamically. These functions don't accept any parameters, but given the context you define them in (like Hype function or Hype Events) you can even use hypeDocument in the function itself.
HypeDataMagic.setData({
dynamic: function(){
return {
data: 'I am a random number: '+Math.round(Math.random()*100)
}
}
});
The data-magic-key would be dynamic.data and result in the text I am a random number: 34'… with the number changing on every refresh. The same also works for variables.
${resourcesFolderName} is now substituted if found in an unresolved form. Hype currently doesn't resolve the variable in external JS files, and at least this little workaround resolves it as a variable inside of Hype Data Magic keys when displayed with default handlers. If you have a custom handler, you can just chain your handler behind the new variables handler.
Just set data-magic-handler and set it to variables, myhandler for example.
I just realized that the ${variable} syntax collides with template literals. But, I am keeping the syntax and for that special case my suggested workaround is…
To avoid immediate substitution in such cases, use a substitution like 
instead of $ and replace it:
var myLiteralString = `
✨{variable} is
in this
template
literal`.replace('✨', '$');
I might add an alternative like this for template literal built into Hype Data Magic in a future version.
Reactive custom data and multiple options for variables is coming in a couple of hours. Really happy about this one… Oh and I forgot the dataset variables features (really powerful).
↑ look at project
Version 1.3.6
↑ look at project
Version 1.3.7
Version 1.3.8
Version 1.3.9
Hello everyone,
I came across a problem while working on a project and have found a potential solution that I'd like to share with this community. During my search, I've found a data handler that has been particularly helpful in embedding video examples into my work.
I have been storing this solution on my hard drive (HD) and I think it could be useful to some of you:
HypeDataMagic-Video-Data-Handler.hype.zip (322,1 KB)
Hype Data Magic: Master Variable Manipulation for Optimal Data Management
Very nice again Max!, Really keen on the screen recording style too, did you use special software for that, or manual framing?
Also a different question regarding Data magic that might be out of scope for what you've intended it to do. But how difficult would it be to pull data from a spreadsheet locally (say to the head of the document) when it's exporting? So data can be managed from within a spreadsheet online, but be a standalone offline file after exporting (for example with display ads).
Not sure if this is something that can be done within Data magic or is more likely to be a custom export script.
In my older videos, I did the framing manually, but then I found http://screenstudio.com/
About using data from Excel or Numbers… there is a solution, same thread, further up…
Hype Data Magic - #28 by MaxZieb
I have not really looked at this before. Very nice.
One thought I had was the live Labels you have
You could change the content: "Data Magic"; in the document.styleSheets[0].insertRule :... line
to
content: "Data Magic: " attr(data-magic-key) "" ;
Which gives
Which makes them more useful I think.
Update re Max's replies below
If you want to implement this yourself before @MaxZieb updates this in the next version after Hype DataMagic 1.3.9.
In the un-minified version : HypeDataMagic.js
Change
content: "Data Magic";
within the line of code on line 1199
to
content: "Data Magic: " attr(data-magic-key) "" ;
Save and close.
To minify it yourself use : Closure-Compile
Thank you for the great suggestion. I was thinking about this a while back, but if I implement it, I was experimenting with showing the entire key (including branches etc.). That would need to set a data- element based on the key when being resolved and use that in the display. Haven't updated in a while and have some minor issues to fix anyway. I will include this in a 1.4.x in the upcoming months. The patch you provided is easy enough for the key only in the mean time. Thank you!
Maybe in your post above, include line numbers of v1.3.9, so people can modify it. BTW I am using Closure-Compiler to minify.
Hi
I used HypeDataMagic to get data from a google sheets and it works amazing.
Im thinking of using it on a education-platform so that I can pull the data from google sheets so that it is easier to update many data at the same time.
So now I tried to use the data from the data-magic text-elements to draw charts. But I can't get any data from the text-fields it is just blank. Is there a way to do this that I have missed?
