From b730b67e1ad9764e16e911070c210f77d25c7866 Mon Sep 17 00:00:00 2001 From: Tracey Bushman Date: Mon, 28 Jan 2019 15:11:02 -0700 Subject: [PATCH] fix(curriculum): replace data urls with CDN urls for D3 projects (#34964) * fix(curriculum): replace data urls with CDN urls for D3 projects * fix(curriculum): data urls --languages * fix(curriculum): stray old url --- .../visualize-data-with-a-choropleth-map.chinese.md | 2 +- .../visualize-data-with-a-treemap-diagram.chinese.md | 2 +- .../visualize-data-with-a-choropleth-map.english.md | 2 +- .../visualize-data-with-a-treemap-diagram.english.md | 2 +- .../visualize-data-with-a-choropleth-map.portuguese.md | 2 +- .../visualize-data-with-a-treemap-diagram.portuguese.md | 2 +- .../visualize-data-with-a-choropleth-map.russian.md | 2 +- .../visualize-data-with-a-treemap-diagram.russian.md | 2 +- .../visualize-data-with-a-choropleth-map.spanish.md | 2 +- .../visualize-data-with-a-treemap-diagram.spanish.md | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.chinese.md index e245521b56..3fc82b3a98 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.chinese.md @@ -8,7 +8,7 @@ localeTitle: 使用等值线图可视化数据 --- ## Description -
目标：构建一个功能类似于此的CodePen.io应用程序： https ： //codepen.io/freeCodeCamp/full/EZKqza 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS和基于D3 svg的可视化库。在每次测试时查询必需（非虚拟）DOM元素。如果您使用前端框架（例如Vue），则测试结果可能对动态内容不准确。我们希望最终能够容纳它们，但D3项目目前不支持这些框架。 用户故事＃1：我的等值应该有一个带有相应id="title" 。 用户故事＃2：我的等值应该有一个带有相应id="description"的描述元素。 用户故事＃3：我的等值应该有具有代表数据的相应class="county" 。 用户故事＃4：县应该至少使用4种不同的填充颜色。 用户故事＃5：我的县应该拥有包含相应的fips和教育价值的data-fips和data-education属性。 用户故事＃6：我的等值应该为每个提供的数据点设置一个县。 用户故事＃7：县应具有与样本数据匹配的数据fips和数据教育值。 用户故事＃8：我的等值应该有一个带有相应id="legend" 。 用户故事＃9：图例应至少使用4种不同的填充颜色。 用户故事＃10：我可以将鼠标悬停在某个区域上，并查看带有相应id="tooltip" ，其中显示有关该区域的更多信息。 用户故事＃11：我的工具提示应该具有与活动区域的data-education相对应的data-education属性。以下是完成此项目所需的数据集：
您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js ： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js完成后，将URL提交给您的工作通过所有测试的项目。如果卡住，请记住使用Read-Search-Ask方法。
+
目标：构建一个功能类似于此的CodePen.io应用程序： https ： //codepen.io/freeCodeCamp/full/EZKqza 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS和基于D3 svg的可视化库。在每次测试时查询必需（非虚拟）DOM元素。如果您使用前端框架（例如Vue），则测试结果可能对动态内容不准确。我们希望最终能够容纳它们，但D3项目目前不支持这些框架。 用户故事＃1：我的等值应该有一个带有相应id="title" 。 用户故事＃2：我的等值应该有一个带有相应id="description"的描述元素。 用户故事＃3：我的等值应该有具有代表数据的相应class="county" 。 用户故事＃4：县应该至少使用4种不同的填充颜色。 用户故事＃5：我的县应该拥有包含相应的fips和教育价值的data-fips和data-education属性。 用户故事＃6：我的等值应该为每个提供的数据点设置一个县。 用户故事＃7：县应具有与样本数据匹配的数据fips和数据教育值。 用户故事＃8：我的等值应该有一个带有相应id="legend" 。 用户故事＃9：图例应至少使用4种不同的填充颜色。 用户故事＃10：我可以将鼠标悬停在某个区域上，并查看带有相应id="tooltip" ，其中显示有关该区域的更多信息。 用户故事＃11：我的工具提示应该具有与活动区域的data-education相对应的data-education属性。以下是完成此项目所需的数据集：
您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js ： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js完成后，将URL提交给您的工作通过所有测试的项目。如果卡住，请记住使用Read-Search-Ask方法。
## Instructions
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.chinese.md index 31f60a7d72..69acb56b12 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.chinese.md @@ -8,7 +8,7 @@ localeTitle: 使用树形图可视化数据 --- ## Description -
目标：构建一个功能类似于此的CodePen.io应用程序： https ： //codepen.io/freeCodeCamp/full/KaNGNR 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS和基于D3 svg的可视化库。测试需要使用D3轴属性生成轴，该属性会自动生成沿轴的刻度。通过D3测试需要这些刻度，因为它们的位置用于确定绘制元素的对齐方式。有关生成轴的信息， 请访问https://github.com/d3/d3/blob/master/API.md#axes-d3-axis 。在每次测试时查询必需（非虚拟）DOM元素。如果您使用前端框架（例如Vue），则测试结果可能对动态内容不准确。我们希望最终能够容纳它们，但D3项目目前不支持这些框架。 用户故事＃1：我的树图应该有一个标题，对应的id="title" 。 用户故事＃2：我的树图应该有一个对应id="description" 。 用户故事＃3：我的树形图应该有一个rect元素，并且对应的class="tile"代表数据。 用户故事＃4：瓷砖应至少有2种不同的填充颜色。 用户故事＃5：每个瓷砖应具有属性data-name ， data-category ，和data-value包含其相应的名称，类别，和值。 用户故事＃6：每个图块的区域应对应于数据值量：具有较大数据值的图块应具有更大的区域。 用户故事＃7：我的树形图应该有一个对应id="legend" 。 用户故事＃8：我的图例应该有一个带有相应class="legend-item" rect元素。 用户故事＃9：图例中的rect元素应使用至少2种不同的填充颜色。 用户故事＃10：我可以将鼠标悬停在某个区域上，并查看带有相应id="tooltip" ，其中显示有关该区域的更多信息。 用户故事＃11：我的工具提示应具有与活动区域的data-value对应的data-value data-value属性。对于此项目，您可以使用以下任何数据集：
  • Kickstarter承诺： https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json ： https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json
  • 电影销售： https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json ： https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json
  • 视频游戏销售： https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json ： https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json
您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js ： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js完成后，将URL提交给您的工作通过所有测试的项目。如果卡住，请记住使用Read-Search-Ask方法。
+
目标：构建一个功能类似于此的CodePen.io应用程序： https ： //codepen.io/freeCodeCamp/full/KaNGNR 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS和基于D3 svg的可视化库。测试需要使用D3轴属性生成轴，该属性会自动生成沿轴的刻度。通过D3测试需要这些刻度，因为它们的位置用于确定绘制元素的对齐方式。有关生成轴的信息， 请访问https://github.com/d3/d3/blob/master/API.md#axes-d3-axis 。在每次测试时查询必需（非虚拟）DOM元素。如果您使用前端框架（例如Vue），则测试结果可能对动态内容不准确。我们希望最终能够容纳它们，但D3项目目前不支持这些框架。 用户故事＃1：我的树图应该有一个标题，对应的id="title" 。 用户故事＃2：我的树图应该有一个对应id="description" 。 用户故事＃3：我的树形图应该有一个rect元素，并且对应的class="tile"代表数据。 用户故事＃4：瓷砖应至少有2种不同的填充颜色。 用户故事＃5：每个瓷砖应具有属性data-name ， data-category ，和data-value包含其相应的名称，类别，和值。 用户故事＃6：每个图块的区域应对应于数据值量：具有较大数据值的图块应具有更大的区域。 用户故事＃7：我的树形图应该有一个对应id="legend" 。 用户故事＃8：我的图例应该有一个带有相应class="legend-item" rect元素。 用户故事＃9：图例中的rect元素应使用至少2种不同的填充颜色。 用户故事＃10：我可以将鼠标悬停在某个区域上，并查看带有相应id="tooltip" ，其中显示有关该区域的更多信息。 用户故事＃11：我的工具提示应具有与活动区域的data-value对应的data-value data-value属性。对于此项目，您可以使用以下任何数据集：
  • Kickstarter承诺： https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json ： https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
  • 电影销售： https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json ： https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
  • 视频游戏销售： https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json ： https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js ： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js完成后，将URL提交给您的工作通过所有测试的项目。如果卡住，请记住使用Read-Search-Ask方法。
## Instructions
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.english.md index c738dce165..0c377b1826 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.english.md @@ -21,7 +21,7 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. R User Story #9: There should be at least 4 different fill colors used for the legend. User Story #10: I can mouse over an area and see a tooltip with a corresponding id="tooltip" which displays more information about the area. User Story #11: My tooltip should have a data-education property that corresponds to the data-education of the active area. -Here are the datasets you will need to complete this project:
  • US Education Data: https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json
  • US County Data: https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json
+Here are the datasets you will need to complete this project:
  • US Education Data: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
  • US County Data: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Once you're done, submit the URL to your working project with all its tests passing. Remember to use the Read-Search-Ask method if you get stuck. diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.english.md index 43b3768b6d..c667ad8a00 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.english.md @@ -21,7 +21,7 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. T User Story #9: The rect elements in the legend should use at least 2 different fill colors. User Story #10: I can mouse over an area and see a tooltip with a corresponding id="tooltip" which displays more information about the area. User Story #11: My tooltip should have a data-value property that corresponds to the data-value of the active area. -For this project you can use any of the following datasets:
  • Kickstarter Pledges: https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json
  • Movie Sales: https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json
  • Video Game Sales: https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json
+For this project you can use any of the following datasets:
  • Kickstarter Pledges: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
  • Movie Sales: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
  • Video Game Sales: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Once you're done, submit the URL to your working project with all its tests passing. Remember to use the Read-Search-Ask method if you get stuck. diff --git a/curriculum/challenges/portuguese/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.portuguese.md b/curriculum/challenges/portuguese/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.portuguese.md index c21e375d68..7e8615e459 100644 --- a/curriculum/challenges/portuguese/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.portuguese.md +++ b/curriculum/challenges/portuguese/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.portuguese.md @@ -8,7 +8,7 @@ localeTitle: Visualize dados com um mapa coroplético --- ## Description -
Objetivo: criar um aplicativo CodePen.io que seja funcionalmente semelhante a este: https://codepen.io/freeCodeCamp/full/EZKqza . Cumpra as histórias de usuário abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. História do usuário nº 1: Meu choropleth deve ter um título com um id="title" . História do usuário nº 2: Meu choropleth deve ter um elemento de descrição com um id="description" . História do usuário nº 3: Meu choropleth deve ter condados com uma class="county" correspondente class="county" que represente os dados. História do usuário nº 4: deve haver pelo menos quatro cores de preenchimento diferentes usadas para os municípios. História do usuário # 5: Meus municípios devem ter propriedades de data-fips e data-education contendo seus valores de educação e fips correspondentes. História do Usuário # 6: Meu coroplópio deve ter um condado para cada ponto de dados fornecido. História do usuário nº 7: os municípios devem ter dados-fips e valores de dados-educação que correspondam aos dados da amostra. História do usuário nº 8: Meu choropleth deve ter uma legenda com um id="legend" . História do usuário nº 9: Deve haver pelo menos 4 cores de preenchimento diferentes usadas para a legenda. História do usuário nº 10: Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um id="tooltip" que exibe mais informações sobre a área. História do usuário nº 11: Minha dica de ferramenta deve ter uma propriedade de data-education que corresponda à data-education da área ativa. Aqui estão os conjuntos de dados necessários para concluir este projeto:
  • Dados educacionais dos EUA: https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json
  • Dados do Condado dos EUA: https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json
Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso.
+
Objetivo: criar um aplicativo CodePen.io que seja funcionalmente semelhante a este: https://codepen.io/freeCodeCamp/full/EZKqza . Cumpra as histórias de usuário abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. História do usuário nº 1: Meu choropleth deve ter um título com um id="title" . História do usuário nº 2: Meu choropleth deve ter um elemento de descrição com um id="description" . História do usuário nº 3: Meu choropleth deve ter condados com uma class="county" correspondente class="county" que represente os dados. História do usuário nº 4: deve haver pelo menos quatro cores de preenchimento diferentes usadas para os municípios. História do usuário # 5: Meus municípios devem ter propriedades de data-fips e data-education contendo seus valores de educação e fips correspondentes. História do Usuário # 6: Meu coroplópio deve ter um condado para cada ponto de dados fornecido. História do usuário nº 7: os municípios devem ter dados-fips e valores de dados-educação que correspondam aos dados da amostra. História do usuário nº 8: Meu choropleth deve ter uma legenda com um id="legend" . História do usuário nº 9: Deve haver pelo menos 4 cores de preenchimento diferentes usadas para a legenda. História do usuário nº 10: Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um id="tooltip" que exibe mais informações sobre a área. História do usuário nº 11: Minha dica de ferramenta deve ter uma propriedade de data-education que corresponda à data-education da área ativa. Aqui estão os conjuntos de dados necessários para concluir este projeto:
  • Dados educacionais dos EUA: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
  • Dados do Condado dos EUA: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso.
## Instructions
diff --git a/curriculum/challenges/portuguese/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.portuguese.md b/curriculum/challenges/portuguese/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.portuguese.md index e7c6e8a7fa..cad49ccef4 100644 --- a/curriculum/challenges/portuguese/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.portuguese.md +++ b/curriculum/challenges/portuguese/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.portuguese.md @@ -8,7 +8,7 @@ localeTitle: Visualize dados com um diagrama de mapa de árvore --- ## Description -
Objetivo: criar um aplicativo CodePen.io que seja funcionalmente semelhante a este: https://codepen.io/freeCodeCamp/full/KaNGNR . Cumpra as histórias de usuário abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Os testes exigem que os eixos sejam gerados usando a propriedade do eixo D3, que gera automaticamente marcações ao longo do eixo. Esses tiques são necessários para passar nos testes D3, porque suas posições são usadas para determinar o alinhamento dos elementos gráficos. Você encontrará informações sobre como gerar eixos em https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. User Story # 1: Meu mapa da árvore deve ter um título com um id="title" . User Story # 2: Meu mapa de árvore deve ter uma descrição com um id="description" . User Story # 3: Meu mapa de árvore deve ter elementos rect com uma class="tile" que representa os dados. História do usuário nº 4: deve haver pelo menos duas cores de preenchimento diferentes usadas para as peças. História do usuário nº 5: Cada bloco deve ter as propriedades data-name , data-category e data-value contendo seu nome, categoria e valor correspondentes. História do usuário nº 6: a área de cada bloco deve corresponder ao valor do valor dos dados: blocos com um valor de dados maior devem ter uma área maior. User Story # 7: Meu mapa da árvore deve ter uma legenda com id="legend" . User Story # 8: Minha legenda deve ter elementos rect com uma class="legend-item" . User Story # 9: Os elementos rect na legenda devem usar pelo menos 2 cores de preenchimento diferentes. User Story # 10: Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um id="tooltip" que exibe mais informações sobre a área. User Story # 11: minha dica de ferramenta deve ter uma propriedade de data-value que corresponda ao data-value de data-value da área ativa. Para este projeto, você pode usar qualquer um dos seguintes conjuntos de dados:
  • Promessas do Kickstarter: https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json
  • Vendas de filmes: https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json
  • Vendas de videogames: https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json
Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso.
+
Objetivo: criar um aplicativo CodePen.io que seja funcionalmente semelhante a este: https://codepen.io/freeCodeCamp/full/KaNGNR . Cumpra as histórias de usuário abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Os testes exigem que os eixos sejam gerados usando a propriedade do eixo D3, que gera automaticamente marcações ao longo do eixo. Esses tiques são necessários para passar nos testes D3, porque suas posições são usadas para determinar o alinhamento dos elementos gráficos. Você encontrará informações sobre como gerar eixos em https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. User Story # 1: Meu mapa da árvore deve ter um título com um id="title" . User Story # 2: Meu mapa de árvore deve ter uma descrição com um id="description" . User Story # 3: Meu mapa de árvore deve ter elementos rect com uma class="tile" que representa os dados. História do usuário nº 4: deve haver pelo menos duas cores de preenchimento diferentes usadas para as peças. História do usuário nº 5: Cada bloco deve ter as propriedades data-name , data-category e data-value contendo seu nome, categoria e valor correspondentes. História do usuário nº 6: a área de cada bloco deve corresponder ao valor do valor dos dados: blocos com um valor de dados maior devem ter uma área maior. User Story # 7: Meu mapa da árvore deve ter uma legenda com id="legend" . User Story # 8: Minha legenda deve ter elementos rect com uma class="legend-item" . User Story # 9: Os elementos rect na legenda devem usar pelo menos 2 cores de preenchimento diferentes. User Story # 10: Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um id="tooltip" que exibe mais informações sobre a área. User Story # 11: minha dica de ferramenta deve ter uma propriedade de data-value que corresponda ao data-value de data-value da área ativa. Para este projeto, você pode usar qualquer um dos seguintes conjuntos de dados:
  • Promessas do Kickstarter: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
  • Vendas de filmes: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
  • Vendas de videogames: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso.
## Instructions
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.russian.md index f9d299552d..b4dfb52811 100644 --- a/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.russian.md +++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.russian.md @@ -8,7 +8,7 @@ localeTitle: Визуализация данных с помощью карты --- ## Description -
Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/EZKqza . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Мой choropleth должен иметь заголовок с соответствующим id="title" . User Story # 2: У моего choropleth должен быть элемент описания с соответствующим id="description" . User Story # 3: Мой choropleth должен иметь графства с соответствующим class="county" которые представляют данные. User Story # 4: должно быть не менее 4 разных цветов заливки, используемых для округов. User Story # 5: Мои округа должны иметь характеристики data-fips и data-education имеющие соответствующие значения fips и education. User Story # 6: Мой choropleth должен иметь графство для каждой предоставленной точки данных. User Story # 7: В округах должны быть значения данных и данных, которые соответствуют данным образца. User Story # 8: Мой choropleth должен иметь легенду с соответствующим id="legend" . User Story # 9: Для легенды должно быть не менее 4 различных цветов заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство data-education которое соответствует data-education данных в активной области. Вот данные, которые вам нужно будет выполнить для этого проекта:
  • Данные об образовании в США: https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json
  • Данные графства США: https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json
Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+
Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/EZKqza . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Мой choropleth должен иметь заголовок с соответствующим id="title" . User Story # 2: У моего choropleth должен быть элемент описания с соответствующим id="description" . User Story # 3: Мой choropleth должен иметь графства с соответствующим class="county" которые представляют данные. User Story # 4: должно быть не менее 4 разных цветов заливки, используемых для округов. User Story # 5: Мои округа должны иметь характеристики data-fips и data-education имеющие соответствующие значения fips и education. User Story # 6: Мой choropleth должен иметь графство для каждой предоставленной точки данных. User Story # 7: В округах должны быть значения данных и данных, которые соответствуют данным образца. User Story # 8: Мой choropleth должен иметь легенду с соответствующим id="legend" . User Story # 9: Для легенды должно быть не менее 4 различных цветов заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство data-education которое соответствует data-education данных в активной области. Вот данные, которые вам нужно будет выполнить для этого проекта:
  • Данные об образовании в США: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
  • Данные графства США: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
## Instructions
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.russian.md index b7baa5e17b..848b7130e9 100644 --- a/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.russian.md +++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.russian.md @@ -8,7 +8,7 @@ localeTitle: Визуализация данных с диаграммой ка --- ## Description -
Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/KaNGNR . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Моя карта дерева должна иметь заголовок с соответствующим id="title" . User Story # 2: Моя древовидная карта должна иметь описание с соответствующим id="description" . User Story # 3: Моя карта деревьев должна иметь rect элементы с соответствующим class="tile" которые представляют данные. User Story # 4: Для плиток должно быть не менее двух разных цветов заливки. User Story # 5: Каждая плитка должна иметь свойства data-name , data-category и data-value содержащие их соответствующее имя, категорию и значение. User Story # 6: Площадь каждой плитки должна соответствовать размеру данных: плитки с большим значением данных должны иметь большую площадь. User Story # 7: Моя карта деревьев должна иметь легенду с соответствующим id="legend" . User Story # 8: Моя легенда должна иметь rect элементы с соответствующим class="legend-item" . User Story # 9: rect элементы в легенде должны использовать как минимум 2 разных цвета заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство data-value , соответствующее data-value данных активной области. Для этого проекта вы можете использовать любой из следующих наборов данных:
  • Kickstarter Pledges: https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json
  • Продажа фильмов: https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json
  • Продажа видеоигр: https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json
Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+
Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/KaNGNR . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Моя карта дерева должна иметь заголовок с соответствующим id="title" . User Story # 2: Моя древовидная карта должна иметь описание с соответствующим id="description" . User Story # 3: Моя карта деревьев должна иметь rect элементы с соответствующим class="tile" которые представляют данные. User Story # 4: Для плиток должно быть не менее двух разных цветов заливки. User Story # 5: Каждая плитка должна иметь свойства data-name , data-category и data-value содержащие их соответствующее имя, категорию и значение. User Story # 6: Площадь каждой плитки должна соответствовать размеру данных: плитки с большим значением данных должны иметь большую площадь. User Story # 7: Моя карта деревьев должна иметь легенду с соответствующим id="legend" . User Story # 8: Моя легенда должна иметь rect элементы с соответствующим class="legend-item" . User Story # 9: rect элементы в легенде должны использовать как минимум 2 разных цвета заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство data-value , соответствующее data-value данных активной области. Для этого проекта вы можете использовать любой из следующих наборов данных:
  • Kickstarter Pledges: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
  • Продажа фильмов: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
  • Продажа видеоигр: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
## Instructions undefined diff --git a/curriculum/challenges/spanish/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.spanish.md b/curriculum/challenges/spanish/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.spanish.md index dc3fea766e..484b412bdd 100644 --- a/curriculum/challenges/spanish/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.spanish.md +++ b/curriculum/challenges/spanish/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.spanish.md @@ -8,7 +8,7 @@ localeTitle: Visualice datos con un mapa de coropletas --- ## Description -
Objetivo: crear una aplicación CodePen.io que sea funcionalmente similar a esta: https://codepen.io/freeCodeCamp/full/EZKqza . Cumple las siguientes historias de usuario y haz que pasen todas las pruebas. Dale tu propio estilo personal. Puede utilizar HTML, JavaScript, CSS y la biblioteca de visualización basada en svg D3. Los elementos DOM (no virtuales) requeridos se consultan en el momento de cada prueba. Si usa un marco de frontend (como Vue, por ejemplo), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos acomodarlos eventualmente, pero estos marcos no están actualmente soportados para proyectos D3. Historia de usuario n. ° 1: Mi coropleta debe tener un título con una id="title" correspondiente id="title" . Historia de usuario n. ° 2: Mi choropleth debe tener un elemento de descripción con un id="description" . Historia de usuario n. ° 3: Mi coropleta debe tener condados con una class="county" correspondiente class="county" que represente los datos. Historia de usuario n. ° 4: Debe haber al menos 4 colores de relleno diferentes utilizados para los condados. Historia de usuario n. ° 5: Mis condados deben tener cada uno data-fips y propiedades de data-education contengan sus fips y valores de educación correspondientes. Historia de usuario n. ° 6: Mi coropleta debe tener un condado para cada punto de datos proporcionado. Historia de usuario n. ° 7: Los condados deben tener datos de fips y valores de educación de datos que coincidan con los datos de muestra. Historia de usuario n. ° 8: Mi coropleta debe tener una leyenda con su correspondiente id="legend" . Historia de usuario n. ° 9: Debe haber al menos 4 colores de relleno diferentes utilizados para la leyenda. Historia de usuario n. ° 10: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip" que muestra más información sobre el área. Historia de usuario n. ° 11: Mi información sobre herramientas debe tener una propiedad de data-education que corresponda a la data-education de data-education del área activa. Aquí están los conjuntos de datos que necesitará para completar este proyecto:
  • Datos de educación de los Estados Unidos: https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json
  • Datos del condado de EE. UU .: https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json
Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas.
+
Objetivo: crear una aplicación CodePen.io que sea funcionalmente similar a esta: https://codepen.io/freeCodeCamp/full/EZKqza . Cumple las siguientes historias de usuario y haz que pasen todas las pruebas. Dale tu propio estilo personal. Puede utilizar HTML, JavaScript, CSS y la biblioteca de visualización basada en svg D3. Los elementos DOM (no virtuales) requeridos se consultan en el momento de cada prueba. Si usa un marco de frontend (como Vue, por ejemplo), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos acomodarlos eventualmente, pero estos marcos no están actualmente soportados para proyectos D3. Historia de usuario n. ° 1: Mi coropleta debe tener un título con una id="title" correspondiente id="title" . Historia de usuario n. ° 2: Mi choropleth debe tener un elemento de descripción con un id="description" . Historia de usuario n. ° 3: Mi coropleta debe tener condados con una class="county" correspondiente class="county" que represente los datos. Historia de usuario n. ° 4: Debe haber al menos 4 colores de relleno diferentes utilizados para los condados. Historia de usuario n. ° 5: Mis condados deben tener cada uno data-fips y propiedades de data-education contengan sus fips y valores de educación correspondientes. Historia de usuario n. ° 6: Mi coropleta debe tener un condado para cada punto de datos proporcionado. Historia de usuario n. ° 7: Los condados deben tener datos de fips y valores de educación de datos que coincidan con los datos de muestra. Historia de usuario n. ° 8: Mi coropleta debe tener una leyenda con su correspondiente id="legend" . Historia de usuario n. ° 9: Debe haber al menos 4 colores de relleno diferentes utilizados para la leyenda. Historia de usuario n. ° 10: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip" que muestra más información sobre el área. Historia de usuario n. ° 11: Mi información sobre herramientas debe tener una propiedad de data-education que corresponda a la data-education de data-education del área activa. Aquí están los conjuntos de datos que necesitará para completar este proyecto:
  • Datos de educación de los Estados Unidos: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
  • Datos del condado de EE. UU .: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas.
## Instructions
diff --git a/curriculum/challenges/spanish/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.spanish.md b/curriculum/challenges/spanish/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.spanish.md index 0b6fdad26f..ae0316142d 100644 --- a/curriculum/challenges/spanish/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.spanish.md +++ b/curriculum/challenges/spanish/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.spanish.md @@ -8,7 +8,7 @@ localeTitle: Visualice datos con un diagrama de treemap --- ## Description -
Objetivo: crear una aplicación CodePen.io que sea funcionalmente similar a esta: https://codepen.io/freeCodeCamp/full/KaNGNR . Cumple las siguientes historias de usuario y haz que pasen todas las pruebas. Dale tu propio estilo personal. Puede utilizar HTML, JavaScript, CSS y la biblioteca de visualización basada en svg D3. Las pruebas requieren que se generen ejes utilizando la propiedad del eje D3, que genera automáticamente tics a lo largo del eje. Estas marcas son necesarias para pasar las pruebas D3 porque sus posiciones se usan para determinar la alineación de los elementos graficados. Encontrará información sobre la generación de ejes en https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Los elementos DOM (no virtuales) requeridos se consultan en el momento de cada prueba. Si usa un marco de frontend (como Vue, por ejemplo), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos acomodarlos eventualmente, pero estos marcos no están actualmente soportados para proyectos D3. Historia de usuario n. ° 1: el mapa de mi árbol debe tener un título con una id="title" correspondiente id="title" . Historia de usuario n. ° 2: el mapa de mi árbol debe tener una descripción con una id="description" correspondiente id="description" . Historia de usuario n. ° 3: Mi mapa de árbol debe tener elementos rect con una class="tile" correspondiente class="tile" que representa los datos. Historia de usuario n. ° 4: Debe haber al menos 2 colores de relleno diferentes utilizados para los azulejos. Historia de usuario n. ° 5: Cada mosaico debe tener las propiedades data-name data-category data-value contengan su nombre, categoría y valor correspondientes. Historia de usuario n. ° 6: El área de cada mosaico debe corresponder a la cantidad del valor de los datos: los mosaicos con un valor de datos más grande deben tener un área más grande. Historia de usuario n. ° 7: Mi mapa de árbol debe tener una leyenda con el id="legend" correspondiente id="legend" . Historia de usuario n. ° 8: Mi leyenda debe tener elementos rect con una class="legend-item" correspondiente class="legend-item" . Historia de usuario n. ° 9: Los elementos rect en la leyenda deben usar al menos 2 colores de relleno diferentes. Historia de usuario n. ° 10: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip" que muestra más información sobre el área. Historia de usuario n. ° 11: Mi información sobre herramientas debe tener una propiedad de data-value que corresponda al data-value de data-value del área activa. Para este proyecto puedes usar cualquiera de los siguientes conjuntos de datos:
  • Compromisos de Kickstarter: https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json
  • Ventas de películas: https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json
  • Ventas de videojuegos: https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json
Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas.
+
Objetivo: crear una aplicación CodePen.io que sea funcionalmente similar a esta: https://codepen.io/freeCodeCamp/full/KaNGNR . Cumple las siguientes historias de usuario y haz que pasen todas las pruebas. Dale tu propio estilo personal. Puede utilizar HTML, JavaScript, CSS y la biblioteca de visualización basada en svg D3. Las pruebas requieren que se generen ejes utilizando la propiedad del eje D3, que genera automáticamente tics a lo largo del eje. Estas marcas son necesarias para pasar las pruebas D3 porque sus posiciones se usan para determinar la alineación de los elementos graficados. Encontrará información sobre la generación de ejes en https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Los elementos DOM (no virtuales) requeridos se consultan en el momento de cada prueba. Si usa un marco de frontend (como Vue, por ejemplo), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos acomodarlos eventualmente, pero estos marcos no están actualmente soportados para proyectos D3. Historia de usuario n. ° 1: el mapa de mi árbol debe tener un título con una id="title" correspondiente id="title" . Historia de usuario n. ° 2: el mapa de mi árbol debe tener una descripción con una id="description" correspondiente id="description" . Historia de usuario n. ° 3: Mi mapa de árbol debe tener elementos rect con una class="tile" correspondiente class="tile" que representa los datos. Historia de usuario n. ° 4: Debe haber al menos 2 colores de relleno diferentes utilizados para los azulejos. Historia de usuario n. ° 5: Cada mosaico debe tener las propiedades data-name data-category data-value contengan su nombre, categoría y valor correspondientes. Historia de usuario n. ° 6: El área de cada mosaico debe corresponder a la cantidad del valor de los datos: los mosaicos con un valor de datos más grande deben tener un área más grande. Historia de usuario n. ° 7: Mi mapa de árbol debe tener una leyenda con el id="legend" correspondiente id="legend" . Historia de usuario n. ° 8: Mi leyenda debe tener elementos rect con una class="legend-item" correspondiente class="legend-item" . Historia de usuario n. ° 9: Los elementos rect en la leyenda deben usar al menos 2 colores de relleno diferentes. Historia de usuario n. ° 10: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip" que muestra más información sobre el área. Historia de usuario n. ° 11: Mi información sobre herramientas debe tener una propiedad de data-value que corresponda al data-value de data-value del área activa. Para este proyecto puedes usar cualquiera de los siguientes conjuntos de datos:
  • Compromisos de Kickstarter: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
  • Ventas de películas: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
  • Ventas de videojuegos: https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas.
## Instructions