d3 data visualization Free Code Camp Solutions

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.