<section id="description">
<p><strong>Цель:</strong> создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/EZKqza" target="_blank">https://codepen.io/freeCodeCamp/full/EZKqza</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. <strong>User Story # 1:</strong> Мой choropleth должен иметь заголовок с соответствующим <code>id="title"</code> . <strong>User Story # 2: У</strong> моего choropleth должен быть элемент описания с соответствующим <code>id="description"</code> . <strong>User Story # 3:</strong> Мой choropleth должен иметь графства с соответствующим <code>class="county"</code> которые представляют данные. <strong>User Story # 4:</strong> должно быть не менее 4 разных цветов заливки, используемых для округов. <strong>User Story # 5:</strong> Мои округа должны иметь характеристики <code>data-fips</code> и <code>data-education</code> имеющие соответствующие значения fips и education. <strong>User Story # 6:</strong> Мой choropleth должен иметь графство для каждой предоставленной точки данных. <strong>User Story # 7:</strong> В округах должны быть значения данных и данных, которые соответствуют данным образца. <strong>User Story # 8:</strong> Мой choropleth должен иметь легенду с соответствующим <code>id="legend"</code> . <strong>User Story # 9:</strong> Для легенды должно быть не менее 4 различных цветов заливки. <strong>User Story # 10:</strong> Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей <code>id="tooltip"</code> которая отображает больше информации о области. <strong>User Story # 11:</strong> Моя подсказка должна иметь свойство <code>data-education</code> которое соответствует <code>data-education</code> данных в активной области. Вот данные, которые вам нужно будет выполнить для этого проекта: <br><ul><li> <strong>Данные об образовании в США:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json</code> </li><li> <strong>Данные графства США:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json</code> </li></ul> Вы можете создать свой проект, <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нажимая эту ручку CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</p></section>

Visualize Data with a Choropleth Map

<section id="description">
<p><strong>Цель:</strong> создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/KaNGNR" target="_blank">https://codepen.io/freeCodeCamp/full/KaNGNR</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. <strong>User Story # 1:</strong> Моя карта дерева должна иметь заголовок с соответствующим <code>id="title"</code> . <strong>User Story # 2:</strong> Моя древовидная карта должна иметь описание с соответствующим <code>id="description"</code> . <strong>User Story # 3:</strong> Моя карта деревьев должна иметь <code>rect</code> элементы с соответствующим <code>class="tile"</code> которые представляют данные. <strong>User Story # 4:</strong> Для плиток должно быть не менее двух разных цветов заливки. <strong>User Story # 5:</strong> Каждая плитка должна иметь свойства <code>data-name</code> , <code>data-category</code> и <code>data-value</code> содержащие их соответствующее имя, категорию и значение. <strong>User Story # 6:</strong> Площадь каждой плитки должна соответствовать размеру данных: плитки с большим значением данных должны иметь большую площадь. <strong>User Story # 7:</strong> Моя карта деревьев должна иметь легенду с соответствующим <code>id="legend"</code> . <strong>User Story # 8:</strong> Моя легенда должна иметь <code>rect</code> элементы с соответствующим <code>class="legend-item"</code> . <strong>User Story # 9:</strong> <code>rect</code> элементы в легенде должны использовать как минимум 2 разных цвета заливки. <strong>User Story # 10:</strong> Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей <code>id="tooltip"</code> которая отображает больше информации о области. <strong>User Story # 11:</strong> Моя подсказка должна иметь свойство <code>data-value</code> , соответствующее <code>data-value</code> данных активной области. Для этого проекта вы можете использовать любой из следующих наборов данных: <br><ul><li> <strong>Kickstarter Pledges:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json</code> </li><li> <strong>Продажа фильмов:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json</code> </li><li> <strong>Продажа видеоигр:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json</code> </li></ul> Вы можете создать свой проект, <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нажимая эту ручку CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</p></section>

Visualize Data with a Treemap Diagram

<section id="description">
<p>D3 имеет несколько методов, которые позволяют добавлять и изменять элементы в документе. Метод <code>select()</code> выбирает один элемент из документа. Он принимает аргумент для имени нужного элемента и возвращает узел HTML для первого элемента в документе, который соответствует имени. Вот пример: <code>const anchor = d3.select("a");</code> Приведенный выше пример находит первый якорный тег на странице и сохраняет узел HTML для него в переменном <code>anchor</code> . Вы можете использовать выделение с помощью других методов. Часть «d3» в примере является ссылкой на объект D3, так как вы получаете доступ к методам D3. Два других полезных метода: <code>append()</code> и <code>text()</code> . Метод <code>append()</code> принимает аргумент для элемента, который вы хотите добавить в документ. Он добавляет узел HTML к выбранному элементу и возвращает дескриптор этого узла. Метод <code>text()</code> либо задает текст выбранного узла, либо получает текущий текст. Чтобы установить значение, вы передаете строку в качестве аргумента внутри круглых скобок метода. Вот пример, который выбирает неупорядоченный список, добавляет элемент списка и добавляет текст: <blockquote> d3.select ( "UL") <br> .append ( "Ли") <br> .text («Очень важный элемент»); </blockquote> D3 позволяет объединять несколько методов вместе с периодами для выполнения ряда действий в строке.</p></section>

Add Document Elements with D3

<section id="description">
<p>D3 также имеет метод <code>selectAll()</code> для выбора группы элементов. Он возвращает массив узлов HTML для всех элементов документа, соответствующих строке ввода. Ниже приведен пример выбора всех якорных тегов в документе: <code>const anchors = d3.selectAll("a");</code> Как и метод <code>select()</code> , <code>selectAll()</code> поддерживает цепочку методов, и вы можете использовать ее другими способами.</p></section>

Select a Group of Elements with D3

<section id="description">
<p>Библиотека D3 фокусируется на подходе, основанном на данных. Когда у вас есть набор данных, вы можете применить методы D3, чтобы отобразить их на странице. Данные поступают во многих форматах, но этот вызов использует простой массив чисел. Первый шаг - сделать D3 осведомленным о данных. Метод <code>data()</code> используется для выбора элементов DOM для привязки данных к этим элементам. Набор данных передается в качестве аргумента методу. Общий шаблон рабочего процесса - создать новый элемент в документе для каждой части данных в наборе. Для этой цели D3 имеет метод <code>enter()</code> . Когда метод <code>enter()</code> комбинируется с методом <code>data()</code> , он просматривает выбранные элементы со страницы и сравнивает их с количеством элементов данных в наборе. Если элементов меньше, чем элементов данных, это создает недостающие элементы. Вот пример, который выбирает элемент <code>ul</code> и создает новый элемент списка в зависимости от количества записей в массиве: <blockquote> &#x3C;Тело> <br> &#x3C;UL> &#x3C;/ UL> <br> &#x3C;Скрипт> <br> const dataset = ["a", "b", "c"]; <br> d3.select ( "UL"). SelectAll ( "Ли") <br> .data (набор данных) <br> .войти() <br> .append ( "Ли") <br> .text («Новый элемент»); <br> &#x3C;/ Скрипт> <br> &#x3C;/ Body> </blockquote> Может показаться странным выбирать элементы, которые еще не существуют. Этот код сообщает D3, чтобы сначала выбрать <code>ul</code> на странице. Затем выберите все элементы списка, которые возвращают пустой выбор. Затем метод <code>data()</code> проверяет набор данных и запускает следующий код три раза, один раз для каждого элемента массива. Метод <code>enter()</code> видит, что на странице нет элементов <code>li</code> , но для этого требуется 3 (по одному для каждой части данных в <code>dataset</code> ). Новые элементы <code>li</code> добавляются в <code>ul</code> и имеют текст «Новый элемент».</p></section>

Work with Data in D3

<section id="description">
<p>Последние две проблемы охватывают основы динамического отображения данных с помощью D3 с использованием методов <code>data()</code> и <code>enter()</code> . Эти методы берут набор данных и вместе с методом <code>append()</code> создают новый элемент DOM для каждой записи в наборе данных. В предыдущей задаче вы создали новый элемент <code>h2</code> для каждого элемента массива <code>dataset</code> , но все они содержали один и тот же текст «Новое название». Это связано с тем, что вы не использовали данные, привязанные к каждому из элементов <code>h2</code> . Метод D3 <code>text()</code> может принимать строку или функцию обратного вызова в качестве аргумента: <code>selection.text((d) => d)</code> В приведенном выше примере параметр <code>d</code> ссылается на одну запись в наборе данных, которая связана с выбором к. Используя текущий пример как контекст, первый элемент <code>h2</code> привязан к 12, второй элемент <code>h2</code> привязан к 31, третий элемент <code>h2</code> привязан к 22 и так далее.</p></section>

Work with Dynamic Data in D3

<section id="description">
<p>D3 позволяет добавлять встроенные стили CSS для динамических элементов с помощью метода <code>style()</code> . Метод <code>style()</code> принимает в качестве аргумента пару ключ-значение, разделенную запятыми. Вот пример, чтобы задать цвет текста выбора синим: <code>selection.style("color","blue");</code></p>
</section>

Add Inline Styling to Elements

<section id="description">
<p>D3 - о визуализации и представлении данных. Вероятно, вы захотите изменить стиль элементов на основе данных. Вы можете использовать функцию обратного вызова в методе <code>style()</code> для изменения стиля для разных элементов. Например, вы можете покрасить синюю точку данных, если она имеет значение менее 20, и наоборот. Вы можете использовать функцию обратного вызова в методе <code>style()</code> и включать условную логику. Функция обратного вызова использует параметр <code>d</code> для представления точки данных: <blockquote> selection.style ("color", (d) => { <br> / * Логика, возвращающая цвет, основанный на условии * / <br> }); </blockquote> Метод <code>style()</code> не ограничивается настройкой <code>color</code> - его можно использовать и с другими свойствами CSS.</p></section>

Change Styles Based on Data

<section id="description">
<p>Использование большого количества встроенных стилей в HTML-элементах трудно справиться даже для небольших приложений. Легче добавить класс к элементам и стиль этого класса один раз с использованием правил CSS. D3 имеет метод <code>attr()</code> для добавления любого элемента HTML к элементу, включая имя класса. Метод <code>attr()</code> работает так же, как это делает <code>style()</code> . Он принимает значения, разделенные запятыми, и может использовать функцию обратного вызова. Вот пример добавления класса «container» к выбору: <code>selection.attr("class", "container");</code></p>
</section>

Add Classes with D3

<section id="description">
<p>Предыдущие проблемы касались того, как отображать данные из массива и как добавлять классы CSS. Вы можете объединить эти уроки, чтобы создать простую гистограмму. Для этого есть два шага: 1) Создайте <code>div</code> для каждой точки данных в массиве. 2) Дайте каждому <code>div</code> динамическую высоту, используя функцию обратного вызова в методе <code>style()</code> которая устанавливает высоту, равную значению данных. Назовите формат задайте стиль с помощью функции обратного вызова: <code>selection.style("cssProperty", (d) => d)</code></p>
</section>

Update the Height of an Element Dynamically

<section id="description">
<p>Последняя задача создала гистограмму, но есть несколько изменений форматирования, которые могли бы ее улучшить: 1) добавьте пробел между каждым столбцом, чтобы визуально отделить их, что делается путем добавления поля к CSS для класса <code>bar</code> 2) Увеличить высота баров, чтобы лучше показать разницу в значениях, что делается путем умножения значения на число для масштабирования высоты</p></section>

Change the Presentation of a Bar Chart

<section id="description">
<p>SVG означает <code>Scalable Vector Graphics</code> . Здесь «масштабируемый» означает, что если вы увеличиваете или уменьшаете масштаб объекта, он не будет отображаться в пикселях. Он масштабируется с помощью системы отображения, будь то на маленьком мобильном экране или большом ТВ-мониторе. SVG используется для создания общих геометрических фигур. Поскольку D3 отображает данные в визуальное представление, он использует SVG для создания фигур для визуализации. Формы SVG для веб-страницы должны <code>svg</code> теге HTML <code>svg</code> . CSS может быть масштабируемым, когда стили используют относительные единицы (например, <code>vh</code> , <code>vw</code> или проценты), но использование SVG более гибко для создания визуализации данных.</p></section>

Learn About SVG in D3

<section id="description">
<p>The last challenge created an <code>svg</code> element with a given width and height, which was visible because it had a <code>background-color</code> applied to it in the <code>style</code> tag. The code made space for the given width and height.</p>
<p>The next step is to create a shape to put in the <code>svg</code> 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 (<code>&#x3C;rect></code>) SVG shape could create a bar in a bar chart.</p>
<p>When you place a shape into the <code>svg</code> area, you can specify where it goes with <code>x</code> and <code>y</code> coordinates. The origin point of (0, 0) is in the upper-left corner. Positive values for <code>x</code> push the shape to the right, and positive values for <code>y</code> push the shape down from the origin point.</p>
<p>To place a shape in the middle of the 500 (width) x 100 (height) <code>svg</code> from last challenge, the <code>x</code> coordinate would be 250 and the <code>y</code> coordinate would be 50.</p>
<p>An SVG <code>rect</code> has four attributes. There are the <code>x</code> and <code>y</code> coordinates for where it is placed in the <code>svg</code> area. It also has a <code>height</code> and <code>width</code> to specify the size.</p></section>

Display Shapes with SVG

<section id="description">
<p>Последняя задача добавила только один прямоугольник в элемент <code>svg</code> для представления строки. Здесь вы объедините все, что вы узнали до сих пор, о формах <code>data()</code> , <code>enter()</code> и SVG для создания и добавления прямоугольника для каждой точки <code>dataset</code> в <code>dataset</code> . Предыдущий вызов показал формат создания и добавления <code>div</code> для каждого элемента в <code>dataset</code> : <blockquote> d3.select ( "тело"). SelectAll ( "DIV") <br> .data (набор данных) <br> .войти() <br> .append ( "DIV") </blockquote> Есть несколько отличий, которые работают с <code>rect</code> элементами вместо <code>divs</code> . <code>rects</code> должны быть добавлены к элементу <code>svg</code> , а не непосредственно к <code>body</code> . Кроме того, вам нужно указать D3, где разместить каждый <code>rect</code> в области <code>svg</code> . Размещение бар будет рассмотрено в следующей задаче.</p></section>

Create a Bar for Each Data Point in the Set

<section id="description">
<p>Последняя задача создала и добавила прямоугольник к элементу <code>svg</code> для каждой точки в <code>dataset</code> для представления строки. К сожалению, все они были сложены друг на друга. Размещение прямоугольника обрабатывается атрибутами <code>x</code> и <code>y</code> . Они сообщают D3, где начать рисовать фигуру в области <code>svg</code> . Последний вызов задал каждому из них значение 0, поэтому каждый бар был помещен в верхний левый угол. Для гистограммы все бары должны находиться на одном и том же вертикальном уровне, что означает, что значение <code>y</code> остается неизменным (в 0) для всех баров. Однако значение <code>x</code> должно изменяться при добавлении новых баров. Помните, что большие значения <code>x</code> перемещают элементы дальше вправо. По мере прохождения элементов массива в <code>dataset</code> значение x должно увеличиваться. Метод <code>attr()</code> в D3 принимает функцию обратного вызова, чтобы динамически установить этот атрибут. Функция обратного вызова принимает два аргумента: один для самой точки данных (обычно <code>d</code> ) и один для индекса точки данных в массиве. Второй аргумент для индекса является необязательным. Вот формат: <blockquote> selection.attr ("свойство", (d, i) => { <br> / * <br> * d - значение точки данных <br> * i - индекс точки данных в массиве <br> * / <br> }) </blockquote> Важно отметить, что вам не нужно писать цикл <code>for</code> или использовать <code>forEach()</code> для перебора элементов в наборе данных. Напомним, что метод <code>data()</code> анализирует набор данных, и любой метод, который привязан после того, как <code>data()</code> запускается один раз для каждого элемента в наборе данных.</p></section>

Dynamically Set the Coordinates for Each Bar

<section id="description">
<p>Высота каждой панели может быть установлена ​​на значение точки данных в массиве, подобно тому, как значение <code>x</code> было задано динамически. <blockquote> selection.attr ("свойство", (d, i) => { <br> / * <br> * d - значение точки данных <br> * i - индекс точки данных в массиве <br> * / <br> }) </blockquote></p>
</section>

Dynamically Change the Height of Each Bar

<section id="description">
<p>Возможно, вы заметили, что гистограмма выглядела как перевернутая или перевернутая. Это связано с тем, как SVG использует (x, y) координаты. В SVG начальная точка для координат находится в верхнем левом углу. Координата <code>x</code> из 0 помещает фигуру на левый край области SVG. Координата <code>y</code> из 0 устанавливает форму на верхнем краю области SVG. Более высокие значения <code>x</code> нажимают прямоугольник вправо. Более высокие значения <code>y</code> выталкивают прямоугольник вниз. Чтобы сделать панели правыми, вам нужно изменить способ вычисления <code>y</code> координаты. Он должен учитывать как высоту бара, так и общую высоту области SVG. Высота области SVG равна 100. Если у вас есть точка данных из 0 в наборе, вы хотите, чтобы панель начиналась в нижней части области SVG (а не сверху). Для этого координата <code>y</code> должна иметь значение 100. Если значение точки данных равно 1, вы должны начать с координаты <code>y</code> из 100, чтобы установить планку внизу. Затем вам нужно учитывать высоту полосы 1, поэтому конечная координата <code>y</code> будет равна 99. Координата <code>y</code> которая равна <code>y = heightOfSVG - heightOfBar</code> , поместит бары вправо-вверх.</p></section>

Invert SVG Elements

<section id="description">
<p>Бары находятся в правильном положении, но все они имеют черный цвет. SVG имеет способ изменить цвет баров. В SVG <code>rect</code> форма окрашена с атрибутом <code>fill</code> . Он поддерживает шестнадцатеричные коды, имена цветов и значения rgb, а также более сложные параметры, такие как градиенты и прозрачность.</p></section>

Change the Color of an SVG Element

<section id="description">
<p>D3 позволяет вам наметить элемент графа, например панель, используя <code>text</code> элемент SVG. Подобно элементу <code>rect</code> , <code>text</code> элемент должен иметь атрибуты <code>x</code> и <code>y</code> , чтобы поместить его на холст SVG. Он также должен получить доступ к данным для отображения этих значений. D3 дает вам высокий уровень контроля над тем, как вы назовете свои бары.</p></section>

Add Labels to D3 Elements

<section id="description">
<p>Методы D3 могут добавлять стили к ярлыкам бара. Атрибут <code>fill</code> устанавливает цвет текста для <code>text</code> узла. Метод <code>style()</code> устанавливает правила CSS для других стилей, таких как «font-family» или «font-size».</p></section>

Style D3 Labels

<section id="description">
<p>Можно добавлять эффекты, выделяющие панель, когда пользователь наводил на нее курсор мыши. Пока что стиль для прямоугольников применяется со встроенными методами D3 и SVG, но вы также можете использовать CSS. Вы устанавливаете класс CSS в элементах SVG с помощью метода <code>attr()</code> . Затем псевдокласс класса <code>:hover</code> для вашего нового класса содержит правила стиля для любых эффектов зависания.</p></section>

Add a Hover Effect to a D3 Element

<section id="description">
<p>Всплывающая подсказка показывает дополнительную информацию об элементе на странице, когда пользователь наводит курсор на этот элемент. Существует несколько способов добавления всплывающей подсказки к визуализации, эта задача использует элемент <code>title</code> SVG. <code>title</code> с методом <code>text()</code> для динамического добавления данных в столбцы.</p></section>

Add a Tooltip to a D3 Element

<section id="description">
<p>График рассеяния - это еще один вид визуализации. Он обычно использует круги для сопоставления точек данных, каждая из которых имеет по два значения. Эти значения привязываются к осям <code>x</code> и <code>y</code> и используются для позиционирования круга при визуализации. SVG имеет <code>circle</code> тег для создания формы круга. Он очень похож на элементы <code>rect</code> которые вы использовали для гистограммы.</p></section>

Create a Scatterplot with SVG Circles

<section id="description">
<p>Последняя задача создала элементы <code>circle</code> для каждой точки <code>dataset</code> и добавила их в холст SVG. Но D3 нуждается в дополнительной информации о положении и размере каждого <code>circle</code> чтобы отображать их правильно. <code>circle</code> в SVG имеет три основных атрибута. Атрибуты <code>cx</code> и <code>cy</code> - это координаты. Они сообщают D3, где можно расположить <em>центр</em> фигуры на холсте SVG. Радиус (атрибут <code>r</code> ) задает размер <code>circle</code> . Как и <code>rect</code> координата <code>y</code> , атрибут <code>cy</code> для <code>circle</code> измеряется от вершины холста SVG, а не снизу. Все три атрибута могут использовать функцию обратного вызова для динамического определения их значений. Помните, что все методы, закодированные после того, как <code>data(dataset)</code> запускаются один раз для каждого элемента в <code>dataset</code> . Параметр <code>d</code> в функции обратного вызова относится к текущему элементу в <code>dataset</code> , который является массивом для каждой точки. Для доступа к значениям в этом массиве вы используете запись в виде скобок, например <code>d[0]</code> .</p></section>

Add Attributes to the Circle Elements

<section id="description">
<p>You can add text to create labels for the points in a scatter plot.</p>
<p>The goal is to display the comma-separated values for the first (<code>x</code>) and second (<code>y</code>) fields of each item in <code>dataset</code>.</p>
<p>The <code>text</code> nodes need <code>x</code> and <code>y</code> attributes to position it on the SVG canvas. In this challenge, the <code>y</code> value (which determines height) can use the same value that the <code>circle</code> uses for its <code>cy</code> attribute. The <code>x</code> value can be slightly larger than the <code>cx</code> value of the <code>circle</code>, so the label is visible. This will push the label to the right of the plotted point.</p></section>

Add Labels to Scatter Plot Circles

<section id="description">
<p>Графики штрихов и диаграмм рассеяния отображают данные непосредственно на холст SVG. Однако, если высота бара или одной из точек данных больше, чем значения высоты или ширины SVG, она выходит за пределы области SVG. В D3 существуют шкалы, которые помогают отображать данные. <code>Scales</code> - это функции, которые сообщают программе, как сопоставить набор необработанных точек данных на пикселях холста SVG. Например, скажем, у вас есть холст SVG размером 100 × 500 и вы хотите построить валовой внутренний продукт (ВВП) для ряда стран. Набор чисел будет в диапазоне миллиардов или триллионов долларов. Вы предоставляете D3 тип шкалы, чтобы рассказать о том, как разместить большие значения ВВП в этой области размером 100x500. Маловероятно, что вы будете строить необработанные данные как есть. Перед построением графика вы установите масштаб для всего набора данных, чтобы значения <code>x</code> и <code>y</code> соответствовали ширине и высоте холста. D3 имеет несколько типов шкалы. Для линейного масштаба (обычно используется с количественными данными) существует метод D3 <code>scaleLinear()</code> : <code>const scale = d3.scaleLinear()</code> По умолчанию масштаб использует отношение идентичности. Значение входа совпадает с значением выхода. Отдельная проблема охватывает то, как это изменить.</p></section>

Create a Linear Scale with D3

<section id="description">
<p>По умолчанию шкалы используют отношение идентичности - входное значение сопоставляется с выходным значением. Но масштабы могут быть гораздо более гибкими и интересными. Скажем, набор данных имеет значения от 50 до 480. Это входная информация для шкалы и также известна как домен. Вы хотите сопоставить эти точки вдоль оси <code>x</code> на холсте SVG, между 10 единицами и 500 единицами. Это выходная информация, которая также известна как диапазон. Методы <code>domain()</code> и <code>range()</code> задают эти значения для шкалы. Оба метода принимают в качестве аргумента массив из по меньшей мере двух элементов. Вот пример: <blockquote> // Установить домен <br> // Область охватывает набор входных значений <br> scale.domain ([50, 480]); <br> // Установить диапазон <br> // Диапазон охватывает набор выходных значений <br> scale.range ([10, 500]); <br> масштаб (50) // Возвращает 10 <br> масштаб (480) // Возвращает 500 <br> масштаб (325) // Возвращает 323.37 <br> масштаб (750) // Возвращает 807.67 <br> d3.scaleLinear () </blockquote> Обратите внимание, что шкала использует линейную зависимость между областью и значениями диапазона, чтобы выяснить, какой результат должен быть для данного номера. Минимальное значение в области (50) соответствует минимальному значению (10) в диапазоне.</p></section>

Set a Domain and a Range on a Scale

<section id="description">
<p>D3 method <code>domain()</code> и <code>range()</code> устанавливают эту информацию для вашего масштаба на основе данных. Есть несколько способов сделать это проще. Часто, когда вы устанавливаете домен, вы хотите использовать минимальное и максимальное значения в наборе данных. Попытка найти эти значения вручную, особенно в большом наборе данных, может привести к ошибкам. D3 имеет два метода - <code>min()</code> и <code>max()</code> чтобы вернуть эту информацию. Вот пример: <blockquote> const exampleData = [34, 234, 73, 90, 6, 52]; <br> d3.min (exampleData) // Возвращает 6 <br> d3.max (exampleData) // Возвращает 234 </blockquote> Набор данных может иметь вложенные массивы, такие как пары координат [x, y], которые были в примере графика рассеяния. В этом случае вам нужно рассказать D3, как рассчитать максимум и минимум. К счастью, методы <code>min()</code> и <code>max()</code> принимают функцию обратного вызова. В этом примере аргумент функции обратного вызова <code>d</code> для текущего внутреннего массива. Обратный вызов должен возвращать элемент из внутреннего массива (значение x или y), по которому вы хотите вычислить максимальное или минимальное значение. Ниже приведен пример того, как найти значения min и max с массивом массивов: <blockquote> const locationData = [[1, 7], [6, 3], [8, 3]]; <br> // Возвращает наименьшее число из первых элементов <br> const minX = d3.min (locationData, (d) => d [0]); <br> // minX сравнивается с 1, 6 и 8 и устанавливается в 1 </blockquote></p>
</section>

Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset

<section id="description">
<p>Методы D3 <code>min()</code> и <code>max()</code> полезны, чтобы помочь установить масштаб. Учитывая сложный набор данных, одним из приоритетов является установка масштаба, чтобы визуализация соответствовала ширине и высоте контейнера SVG. Вы хотите, чтобы все данные отображались внутри холста SVG, чтобы они были видны на веб-странице. В приведенном ниже примере задана шкала по оси X для данных графика разброса. Метод <code>domain()</code> передает информацию в шкалу о значениях необработанных данных для графика. Метод <code>range()</code> дает ему информацию о фактическом пространстве на веб-странице для визуализации. В этом примере домен переходит от 0 к максимуму в наборе. Он использует метод <code>max()</code> с функцией обратного вызова, основанной на значениях x в массивах. Диапазон использует ширину холста SVG ( <code>w</code> ), но также включает в себя некоторые дополнения. Это помещает пространство между точками графика рассеяния и краем холста SVG. <blockquote> const dataset = [ <br> [34, 78], <br> [109, 280], <br> [310, 120], <br> [79, 411], <br> [420, 220], <br> [233, 145], <br> [333, 96], <br> [222, 333], <br> [78, 320], <br> [21, 123] <br> ]; <br> const w = 500; <br> const h = 500; <br><br> // Заполнение между границей холста SVG и графиком <br> const padding = 30; <br> const xScale = d3.scaleLinear () <br> .domain ([0, d3.max (набор данных, (d) => d [0])]) <br> .range ([padding, w - padding]); </blockquote> Сначала заполнение может сбивать с толку. Отобразите ось x как горизонтальную линию от 0 до 500 (значение ширины для холста SVG). Включение дополнения в метод <code>range()</code> заставляет график начинаться с 30 по этой линии (вместо 0) и заканчиваться на 470 (вместо 500).</p></section>

Use Dynamic Scales

<section id="description">
<p>С установленными весами пришло время снова отобразить график рассеяния. Масштабы похожи на функции обработки, которые превращают исходные данные x и y в значения, которые соответствуют и визуализируются правильно на холсте SVG. Они хранят данные в области построения экрана. Вы устанавливаете значения атрибута координат для формы SVG с помощью функции масштабирования. Сюда входят атрибуты <code>x</code> и <code>y</code> для <code>rect</code> или <code>text</code> элементов, или <code>cx</code> и <code>cy</code> для <code>circles</code> . Вот пример: <blockquote> форма <br> .attr ("x", (d) => xScale (d [0])) </blockquote> Масштабы устанавливают атрибуты координат формы, чтобы поместить точки данных на холст SVG. Вам не нужно применять шкалы, когда вы показываете фактическое значение данных, например, в методе <code>text()</code> для всплывающей подсказки или метки.</p></section>

Use a Pre-Defined Scale to Place Elements

<section id="description">
<p>Другой способ улучшить график рассеяния - добавить ось x и ось y. D3 имеет два метода <code>axisLeft()</code> и <code>axisBottom()</code> для визуализации осей y и x соответственно. (Оси - это множественная форма оси). Ниже приведен пример создания оси x на основе <code>xScale</code> в предыдущих задачах: <code>const xAxis = d3.axisBottom(xScale);</code> Следующий шаг - отобразить ось на холсте SVG. Для этого вы можете использовать общий компонент SVG, элемент <code>g</code> . Группа <code>g</code> обозначает группу. В отличие от <code>rect</code> , <code>circle</code> и <code>text</code> , ось является прямой линией, когда она отображается. Потому что это простая форма, используя <code>g</code> works. Последний шаг - применить атрибут <code>transform</code> для размещения оси на холсте SVG в нужном месте. В противном случае линия будет отображаться вдоль границы холста SVG и не будет видна. SVG поддерживает различные типы <code>transforms</code> , но позиционирование оси требует <code>translate</code> . Когда он применяется к элементу <code>g</code> , он перемещает всю группу за и на указанные суммы. Вот пример: <blockquote> const xAxis = d3.axisBottom (xScale); <br><br> svg.append ( "г") <br> .attr ("transform", "translate (0," + (h - padding) + ")") <br> .call (Xaxis); </blockquote> Вышеупомянутый код помещает ось x в нижнюю часть холста SVG. Затем он передается в качестве аргумента методу <code>call()</code> . Ось y работает одинаково, за исключением того, что аргумент <code>translate</code> имеет вид (x, 0). Поскольку <code>translate</code> является строкой в ​​методе <code>attr()</code> выше, вы можете использовать конкатенацию для включения значений переменных для своих аргументов.</p></section>

Add Axes to a Visualization

<section id="description">
<p>You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called <code>DOMContentLoaded</code>. Here's the code that does this:</p><p><pre><code class="language-js">document.addEventListener('DOMContentLoaded',function() {

});
</code></pre></p>
<p>You can implement event handlers that go inside of the <code>DOMContentLoaded</code> function. You can implement an <code>onclick</code> event handler which triggers when the user clicks on the element with id <code>getMessage</code>, by adding the following code:</p>
<p><pre><code class="language-js">document.getElementById('getMessage').onclick=function(){};
</code></pre></p>
</section>

Handle Click Events with JavaScript using the onclick property

<section id="description">
<p>Когда происходит событие клика, вы можете использовать JavaScript для обновления элемента HTML. Например, когда пользователь нажимает кнопку «Получить сообщение», он меняет текст элемента с <code>message</code> класса, чтобы сказать «Вот сообщение». Это работает, добавив следующий код в событие click: <code>document.getElementsByClassName('message')[0].textContent="Here is the message";</code></p>
</section>

Change Text with click Events

<section id="description">
<p>You can also request data from an external source. This is where APIs come into play.</p>
<p>Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another. You'll learn how to update HTML with the data we get from APIs using a technology called AJAX.</p>
<p>Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.</p>
<p>JSON syntax looks very similar to JavaScript object literal notation. JSON has object properties and their current values, sandwiched between a <code>{</code> and a <code>}</code>.</p>
<p>These properties and their values are often referred to as "key-value pairs".</p>
<p>However, JSON transmitted by APIs are sent as <code>bytes</code>, and your application receives it as a <code>string</code>. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The <code>JSON.parse</code> method parses the string and constructs the JavaScript object described by it.</p>
<p>You can request the JSON from freeCodeCamp's Cat Photo API. Here's the code you can put in your click event to do this:</p><p><pre><code class="language-js">req=new XMLHttpRequest();
req.open("GET",'/json/cats.json',true);
req.send();
req.onload=function(){
  json=JSON.parse(req.responseText);
  document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
};
</code></pre></p>
<p>Here's a review of what each piece is doing. The JavaScript <code>XMLHttpRequest</code> object has a number of properties and methods that are used to transfer data. First, an instance of the <code>XMLHttpRequest</code> object is created and saved in the <code>req</code> variable.
Next, the <code>open</code> method initializes a request - this example is requesting data from an API, therefore is a "GET" request. The second argument for <code>open</code> is the URL of the API you are requesting data from. The third argument is a Boolean value where <code>true</code> makes it an asynchronous request.
The <code>send</code> method sends the request. Finally, the <code>onload</code> event handler parses the returned data and applies the <code>JSON.stringify</code> method to convert the JavaScript object into a string. This string is then inserted as the message text.</p>
</section>

Get JSON with the JavaScript XMLHttpRequest Method

<section id="description">
<p>В предыдущей задаче вы видели, как получить данные JSON от FreeCodeCamp Cat Photo API. Теперь вы более подробно рассмотрите возвращенные данные, чтобы лучше понять формат JSON. Вспомните некоторые обозначения в JavaScript: <blockquote> [] -> Квадратные скобки представляют собой массив <br> {} -> Кудрявые скобки представляют собой объект <br> "" -> Двойные кавычки представляют собой строку. Они также используются для ключевых имен в JSON </blockquote> Понимание структуры данных, возвращаемых API, важно, поскольку оно влияет на то, как вы извлекаете нужные значения. Справа нажмите кнопку «Получить сообщение», чтобы загрузить JavaScript-код FreeCodeCamp Cat Photo API JSON в HTML. Первый и последний символы, которые вы видите в данных JSON, являются квадратными скобками <code>[ ]</code> . Это означает, что возвращаемые данные представляют собой массив. Второй символ в данных JSON - кудрявый <code>{</code> скобка, которая запускает объект. Посмотрев внимательно, вы увидите, что есть три отдельных объекта. Данные JSON представляют собой массив из трех объектов, каждый из которых содержит информацию о фотографии кота. Вы узнали ранее, что объекты содержат пары «ключ-значение», разделенные запятыми. Например, в примере «Кошка» первый объект имеет <code>"id":0</code> где «id» - это ключ, а 0 - его соответствующее значение. Аналогично, есть ключи для «imageLink», «altText» и «codeNames». У каждого объекта фотокамеры есть такие же клавиши, но с разными значениями. Еще одна интересная пара «ключ-значение» в первом объекте - <code>"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]</code> . Здесь «codeNames» - это ключ, а его значение представляет собой массив из трех строк. Возможно иметь массивы объектов, а также ключ с массивом в качестве значения. Помните, как обращаться к данным в массивах и объектах. Массивы используют скобку для доступа к определенному индексу элемента. Для доступа к значению данного свойства объекты используют либо скобку, либо точечную нотацию. Вот пример, который печатает «altText» первой фотографии кота - обратите внимание, что проанализированные данные JSON в редакторе сохраняются в переменной <code>json</code> : <blockquote> console.log (JSON [0] .altText); <br> // Печатает «Белый кот в зеленой шляпе в форме дыни на голове». </blockquote></p>
</section>

Access the JSON Data from an API

<section id="description">
<p>Теперь, когда вы получаете данные из JSON API, вы можете отобразить его в HTML. Вы можете использовать метод <code>forEach</code> для циклического прохождения данных, поскольку объекты фотографии cat хранятся в массиве. По мере перехода к каждому элементу вы можете изменить элементы HTML. Сначала объявите html-переменную с <code>var html = "";</code> , Затем прокрутите JSON, добавив HTML к переменной, которая обертывает имена ключей в <code>strong</code> тегах, а затем значение. Когда цикл закончен, вы его визуализируете. Вот код, который делает это: <blockquote> json.forEach (function (val) { <br> var keys = Object.keys (val); <br> html + = "&#x3C;div class = 'cat'>"; <br> keys.forEach (функция (ключ) { <br> html + = "&#x3C;strong>" + ключ + "&#x3C;/ strong>:" + val [key] + "&#x3C;br>"; <br> }); <br> html + = "&#x3C;/ div> &#x3C;br>"; <br> }); </blockquote></p>
</section>

Convert JSON Data to HTML

<section id="description">
<p>Последние несколько проблем показали, что каждый объект в массиве JSON содержит ключ <code>imageLink</code> со значением, которое является URL-адресом изображения кошки. Когда вы перебираете эти объекты, вы можете использовать это свойство <code>imageLink</code> для отображения этого изображения в элементе <code>img</code> . Вот код, который делает это: <code>html += "&#x3C;img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";</code></p>
</section>

Render Images from Data Sources

<section id="description">
<p>Если вы не хотите отображать каждую фотографию кота, которую вы получаете из FreeCodeCamp Cat Photo API, вы можете предварительно фильтровать JSON перед ее прокруткой. Учитывая , что данные JSON хранится в массиве, вы можете использовать <code>filter</code> метод , чтобы отфильтровать кошку, ключ «Идентификатор» имеет значение 1. Вот код , чтобы сделать это: <blockquote> json = json.filter (функция (val) { <br> return (val.id! == 1); <br> }); </blockquote></p>
</section>

Pre-filter JSON to Get the Data You Need

<section id="description">
<p>Еще одна интересная вещь, которую вы можете сделать, - это доступ к текущему местоположению вашего пользователя. Каждый браузер имеет встроенный навигатор, который может предоставить вам эту информацию. Навигатор получит текущую долготу и широту пользователя. Вы увидите приглашение разрешить или заблокировать этот сайт, зная ваше текущее местоположение. Задача может быть завершена в любом случае, если код верен. Выбрав allow, вы увидите, что текст на выходном телефоне изменится на широту и долготу. Вот код, который делает это: <blockquote> if (navigator.geolocation) { <br> navigator.geolocation.getCurrentPosition (функция (позиция) { <br> document.getElementById ('data'). innerHTML = "широта:" + position.coords.latitude + "&#x3C;br> долгота:" + position.coords.longitude; <br> }); <br> } </blockquote> Во-первых, он проверяет <code>navigator.geolocation</code> объекта <code>navigator.geolocation</code> . Если это так, <code>getCurrentPosition</code> метод <code>getCurrentPosition</code> для этого объекта, который инициирует асинхронный запрос для позиции пользователя. Если запрос выполнен успешно, выполняется функция обратного вызова в методе. Эта функция осуществляет доступ к значениям объекта <code>position</code> для широты и долготы с использованием точечной нотации и обновляет HTML.</p></section>

Get Geolocation Data to Find A User's GPS Coordinates

<section id="description">
<p>In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL.</p>
<p>JavaScript's <code>XMLHttpRequest</code> method is also used to post data to a server. Here's an example:</p><p><pre><code class="language-js">const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 &#x26;&#x26; xhr.status === 201){
    const serverResponse = JSON.parse(xhr.response);
    document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;
  }
};
const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
xhr.send(body);
</code></pre></p>
<p>You've seen several of these methods before. Here the <code>open</code> method initializes the request as a "POST" to the given URL of the external resource, and uses the <code>true</code> Boolean to make it asynchronous.
The <code>setRequestHeader</code> method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the <code>open</code> method, but before the <code>send</code> method. The two parameters are the name of the header and the value to set as the body of that header.
Next, the <code>onreadystatechange</code> event listener handles a change in the state of the request. A <code>readyState</code> of 4 means the operation is complete, and a <code>status</code> of 201 means it was a successful request. The document's HTML can be updated.
Finally, the <code>send</code> method sends the request with the <code>body</code> value, which the <code>userName</code> key was given by the user in the <code>input</code> field.</p>
</section>

Post Data with the JavaScript XMLHttpRequest Method

<section id="description">
<p><strong>Цель:</strong> создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально подобное этому: <a href="https://codepen.io/freeCodeCamp/full/GrZVaM" target="_blank">https://codepen.io/freeCodeCamp/full/GrZVaM</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и пройдите все тесты для выполнения задания. Создайте для приложения свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк для создания интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге это исправим, но эти рамки в настоящее время не поддерживаются для проектов D3. <strong>User Story # 1:</strong> Ваша диаграмма должна иметь заголовок с соответствующим <code>id="title"</code> . <strong>История пользователя # 2:</strong> Ваша диаграмма должна иметь <code>g</code> элемент оси х с соответствующим <code>id="x-axis"</code> . <strong>User Story # 3:</strong> Ваша диаграмма должна иметь ось y элемента <code>g</code> с соответствующим <code>id="y-axis"</code> . <strong>User Story # 4:</strong> Обе оси должны содержать несколько меток ярлыков, каждый из которых имеет соответствующий <code>class="tick"</code> . <strong>User Story # 5:</strong> Ваша диаграмма должна иметь <code>rect</code> элемент для каждой точки данных с соответствующим <code>class="bar"</code> отображающим данные. <strong>User Story # 6: В</strong> каждом баре должны быть <code>data-date</code> и <code>data-gdp</code> содержащие значения даты и ВВП. <strong>User Story # 7:</strong> свойства <code>data-date</code> бара должны соответствовать порядку предоставленных данных. <strong>User Story # 8:</strong> Свойства <code>data-gdp</code> элементов бара должны соответствовать порядку предоставленных данных. <strong>User Story # 9:</strong> Высота каждого элемента бара должна точно представлять соответствующий ВВП. <strong>User Story # 10:</strong> Атрибут <code>data-date</code> и его соответствующий элемент бара должны совпадать с соответствующим значением по оси x. <strong>User Story # 11:</strong> атрибут <code>data-gdp</code> и его соответствующий элемент бара должны совпадать с соответствующим значением по оси y. <strong>User Story # 12:</strong> Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей <code>id="tooltip"</code> которая отображает больше информации об этой области. <strong>User Story # 13:</strong> Моя подсказка должна иметь свойство <code>data-date</code> , соответствующее <code>data-date</code> данных активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json</code> Вы можете создать свой проект, <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">на CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, которая вам нравится: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> . После того, как вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми результатами тестов. Не забудьте использовать метод <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</p></section>

Visualize Data with a Bar Chart

<section id="description">
<p><strong>Цель:</strong> создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/bgpXyK" target="_blank">https://codepen.io/freeCodeCamp/full/bgpXyK</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. <strong>User Story # 1:</strong> Я вижу элемент заголовка, который имеет соответствующий <code>id="title"</code> . <strong>User Story # 2:</strong> Я вижу ось x, которая имеет соответствующий <code>id="x-axis"</code> . <strong>User Story # 3:</strong> Я вижу ось y, которая имеет соответствующий <code>id="y-axis"</code> . <strong>User Story # 4:</strong> Я вижу точки, каждая из которых имеет класс <code>dot</code> , которые представляют собой данные, которые отображаются. <strong>User Story # 5:</strong> Каждая точка должна иметь свойства <code>data-xvalue</code> и <code>data-yvalue</code> содержащие их соответствующие значения x и y. <strong>User Story # 6:</strong> Значение <code>data-xvalue</code> <code>data-yvalue</code> и значение <code>data-xvalue</code> <code>data-yvalue</code> каждой точки должны находиться в пределах диапазона фактических данных и в правильном формате данных. Для <code>data-xvalue</code> целые числа (полные годы) или объекты Date приемлемы для оценки теста. Для <code>data-yvalue</code> (минут) используйте объекты Date. <strong>User Story # 7:</strong> Значение <code>data-xvalue</code> и соответствующая точка должны совпадать с соответствующей точкой / значением по оси x. <strong>User Story # 8:</strong> Значение <code>data-yvalue</code> и соответствующая точка должны совпадать с соответствующей точкой / значением по оси y. <strong>User Story # 9:</strong> Я вижу несколько меток ярлыков по оси Y с временным форматом <code>%M:%S</code> <strong>User Story # 10:</strong> Я вижу несколько меток ярлыков по оси x, которые показывают год. <strong>User Story # 11:</strong> Я вижу, что диапазон меток оси X находится в пределах диапазона фактических данных по оси x. <strong>User Story # 12:</strong> Я вижу, что диапазон меток оси Y находится в пределах диапазона фактических данных оси Y. <strong>User Story # 13:</strong> Я вижу легенду, содержащую описательный текст с <code>id="legend"</code> . <strong>User Story # 14:</strong> Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей <code>id="tooltip"</code> которая отображает больше информации о области. <strong>User Story # 15:</strong> Моя подсказка должна иметь свойство <code>data-year</code> которое соответствует <code>data-xvalue</code> активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json</code> Вы можете создать свой проект, <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нарисуя это перо CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</p></section>

Visualize Data with a Scatterplot Graph

<section id="description">
<p><strong>Цель:</strong> создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/JEXgeY" target="_blank">https://codepen.io/freeCodeCamp/full/JEXgeY</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. <strong>User Story # 1:</strong> Моя карта тепла должна иметь заголовок с соответствующим <code>id="title"</code> . <strong>User Story # 2:</strong> Моя карта тепла должна иметь описание с соответствующим <code>id="description"</code> . <strong>User Story # 3:</strong> Моя карта тепла должна иметь ось x с соответствующим <code>id="x-axis"</code> . <strong>User Story # 4:</strong> Моя карта тепла должна иметь ось y с соответствующим <code>id="y-axis"</code> . <strong>User Story # 5:</strong> Моя карта тепла должна иметь <code>rect</code> элементы с <code>class="cell"</code> которые представляют данные. <strong>User Story # 6:</strong> Для ячеек должно быть не менее 4 различных цветов заливки. <strong>User Story # 7:</strong> Каждая ячейка будет иметь свойства <code>data-month</code> , <code>data-year</code> , <code>data-temp</code> содержащие их соответствующие значения месяца, года и температуры. <strong>User Story # 8:</strong> <code>data-month</code> , <code>data-year</code> каждой ячейки должен находиться в пределах диапазона данных. <strong>User Story # 9:</strong> Моя карта тепла должна иметь ячейки, которые выравниваются с соответствующим месяцем по оси y. <strong>User Story # 10:</strong> Моя карта тепла должна иметь ячейки, которые совпадают с соответствующим годом по оси x. <strong>User Story # 11:</strong> Моя карта тепла должна иметь несколько меток ярлыков по оси Y с полным именем месяца. <strong>User Story # 12:</strong> Моя карта тепла должна иметь несколько меток ярлыков по оси x с годами между 1754 и 2015 годами. <strong>Пользовательская история №13:</strong> Моя карта тепла должна иметь легенду с соответствующим <code>id="legend"</code> . <strong>User Story # 14:</strong> Моя легенда должна содержать <code>rect</code> элементы. <strong>User Story # 15:</strong> <code>rect</code> элементы в легенде должны использовать как минимум 4 разных цвета заливки. <strong>User Story # 16:</strong> Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей <code>id="tooltip"</code> которая отображает больше информации об этой области. <strong>User Story # 16:</strong> Моя подсказка должна обладать свойством <code>data-year</code> которое соответствует году <code>data-year</code> активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json</code> Вы можете создать свой проект, <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нарисуя это перо CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</p></section>