{
"name": "Data Visualization Projects",
"order": 17,
"time": "200 hours",
"helpRoom": "HelpDataViz",
"challenges": [
{
"id": "bd7168d8c242eddfaeb5bd13",
"title": "Visualize Data with a Bar Chart",
"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)."
],
"releasedOn": "January 1, 2016",
"challengeSeed": [
"150324699"
],
"tests": [],
"type": "zipline",
"challengeType": 3,
"nameEs": "Visualiza datos utilizando un gráfico de barras",
"descriptionEs": [
"Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: http://codepen.io/FreeCodeCamp/full/adBBWd.",
"Regla #1: No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
"Regla #3: Debes utilizar D3.js para construir este proyecto.",
"Historia de usuario: Puedo ver el Producto Interno Bruto (PIB) de los EEUU por trimestre, a través del tiempo.",
"Historia de usuario: Puedo ver una descripción emergente con el monto de PIB y el mes y año que representa cada barra al mover el ratón sobre ellas.",
"Pista: Puedes utilizar el siguiente conjunto de datos para construir tu proyecto: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json",
"Recuerda utilizar Read-Search-Ask si te sientes atascado.",
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro Cuarto de revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true
},
{
"id": "bd7178d8c242eddfaeb5bd13",
"title": "Visualize Data with a Scatterplot Graph",
"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)."
],
"releasedOn": "January 1, 2016",
"challengeSeed": [
"150324700"
],
"tests": [],
"type": "zipline",
"challengeType": 3,
"nameEs": "Visualiza datos utilizando un gráfico de dispersión",
"descriptionEs": [
"Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: http://codepen.io/FreeCodeCamp/full/GoNNEy.",
"Regla #1: No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
"Regla #3: Debes utilizar D3.js para construir este proyecto.",
"Historia de usuario: Puedo ver el tiempo de recorrido en el diagrama de dispersión.",
"Historia de usuario: Puedo ver una descripción emergente con información adicional al mover el ratón sobre el gráfico.",
"Pista: Puedes utilizar el siguiente conjunto de datos para construir tu proyecto: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json",
"Recuerda utilizar Read-Search-Ask si te sientes atascado.",
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro Cuarto de revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true
},
{
"id": "bd7188d8c242eddfaeb5bd13",
"title": "Visualize Data with a Heat Map",
"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)."
],
"releasedOn": "January 1, 2016",
"challengeSeed": [
"150324701"
],
"tests": [],
"type": "zipline",
"challengeType": 3,
"nameEs": "Visualiza datos utilizando un mapa de calor",
"descriptionEs": [
"Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: http://codepen.io/FreeCodeCamp/full/rxWWGa.",
"Regla #1: No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
"Regla #3: Debes utilizar D3.js para construir este proyecto.",
"Historia de usuario: Puedo ver un mapa de calor con datos representados en los ejes x, y.",
"Historia de usuario: El color de cada celda debe estar basado en su relación con otros datos.",
"Historia de usuario: Puedo mover el ratón sobre una celda en el mapa de calor para obtener información más detallada.",
"Pista: Puedes utilizar el siguiente conjunto de datos para construir tu proyecto: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json",
"Recuerda utilizar Read-Search-Ask si te sientes atascado.",
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro Cuarto de revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true
},
{
"id": "bd7198d8c242eddfaeb5bd13",
"title": "Show Relationships with a Force Directed Graph",
"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)."
],
"releasedOn": "January 1, 2016",
"challengeSeed": [
"150324458"
],
"tests": [],
"type": "zipline",
"challengeType": 3,
"nameEs": "Muestra asociaciones utilizando un gráfico de fuerzas dirigidas",
"descriptionEs": [
"Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: http://codepen.io/FreeCodeCamp/full/KVNNXY.",
"Regla #1: No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
"Regla #3: Debes utilizar D3.js para construir este proyecto.",
"Historia de usuario: Puedo ver un gráfico de fuerza dirigida que muestra qué campistas están publicando enlaces en Camper News hacia qué dominios.",
"Historia de usuario: Puedo ver el icono de cada campista en su nodo respectivo.",
"Historia de usuario: Puedo ver la relación entre los campistas y los dominios que publican.",
"Historia de usuario: Puedo conocer aproximadamente cuántas veces los campistas han enlazado un dominio en particular a partir del tamaño del nodo respectivo.",
"Historia de usuario: Puedo conocer aproximadamente cuántas veces un campista específico ha publicado un enlace a partir del tamaño de su nodo.",
"Pista: La siguiente es la ruta del API de noticias de Camper News: http://www.freecodecamp.com/news/hot.",
"Recuerda utilizar Read-Search-Ask si te sientes atascado.",
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro Cuarto de revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true
},
{
"id": "bd7108d8c242eddfaeb5bd13",
"title": "Map Data Across the Globe",
"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)."
],
"releasedOn": "January 1, 2016",
"challengeSeed": [
"150324698"
],
"tests": [],
"type": "zipline",
"challengeType": 3,
"nameEs": "Mapea datos a lo largo del Globo",
"descriptionEs": [
"Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: http://codepen.io/FreeCodeCamp/full/mVEJag.",
"Regla #1: No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
"Regla #3: Debes utilizar D3.js para construir este proyecto.",
"Historia de usuario: Puedo ver a dónde cayeron todos los meteoritos en un mapa mundi.",
"Historia de usuario: Puedo distinguir el tamaño relativo de cada meteorito simplemente viendo la forma en que está representado en el mapa.",
"Historia de usuario: Puedo mover el ratón sobre el dato de cada meteorito para obtener información adicional.",
"Pista: Puedes utilizar el siguiente conjunto de datos para construir tu proyecto: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json",
"Recuerda utilizar Read-Search-Ask si te sientes atascado.",
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro Cuarto de revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true
}
]
}