Валежи по държави, част 1. „Проектът „Code Cakes“

Код

https://github.com/codetricity/codecakes-rainfall/tree/master/lessons/01

Започнете нов проект

Създай index.html

Създайте тези подпапки: js, data

Поставете d3.js в папката js. Създайте main.js в папката js

Добавете връзки в index.html към d3.js и main.js

Вземете данните

Копирайте данните от сайта по-долу и ги поставете в Google Sheet.



Най-влажните и най-сухите щати на САЩ
Най-влажните и най-сухите щати на САЩweb2.airmail.net



Организирайте данните в Google Sheet. Добавете заглавки на колони

Наблюдавайте проблем с данните

Колона A има името на държавата с число пред него. Въпреки че е възможно ръчно да редактирате 50 клетки в електронната таблица, ние ще изтеглим данните за проблема и ще използваме JavaScript substring(), за да премахнем знаците пред името на държавата.

Изтеглете като стойности, разделени със запетая

Ще експортираме данните като CSV файл и ще ги обработим с JavaScript.

Запазване в data/rainfall-by-state.csv

Зареждане на файл

  1. прочетете с помощта на d3.csv( Съвет: поставете името на файла в скобите. Свържете „обещание“ с .then(). Поставете успешната анонимна функция за обратно извикване вътре в скобите за .then
  2. използвайте console.log, за да видите съдържанието

Ако има проблем с CORS, стартирайте Fenix ​​web server или малък Python уеб сървър с python -m SimpleHTTPServer

Отговорът е под графиката.

Настройте forEach цикъл

  1. data е масив от обекти. Преминете през масива с data.forEach(...
  2. Използвайте променливата stateData, за да задържите временно всеки обект, докато цикълът обработва всеки елемент от масива. (Всеки елемент е обект).
  3. Можете да получите достъп до стойността на свойствата с stateData.rainfall и stateData.state
  4. Преобразувайте стойността на низа за свойство валеж в число, като използвате техниката +. Пример: stateData.rainfall = +stateData.rainfall
  5. Преместете линията console.log(data под края на цикъла forEach

Отговорът е под графиката.

Изтрийте числата, точките и интервалите от низа на състоянието

  1. Потърсете знаци, които не са от „A“ до „Z“, като започнете от първия знак и преминете през първите пет знака
  2. Ако символът не е A-Z, изтрийте го от началото на низа
  3. Ако знакът е от A до Z, сте намерили началото на името на държавата. Излезте от for цикъла.

За да проверим за знаци A-Z, използваме странен тип съвпадащ синтаксис, наречен „регулярни изрази“ или „regexp“.

Основните точки на този доста объркващ синтаксис:

  • изразът е между /
  • ^ търси съвпадение в началото на низ
  • [A-Z] търси главни азбуки
  • .test(string) се използва за търсене на съвпадение

Преглед на концепциите на JavaScript

за преглед на изявление

  • за (нека i = 0; i ‹ array.length; i++)
  • array.forEach() — break не работи
  • за…в — само за обекти
  • for…of — може да използва прекъсване

Следващ урок

„Разделете голям набор от данни на по-малки набори от данни“

Информация за проекта на Code Cakes

  • "Въведение"
  • YouTube
  • "Публикация"