{ "name": "Data Visualization Projects", "order": 17, "time": "200 hours", "helpRoom": "HelpDataViz", "challenges": [ { "id": "bd7168d8c242eddfaeb5bd13", "title": "Visualize Data with a Bar Chart", "challengeSeed": [ "150324699" ], "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/adBBWd.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", "Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "Rule #3: You must use D3.js to build this project.", "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.", "Hint: Here's a dataset you can use to build this: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json", "Remember to use Read-Search-Ask if you get stuck.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "releasedOn": "January 1, 2016", "isRequired": true }, { "id": "bd7178d8c242eddfaeb5bd13", "title": "Visualize Data with a Scatterplot Graph", "challengeSeed": [ "150324700" ], "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/GoNNEy.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", "Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "Rule #3: You must use D3.js to build this project.", "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.", "Hint: Here's a dataset you can use to build this: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json", "Remember to use Read-Search-Ask if you get stuck.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "releasedOn": "January 1, 2016", "isRequired": true }, { "id": "bd7188d8c242eddfaeb5bd13", "title": "Visualize Data with a Heat Map", "challengeSeed": [ "150324701" ], "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/rxWWGa.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", "Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "Rule #3: You must use D3.js to build this project.", "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.", "Hint: Here's a dataset you can use to build this: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json", "Remember to use Read-Search-Ask if you get stuck.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "releasedOn": "January 1, 2016", "isRequired": true }, { "id": "bd7198d8c242eddfaeb5bd13", "title": "Show Relationships with a Force Directed Graph", "challengeSeed": [ "150324458" ], "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/KVNNXY.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", "Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "Rule #3: You must use D3.js to build this project.", "User Story: I can see a Force-directed Graph that shows which campers are posting links on Camper News to which domains.", "User Story: I can see each camper's icon on their node.", "User Story: I can see the relationship between the campers and the domains they're posting.", "User Story: I can tell approximately many times campers have linked to a specific domain from it's node size.", "User Story: I can tell approximately how many times a specific camper has posted a link from their node's size.", "Hint: Here's the Camper News Hot Stories API endpoint: http://www.freecodecamp.com/news/hot.", "Remember to use Read-Search-Ask if you get stuck.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "releasedOn": "January 1, 2016", "isRequired": true }, { "id": "bd7108d8c242eddfaeb5bd13", "title": "Map Data Across the Globe", "challengeSeed": [ "150324698" ], "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/mVEJag.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", "Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "Rule #3: You must use D3.js to build this project.", "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.", "Hint: Here's a dataset you can use to build this: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json", "Remember to use Read-Search-Ask if you get stuck.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "releasedOn": "January 1, 2016", "isRequired": true } ] }