chore(i18n,curriculum): processed translations (#42734)
This commit is contained in:
camperbot
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c14e
|
||||
title: Data Analysis Example B
|
||||
title: 數據分析 案例 B
|
||||
challengeType: 11
|
||||
videoId: 0kJz0q0pvgQ
|
||||
dashedName: data-analysis-example-b
|
||||
@ -8,30 +8,30 @@ dashedName: data-analysis-example-b
|
||||
|
||||
# --description--
|
||||
|
||||
*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
|
||||
*您可以使用 Google Colab，而不是像視頻中顯示的那樣使用 notebooks.ai。*
|
||||
|
||||
More resources:
|
||||
更多資源：
|
||||
|
||||
- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/FreeCodeCamp-Pandas-Real-Life-Example)
|
||||
- [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
- [在 GitHub 平臺的 Notebooks](https://github.com/ine-rmotr-curriculum/FreeCodeCamp-Pandas-Real-Life-Example)
|
||||
- [如何使用 Google Colab 來打開 GitHub 上的 Notebooks](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What does the `loc` method allow you to do?
|
||||
`loc` 方法允許您做什麼？
|
||||
|
||||
## --answers--
|
||||
|
||||
Retrieve a subset of rows and columns by supplying integer-location arguments.
|
||||
通過提供整數位置參數來獲取一個行和列的子集。
|
||||
|
||||
---
|
||||
|
||||
Access a group of rows and columns by supplying label(s) arguments.
|
||||
通過提供標籤參數來訪問一組行和列。
|
||||
|
||||
---
|
||||
|
||||
Returns the first `n` rows based on the integer argument supplied.
|
||||
根據提供的整數參數返回前 `n` 行。
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c15d
|
||||
title: Data Cleaning Introduction
|
||||
title: 數據清理簡介
|
||||
challengeType: 11
|
||||
videoId: ovYNhnltVxY
|
||||
dashedName: data-cleaning-introduction
|
||||
@ -8,18 +8,18 @@ dashedName: data-cleaning-introduction
|
||||
|
||||
# --description--
|
||||
|
||||
*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
|
||||
*您可以使用 Google Colab，而不是像視頻中顯示的那樣使用 notebooks.ai。*
|
||||
|
||||
More resources:
|
||||
以下有更多的資料：
|
||||
|
||||
- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/data-cleaning-rmotr-freecodecamp)
|
||||
- [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
- [在 GitHub 平臺的 Notebooks](https://github.com/ine-rmotr-curriculum/data-cleaning-rmotr-freecodecamp)
|
||||
- [如何使用 Google Colab 來打開 GitHub 上的 Notebooks](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following code print out?
|
||||
以下代碼會打印出什麼？
|
||||
|
||||
```py
|
||||
import pandas as pd
|
||||
|
||||
@ -1,23 +1,24 @@
|
||||
---
|
||||
id: 5e46f7e5ac417301a38fb928
|
||||
title: Mean-Variance-Standard Deviation Calculator
|
||||
title: 均值-方差-標準差 計算器
|
||||
challengeType: 10
|
||||
forumTopicId: 462366
|
||||
dashedName: mean-variance-standard-deviation-calculator
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a function that uses Numpy to output the mean, variance, and standard deviation of the rows, columns, and elements in a 3 x 3 matrix.
|
||||
創建一個函數，這個函數可以使用 Numpy 輸出 3 x 3 矩陣的每一行、每一列和所有元素的均值，方差和標準差。
|
||||
|
||||
You can access [the full project description and starter code on Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mean-variance-standard-deviation-calculator).
|
||||
你可以在 [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mean-variance-standard-deviation-calculator) 上查看整個項目的具體描述和初始代碼。
|
||||
|
||||
After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below.
|
||||
點擊此鏈接，fork 這個項目。 當你根據 “README.md” 中的說明完成了項目，請在下方提交你的項目鏈接。
|
||||
|
||||
We are still developing the interactive instructional part of the data analysis with Python curriculum. For now, you will have to use other resources to learn how to pass this challenge.
|
||||
我們仍在開發 Python 數據分析課程的交互式教學。 現在，您將需要使用其他資源來學習如何通過這一挑戰。
|
||||
|
||||
# --hints--
|
||||
|
||||
It should pass all Python tests.
|
||||
它應該通過所有的 Python 測試。
|
||||
|
||||
```js
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a0a8e09c5df3cc3600eda
|
||||
title: Loading Data and Advanced Indexing
|
||||
title: 加載數據和高級索引
|
||||
challengeType: 11
|
||||
videoId: tUdBZ7pF8Jg
|
||||
dashedName: loading-data-and-advanced-indexing
|
||||
@ -10,14 +10,14 @@ dashedName: loading-data-and-advanced-indexing
|
||||
|
||||
## --text--
|
||||
|
||||
Given a file named `data.txt` with these contents:
|
||||
給定一個名爲 `data.txt` 的文件，其中包含以下內容：
|
||||
|
||||
<pre>
|
||||
29,97,32,100,45
|
||||
15,88,5,75,22
|
||||
</pre>
|
||||
|
||||
What code would produce the following array?
|
||||
哪段代碼會生成下面的數組？
|
||||
|
||||
```py
|
||||
[29. 32. 45. 15. 5. 22.]
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a0a8e09c5df3cc3600ed2
|
||||
title: What is NumPy
|
||||
title: Numpy 是什麼？
|
||||
challengeType: 11
|
||||
videoId: 5Nwfs5Ej85Q
|
||||
dashedName: what-is-numpy
|
||||
@ -10,23 +10,23 @@ dashedName: what-is-numpy
|
||||
|
||||
## --text--
|
||||
|
||||
Why are Numpy arrays faster than regular Python lists?
|
||||
爲什麼 Numpy 數組要比常規的 Python 列表更快？
|
||||
|
||||
## --answers--
|
||||
|
||||
Numpy does not perform type checking while iterating through objects.
|
||||
Numpy 在遍歷對象時不執行類型檢查。
|
||||
|
||||
---
|
||||
|
||||
Numpy uses fixed types.
|
||||
Numpy 使用固定類型。
|
||||
|
||||
---
|
||||
|
||||
Numpy uses contiguous memory.
|
||||
Numpy 使用連續內存。
|
||||
|
||||
---
|
||||
|
||||
All of the above.
|
||||
上述所有的。
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c14e
|
||||
title: Data Analysis Example B
|
||||
title: 数据分析 案例 B
|
||||
challengeType: 11
|
||||
videoId: 0kJz0q0pvgQ
|
||||
dashedName: data-analysis-example-b
|
||||
@ -8,30 +8,30 @@ dashedName: data-analysis-example-b
|
||||
|
||||
# --description--
|
||||
|
||||
*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
|
||||
*您可以使用 Google Colab，而不是像视频中显示的那样使用 notebooks.ai。*
|
||||
|
||||
More resources:
|
||||
更多资源：
|
||||
|
||||
- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/FreeCodeCamp-Pandas-Real-Life-Example)
|
||||
- [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
- [在 GitHub 平台的 Notebooks](https://github.com/ine-rmotr-curriculum/FreeCodeCamp-Pandas-Real-Life-Example)
|
||||
- [如何使用 Google Colab 来打开 GitHub 上的 Notebooks](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What does the `loc` method allow you to do?
|
||||
`loc` 方法允许您做什么？
|
||||
|
||||
## --answers--
|
||||
|
||||
Retrieve a subset of rows and columns by supplying integer-location arguments.
|
||||
通过提供整数位置参数来获取一个行和列的子集。
|
||||
|
||||
---
|
||||
|
||||
Access a group of rows and columns by supplying label(s) arguments.
|
||||
通过提供标签参数来访问一组行和列。
|
||||
|
||||
---
|
||||
|
||||
Returns the first `n` rows based on the integer argument supplied.
|
||||
根据提供的整数参数返回前 `n` 行。
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c15d
|
||||
title: Data Cleaning Introduction
|
||||
title: 数据清理简介
|
||||
challengeType: 11
|
||||
videoId: ovYNhnltVxY
|
||||
dashedName: data-cleaning-introduction
|
||||
@ -8,18 +8,18 @@ dashedName: data-cleaning-introduction
|
||||
|
||||
# --description--
|
||||
|
||||
*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
|
||||
*您可以使用 Google Colab，而不是像视频中显示的那样使用 notebooks.ai。*
|
||||
|
||||
More resources:
|
||||
以下有更多的资料：
|
||||
|
||||
- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/data-cleaning-rmotr-freecodecamp)
|
||||
- [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
- [在 GitHub 平台的 Notebooks](https://github.com/ine-rmotr-curriculum/data-cleaning-rmotr-freecodecamp)
|
||||
- [如何使用 Google Colab 来打开 GitHub 上的 Notebooks](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following code print out?
|
||||
以下代码会打印出什么？
|
||||
|
||||
```py
|
||||
import pandas as pd
|
||||
|
||||
@ -1,23 +1,24 @@
|
||||
---
|
||||
id: 5e46f7e5ac417301a38fb928
|
||||
title: Mean-Variance-Standard Deviation Calculator
|
||||
title: 均值-方差-标准差 计算器
|
||||
challengeType: 10
|
||||
forumTopicId: 462366
|
||||
dashedName: mean-variance-standard-deviation-calculator
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a function that uses Numpy to output the mean, variance, and standard deviation of the rows, columns, and elements in a 3 x 3 matrix.
|
||||
创建一个函数，这个函数可以使用 Numpy 输出 3 x 3 矩阵的每一行、每一列和所有元素的均值，方差和标准差。
|
||||
|
||||
You can access [the full project description and starter code on Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mean-variance-standard-deviation-calculator).
|
||||
你可以在 [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mean-variance-standard-deviation-calculator) 上查看整个项目的具体描述和初始代码。
|
||||
|
||||
After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below.
|
||||
点击此链接，fork 这个项目。 当你根据 “README.md” 中的说明完成了项目，请在下方提交你的项目链接。
|
||||
|
||||
We are still developing the interactive instructional part of the data analysis with Python curriculum. For now, you will have to use other resources to learn how to pass this challenge.
|
||||
我们仍在开发 Python 数据分析课程的交互式教学。 现在，您将需要使用其他资源来学习如何通过这一挑战。
|
||||
|
||||
# --hints--
|
||||
|
||||
It should pass all Python tests.
|
||||
它应该通过所有的 Python 测试。
|
||||
|
||||
```js
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a0a8e09c5df3cc3600eda
|
||||
title: Loading Data and Advanced Indexing
|
||||
title: 加载数据和高级索引
|
||||
challengeType: 11
|
||||
videoId: tUdBZ7pF8Jg
|
||||
dashedName: loading-data-and-advanced-indexing
|
||||
@ -10,14 +10,14 @@ dashedName: loading-data-and-advanced-indexing
|
||||
|
||||
## --text--
|
||||
|
||||
Given a file named `data.txt` with these contents:
|
||||
给定一个名为 `data.txt` 的文件，其中包含以下内容：
|
||||
|
||||
<pre>
|
||||
29,97,32,100,45
|
||||
15,88,5,75,22
|
||||
</pre>
|
||||
|
||||
What code would produce the following array?
|
||||
哪段代码会生成下面的数组？
|
||||
|
||||
```py
|
||||
[29. 32. 45. 15. 5. 22.]
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a0a8e09c5df3cc3600ed2
|
||||
title: What is NumPy
|
||||
title: Numpy 是什么？
|
||||
challengeType: 11
|
||||
videoId: 5Nwfs5Ej85Q
|
||||
dashedName: what-is-numpy
|
||||
@ -10,23 +10,23 @@ dashedName: what-is-numpy
|
||||
|
||||
## --text--
|
||||
|
||||
Why are Numpy arrays faster than regular Python lists?
|
||||
为什么 Numpy 数组要比常规的 Python 列表更快？
|
||||
|
||||
## --answers--
|
||||
|
||||
Numpy does not perform type checking while iterating through objects.
|
||||
Numpy 在遍历对象时不执行类型检查。
|
||||
|
||||
---
|
||||
|
||||
Numpy uses fixed types.
|
||||
Numpy 使用固定类型。
|
||||
|
||||
---
|
||||
|
||||
Numpy uses contiguous memory.
|
||||
Numpy 使用连续内存。
|
||||
|
||||
---
|
||||
|
||||
All of the above.
|
||||
上述所有的。
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7188d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Heat Map
|
||||
title: Visualizzare i dati con una mappa di calore
|
||||
challengeType: 3
|
||||
forumTopicId: 301466
|
||||
dashedName: visualize-data-with-a-heat-map
|
||||
@ -8,51 +8,51 @@ dashedName: visualize-data-with-a-heat-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
|
||||
**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Soddisfa le seguenti [user story](https://en.wikipedia.org/wiki/User_story) e fai in modo che tutti i test siano superati. Dalle il tuo stile personale.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Puoi usare HTML, JavaScript, CSS e la libreria di visualizzazione basata su svg D3. Gli elementi del DOM (non-virtuale) richiesti sono selezionati al momento di ogni test. Se usi un framework frontend (come Vue per esempio) i risultati dei test potrebbero essere inaccurati per il contenuto dinamico. Speriamo di supportarli prima o poi, ma questi framework non sono supportati al momento per i progetti D3.
|
||||
|
||||
**User Story #1:** My heat map should have a title with a corresponding `id="title"`.
|
||||
**User Story #1:** La mia mappa di calore dovrebbe avere un titolo con corrispondente `id="title"`.
|
||||
|
||||
**User Story #2:** My heat map should have a description with a corresponding `id="description"`.
|
||||
**User Story #2:** La mia mappa di calore dovrebbe avere una descrizione con corrispondente `id="description"`.
|
||||
|
||||
**User Story #3:** My heat map should have an x-axis with a corresponding `id="x-axis"`.
|
||||
**User Story #3:** La mia mappa di calore dovrebbe avere un asse x con un corrispondente `id="x-axis"`.
|
||||
|
||||
**User Story #4:** My heat map should have a y-axis with a corresponding `id="y-axis"`.
|
||||
**User Story #4:** La mia mappa di calore dovrebbe avere un asse y con un corrispondente `id="y-axis"`.
|
||||
|
||||
**User Story #5:** My heat map should have `rect` elements with a `class="cell"` that represent the data.
|
||||
**User Story #5:** La mia mappa di calore dovrebbe avere elementi `rect` con una `class="cell"` che rappresenta i dati.
|
||||
|
||||
**User Story #6:** There should be at least 4 different fill colors used for the cells.
|
||||
**User Story #6:** Dovrebbero essere usati almeno 4 colori di riempimento diversi per le celle.
|
||||
|
||||
**User Story #7:** Each cell will have the properties `data-month`, `data-year`, `data-temp` containing their corresponding `month`, `year`, and `temperature` values.
|
||||
**User Story #7:** Ogni cella avrà le proprietà `data-month`, `data-year`, `data-temp` contenenti i corrispondenti valori di `month`, `year` e `temperature`.
|
||||
|
||||
**User Story #8:** The `data-month`, `data-year` of each cell should be within the range of the data.
|
||||
**User Story #8:** I `data-month` e `data-year` di ogni cella dovrebbero essere all'interno dell'intervallo di dati.
|
||||
|
||||
**User Story #9:** My heat map should have cells that align with the corresponding month on the y-axis.
|
||||
**User Story #9:** La mia mappa di calore dovrebbe avere celle che si allineano con il mese corrispondente sull'asse y.
|
||||
|
||||
**User Story #10:** My heat map should have cells that align with the corresponding year on the x-axis.
|
||||
**User Story #10:** La mia mappa di calore dovrebbe avere celle che si allineano con l'anno corrispondente sull'asse x.
|
||||
|
||||
**User Story #11:** My heat map should have multiple tick labels on the y-axis with the full month name.
|
||||
**User Story #11:** La mia mappa del calore dovrebbe avere più tacche sull'asse y etichettate con il nome del mese completo.
|
||||
|
||||
**User Story #12:** My heat map should have multiple tick labels on the x-axis with the years between 1754 and 2015.
|
||||
**User Story #12:** La mia mappa di calore dovrebbe avere più tacche x etichettate con gli anni tra il 1754 e il 2015.
|
||||
|
||||
**User Story #13:** My heat map should have a legend with a corresponding `id="legend"`.
|
||||
**User Story #13:** La mia mappa di calore dovrebbe avere una legenda con una corrispondente `id="legend"`.
|
||||
|
||||
**User Story #14:** My legend should contain `rect` elements.
|
||||
**User Story #14:** La mia legenda dovrebbe contenere elementi `rect`.
|
||||
|
||||
**User Story #15:** The `rect` elements in the legend should use at least 4 different fill colors.
|
||||
**User Story #15:** Gli elementi `rect` nella legenda dovrebbero usare almeno 4 colori di riempimento diversi.
|
||||
|
||||
**User Story #16:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**User Story #16:** Posso passare con il mouse su un'area e vedere un suggerimento con un corrispondente `id="tooltip"` che mostra maggiori informazioni sull'area.
|
||||
|
||||
**User Story #17:** My tooltip should have a `data-year` property that corresponds to the `data-year` of the active area.
|
||||
**User Story #17:** Il mio tooltip dovrebbe avere una proprietà `data-year` che corrisponde al `data-year` dell'area attiva.
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
Ecco il set di dati necessario per completare questo progetto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own 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`
|
||||
Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo click su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `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.
|
||||
Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test superati.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7178d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Scatterplot Graph
|
||||
title: Visualizzare i dati con un grafico a dispersione
|
||||
challengeType: 3
|
||||
forumTopicId: 301467
|
||||
dashedName: visualize-data-with-a-scatterplot-graph
|
||||
@ -8,47 +8,47 @@ dashedName: visualize-data-with-a-scatterplot-graph
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
|
||||
**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Soddisfa le seguenti [user story](https://en.wikipedia.org/wiki/User_story) e fai in modo che tutti i test siano superati. Usa il tuo stile personale.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Puoi usare HTML, JavaScript, CSS e la libreria di visualizzazione basata su svg D3. I test richiedono la generazione degli assi con la proprietà axis di D3, che crea automaticamente le tacche sugli assi. Queste tacche sono richieste per superare i test perché la loro posizione è usata per determinare l'allineamento degli elementi del grafico. Puoi trovare informazioni su come generare gli assi su <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Gli elementi del DOM (non-virtuale) richiesti sono selezionati al momento di ogni test. Se usi un framework frontend (come Vue per esempio) i risultati dei test potrebbero essere inaccurati per il contenuto dinamico. Speriamo di supportarli prima o poi, ma al momento non lo sono per i progetti D3.
|
||||
|
||||
**User Story #1:** I can see a title element that has a corresponding `id="title"`.
|
||||
**User Story #1:** Posso vedere un elemento title con un corrispondente `id="title"`.
|
||||
|
||||
**User Story #2:** I can see an x-axis that has a corresponding `id="x-axis"`.
|
||||
**User Story #2:** Posso vedere un asse x con corrispondente `id="x-axis"`.
|
||||
|
||||
**User Story #3:** I can see a y-axis that has a corresponding `id="y-axis"`.
|
||||
**User Story #3:** Posso vedere un asse y con corrispondente `id="y-axis"`.
|
||||
|
||||
**User Story #4:** I can see dots, that each have a class of `dot`, which represent the data being plotted.
|
||||
**User Story #4:** Posso vedere dei punti, ognuno con una classe `dot`, che rappresentano i dati da tracciare.
|
||||
|
||||
**User Story #5:** Each dot should have the properties `data-xvalue` and `data-yvalue` containing their corresponding `x` and `y` values.
|
||||
**User Story #5:** Ogni punto dovrebbe avere le proprietà `data-xvalue` e `data-yvalue` che contengono i rispettivi valori `x` e `y`.
|
||||
|
||||
**User Story #6:** The `data-xvalue` and `data-yvalue` of each dot should be within the range of the actual data and in the correct data format. For `data-xvalue`, integers (full years) or `Date` objects are acceptable for test evaluation. For `data-yvalue` (minutes), use `Date` objects.
|
||||
**User Story #6:** per ogni punto `data-xvalue` e `data-yvalue` dovrebbero essere nel range dei dati e nel formato corretto. Per superare i test sono accettabili come valori per `data-xvalue` numeri interi (anni scritti per esteso) o oggetti `Date`. Per `data-yvalue` (minuti), usa oggetti `Date`.
|
||||
|
||||
**User Story #7:** The `data-xvalue` and its corresponding dot should align with the corresponding point/value on the x-axis.
|
||||
**User Story #7:** `data-xvalue` e il suo punto corrispondente dovrebbero allinearsi con il punto/valore corrispondente sull'asse delle x.
|
||||
|
||||
**User Story #8:** The `data-yvalue` and its corresponding dot should align with the corresponding point/value on the y-axis.
|
||||
**User Story #8:** `data-yvalue` e il suo punto corrispondente dovrebbero allinearsi con il punto/valore corrispondente sull'asse delle y.
|
||||
|
||||
**User Story #9:** I can see multiple tick labels on the y-axis with `%M:%S` time format.
|
||||
**User Story #9:** Posso vedere varie tacche con etichetta in formato di tempo `%M:%S` sull'asse delle y.
|
||||
|
||||
**User Story #10:** I can see multiple tick labels on the x-axis that show the year.
|
||||
**User Story #10:** Posso vedere varie tacche con etichetta che mostrano l'anno sull'asse delle x.
|
||||
|
||||
**User Story #11:** I can see that the range of the x-axis labels are within the range of the actual x-axis data.
|
||||
**User Story #11:** Posso vedere che le etichette dell'asse x coprono lo stesso intervallo dei valori dei dati.
|
||||
|
||||
**User Story #12:** I can see that the range of the y-axis labels are within the range of the actual y-axis data.
|
||||
**User Story #12:** Posso vedere che le etichette dell'asse y coprono lo stesso intervallo dei valori dei dati.
|
||||
|
||||
**User Story #13:** I can see a legend containing descriptive text that has `id="legend"`.
|
||||
**User Story #13:** Posso vedere una legenda con una descrizione che ha `id="legend"`.
|
||||
|
||||
**User Story #14:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**User Story #14:** Posso passare con il mouse su un'area e vedere un tooltip con un corrispondente `id="tooltip"` che mostra maggiori informazioni sull'area.
|
||||
|
||||
**User Story #15:** My tooltip should have a `data-year` property that corresponds to the `data-xvalue` of the active area.
|
||||
**User Story #15:** Il mio tooltip dovrebbe avere una proprietà `data-year` che corrisponde al `data-xvalue` dell'area attiva.
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
Ecco i dati che dovrai utilizzare per completare il progetto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own 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`
|
||||
Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo click su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `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.
|
||||
Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test superati.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc0
|
||||
title: Visualize Data with a Treemap Diagram
|
||||
title: Visualizza i dati con una mappa ad albero
|
||||
challengeType: 3
|
||||
forumTopicId: 301468
|
||||
dashedName: visualize-data-with-a-treemap-diagram
|
||||
@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-treemap-diagram
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
|
||||
**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Soddisfa le seguenti [user story](https://en.wikipedia.org/wiki/User_story) e fai passare tutti i test. Dalle il tuo stile personale.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Puoi usare HTML, JavaScript, CSS e la libreria di visualizzazione basata su svg D3. I test richiedono la generazione degli assi con la proprietà axis di D3, che crea automaticamente le tacche sugli assi. Queste tacche sono richieste per superare i test perché la loro posizione è usata per determinale l'allineamento degli elementi del grafico. Puoi trovare informazioni su come generare gli assi su <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Gli elementi del DOM (non-virtuale) richiesti sono selezionati al momento di ogni test. Se usi un framework frontend (come Vue per esempio) i risultati dei test potrebbero essere inaccurati per il contenuto dinamico. Speriamo di supportarli prima o poi, ma questi framework non sono supportati al momento per i progetti D3.
|
||||
|
||||
**User Story #1:** My tree map should have a title with a corresponding `id="title"`.
|
||||
**User Story #1:** La mia mappa ad albero dovrebbe avere un titolo con corrispondente `id="title"`.
|
||||
|
||||
**User Story #2:** My tree map should have a description with a corresponding `id="description"`.
|
||||
**User Story #2:** La mia mappa ad albero dovrebbe avere una descrizione con corrispondente `id="description"`.
|
||||
|
||||
**User Story #3:** My tree map should have `rect` elements with a corresponding `class="tile"` that represent the data.
|
||||
**User Story #3:** La mia mappa ad albero dovrebbe avere elementi `rect` con una `class="tile"` (piastrella) che rappresenta i dati.
|
||||
|
||||
**User Story #4:** There should be at least 2 different fill colors used for the tiles.
|
||||
**User Story #4:** Dovrebbero essere usati almeno 4 colori di riempimento diversi per le piastrelle.
|
||||
|
||||
**User Story #5:** Each tile should have the properties `data-name`, `data-category`, and `data-value` containing their corresponding `name`, `category`, and `value`.
|
||||
**User Story #5:** Ogni piastrella avrà le proprietà `data-name`, `data-category`, `data-value` contenenti i corrispondenti valori di nome `name`, categoria `category` e valore `value`.
|
||||
|
||||
**User Story #6:** The area of each tile should correspond to the `data-value` amount: tiles with a larger `data-value` should have a bigger area.
|
||||
**User Story #6:** L'area di ogni piastrella dovrebbe corrispondere alla quantità `data-value`: le caselle con un `data-value` più grande dovrebbero avere un'area più grande.
|
||||
|
||||
**User Story #7:** My tree map should have a legend with corresponding `id="legend"`.
|
||||
**User Story #7:** La mia mappa ad albero dovrebbe avere una legenda con una corrispondente `id="legend"`.
|
||||
|
||||
**User Story #8:** My legend should have `rect` elements with a corresponding `class="legend-item"`.
|
||||
**User Story #8:** La mia legenda dovrebbe avere elementi `rect` con una corrispondente `class="legend-item"`.
|
||||
|
||||
**User Story #9:** The `rect` elements in the legend should use at least 2 different fill colors.
|
||||
**User Story #9:** Gli elementi `rect` nella legenda dovrebbero utilizzare almeno 2 colori di riempimento diversi.
|
||||
|
||||
**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 #10:** Posso passare con il mouse su un'area e vedere un tooltip con un corrispondente `id="tooltip"` che mostra maggiori informazioni sull'area.
|
||||
|
||||
**User Story #11:** My tooltip should have a `data-value` property that corresponds to the `data-value` of the active area.
|
||||
**User Story #11:** Il mio tooltip dovrebbe avere una proprietà `data-value` che corrisponde al `data-value` dell'area attiva.
|
||||
|
||||
For this project you can use any of the following datasets:
|
||||
Per questo progetto puoi utilizzare uno dei seguenti set di dati:
|
||||
|
||||
- **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`
|
||||
- **Finanziamenti di KickStarter:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **Vendite di film:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **Vendite di videogiochi:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own 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`
|
||||
Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo click su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `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.
|
||||
Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test superati.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc8
|
||||
title: Add Classes with D3
|
||||
title: Aggiungere classi con D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301473
|
||||
dashedName: add-classes-with-d3
|
||||
@ -8,29 +8,29 @@ dashedName: add-classes-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
Using a lot of inline styles on HTML elements gets hard to manage, even for smaller apps. It's easier to add a class to elements and style that class one time using CSS rules. D3 has the `attr()` method to add any HTML attribute to an element, including a class name.
|
||||
Utilizzare un sacco di stili in linea su elementi HTML diventa difficile da gestire, anche per le applicazioni più piccole. È più facile aggiungere una classe agli elementi e stilizzare quella classe una sola volta usando le regole CSS. D3 ha il metodo `attr()` per aggiungere qualsiasi attributo HTML a un elemento, incluso un nome di classe.
|
||||
|
||||
The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of `container` to a selection:
|
||||
Il metodo `attr()` funziona nello stesso modo di `style()`. Esso prende valori separati da virgola, e può usare una funzione di callback. Ecco un esempio per aggiungere una classe `container` a una selezione:
|
||||
|
||||
```js
|
||||
selection.attr("class", "container");
|
||||
```
|
||||
|
||||
Note that the `class` parameter will remain the same whenever you need to add a class and only the `container` parameter will change.
|
||||
Nota che il parametro `class` rimarrà lo stesso ogni volta che dovrai aggiungere una classe e solo il parametro `container` cambierà.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the `attr()` method to the code in the editor and put a class of `bar` on the `div` elements.
|
||||
Aggiungi il metodo `attr()` al codice nell'editor e applica una classe `bar` agli elementi `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` elements should have a class of `bar`.
|
||||
I tuoi elementi `div` dovrebbero avere una classe di `bar`.
|
||||
|
||||
```js
|
||||
assert($('div').attr('class').trim().split(/\s+/g).includes('bar'));
|
||||
```
|
||||
|
||||
Your code should use the `attr()` method.
|
||||
Il tuo codice dovrebbe usare il metodo `attr()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.attr/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc6
|
||||
title: Add Inline Styling to Elements
|
||||
title: Aggiungere stili in linea agli elementi
|
||||
challengeType: 6
|
||||
forumTopicId: 301475
|
||||
dashedName: add-inline-styling-to-elements
|
||||
@ -8,9 +8,9 @@ dashedName: add-inline-styling-to-elements
|
||||
|
||||
# --description--
|
||||
|
||||
D3 lets you add inline CSS styles on dynamic elements with the `style()` method.
|
||||
D3 consente di aggiungere stili CSS in linea sugli elementi dinamici con il metodo `style()`.
|
||||
|
||||
The `style()` method takes a comma-separated key-value pair as an argument. Here's an example to set the selection's text color to blue:
|
||||
Il metodo `style()` prende come argomento una coppia chiave-valore separata da virgole. Ecco un esempio per impostare il colore del testo della selezione a blu:
|
||||
|
||||
```js
|
||||
selection.style("color","blue");
|
||||
@ -18,17 +18,17 @@ selection.style("color","blue");
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the `style()` method to the code in the editor to make all the displayed text have a `font-family` of `verdana`.
|
||||
Aggiungi il metodo `style()` al codice nell'editor per fare in modo che tutto il testo visualizzato abbia una `font-family` `verdana`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` elements should have a `font-family` of `verdana`.
|
||||
I tuoi elementi `h2` dovrebbero avere una `font-family` `verdana`.
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-family') == 'verdana');
|
||||
```
|
||||
|
||||
Your code should use the `style()` method.
|
||||
Il tuo codice dovrebbe usare il metodo `style()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.style/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd2
|
||||
title: Add Labels to D3 Elements
|
||||
title: Aggiungere etichette agli elementi D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301476
|
||||
dashedName: add-labels-to-d3-elements
|
||||
@ -8,69 +8,69 @@ dashedName: add-labels-to-d3-elements
|
||||
|
||||
# --description--
|
||||
|
||||
D3 lets you label a graph element, such as a bar, using the SVG `text` element.
|
||||
D3 ti permette di etichettare un elemento grafico, come una barra, usando l'elemento SVG `text`.
|
||||
|
||||
Like the `rect` element, a `text` element needs to have `x` and `y` attributes, to place it on the SVG canvas. It also needs to access the data to display those values.
|
||||
Come l'elemento `rect`, un elemento `text` deve avere attributi `x` e `y`, per essere posizionato sulla tela SVG. Deve inoltre accedere ai dati per visualizzare tali valori.
|
||||
|
||||
D3 gives you a high level of control over how you label your bars.
|
||||
D3 ti dà un alto livello di controllo su come etichettare le tue barre.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code in the editor already binds the data to each new `text` element. First, append `text` nodes to the `svg`. Next, add attributes for the `x` and `y` coordinates. They should be calculated the same way as the `rect` ones, except the `y` value for the `text` should make the label sit 3 units higher than the bar. Finally, use the D3 `text()` method to set the label equal to the data point value.
|
||||
Il codice nell'editor lega già i dati a ogni nuovo elemento `text`. Innanzitutto, aggiungi dei nodi `text` all'`svg`. Successivamente, aggiungi gli attributi per le coordinate `x` e `y`. Esse dovrebbero essere calcolate allo stesso modo di quelle per il `rect`, a parte il fatto che il valore `y` per il `text` dovrebbe posizionare l'etichetta tre unità più in altro rispetto alla barra. Infine, utilizza il metodo D3 `text()` per impostare l'etichetta uguale al valore del data point.
|
||||
|
||||
**Note:** For the label to sit higher than the bar, decide if the `y` value for the `text` should be 3 greater or 3 less than the `y` value for the bar.
|
||||
**Nota:** Per fare in modo che l'etichetta stia più in alto della barra, decidi se il valore `y` per il `text` dovrebbe essere maggiore o minore di 3 rispetto al valore `y` della barra.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `text` element should have a label of `12` and a `y` value of `61`.
|
||||
Il primo elemento `text` dovrebbe avere un'etichetta di `12` e un valore `y` di `61`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61');
|
||||
```
|
||||
|
||||
The second `text` element should have a label of `31` and a `y` value of `4`.
|
||||
Il secondo elemento `text` dovrebbe avere un'etichetta di `31` e un valore `y` di `4`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4');
|
||||
```
|
||||
|
||||
The third `text` element should have a label of `22` and a `y` value of `31`.
|
||||
Il terzo elemento `text` dovrebbe avere un'etichetta di `22` e un valore `y` di `31`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31');
|
||||
```
|
||||
|
||||
The fourth `text` element should have a label of `17` and a `y` value of `46`.
|
||||
Il quarto elemento `text` dovrebbe avere un'etichetta di `17` e un valore `y` di `46`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46');
|
||||
```
|
||||
|
||||
The fifth `text` element should have a label of `25` and a `y` value of `22`.
|
||||
Il quinto elemento `text` dovrebbe avere un'etichetta di `25` e un valore `y` di `22`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22');
|
||||
```
|
||||
|
||||
The sixth `text` element should have a label of `18` and a `y` value of `43`.
|
||||
Il sesto elemento `text` dovrebbe avere un'etichetta di `18` e un valore `y` di `43`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43');
|
||||
```
|
||||
|
||||
The seventh `text` element should have a label of `29` and a `y` value of `10`.
|
||||
Il settimo elemento `text` dovrebbe avere un'etichetta di `29` e un valore `y` di `10`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10');
|
||||
```
|
||||
|
||||
The eighth `text` element should have a label of `14` and a `y` value of `55`.
|
||||
L'ottavo elemento `text` dovrebbe avere un'etichetta di `14` e un valore `y` di `55`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55');
|
||||
```
|
||||
|
||||
The ninth `text` element should have a label of `9` and a `y` value of `70`.
|
||||
Il nono elemento `text` dovrebbe avere un'etichetta di `9` e un valore `y` di `70`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd9
|
||||
title: Add Labels to Scatter Plot Circles
|
||||
title: Aggiungere etichette ai grafici a dispersione
|
||||
challengeType: 6
|
||||
forumTopicId: 301477
|
||||
dashedName: add-labels-to-scatter-plot-circles
|
||||
@ -8,25 +8,25 @@ dashedName: add-labels-to-scatter-plot-circles
|
||||
|
||||
# --description--
|
||||
|
||||
You can add text to create labels for the points in a scatter plot.
|
||||
È possibile aggiungere del testo per creare etichette per i punti in un grafico a dispersione.
|
||||
|
||||
The goal is to display the comma-separated values for the first (`x`) and second (`y`) fields of each item in `dataset`.
|
||||
L'obiettivo è quello di visualizzare i valori separati da virgole per il primo campo (`x`) e il secondo campo (`y`) di ogni elemento nel `dataset`.
|
||||
|
||||
The `text` nodes need `x` and `y` attributes to position it on the SVG canvas. In this challenge, the `y` value (which determines height) can use the same value that the `circle` uses for its `cy` attribute. The `x` value can be slightly larger than the `cx` value of the `circle`, so the label is visible. This will push the label to the right of the plotted point.
|
||||
I nodi `text` hanno bisogno di attributi `x` e `y` per essere posizionati sulla tela SVG. In questa sfida, il valore `y` (che determina l'altezza) può usare lo stesso valore che il `circle` utilizza per il suo attributo `cy`. Il valore `x` può essere leggermente più grande del valore `cx` del `circle`, in modo che l'etichetta sia visibile. Questo sposterà l'etichetta a destra del punto tracciato.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Label each point on the scatter plot using the `text` elements. The text of the label should be the two values separated by a comma and a space. For example, the label for the first point is `34, 78`. Set the `x` attribute so it's `5` units more than the value you used for the `cx` attribute on the `circle`. Set the `y` attribute the same way that's used for the `cy` value on the `circle`.
|
||||
Etichetta ogni punto sul grafico a dispersione utilizzando gli elementi `text`. Il testo dell'etichetta dovrebbe essere composto dai due valori separati da una virgola e uno spazio. Ad esempio, l'etichetta per il primo punto è `34, 78`. Imposta l'attributo `x` in modo che sia `5` unità più grande del valore che hai usato per l'attributo `cx` sul `circle`. Imposta l'attributo `y` come già fatto per il valore `cy` sul `circle`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 10 `text` elements.
|
||||
Il tuo codice dovrebbe avere 10 elementi `text`.
|
||||
|
||||
```js
|
||||
assert($('text').length == 10);
|
||||
```
|
||||
|
||||
The first label should have text of `34, 78`, an `x` value of `39`, and a `y` value of `422`.
|
||||
La prima etichetta dovrebbe avere il testo di `34, 78`, un valore `x` di `39`, e un valore `y` di `422`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -36,7 +36,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second label should have text of `109, 280`, an `x` value of `114`, and a `y` value of `220`.
|
||||
La seconda etichetta dovrebbe avere il testo di `109, 280`, un valore `x` di `114`, e un valore `y` di `220`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -46,7 +46,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third label should have text of `310, 120`, an `x` value of `315`, and a `y` value of `380`.
|
||||
La terza etichetta dovrebbe avere il testo di `310, 120`, un valore `x` di `315`, e un valore `y` di `380`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -56,7 +56,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fourth label should have text of `79, 411`, an `x` value of `84`, and a `y` value of `89`.
|
||||
La quarta etichetta dovrebbe avere il testo di `79, 411`, un valore `x` di `84`, e un valore `y` di `89`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -66,7 +66,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fifth label should have text of `420, 220`, an `x` value of `425`, and a `y` value of `280`.
|
||||
La quinta etichetta dovrebbe avere il testo di `420, 220`, un valore `x` di `425`, e un valore `y` di `280`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -76,7 +76,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The sixth label should have text of `233, 145`, an `x` value of `238`, and a `y` value of `355`.
|
||||
La sesta etichetta dovrebbe avere il testo di `233, 145`, un valore `x` di `238`, e un valore `y` di `355`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -86,7 +86,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The seventh label should have text of `333, 96`, an `x` value of `338`, and a `y` value of `404`.
|
||||
La settima etichetta dovrebbe avere il testo di `333, 96`, un valore `x` di `338`, e un valore `y` di `404`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -96,7 +96,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The eighth label should have text of `222, 333`, an `x` value of `227`, and a `y` value of `167`.
|
||||
L'ottava etichetta dovrebbe avere il testo di `222, 333`, un valore `x` di `227`, e un valore `y` di `167`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -106,7 +106,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The ninth label should have text of `78, 320`, an `x` value of `83`, and a `y` value of `180`.
|
||||
La nona etichetta dovrebbe avere il testo di `78, 320`, un valore `x` di `83`, e un valore `y` di `180`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -116,7 +116,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The tenth label should have text of `21, 123`, an `x` value of `26`, and a `y` value of `377`.
|
||||
La decima etichetta dovrebbe avere il testo di `21, 123`, un valore `x` di `26`, e un valore `y` di `377`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -218,7 +218,7 @@ assert(
|
||||
.attr("x", (d) => d[0] + 5)
|
||||
.attr("y", (d) => h - d[1])
|
||||
.text((d) => (d[0] + ", " + d[1]))
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bd1
|
||||
title: Change the Color of an SVG Element
|
||||
title: Cambiare il colore di un elemento SVG
|
||||
challengeType: 6
|
||||
forumTopicId: 301480
|
||||
dashedName: change-the-color-of-an-svg-element
|
||||
@ -8,17 +8,17 @@ dashedName: change-the-color-of-an-svg-element
|
||||
|
||||
# --description--
|
||||
|
||||
The bars are in the right position, but they are all the same black color. SVG has a way to change the color of the bars.
|
||||
Le barre sono nella posizione giusta, ma sono tutte dello stesso colore nero. SVG ha un modo per cambiare il colore delle barre.
|
||||
|
||||
In SVG, a `rect` shape is colored with the `fill` attribute. It supports hex codes, color names, and rgb values, as well as more complex options like gradients and transparency.
|
||||
In SVG, una forma `rect` viene colorata con l'attributo `fill`. Supporta codici esadecimali, nomi di colore e valori rgb, così come opzioni più complesse come gradienti e trasparenza.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add an `attr()` method to set the `fill` of all the bars to the color navy.
|
||||
Aggiungi un metodo `attr()` per impostare il riempimento `fill` di tutte le barre al colore blu navy.
|
||||
|
||||
# --hints--
|
||||
|
||||
The bars should all have a `fill` color of navy.
|
||||
Le barre dovrebbero avere tutte un colore di riempimento `fill` blu navy.
|
||||
|
||||
```js
|
||||
assert($('rect').css('fill') == 'rgb(0, 0, 128)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bca
|
||||
title: Change the Presentation of a Bar Chart
|
||||
title: Cambiare la presentazione di un grafico a barre
|
||||
challengeType: 6
|
||||
forumTopicId: 301481
|
||||
dashedName: change-the-presentation-of-a-bar-chart
|
||||
@ -8,21 +8,21 @@ dashedName: change-the-presentation-of-a-bar-chart
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge created a bar chart, but there are a couple of formatting changes that could improve it:
|
||||
L'ultima sfida ha creato un grafico a barre, ma ci sono un paio di tocchi nella formattazione che potrebbero migliorarlo:
|
||||
|
||||
1) Add space between each bar to visually separate them, which is done by adding a margin to the CSS for the `bar` class
|
||||
1) Aggiungere spazio tra ogni barra per separarle visivamente, cosa che viene fatta aggiungendo un margine al CSS della classe `bar`
|
||||
|
||||
2) Increase the height of the bars to better show the difference in values, which is done by multiplying the value by a number to scale the height
|
||||
2) Aumentare l'altezza delle barre per mostrare meglio la differenza tra i valori: questo si può fare moltiplicando il valore per un numero in modo da scalare l'altezza
|
||||
|
||||
# --instructions--
|
||||
|
||||
First, add a `margin` of `2px` to the `bar` class in the `style` tag. Next, change the callback function in the `style()` method so it returns a value `10` times the original data value (plus the `px`).
|
||||
Innanzitutto, aggiungi un `margin` di `2px` alla classe `bar` nel tag `style`. Successivamente, cambia la funzione callback nel metodo `style()` in modo che restituisca un valore `10` volte il valore originale dei dati (più `px`).
|
||||
|
||||
**Note:** Multiplying each data point by the *same* constant only alters the scale. It's like zooming in, and it doesn't change the meaning of the underlying data.
|
||||
**Nota:** Moltiplicare ogni punto dati per la *stessa* costante modifica solo la scala. È come fare lo zoom, e non cambia il significato dei dati sottostanti.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `div` should have a `height` of `120` pixels and a `margin` of `2` pixels.
|
||||
Il primo `div` dovrebbe avere un'`height` di `120` pixel e un `margin` di `2` pixel.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -31,7 +31,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second `div` should have a `height` of `310` pixels and a `margin` of `2` pixels.
|
||||
Il secondo `div` dovrebbe avere un'`height` di `310` pixel e un `margin` di `2` pixel.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third `div` should have a `height` of `220` pixels and a `margin` of `2` pixels.
|
||||
Il terzo `div` dovrebbe avere un'`height` di `220` pixel e un `margin` di `2` pixel.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -49,7 +49,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fourth `div` should have a `height` of `170` pixels and a `margin` of `2` pixels.
|
||||
Il quarto `div` dovrebbe avere un'`height` di `170` pixel e un `margin` di `2` pixel.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -58,7 +58,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fifth `div` should have a `height` of `250` pixels and a `margin` of `2` pixels.
|
||||
Il quinto `div` dovrebbe avere un'`height` di `250` pixel e un `margin` di `2` pixel.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -67,7 +67,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The sixth `div` should have a `height` of `180` pixels and a `margin` of `2` pixels.
|
||||
Il sesto `div` dovrebbe avere un'`height` di `180` pixel e un `margin` di `2` pixel.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -76,7 +76,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The seventh `div` should have a `height` of `290` pixels and a `margin` of `2` pixels.
|
||||
Il settimo `div` dovrebbe avere un'`height` di `290` pixel e un `margin` di `2` pixel.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -85,7 +85,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The eighth `div` should have a `height` of `140` pixels and a `margin` of `2` pixels.
|
||||
L'ottavo `div` dovrebbe avere un'`height` di `140` pixel e un `margin` di `2` pixel.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -94,7 +94,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The ninth `div` should have a `height` of `90` pixels and a `margin` of `2` pixels.
|
||||
Il nono `div` dovrebbe avere un'`height` di `90` pixel e un `margin` di `2` pixel.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -114,7 +114,7 @@ assert(
|
||||
height: 100px;
|
||||
/* Add your code below this line */
|
||||
|
||||
|
||||
|
||||
/* Add your code above this line */
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcd
|
||||
title: Create a Bar for Each Data Point in the Set
|
||||
title: Creare una barra per ogni punto di dati nell'insieme
|
||||
challengeType: 6
|
||||
forumTopicId: 301482
|
||||
dashedName: create-a-bar-for-each-data-point-in-the-set
|
||||
@ -8,9 +8,9 @@ dashedName: create-a-bar-for-each-data-point-in-the-set
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge added only one rectangle to the `svg` element to represent a bar. Here, you'll combine what you've learned so far about `data()`, `enter()`, and SVG shapes to create and append a rectangle for each data point in `dataset`.
|
||||
L'ultima sfida ha aggiunto solo un rettangolo all'elemento `svg` per rappresentare una barra. Qui combinerai ciò che hai imparato finora su `data()`, `enter()`, e forme SVG per creare e aggiungere un rettangolo per ogni punto dati in `dataset`.
|
||||
|
||||
A previous challenge showed the format for how to create and append a `div` for each item in `dataset`:
|
||||
Una sfida precedente ha mostrato il modo per creare e aggiungere un `div` per ogni elemento del `dataset`:
|
||||
|
||||
```js
|
||||
d3.select("body").selectAll("div")
|
||||
@ -19,33 +19,33 @@ d3.select("body").selectAll("div")
|
||||
.append("div")
|
||||
```
|
||||
|
||||
There are a few differences working with `rect` elements instead of `div` elements. The `rect` elements must be appended to an `svg` element, not directly to the `body`. Also, you need to tell D3 where to place each `rect` within the `svg` area. The bar placement will be covered in the next challenge.
|
||||
Ci sono alcune differenze nel lavorare con gli elementi `rect` invece che con gli elementi `div`. Gli elementi `rect` devono essere aggiunti ad un elemento `svg`, non direttamente al `body`. Inoltre, devi dire a D3 dove posizionare ogni `rect` all'interno dell'area `svg`. Il posizionamento della barra sarà coperto nella prossima sfida.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the `data()`, `enter()`, and `append()` methods to create and append a `rect` for each item in `dataset`. The bars should display all on top of each other; this will be fixed in the next challenge.
|
||||
Usa i metodi `data()`, `enter()`, e `append()` per creare e aggiungere un `rect` per ogni elemento nel `dataset`. Le barre verranno tutte visualizzate l'una sopra l'altra; questo sarà risolto nella prossima sfida.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your document should have 9 `rect` elements.
|
||||
Il tuo documento dovrebbe avere 9 elementi `rect`.
|
||||
|
||||
```js
|
||||
assert($('rect').length == 9);
|
||||
```
|
||||
|
||||
Your code should use the `data()` method.
|
||||
Il tuo codice dovrebbe usare il metodo `data()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.data/g));
|
||||
```
|
||||
|
||||
Your code should use the `enter()` method.
|
||||
Il tuo codice dovrebbe utilizzare il metodo `enter()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.enter/g));
|
||||
```
|
||||
|
||||
Your code should use the `append()` method.
|
||||
Il tuo codice dovrebbe usare il metodo `append()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.append/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bda
|
||||
title: Create a Linear Scale with D3
|
||||
title: Creare una scala lineare con D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301483
|
||||
dashedName: create-a-linear-scale-with-d3
|
||||
@ -8,41 +8,41 @@ dashedName: create-a-linear-scale-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
The bar and scatter plot charts both plotted data directly onto the SVG canvas. However, if the height of a bar or one of the data points were larger than the SVG height or width values, it would go outside the SVG area.
|
||||
I diagrammi a barre e a dispersione tracciavano i dati direttamente sulla tela SVG. Tuttavia, se l'altezza di una barra o di uno dei punti dati era maggiore dell'altezza o della larghezza della tela, sarebbero andati al di fuori dell'area SVG.
|
||||
|
||||
In D3, there are scales to help plot data. `scales` are functions that tell the program how to map a set of raw data points onto the pixels of the SVG canvas.
|
||||
In D3 le scale aiutano a tracciare i dati. Le `scales` sono funzioni che dicono al programma come mappare un insieme di punti dati sui pixel della tela SVG.
|
||||
|
||||
For example, say you have a 100x500-sized SVG canvas and you want to plot Gross Domestic Product (GDP) for a number of countries. The set of numbers would be in the billion or trillion-dollar range. You provide D3 a type of scale to tell it how to place the large GDP values into that 100x500-sized area.
|
||||
Ad esempio, diciamo di avere una tela SVG di dimensioni 100x500 e di voler tracciare il prodotto interno lordo (PIL) per un certo numero di paesi. La serie di numeri sarà dell'ordine del miliardo o triliardo di dollari. Puoi fornire a D3 un tipo di scala per dirgli come collocare i grandi valori del PIL in quell'area di dimensioni 100x500.
|
||||
|
||||
It's unlikely you would plot raw data as-is. Before plotting it, you set the scale for your entire data set, so that the `x` and `y` values fit your canvas width and height.
|
||||
È improbabile che si traccino i dati grezzi così come sono. Prima di tracciarli, si imposta la scala per l'intero set di dati, in modo che i valori `x` e `y` si adattino alla larghezza e all'altezza della superficie.
|
||||
|
||||
D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method `scaleLinear()`:
|
||||
D3 ha diversi tipi di scala. Per una scala lineare (di solito utilizzata con dati quantitativi), c'è il metodo D3 `scaleLinear()`:
|
||||
|
||||
```js
|
||||
const scale = d3.scaleLinear()
|
||||
```
|
||||
|
||||
By default, a scale uses the identity relationship. The value of the input is the same as the value of the output. A separate challenge covers how to change this.
|
||||
Per impostazione predefinita, una scala utilizza la relazione di identità. Il valore dell'input è lo stesso del valore dell'output. Una sfida distinta riguarda come cambiare questo comportamento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the `scale` variable to create a linear scale. Then set the `output` variable to the scale called with an input argument of `50`.
|
||||
Cambia la variabile `scale` per creare una scala lineare. Quindi imposta la variabile `output` sulla scala chiamata con un argomento di input di `50`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The text in the `h2` should be `50`.
|
||||
Il testo di `h2` dovrebbe essere `50`.
|
||||
|
||||
```js
|
||||
assert($('h2').text() == '50');
|
||||
```
|
||||
|
||||
Your code should use the `scaleLinear()` method.
|
||||
Il tuo codice dovrebbe utilizzare il metodo `scaleLinear()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.scaleLinear/g));
|
||||
```
|
||||
|
||||
The `output` variable should call `scale` with an argument of `50`.
|
||||
La variabile `output` dovrebbe chiamare `scale` con un argomento di `50`.
|
||||
|
||||
```js
|
||||
assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcc
|
||||
title: Display Shapes with SVG
|
||||
title: Mostrare forme con SVG
|
||||
challengeType: 6
|
||||
forumTopicId: 301485
|
||||
dashedName: display-shapes-with-svg
|
||||
@ -8,47 +8,47 @@ dashedName: display-shapes-with-svg
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge created an `svg` element with a given width and height, which was visible because it had a `background-color` applied to it in the `style` tag. The code made space for the given width and height.
|
||||
L'ultima sfida ha creato un elemento `svg` con una data larghezza e altezza, che era visibile perché aveva un `background-color` applicato ad esso nel tag `style`. Il codice ha creato uno spazio per la larghezza e l'altezza indicate.
|
||||
|
||||
The next step is to create a shape to put in the `svg` area. There are a number of supported shapes in SVG, such as rectangles and circles. They are used to display data. For example, a rectangle (`<rect>`) SVG shape could create a bar in a bar chart.
|
||||
Il passo successivo è quello di creare una forma da inserire nell'area `svg`. SVG supporta un certo numero di forme, come rettangoli e cerchi. Vengono utilizzate per visualizzare i dati. Ad esempio, una forma rettangolo SVG (`<rect>`) potrebbe creare una barra in un grafico a barre.
|
||||
|
||||
When you place a shape into the `svg` area, you can specify where it goes with `x` and `y` coordinates. The origin point of (0, 0) is in the upper-left corner. Positive values for `x` push the shape to the right, and positive values for `y` push the shape down from the origin point.
|
||||
Quando metti una forma nell'area `svg`, puoi specificare dove va messa utilizzando le coordinate `x` e `y`. Il punto di origine di (0, 0) è nell'angolo in alto a sinistra. Valori positivi per `x` spingeranno la forma verso destra, e valori positivi per `y` spingeranno la forma verso il basso dal punto di origine.
|
||||
|
||||
To place a shape in the middle of the 500 (width) x 100 (height) `svg` from last challenge, the `x` coordinate would be 250 and the `y` coordinate would be 50.
|
||||
Per posizionare una forma al centro dell'area `svg` di 500 (larghezza) x 100 (altezza) presa dall'ultima sfida, la coordinata `x` sarà 250 e la coordinata `y` sarà 50.
|
||||
|
||||
An SVG `rect` has four attributes. There are the `x` and `y` coordinates for where it is placed in the `svg` area. It also has a `height` and `width` to specify the size.
|
||||
Un `rect` SVG ha quattro attributi. Ci sono le coordinate `x` e `y` che indicano dove si trova nell'area `svg`. Ha anche un'altezza (`height`) e una larghezza (`width`) che ne specificano la dimensione.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `rect` shape to the `svg` using `append()`, and give it a `width` attribute of `25` and `height` attribute of `100`. Also, give the `rect` `x` and `y` attributes each set to `0`.
|
||||
Aggiungi una forma `rect` all'`svg` usando `append()`, e dalle un attributo `width` di `25` e un attributo `height` di `100`. Inoltre, dai al `rect` gli attributi `x` e `y` settandoli entrambi a `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your document should have 1 `rect` element.
|
||||
Il tuo documento dovrebbe avere un elemento `rect`.
|
||||
|
||||
```js
|
||||
assert($('rect').length == 1);
|
||||
```
|
||||
|
||||
The `rect` element should have a `width` attribute set to `25`.
|
||||
L'elemento `rect` dovrebbe avere un attributo `width` impostato a `25`.
|
||||
|
||||
```js
|
||||
assert($('rect').attr('width') == '25');
|
||||
```
|
||||
|
||||
The `rect` element should have a `height` attribute set to `100`.
|
||||
L'elemento `rect` dovrebbe avere un attributo `height` impostato a `100`.
|
||||
|
||||
```js
|
||||
assert($('rect').attr('height') == '100');
|
||||
```
|
||||
|
||||
The `rect` element should have an `x` attribute set to `0`.
|
||||
L'elemento `rect` dovrebbe avere un attributo `x` settato a `0`.
|
||||
|
||||
```js
|
||||
assert($('rect').attr('x') == '0');
|
||||
```
|
||||
|
||||
The `rect` element should have a `y` attribute set to `0`.
|
||||
L'elemento `rect` dovrebbe avere un attributo `y` settato a `0`.
|
||||
|
||||
```js
|
||||
assert($('rect').attr('y') == '0');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bcf
|
||||
title: Dynamically Change the Height of Each Bar
|
||||
title: Cambiare dinamicamente l'altezza di ogni barra
|
||||
challengeType: 6
|
||||
forumTopicId: 301486
|
||||
dashedName: dynamically-change-the-height-of-each-bar
|
||||
@ -8,7 +8,7 @@ dashedName: dynamically-change-the-height-of-each-bar
|
||||
|
||||
# --description--
|
||||
|
||||
The height of each bar can be set to the value of the data point in the array, similar to how the `x` value was set dynamically.
|
||||
L'altezza di ogni barra può essere impostata al valore del punto dati nell'array, in modo simile a come il valore `x` è stato impostato dinamicamente.
|
||||
|
||||
```js
|
||||
selection.attr("property", (d, i) => {
|
||||
@ -16,65 +16,65 @@ selection.attr("property", (d, i) => {
|
||||
})
|
||||
```
|
||||
|
||||
Here `d` would be the data point value, and `i` would be the index of the data point in the array.
|
||||
Qui `d` sarebbe il valore del punto dati, e `i` sarebbe l'indice del punto di dati nell'array.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the callback function for the `height` attribute to return the data value times 3.
|
||||
Modifica la funzione di callback per l'attributo altezza `height` in modo che restituisca i valori dei dati moltiplicati per 3.
|
||||
|
||||
**Note:** Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example.
|
||||
**Nota:** Ricorda che moltiplicando tutti i punti dati per la stessa costante riscala i dati (come nel fare uno zoom). In questo esempio aiuta a vedere le differenze tra i valori della barra.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `rect` should have a `height` of `36`.
|
||||
Il primo `rect` dovrebbe avere un'altezza `height` di `36`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(0).attr('height') == '36');
|
||||
```
|
||||
|
||||
The second `rect` should have a `height` of `93`.
|
||||
Il secondo `rect` dovrebbe avere un'altezza `height` di `93`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(1).attr('height') == '93');
|
||||
```
|
||||
|
||||
The third `rect` should have a `height` of `66`.
|
||||
Il terzo `rect` dovrebbe avere un'altezza `height` di `66`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(2).attr('height') == '66');
|
||||
```
|
||||
|
||||
The fourth `rect` should have a `height` of `51`.
|
||||
Il quarto `rect` dovrebbe avere un'altezza `height` di `51`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(3).attr('height') == '51');
|
||||
```
|
||||
|
||||
The fifth `rect` should have a `height` of `75`.
|
||||
Il quinto `rect` dovrebbe avere un'altezza `height` di `75`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(4).attr('height') == '75');
|
||||
```
|
||||
|
||||
The sixth `rect` should have a `height` of `54`.
|
||||
Il sesto`rect` dovrebbe avere un'altezza `height` di `54`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(5).attr('height') == '54');
|
||||
```
|
||||
|
||||
The seventh `rect` should have a `height` of `87`.
|
||||
Il settimo `rect` dovrebbe avere un'altezza `height` di `87`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(6).attr('height') == '87');
|
||||
```
|
||||
|
||||
The eighth `rect` should have a `height` of `42`.
|
||||
L'ottavo `rect` dovrebbe avere un'altezza `height` di `42`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(7).attr('height') == '42');
|
||||
```
|
||||
|
||||
The ninth `rect` should have a `height` of `27`.
|
||||
Il nono `rect` dovrebbe avere un'altezza `height` di `27`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(8).attr('height') == '27');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bce
|
||||
title: Dynamically Set the Coordinates for Each Bar
|
||||
title: Impostare dinamicamente le coordinate per ogni barra
|
||||
challengeType: 6
|
||||
forumTopicId: 301487
|
||||
dashedName: dynamically-set-the-coordinates-for-each-bar
|
||||
@ -8,13 +8,13 @@ dashedName: dynamically-set-the-coordinates-for-each-bar
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge created and appended a rectangle to the `svg` element for each point in `dataset` to represent a bar. Unfortunately, they were all stacked on top of each other.
|
||||
L'ultima sfida ha creato e aggiunto un rettangolo all'elemento `svg` per rappresentare ogni punto del `dataset` con una barra. Sfortunatamente, sono stati tutti impilati l'uno sull'altro.
|
||||
|
||||
The placement of a rectangle is handled by the `x` and `y` attributes. They tell D3 where to start drawing the shape in the `svg` area. The last challenge set them each to 0, so every bar was placed in the upper-left corner.
|
||||
Il posizionamento di un rettangolo è gestito dagli attributi `x` e `y`. Essi dicono a D3 dove iniziare a disegnare la forma nell'area `svg`. L'ultima sfida li ha impostati tutti a 0, quindi ogni barra è stata posizionata nell'angolo in alto a sinistra.
|
||||
|
||||
For a bar chart, all of the bars should sit on the same vertical level, which means the `y` value stays the same (at 0) for all bars. The `x` value, however, needs to change as you add new bars. Remember that larger `x` values push items farther to the right. As you go through the array elements in `dataset`, the `x` value should increase.
|
||||
Per un grafico a barre, tutte le barre dovrebbero posionarsi allo stesso livello verticale, ciò significa che il valore `y` rimane lo stesso (a 0) per tutte le barre. Il valore `x`, tuttavia, deve cambiare quando si aggiungono nuove barre. Ricorda che valori `x` più grandi spingono gli oggetti più a destra. Mentre passi attraverso gli elementi dell'array in `dataset`, il valore `x` dovrebbe aumentare.
|
||||
|
||||
The `attr()` method in D3 accepts a callback function to dynamically set that attribute. The callback function takes two arguments, one for the data point itself (usually `d`) and one for the index of the data point in the array. The second argument for the index is optional. Here's the format:
|
||||
Il metodo `attr()` in D3 accetta una funzione di callback per impostare dinamicamente quell'attributo. La funzione di callback richiede due argomenti: uno per il punto dati stesso (solitamente `d`) e uno per l'indice del punto dati nell'array. Il secondo argomento per l'indice è opzionale. Ecco il formato:
|
||||
|
||||
```js
|
||||
selection.attr("property", (d, i) => {
|
||||
@ -22,65 +22,65 @@ selection.attr("property", (d, i) => {
|
||||
})
|
||||
```
|
||||
|
||||
It's important to note that you do NOT need to write a `for` loop or use `forEach()` to iterate over the items in the data set. Recall that the `data()` method parses the data set, and any method that's chained after `data()` is run once for each item in the data set.
|
||||
È importante notare che NON è necessario scrivere un ciclo `for` o utilizzare `forEach()` per iterare sugli elementi del set di dati. Ricorda che il metodo `data()` analizza il set di dati, e qualsiasi metodo che viene concatenato dopo `data()` viene eseguito una volta per ciascun elemento del set di dati.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the `x` attribute callback function so it returns the index times 30.
|
||||
Modifica la funzione di callback dell'attributo `x` in modo che restituisca l'indice moltiplicato per 30.
|
||||
|
||||
**Note:** Each bar has a width of 25, so increasing each `x` value by 30 adds some space between the bars. Any value greater than 25 would work in this example.
|
||||
**Nota:** Ogni barra ha una larghezza di 25, quindi aumentare ogni valore `x` di 30 aggiunge dello spazio tra le barre. In questo esempio, qualsiasi valore superiore a 25 può andar bene.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `rect` should have an `x` value of `0`.
|
||||
Il primo `rect` dovrebbe avere un valore `x` di `0`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(0).attr('x') == '0');
|
||||
```
|
||||
|
||||
The second `rect` should have an `x` value of `30`.
|
||||
Il secondo `rect` dovrebbe avere un valore `x` di `30`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(1).attr('x') == '30');
|
||||
```
|
||||
|
||||
The third `rect` should have an `x` value of `60`.
|
||||
Il terzo `rect` dovrebbe avere un valore `x` di `60`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(2).attr('x') == '60');
|
||||
```
|
||||
|
||||
The fourth `rect` should have an `x` value of `90`.
|
||||
Il quarto `rect` dovrebbe avere un valore `x` di `90`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(3).attr('x') == '90');
|
||||
```
|
||||
|
||||
The fifth `rect` should have an `x` value of `120`.
|
||||
Il quinto `rect` dovrebbe avere un valore `x` di `120`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(4).attr('x') == '120');
|
||||
```
|
||||
|
||||
The sixth `rect` should have an `x` value of `150`.
|
||||
Il sesto `rect` dovrebbe avere un valore `x` di `150`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(5).attr('x') == '150');
|
||||
```
|
||||
|
||||
The seventh `rect` should have an `x` value of `180`.
|
||||
Il settimo `rect` dovrebbe avere un valore `x` di `180`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(6).attr('x') == '180');
|
||||
```
|
||||
|
||||
The eighth `rect` should have an `x` value of `210`.
|
||||
L’ottavo `rect` dovrebbe avere un valore `x` di `210`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(7).attr('x') == '210');
|
||||
```
|
||||
|
||||
The ninth `rect` should have an `x` value of `240`.
|
||||
Il nono `rect` dovrebbe avere un valore `x` di `240`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(8).attr('x') == '240');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bd0
|
||||
title: Invert SVG Elements
|
||||
title: Invertire elementi SVG
|
||||
challengeType: 6
|
||||
forumTopicId: 301488
|
||||
dashedName: invert-svg-elements
|
||||
@ -8,73 +8,73 @@ dashedName: invert-svg-elements
|
||||
|
||||
# --description--
|
||||
|
||||
You may have noticed the bar chart looked like it's upside-down, or inverted. This is because of how SVG uses (x, y) coordinates.
|
||||
Potresti aver notato che il grafico a barre è sotto soprra, o invertito. Questo è causato da come SVG usa le coordinate (x, y).
|
||||
|
||||
In SVG, the origin point for the coordinates is in the upper-left corner. An `x` coordinate of 0 places a shape on the left edge of the SVG area. A `y` coordinate of 0 places a shape on the top edge of the SVG area. Higher `x` values push the rectangle to the right. Higher `y` values push the rectangle down.
|
||||
In SVG, il punto di origine per le coordinate è l'angolo in alto a sinistra. Una coordinata `x` di 0 posiziona la figura sul lato sinistro dell'area SVG. Una coordinata `y` di 0 posiziona la figura sul lato in alto dell'area SVG. Valori di `x` più alti spingono il rettangolo verso destra. Valori di `y` più alti spingono il rettangolo verso il basso.
|
||||
|
||||
To make the bars right-side-up, you need to change the way the `y` coordinate is calculated. It needs to account for both the height of the bar and the total height of the SVG area.
|
||||
Per fare le barre nella giusta direzione, devi cambiare come è calcolata la coordinata `y`. Bisogna considerare sia l'altezza della barra sia l'altezza totale dell'area SVG.
|
||||
|
||||
The height of the SVG area is 100. If you have a data point of 0 in the set, you would want the bar to start at the bottom of the SVG area (not the top). To do this, the `y` coordinate needs a value of 100. If the data point value were 1, you would start with a `y` coordinate of 100 to set the bar at the bottom. Then you need to account for the height of the bar of 1, so the final `y` coordinate would be 99.
|
||||
L'altezza dell'area SVG è 100. Se hai un valore di 0 nel tuo set, vuoi che la barra inizi al lato più in basso dell'area SVG (non in alto). Per fare ciò, la coordinata `y` deve avere un valore di 100. Se il valore fosse 1, inizieresti con una coordinata `y` di 100 per far iniziare la barra in basso. Poi avresti bisogno di considerare l'altezza della barra di 1, quindi la coordinata `y` finale sarebbe 99.
|
||||
|
||||
The `y` coordinate that is `y = heightOfSVG - heightOfBar` would place the bars right-side-up.
|
||||
Una coordinata `y` calcolata come `y = heightOfSVG - heightOfBar` crea le barre nella direzione giusta.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the callback function for the `y` attribute to set the bars right-side-up. Remember that the `height` of the bar is 3 times the data value `d`.
|
||||
Cambia la funzione callback per l'attributo `y` per raddrizzare le barre. Ricorda che l'altezza (`height`) della barra è 3 volte il valore `d`.
|
||||
|
||||
**Note:** In general, the relationship is `y = h - m * d`, where `m` is the constant that scales the data points.
|
||||
**Nota:** In generale, la relazione è `y = h - m * d`, dove `m` è la costante che moltiplica i dati.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `rect` should have a `y` value of `64`.
|
||||
Il primo `rect` dovrebbe avere `y` di `64`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(0).attr('y') == h - dataset[0] * 3);
|
||||
```
|
||||
|
||||
The second `rect` should have a `y` value of `7`.
|
||||
Il secondo `rect` dovrebbe avere un valore `y` di `7`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(1).attr('y') == h - dataset[1] * 3);
|
||||
```
|
||||
|
||||
The third `rect` should have a `y` value of `34`.
|
||||
Il terzo `rect` dovrebbe avere un valore `y` di `34`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(2).attr('y') == h - dataset[2] * 3);
|
||||
```
|
||||
|
||||
The fourth `rect` should have a `y` value of `49`.
|
||||
Il quarto `rect` dovrebbe avere un valore `y` di `49`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(3).attr('y') == h - dataset[3] * 3);
|
||||
```
|
||||
|
||||
The fifth `rect` should have a `y` value of `25`.
|
||||
Il quinto `rect` dovrebbe avere un valore `y` di `25`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(4).attr('y') == h - dataset[4] * 3);
|
||||
```
|
||||
|
||||
The sixth `rect` should have a `y` value of `46`.
|
||||
Il sesto `rect` dovrebbe avere un valore `y` di `46`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(5).attr('y') == h - dataset[5] * 3);
|
||||
```
|
||||
|
||||
The seventh `rect` should have a `y` value of `13`.
|
||||
Il settimo `rect` dovrebbe avere un valore `y` di `13`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(6).attr('y') == h - dataset[6] * 3);
|
||||
```
|
||||
|
||||
The eighth `rect` should have a `y` value of `58`.
|
||||
L'ottavo `rect` dovrebbe avere un valore `y` di `58`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(7).attr('y') == h - dataset[7] * 3);
|
||||
```
|
||||
|
||||
The ninth `rect` should have a `y` value of `73`.
|
||||
Il nono `rect` dovrebbe avere un valore `y` di `73`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(8).attr('y') == h - dataset[8] * 3);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcb
|
||||
title: Learn About SVG in D3
|
||||
title: Informazioni su SVG in D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301489
|
||||
dashedName: learn-about-svg-in-d3
|
||||
@ -8,35 +8,35 @@ dashedName: learn-about-svg-in-d3
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>SVG</dfn> stands for <dfn>Scalable Vector Graphics</dfn>.
|
||||
<dfn>SVG</dfn> sta per <dfn>Scalable Vector Graphics</dfn>.
|
||||
|
||||
Here "scalable" means that, if you zoom in or out on an object, it would not appear pixelated. It scales with the display system, whether it's on a small mobile screen or a large TV monitor.
|
||||
Qui "scalabile" significa che, se si ingrandisce o si rimpicciolisce un oggetto, questo non apparirà pixellato. Esso scala in base al sistema di visualizzazione, che si tratti di un piccolo schermo mobile o di un grande monitor TV.
|
||||
|
||||
SVG is used to make common geometric shapes. Since D3 maps data into a visual representation, it uses SVG to create the shapes for the visualization. SVG shapes for a web page must go within an HTML `svg` tag.
|
||||
SVG è usato per creare forme geometriche comuni. Dal momento che D3 mappa i dati in una rappresentazione visuale, utilizza SVG per creare le forme da visualizzare. Le forme SVG per una pagina web devono andare all'interno di un tag HTML `svg`.
|
||||
|
||||
CSS can be scalable when styles use relative units (such as `vh`, `vw`, or percentages), but using SVG is more flexible to build data visualizations.
|
||||
CSS può essere scalabile quando gli stili usano unità relative (come `vh`, `vw`, o percentuali), ma usare SVG è più flessibile per creare visualizzazioni di dati.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add an `svg` node to the `body` using `append()`. Give it a `width` attribute set to the provided `w` constant and a `height` attribute set to the provided `h` constant using the `attr()` or `style()` methods for each. You'll see it in the output because there's a `background-color` of pink applied to it in the `style` tag.
|
||||
Aggiungi un nodo `svg` al `body` usando `append()`. Dagli un attributo `width` impostato alla costante `w` fornita e un attributo `height` impostato alla costante `h` fornita utilizzando i metodi `attr()` o `style()` per ciascuno. Lo vedrai nell'output perché c'è un `background-color` rosa applicato ad esso nel tag `style`.
|
||||
|
||||
**Note:** When using `attr()` width and height attributes do not have units. This is the building block of scaling - the element will always have a 5:1 width to height ratio, no matter what the zoom level is.
|
||||
**Nota:** Quando si utilizza `attr()` la larghezza e l'altezza degli attributi non hanno unità. Questo è la base del ridimensionamento - l'elemento avrà sempre un rapporto tra larghezza e altezza di 5:1, non importa quale sia il livello di zoom.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your document should have 1 `svg` element.
|
||||
Il tuo documento dovrebbe avere un elemento `svg`.
|
||||
|
||||
```js
|
||||
assert($('svg').length == 1);
|
||||
```
|
||||
|
||||
The `svg` element should have a `width` attribute set to `500` or styled to have a width of `500px`.
|
||||
L'elemento `svg` dovrebbe avere un attributo `width` impostato a `500` o dovrebbe essere stilizzato in modo da avere una larghezza di `500px`.
|
||||
|
||||
```js
|
||||
assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px');
|
||||
```
|
||||
|
||||
The `svg` element should have a `height` attribute set to `100` or styled to have a height of `100px`.
|
||||
L'elemento `svg` dovrebbe avere un attributo `height` impostato a `100` o dovrebbe essere stilizzato in modo da avere un'altezza di `100px`.
|
||||
|
||||
```js
|
||||
assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc3
|
||||
title: Select a Group of Elements with D3
|
||||
title: Selezionare un gruppo di elementi con D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301490
|
||||
dashedName: select-a-group-of-elements-with-d3
|
||||
@ -8,21 +8,21 @@ dashedName: select-a-group-of-elements-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
D3 also has the `selectAll()` method to select a group of elements. It returns an array of HTML nodes for all the items in the document that match the input string. Here's an example to select all the anchor tags in a document:
|
||||
D3 ha anche il metodo `selectAll()` che permette di selezionare un gruppo di elementi. Esso restituisce un array di nodi HTML per tutti gli elementi del documento che corrispondono alla stringa di input. Ecco un esempio che seleziona tutti i tag di ancoraggio in un documento:
|
||||
|
||||
```js
|
||||
const anchors = d3.selectAll("a");
|
||||
```
|
||||
|
||||
Like the `select()` method, `selectAll()` supports method chaining, and you can use it with other methods.
|
||||
Come il metodo `select()`, `selectAll()` supporta la concatenazione dei metodi, e puoi usarlo con altri metodi.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Select all of the `li` tags in the document, and change their text to the string `list item` by chaining the `.text()` method.
|
||||
Seleziona tutti i tag `li` nel documento, e cambia il loro testo nella stringa `list item` concatenando il metodo `.text()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
There should be 3 `li` elements on the page, and the text in each one should say `list item`. Capitalization and spacing should match exactly.
|
||||
Nella pagina ci dovrebbero essere 3 elementi `li`, e il testo in ciascuno di essi dovrebbe dire `list item`. Le maiuscole e la spaziatura dovrebbero corrispondere esattamente.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -32,13 +32,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should access the `d3` object.
|
||||
Il tuo codice dovrebbe accedere all'oggetto `d3`.
|
||||
|
||||
```js
|
||||
assert(code.match(/d3/g));
|
||||
```
|
||||
|
||||
Your code should use the `selectAll` method.
|
||||
Il tuo codice dovrebbe utilizzare il metodo `selectAll`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.selectAll/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdb
|
||||
title: Set a Domain and a Range on a Scale
|
||||
title: Impostare un dominio e un intervallo su una scala
|
||||
challengeType: 6
|
||||
forumTopicId: 301491
|
||||
dashedName: set-a-domain-and-a-range-on-a-scale
|
||||
@ -8,13 +8,13 @@ dashedName: set-a-domain-and-a-range-on-a-scale
|
||||
|
||||
# --description--
|
||||
|
||||
By default, scales use the identity relationship. This means the input value maps to the output value. However, scales can be much more flexible and interesting.
|
||||
Per impostazione predefinita, le scale usano la relazione identità. Questo significa che il valore in ingresso viene mappato al valore in uscita. Tuttavia, le scale possono essere molto più flessibili e interessanti.
|
||||
|
||||
Say a dataset has values ranging from 50 to 480. This is the input information for a scale, also known as the <dfn>domain</dfn>.
|
||||
Diciamo che un set di dati ha valori che vanno da 50 a 480. Queste sono le informazioni di input per una scala, noto anche come il <dfn>dominio</dfn>.
|
||||
|
||||
You want to map those points along the `x` axis on the SVG canvas, between 10 units and 500 units. This is the output information, also known as the <dfn>range</dfn>.
|
||||
Si desidera mappare quei punti lungo l'asse `x` sulla tela SVG, tra 10 unità e 500 unità. Queste sono le informazioni di output, note anche come <dfn>l'intervallo</dfn>.
|
||||
|
||||
The `domain()` and `range()` methods set these values for the scale. Both methods take an array of at least two elements as an argument. Here's an example:
|
||||
I metodi `domain()` e `range()` impostano questi valori per la scala. Entrambi i metodi prendono un array di almeno due elementi come argomento. Ecco un esempio:
|
||||
|
||||
```js
|
||||
scale.domain([50, 480]);
|
||||
@ -26,43 +26,43 @@ scale(750)
|
||||
d3.scaleLinear()
|
||||
```
|
||||
|
||||
In order, the following values would be displayed in the console: `10`, `500`, `323.37`, and `807.67`.
|
||||
In ordine, i seguenti valori saranno visualizzati nella console: `10`, `500`, `323.37`, e `807.67`.
|
||||
|
||||
Notice that the scale uses the linear relationship between the domain and range values to figure out what the output should be for a given number. The minimum value in the domain (50) maps to the minimum value (10) in the range.
|
||||
Si noti che la scala utilizza la relazione lineare tra i valori del dominio e dell'intervallo per capire quale dovrebbe essere l'output per un dato numero. Il valore minimo nel dominio (50) mappa al valore minimo (10) nell'intervallo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a scale and set its domain to `[250, 500]` and range to `[10, 150]`.
|
||||
Crea una scala e imposta il suo dominio a `[250, 500]` e intervallo a `[10, 150]`.
|
||||
|
||||
**Note:** You can chain the `domain()` and `range()` methods onto the `scale` variable.
|
||||
**Nota:** Puoi concatenare i metodi `domain()` e `range()` sulla variabile `scale`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `domain()` method.
|
||||
Il tuo codice dovrebbe usare il metodo `domain()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.domain/g));
|
||||
```
|
||||
|
||||
The `domain()` of the `scale` should be set to `[250, 500]`.
|
||||
Il `domain()` della scala `scale` dovrebbe essere impostato a `[250, 500]`.
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));
|
||||
```
|
||||
|
||||
Your code should use the `range()` method.
|
||||
Il tuo codice dovrebbe usare il metodo `range()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.range/g));
|
||||
```
|
||||
|
||||
The `range()` of the `scale` should be set to `[10, 150]`.
|
||||
L'intervallo `range()` della `scale` dovrebbe essere impostato a `[10, 150]`.
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));
|
||||
```
|
||||
|
||||
The text in the `h2` should be `-102`.
|
||||
Il testo nell'`h2` dovrebbe essere `-102`.
|
||||
|
||||
```js
|
||||
assert($('h2').text() == '-102');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd3
|
||||
title: Style D3 Labels
|
||||
title: Aggiungere stili alle etichette D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301492
|
||||
dashedName: style-d3-labels
|
||||
@ -8,21 +8,21 @@ dashedName: style-d3-labels
|
||||
|
||||
# --description--
|
||||
|
||||
D3 methods can add styles to the bar labels. The `fill` attribute sets the color of the text for a `text` node. The `style()` method sets CSS rules for other styles, such as `font-family` or `font-size`.
|
||||
I metodi D3 possono aggiungere stili alle etichette delle barre. L'attributo `fill` (riempimento) imposta il colore del testo per un nodo `text`. Il metodo `style()` imposta regole CSS per altri stili, come `font-family` o `font-size`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Set the `font-size` of the `text` elements to `25px`, and the color of the text to red.
|
||||
Imposta la dimensione `font-size` degli elementi `text` a `25px` e il colore del testo a rosso.
|
||||
|
||||
# --hints--
|
||||
|
||||
The labels should all have a `fill` color of red.
|
||||
Le barre dovrebbero avere tutte un colore di riempimento (`fill`) rosso.
|
||||
|
||||
```js
|
||||
assert($('text').css('fill') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
The labels should all have a `font-size` of `25` pixels.
|
||||
Le etichette dovrebbero avere tutte un `font-size` di `25` pixel.
|
||||
|
||||
```js
|
||||
assert($('text').css('font-size') == '25px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bde
|
||||
title: Use a Pre-Defined Scale to Place Elements
|
||||
title: Usare una scala predefinita per posizionare gli elementi
|
||||
challengeType: 6
|
||||
forumTopicId: 301494
|
||||
dashedName: use-a-pre-defined-scale-to-place-elements
|
||||
@ -8,32 +8,32 @@ dashedName: use-a-pre-defined-scale-to-place-elements
|
||||
|
||||
# --description--
|
||||
|
||||
With the scales set up, it's time to map the scatter plot again. The scales are like processing functions that turn the `x` and `y` raw data into values that fit and render correctly on the SVG canvas. They keep the data within the screen's plotting area.
|
||||
Con le scale impostate, è il momento di mappare nuovamente il grafico a dispersione. Le scale sono come le funzioni di elaborazione che trasformano i dati grezzi `x` e `y` in valori che si adattano e si posizionano correttamente sulla tela SVG. Esse mantengono i dati all'interno dell'area di disegno dello schermo.
|
||||
|
||||
You set the coordinate attribute values for an SVG shape with the scaling function. This includes `x` and `y` attributes for `rect` or `text` elements, or `cx` and `cy` for `circles`. Here's an example:
|
||||
I valori degli attributi coordinate di una forma SVG si impostano con la funzione di ridimensionamento. Questo include gli attributi `x` e `y` per gli elementi `rect` o `text`, oppure `cx` e `cy` per i `circles`. Ecco un esempio:
|
||||
|
||||
```js
|
||||
shape
|
||||
.attr("x", (d) => xScale(d[0]))
|
||||
```
|
||||
|
||||
Scales set shape coordinate attributes to place the data points onto the SVG canvas. You don't need to apply scales when you display the actual data value, for example, in the `text()` method for a tooltip or label.
|
||||
Le scale impostano gli attributi coordinate della forma per posizionare i punti dati sulla superficie di disegno SVG. Non è necessario applicare le scale quando si visualizza il valore effettivo dei dati, per esempio, nel metodo `text()` per un suggerimento o un'etichetta.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use `xScale` and `yScale` to position both the `circle` and `text` shapes onto the SVG canvas. For the `circles`, apply the scales to set the `cx` and `cy` attributes. Give them a radius of `5` units, too.
|
||||
Usa `xScale` e `yScale` per posizionare entrambe le forme `circle` e `text` sulla tela SVG. Per i `circles`, applica le scale per impostare gli attributi `cx` e `cy`. Dai loro anche un raggio di `5` unità.
|
||||
|
||||
For the `text` elements, apply the scales to set the `x` and `y` attributes. The labels should be offset to the right of the dots. To do this, add `10` units to the `x` data value before passing it to the `xScale`.
|
||||
Per gli elementi `text`, applica le scale per impostare gli attributi `x` e `y`. Le etichette devono essere spostate a destra dei punti. Per fare questo, aggiungi `10` unità al valore di dati `x` prima di passarlo a `xScale`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 10 `circle` elements.
|
||||
Il tuo codice dovrebbe avere 10 elementi `circle`.
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
The first `circle` element should have a `cx` value of approximately `91` and a `cy` value of approximately `368` after applying the scales. It should also have an `r` value of `5`.
|
||||
Il primo elemento `circle` dovrebbe avere un valore `cx` di circa `91` e un valore `cy` di circa `368` dopo aver applicato le scale. Dovrebbe anche avere un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -43,7 +43,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second `circle` element should have a `cx` value of approximately `159` and a `cy` value of approximately `181` after applying the scales. It should also have an `r` value of `5`.
|
||||
Il secondo elemento `circle` dovrebbe avere un valore `cx` di circa `159` e un valore `cy` di circa `181` dopo aver applicato le scale. Dovrebbe inoltre avere un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third `circle` element should have a `cx` value of approximately `340` and a `cy` value of approximately `329` after applying the scales. It should also have an `r` value of `5`.
|
||||
Il terzo elemento `circle` dovrebbe avere un valore `cx` di circa `340` e un valore `cy` di circa `329` dopo aver applicato le scale. Dovrebbe inoltre avere un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -63,7 +63,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fourth `circle` element should have a `cx` value of approximately `131` and a `cy` value of approximately `60` after applying the scales. It should also have an `r` value of `5`.
|
||||
Il quarto elemento `circle` dovrebbe avere un valore `cx` di circa `131` e un valore `cy` di circa `60` dopo aver applicato le scale. Dovrebbe inoltre avere un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -73,7 +73,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fifth `circle` element should have a `cx` value of approximately `440` and a `cy` value of approximately `237` after applying the scales. It should also have an `r` value of `5`.
|
||||
Il quinto elemento `circle` dovrebbe avere un valore `cx` di circa `440` e un valore `cy` di circa `237` dopo aver applicato le scale. Dovrebbe anche avere un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -83,7 +83,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The sixth `circle` element should have a `cx` value of approximately `271` and a `cy` value of approximately `306` after applying the scales. It should also have an `r` value of `5`.
|
||||
Il sesto elemento `circle` dovrebbe avere un valore `cx` di circa `271` e un valore `cy` di circa `306` dopo aver applicato le scale. Dovrebbe inoltre avere un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -93,7 +93,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The seventh `circle` element should have a `cx` value of approximately `361` and a `cy` value of approximately `351` after applying the scales. It should also have an `r` value of `5`.
|
||||
Il settimo elemento `circle` dovrebbe avere un valore `cx` di circa `361` e un valore `cy` di circa `351` dopo aver applicato le scale. Dovrebbe inoltre avere un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -103,7 +103,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The eighth `circle` element should have a `cx` value of approximately `261` and a `cy` value of approximately `132` after applying the scales. It should also have an `r` value of `5`.
|
||||
L'ottavo elemento `circle` dovrebbe avere un valore `cx` di circa `261` e un valore `cy` di circa `132` dopo aver applicato le scale. Dovrebbe inoltre avere un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -113,7 +113,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The ninth `circle` element should have a `cx` value of approximately `131` and a `cy` value of approximately `144` after applying the scales. It should also have an `r` value of `5`.
|
||||
Il nono elemento `circle` dovrebbe avere un valore `cx` di circa `131` e un valore `cy` di circa `144` dopo aver applicato le scale. Dovrebbe inoltre avere un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -123,7 +123,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The tenth `circle` element should have a `cx` value of approximately `79` and a `cy` value of approximately `326` after applying the scales. It should also have an `r` value of `5`.
|
||||
Il decimo elemento `circle` dovrebbe avere un valore `cx` di circa `79` e un valore `cy` di circa `326` dopo aver applicato le scale. Dovrebbe anche avere un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -133,13 +133,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should have 10 `text` elements.
|
||||
Il tuo codice dovrebbe avere 10 elementi `text`.
|
||||
|
||||
```js
|
||||
assert($('text').length == 10);
|
||||
```
|
||||
|
||||
The first label should have an `x` value of approximately `100` and a `y` value of approximately `368` after applying the scales.
|
||||
La prima etichetta dovrebbe avere un valore `x` di circa `100` e un valore `y` di circa `368` dopo aver applicato le scale.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -148,7 +148,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second label should have an `x` value of approximately `168` and a `y` value of approximately `181` after applying the scales.
|
||||
La seconda etichetta dovrebbe avere un valore `x` di circa `168` e un valore `y` di circa `181` dopo aver applicato le scale.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -157,7 +157,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third label should have an `x` value of approximately `350` and a `y` value of approximately `329` after applying the scales.
|
||||
La terza etichetta dovrebbe avere un valore `x` di circa `350` e un valore `y` di circa `329` dopo aver applicato le scale.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -166,7 +166,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fourth label should have an `x` value of approximately `141` and a `y` value of approximately `60` after applying the scales.
|
||||
La quarta etichetta dovrebbe avere un valore `x` di circa `141` e un valore `y` di circa `60` dopo aver applicato le scale.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -175,7 +175,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fifth label should have an `x` value of approximately `449` and a `y` value of approximately `237` after applying the scales.
|
||||
La quinta etichetta dovrebbe avere un valore `x` di circa `449` e un valore `y` di circa `237` dopo aver applicato le scale.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -184,7 +184,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The sixth label should have an `x` value of approximately `280` and a `y` value of approximately `306` after applying the scales.
|
||||
La sesta etichetta dovrebbe avere un valore `x` di circa `280` e un valore `y` di circa `306` dopo aver applicato le scale.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -193,7 +193,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The seventh label should have an `x` value of approximately `370` and a `y` value of approximately `351` after applying the scales.
|
||||
La settima etichetta dovrebbe avere un valore `x` di circa `370` e un valore `y` di circa `351` dopo aver applicato le scale.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -202,7 +202,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The eighth label should have an `x` value of approximately `270` and a `y` value of approximately `132` after applying the scales.
|
||||
L'ottava etichetta dovrebbe avere un valore `x` di circa `270` e un valore `y` di circa `132` dopo aver applicato le scale.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -211,7 +211,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The ninth label should have an `x` value of approximately `140` and a `y` value of approximately `144` after applying the scales.
|
||||
La nona etichetta dovrebbe avere un valore `x` di circa `140` e un valore `y` di circa `144` dopo aver applicato le scale.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -220,7 +220,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The tenth label should have an `x` value of approximately `88` and a `y` value of approximately `326` after applying the scales.
|
||||
La decima etichetta dovrebbe avere un valore `x` di circa `88` e un valore `y` di circa `326` dopo aver applicato le scale.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdc
|
||||
title: >-
|
||||
Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a
|
||||
Dataset
|
||||
Usa le funzioni d3.max e d3.min per trovare i valori minimi e massimi in un set di dati
|
||||
challengeType: 6
|
||||
forumTopicId: 301496
|
||||
dashedName: >-
|
||||
@ -11,11 +10,11 @@ dashedName: >-
|
||||
|
||||
# --description--
|
||||
|
||||
The D3 methods `domain()` and `range()` set that information for your scale based on the data. There are a couple methods to make that easier.
|
||||
I metodi D3 `domain()` e `range()` impostano tali informazioni per la tua scala in base ai dati. Ci sono un paio di metodi per renderlo più facile.
|
||||
|
||||
Often when you set the domain, you'll want to use the minimum and maximum values within the data set. Trying to find these values manually, especially in a large data set, may cause errors.
|
||||
Spesso quando imposti il dominio, vorrai utilizzare i valori minimo e massimo all'interno del set di dati. Tentare di trovare questi valori manualmente, soprattutto in un set di dati di grandi dimensioni, può causare errori.
|
||||
|
||||
D3 has two methods - `min()` and `max()` to return this information. Here's an example:
|
||||
D3 ha due metodi - `min()` e `max()` per restituire queste informazioni. Ecco un esempio:
|
||||
|
||||
```js
|
||||
const exampleData = [34, 234, 73, 90, 6, 52];
|
||||
@ -23,28 +22,28 @@ d3.min(exampleData)
|
||||
d3.max(exampleData)
|
||||
```
|
||||
|
||||
A dataset may have nested arrays, like the `[x, y]` coordinate pairs that were in the scatter plot example. In that case, you need to tell D3 how to calculate the maximum and minimum. Fortunately, both the `min()` and `max()` methods take a callback function. In this example, the callback function's argument `d` is for the current inner array. The callback needs to return the element from the inner array (the `x` or `y` value) over which you want to compute the maximum or minimum. Here's an example for how to find the min and max values with an array of arrays:
|
||||
Un set di dati può avere array annidati, come le coppie di coordinate `[x, y]` che erano nell'esempio del grafico a dispersione. In questo caso, è necessario dire a D3 come calcolare il massimo e minimo. Fortunatamente, entrambi i metodi `min()` e `max()` assumono una funzione di callback. In questo esempio, l'argomento `d` della funzione di callback è per l'attuale array interno. Il callback deve restituire l'elemento dall'array interno (il valore `x` o `y`) su cui si desidera calcolare il massimo o minimo. Ecco un esempio di come trovare i valori minimi e massimi con un array di array:
|
||||
|
||||
```js
|
||||
const locationData = [[1, 7],[6, 3],[8, 3]];
|
||||
const minX = d3.min(locationData, (d) => d[0]);
|
||||
```
|
||||
|
||||
`minX` would have the value `1`.
|
||||
`minX` avrà il valore `1`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `positionData` array holds sub arrays of x, y, and z coordinates. Use a D3 method to find the maximum value of the z coordinate (the third value) from the arrays and save it in the `output` variable.
|
||||
L'array `positionData` contiene sotto-array di coordinate x, y e z. Utilizza un metodo D3 per trovare il valore massimo della coordinata z (il terzo valore) dagli array e salvarlo nella variabile `output`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The text in the `h2` should be `8`.
|
||||
Il testo di `h2` dovrebbe essere `8`.
|
||||
|
||||
```js
|
||||
assert(output == 8 && $('h2').text() == '8');
|
||||
```
|
||||
|
||||
Your code should use the `max()` method.
|
||||
Il tuo codice dovrebbe usare il metodo `max()`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc4
|
||||
title: Work with Data in D3
|
||||
title: Lavorare con i dati in D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301497
|
||||
dashedName: work-with-data-in-d3
|
||||
@ -8,15 +8,15 @@ dashedName: work-with-data-in-d3
|
||||
|
||||
# --description--
|
||||
|
||||
The D3 library focuses on a data-driven approach. When you have a set of data, you can apply D3 methods to display it on the page. Data comes in many formats, but this challenge uses a simple array of numbers.
|
||||
La libreria D3 si concentra su un approccio basato sui dati. Quando si dispone di un insieme di dati, è possibile applicare i metodi D3 per visualizzarli sulla pagina. I dati sono disponibili in molti formati, ma questa sfida utilizza una semplice matrice di numeri.
|
||||
|
||||
The first step is to make D3 aware of the data. The `data()` method is used on a selection of DOM elements to attach the data to those elements. The data set is passed as an argument to the method.
|
||||
Il primo passo è quello di rendere D3 consapevole dei dati. Il metodo `data()` è utilizzato su una selezione di elementi DOM per collegare i dati a questi elementi. Il set di dati viene passato come argomento al metodo.
|
||||
|
||||
A common workflow pattern is to create a new element in the document for each piece of data in the set. D3 has the `enter()` method for this purpose.
|
||||
Un comune metodo di lavoro è quello di creare un nuovo elemento nel documento per ogni elemento di dati nel set. A questo scopo D3 ha il metodo `enter()`.
|
||||
|
||||
When `enter()` is combined with the `data()` method, it looks at the selected elements from the page and compares them to the number of data items in the set. If there are fewer elements than data items, it creates the missing elements.
|
||||
Quando `enter()` viene combinato con il metodo `data()`, guarda gli elementi selezionati dalla pagina e li confronta con il numero di elementi di dati nel set. Se ci sono meno elementi rispetto ai dati, crea quelli mancanti.
|
||||
|
||||
Here is an example that selects a `ul` element and creates a new list item based on the number of entries in the array:
|
||||
Ecco un esempio che seleziona un elemento `ul` e crea un nuovo elemento lista in base al numero di voci nell'array:
|
||||
|
||||
```html
|
||||
<body>
|
||||
@ -32,21 +32,21 @@ Here is an example that selects a `ul` element and creates a new list item based
|
||||
</body>
|
||||
```
|
||||
|
||||
It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the `ul` on the page. Next, select all list items, which returns an empty selection. Then the `data()` method reviews the dataset and runs the following code three times, once for each item in the array. The `enter()` method sees there are no `li` elements on the page, but it needs 3 (one for each piece of data in `dataset`). New `li` elements are appended to the `ul` and have the text `New item`.
|
||||
Potrebbe sembrare confuso selezionare degli elementi che non esistono ancora. Questo dice a D3 di selezionare prima gli `ul` della pagina. Successivamente, seleziona tutti gli elementi dell'elenco, che restituisce una selezione vuota. Quindi il metodo `data()` esamina il set di dati ed esegue il codice successivo tre volte, una volta per ogni elemento nell'array. Il metodo `enter()` vede che non ci sono elementi `li` nella pagina, ma gliene servono tre (uno per ogni elemento di dati nel `dataset`). I nuovi elementi `li` sono aggiunti all'`ul` e contengono il testo `New item`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Select the `body` node, then select all `h2` elements. Have D3 create and append an `h2` tag for each item in the `dataset` array. The text in the `h2` should say `New Title`. Your code should use the `data()` and `enter()` methods.
|
||||
Seleziona il nodo `body`, dopodiché seleziona tutti gli elementi `h2`. Fai creare e aggiungere a D3 un tag `h2` per ogni elemento nell'array del `dataset`. Il testo nell'`h2` dovrebbe dire `New Title`. Il tuo codice dovrebbe utilizzare i metodi `data()` e `enter()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your document should have 9 `h2` elements.
|
||||
Il tuo documento dovrebbe avere 9 elementi `h2`.
|
||||
|
||||
```js
|
||||
assert($('h2').length == 9);
|
||||
```
|
||||
|
||||
The text in the `h2` elements should say `New Title`. The capitalization and spacing should match exactly.
|
||||
Il testo nell'elemento `h2` dovrebbe dire `New Title`. Le maiuscole e la spaziatura dovrebbero corrispondere esattamente.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -56,13 +56,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should use the `data()` method.
|
||||
Il tuo codice dovrebbe usare il metodo `data()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.data/g));
|
||||
```
|
||||
|
||||
Your code should use the `enter()` method.
|
||||
Il tuo codice dovrebbe utilizzare il metodo `enter()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.enter/g));
|
||||
|
||||
Reference in New Issue
Block a user