1. Visualize Data with a Bar Chart
Objective: Build a CodePen.io app that is functionally similar to this.
Instructions: Use whichever libraries or APIs you need. Give it your own personal style.
♦ User Story: I can see US Gross Domestic Product by quarter, over time.
♦ User Story: I can mouse over a bar and see a tooltip with the GDP amount and exact year and month that bar represents.
Solution:
Video tutorial:
2. Visualize Data with a Scatterplot Graph
Objective: Build a CodePen.io app that is functionally similar to this.
Instructions: Use whichever libraries or APIs you need. Give it your own personal style.
♦ User Story: I can see performance time visualized in a scatterplot graph.
♦ User Story: I can mouse over a plot to see a tooltip with additional details.
Solution:
Video tutorial:
3. Visualize Data with a Heat Map
Objective: Build a CodePen.io app that is functionally similar to this.
Instructions: Use whichever libraries or APIs you need. Give it your own personal style.
♦ User Story: I can view a heat map with data represented both on the Y and X axis.
♦ User Story: Each cell is colored based its relationship to other data.
♦ User Story: I can mouse over a cell in the heat map to get more exact information.
Solution:
Video tutorial:
4. Show National Contiguity with a Force Directed Graph
Objective: Build a CodePen.io app that is functionally similar to this.
Instructions: Use whichever libraries or APIs you need. Give it your own personal style.
♦ User Story: I can see a Force-directed Graph that shows which countries share borders.
♦ User Story: I can see each country's flag on its node.
Solution:
Video tutorial:
5. Map Data Across the Globe
Objective: Build a CodePen.io app that is functionally similar to this.
Instructions: Use whichever libraries or APIs you need. Give it your own personal style.
♦ User Story: I can see where all Meteorites landed on a world map.
♦ User Story: I can tell the relative size of the meteorite, just by looking at the way it's represented on the map.
♦ User Story: I can mouse over the meteorite's data point for additional data.
Solution:
Video tutorial:
Find this collection of Data Visualization projects on my Codepen account.