This is workshop for teaching D3.js fundamentals to Team Soso.
We'll start with a small sample piece of the WGW2015 dashboard we built, and you'll try to recreate it using new data from an API instead.
For teams that are in different offices, use Screenhero.
- Sam, Jackie, David
- Alex, John, Colin
- Wes, Wade, Justin
- Laura, Eric, JC
- Starting page: original.html
- This demonstrates simple D3 graphs, and uses a static data file which is a sample of old WGW data.
- Your new remix page: remix.html
- On this page, you will recreate the original graphs, using the Rotten Tomatoes' movie API instead.
- If you need some pointers, look at
/_example/remix.htmlfor an example remix (try not to, though!).
- JC will do a walkthrough of the original graphs (60 min)
- Your team will pair program their remix graphs (30 min)
- Choose about 5 movies you want to query from the API
- Make your barchart
- Make your piechart
- System architecture
- a basic MVC architecture (Model, View, Controller) just for clarity & simplicity
- data.js: a class for getting the data (aka. API polling engine) and transforming that data for our Views
- view.js: a class for receiving prepared data, and creating visual things with it (aka. D3 graphing engine)
- controller.js: a class that sets up the buttons, etc. on the page to complete certain actions/call functions
- a basic MVC architecture (Model, View, Controller) just for clarity & simplicity
- More about APIs
- an API is a piece of software that can talk to another piece of software, by taking a request in a certain format, and by responding with data in a certain format
- a movie review API (like Rotten Tomatoes) takes a request where the parameters are the Title of the movie, or something else; it then responds by returning JSON data about that movie
- API's can talk in almost any format and deal with any data that it stored somewhere. So you can literally find an API about anything.
- for this workshop, I simply Googled
movie API json. See, it's the 1st result!
