-
Notifications
You must be signed in to change notification settings - Fork 1
Home
##Data Docs: How To Get Started
If you're new to working with code on github, the simplest way to get started is to use the "Download Zip" button at the lower right of the datadocs/datadocs repo page to download all the code to your computer. Once you've unzipped the package, you'll have all the same files and folders that you can see online.
To get a sense for what DataDocs can do, we recommend that you actually skip the main index.html file in the main folder, and instead navigate down into the examples folders. Each of these folders is named after the DataDocs feature it demonstrates, and looking at the index.html file in each of these folders will give you a good sense of what the DataDocs platform can do - from adding simple text overlays to your video all the way up to loading dynamic data and interactive charts. Though each of these examples only shows one feature in action at a time, they can, of course, all be combined into a single DataDoc and used multiple times in a single video.
Note: because of browser restrictions, it is easiest to view all examples in FireFox; the ones that load external data will not work on your desktop in Chrome (and none of them are likely to work in Internet Explorer!).
###About the Examples
One thing that can be tricky at first about adapting examples from github is the file structure. You'll probably want your finished DataDoc to live on a page at something like mydomain.com/myDataDoc.html. In order to keep everything in sync on github, though, if you simply duplicate or modify a set of existing example files, they will need to live inside two sets of folders to work, just the way the example files do. The way around this is simple: when you're ready to move your DataDoc to the web, go into your index.html and delete the ../../ from in front of any links or URLs that have them. Then, when you publish, you make sure that you add all of the files from your video to the various css/assets folders that are in the main DataDocs folder (you can also feel free to delete any videos or data files in the existing folders that your DataDoc does not use), and replace index.html and main.js with your own files. Once you've done that, you should be all set.
In each of the examples below, you can always replace the underlying video with your own by saving your video files in the assets/videoFiles folder, and then update the <source> links in the HTML page of whatever example you're using. Likewise, you will probably want to update the <poster> image link in the <video> tag to match the content of your video.
Note: You should make sure the poster image matches the initial size of your video, and be sure to leave its styles set to width & height 100%.
##Examples