An example of how to use a framework to dynamically generate components from data.
I've used this repo to go through various steps you might take when creating an app with SPARQL data. The app has gone through different variations that are outlined in the steps below.
If you want so see a live view of the app, click on the Github Pages example in the repo description. If you want to edit the code in a WYSIWYG check out this vizhub demo(I can't promise it will be up-to-date with the latest changes).
I want to show students how to use a front-end framework to dynamically generate components from a data source. One useful example would be to create visualizations from a data source. I'll try to set out a simple example of how to do that here. If time permits, it will include soms d3 visualizations, if not, just a component generation pattern. I've chosen not to use any build tools so as to try to limit the overhead and environment software needed to understand this project. Let's see how that goes.
- Data is loaded in a vue method from a SPARQL endpoint
- The stored data is used to render a list of themes available in the data
- Each theme links to a detailpage which loads example works of that theme
- The whole thing functions without routing but instead uses conditional content loading.
You can follow along with the progress by checking these commits in order. I'll build up the application in clear steps. If there's no link yet for a step that means I haven't built it yet. Feel free to send pull requests for those ;)
- Basic Vue setup
- Dynamically creating a list from data
- Creating a Vue component
- Setting up routing to different pages
- Creating a d3 visualization
- Fetching a local data file Read commit notes!
- Fetching remote data
- Passing relevant data to each component
- Have components request their own data
- Refactor the hash-router into the proposed solution above
- Show something useful instead of a list of links (basic d3 vis would be nice)
- Load different data after user interaction
A lot of the work here has been adapted from Vue's excellent starters guide