Рубрики
Без рубрики

Строительство Covid-19 Case Tracker США государством и округом – часть 1

Введение в эту серию статей мы будем использовать данные New York Times Covid-19 (https://github.com/nytimes/covid-19-data), чтобы создать след трекера, который отобразит данные как время. Отказ

Автор оригинала: Lev Izraelit.

В этой серии статей мы будем использовать New York Times Covid-19 Data Чтобы создать след трекера, который будет отображать данные как временные ряды. Пользователи смогут просмотреть данные для США в целом или сузить его государством и по округе. Полное веб-приложение доступно на Github – COVID-19-US И живая версия размещена на http://covid19-us.levizrealit.com. Мы будем использовать React и Teadercript вместе с другими библиотеками для визуализации пользовательского интерфейса и диаграммы. Если вы не использовали TypeactScript, эти статьи также познакомятся с некоторыми основными основаниями и более продвинутыми концепциями языка.

Посмотрите на данные

Данные в New York Times Covid-19 Dateetet размещен в 3 CSV-файле – US.csv , US-States.csv и US-Counties.csv Отказ Мы можем увидеть каждый из этих файлов в его сырой форме, нажав на Сырой Кнопка в правом верхнем углу.

Данные США

Глядя на Сырые данные нами мы можем видеть следующее:

date,cases,deaths
2020-01-21,1,0
2020-01-22,1,0
2020-01-23,1,0
2020-01-24,2,0
2020-01-25,3,0
2020-01-26,5,0
2020-01-27,5,0
...

Файл состоит из 3 столбцов, где первая строка содержит имена столбцов: Дата , случаи и Смерть Отказ Последующие строки содержат значения для каждой три столбца.

Данные штата

Данные штата США Содержит два дополнительных столбца: Государство и FIPS Отказ А Код FIPS это географический идентификатор, который мы не будем использовать для этого проекта.

date,state,fips,cases,deaths
...
2020-02-06,Washington,53,1,0
2020-02-06,Wisconsin,55,1,0
2020-02-07,Arizona,04,1,0
2020-02-07,California,06,6,0
...

Данные графства

Данные округа США содержит Округ Столбец в дополнение ко всем столбцам, обнаруженным в данных состояния:

date,county,state,fips,cases,deaths
...
2020-02-01,Orange,California,06059,1,0
2020-02-01,Santa Clara,California,06085,1,0
2020-02-01,Cook,Illinois,17031,2,0
2020-02-01,Suffolk,Massachusetts,25025,1,0
2020-02-01,Snohomish,Washington,53061,1,0
...

Разбор данных

Мы будем использовать Папапрайс разбирать данные CSV непосредственно в браузере. Для нашей первой попытки мы сделаем данные штата США в браузере, используя innerhtml Итак, мы видим, можно увидеть, как работает разборки. Вы можете отправиться в CodeSandbox чтобы увидеть результат.

Форма данных

Первое, что вы заметите в примере, это типографы Интерфейс :

interface StateCaseData {
  date: string;
  state: string;
  cases: number;
  deaths: number;
}

Интерфейс определяет форму некоторых данных независимо от источника. В этом случае мы получаем данные из файла CSV, который загружен, а затем проанализирован. Посмотрев на RAW CSV, содержащий данные США, можно предположить, что данные будут проанализированы в массив объектов, которые соответствуют Statecasedata интерфейс.

Результат анализа

Как только мы импортируем папапарс:

import ParseCSV from "papaparse";

Мы можем позвонить в Разбор Способ, обеспечивающий URL для Данные штата США CSV и объект, содержащий дополнительные аргументы:

ParseCSV.parse(US_CSV_URL, {
  download: true,
  header: true,
  dynamicTyping: true,
  complete: parseResult => {
    console.log("errors: ", parseResult.errors);
    const data = parseResult.data.filter(isStateCaseData);
    renderStateData(data);
  }
});

Это аргументы, содержащиеся в объекте:

  • Скачать : Указывает, что файл должен быть загружен
  • Заголовок : Указывает, что первый ряд в файле содержит имена столбцов
  • Dynamictyping : Указывает, что мы бы понравились папафарсе, чтобы преобразовать номера и логические в их соответствующие типы, а не преобразовывать их в строки.
  • полный : обратный вызов, который описывает то, что мы хотели бы сделать, как только разборка сделана. PAPARSE будет вызывать этот обратный вызов с Результаты объекта который содержит данные Свойство – массив объектов, ключ от имени поля. Это также содержит Ошибки Свойство, массив строки. На момент написания этот массив пуст, то есть нет ошибок, разбирающихся в CSV.

Несколько слов о разборе данные Недвижимость в Parseresult Отказ Ранее я сказал, что мы можем предположить, что каждый объект в данных, проанализированных из CSV, будет соответствовать Statecasedata интерфейс. Но мы не хотим предполагать, что данные всегда будут правильными. На самом деле тип parseresult.data определяется как любой [] – Массив, в котором элементы могут быть любого типа, что. Что если некоторые элементы в этом массиве отсутствуют A случаи или Государство имущество? То, что мы хотим, это только держать эти объекты, которые на самом деле противостоять Statecasedata Интерфейс и откажитесь от остальных. Мы можем сделать это, определив функцию под названием Isstatecasedata что, когда дано элемент как аргумент, возвращает правда Если он соответствует Statecasedata Интерфейс и ложь иначе:

function isStateCaseData(dataElem: any): data is StateCaseData {
  return (
    !!dataElem &&
    isString(dataElem.date) &&
    isString(dataElem.state) &&
    isNumber(dataElem.cases) &&
    isNumber(dataElem.deaths)
  );
}

const isString = (value: any): value is String => typeof value === "string";

const isNumber = (value: any): value is Number => typeof value === "number";

Тип возврата Isstatecasedata это Тип предиката Отказ Эта функция на самом деле является Тип гвардии – Функция, которая возвращает логическое значение, указывающее, передает ли аргумент к нему указанного типа. Определить, если тип DataElem это Statecasedata Или нет, нам нужно проверить типы каждого из его свойств: Дата и Государство должны быть строки; случаи и Смерть должны быть номерами. Эти проверки типа выполняются через своих охранников собственного типа: isString и Isnumber Отказ Но сначала мы должны убедиться, что аргумент не null или undefined – Если это так, пытаясь получить доступ к любому свойству, приведет к ошибке выполнения. Мы проверяем это с помощью двойные челки , что принесет аргумент на логическое значение. Если аргумент является null или undefined это будет принуждено к ложь и чек будет короткий замкнутый Отказ

Возвращаясь к тому, где мы фильтруем Parseresult данные:

const data = parseResult.data.filter(isStateCaseData);

Если мы навязываемся данные Мы увидим, что Typearctry заполнил тип как Statecasedata [] – Мы проверили, что каждый элемент в списке есть Statecasedata тип. Наконец, мы можем сделать данные, передавая его на Renderstateatata функция. Эта функция просто передается на массив данных и отображает значения Дата , Государство и случаи каждого элемента.

Это завершает первую часть серии. В следующей части мы будем группировать данные таким образом, что позволяет нам сделать его на диаграммы и элементы.

Читайте ещё по теме: