Урок за JavaScript: Лесни визуализации на данни с React-vis

Визуализирането на данни е важна част от разказването на истории, но можете да се изгубите в плевелите с D3.js за часове, само за да направите няколко прости графики. Ако диаграмите са всичко, от което се нуждаете, има много библиотеки, които обгръщат D3 и ви предоставят удобни начини за изграждане на прости визуализации. Тази седмица ще започнем да разглеждаме React-vis, графична библиотека, създадена от Uber и с отворен код.

React и d3.js имат интересна връзка. React е всичко за декларативно изобразяване на компоненти, а D3.js за императивно манипулиране на DOM елементи. Използването им заедно е възможно с помощта на refs, но е много по-хубаво да капсулирате целия код за манипулация в отделен компонент, така че да не се налага да превключвате контекстите толкова много. За щастие, библиотеката React-vis вече прави това за нас с куп компоненти, които може да се композира, които можем да използваме за изграждане на нашите визуализации.

Най-добрият начин да тествате библиотеките за визуализация на данни или която и да е друга библиотека е като изградите нещо с нея. Нека направим това, като използваме набора от данни за популярни имена на бебета в град Ню Йорк.

Подготовка на данните за React-vis

За да започнете, аз заредих проект на React с create-react-appи добавих няколко зависимости: за react-vis, d3-fetchда помогна за извличането на CSV данните и momentза помощ при форматирането на датата. Също така събрах малко шаблонния код, за да изтегля и анализирам CSV, който включва популярните имена d3-fetch. Във формат JSON наборът от данни, който извличаме, има около 11 000 реда и всеки запис изглежда така:

{

  "Година на раждане": "2016",

  "Женски пол",

  "Етническа принадлежност": "АЗИЙСКИ И ТИХООСТРАНЕН ОСТРОВ",

  "Име на детето": "Оливия",

  "Count": "172",

  "Ранг": "1"

}

Тъй като интервалите в ключовете и числата, представени като низове, биха направили тези данни неудобни за работа, ние ще модифицираме данните по време на зареждане, за да направим малко масажиране. Този код просто използва dsvметода от d3-fetch:

импортиране на {dsv} от 'd3-fetch';

импортиране на момент от „момент“;

dsv (",", dataUrl, (d) => {

  връщане {

    yearOfBirth: + d [„Година на раждане“],

    пол: d [„Пол“],

    етническа принадлежност: d [„Етническа принадлежност“],

    firstName: d [„Име на детето“],

    count: + d ['Count'],

    ранг: + d ['Ранг'],

  };

});

Сега нашите входни данни са много по-приятелски. Изглежда така:

{

  "yearOfBirth": 2016,

  "женски пол",

  "етническа принадлежност": "АЗИЙСКИ И ТИХООСТРАНЕН ОСТРОВ"

  "firstName": "Оливия",

  "брой": 172,

  "ранг": 1

}

Първият ни сюжет с React-vis

Първият компонент, който вероятно ще използвате, е някаква форма на an XYPlot, който съдържа други компоненти и присъства в почти всяка диаграма, която изграждате. Това е предимно само обвивка, която определя размера на визуализацията, но може да включва някои свойства, които се предават и на деца. Само по себе си XYPlotне изобразява нищо, освен празно пространство:

   
    

  ширина = {300}

  височина = {300}

За да покажем действително данни, ще трябва да използваме поредица от някакъв вид. Поредицата е компонентът, който всъщност черпи данните, като вертикална диаграма ( VerticalBarSeries) или линейна диаграма ( LineSeries). На разположение имаме 14 серии от кутията, но ще започнем с просто VerticalBarSeries. Всяка серия наследява от основен набор от атрибути. Най-полезният за нас ще бъде dataатрибутът:

   
    

  ширина = {300}

  височина = {300}

    данни = {данни}

  />

Това обаче ще се провали, защото React-vis очаква елементите в масива от данни да бъдат в следната форма:

{

  x: 2016, // Това ще бъде отнесено към оста x

  y: 4 // Това ще бъде отнесено към оста y

}

Например, за да покажем общия брой бебета, отчетени в данните по години, ще трябва да обработим данните, за да получим един обект за всяка година, където xатрибутът е годината, а yатрибутът е общият брой бебета в набора от данни. Кодът, който написах да направя, е доста кратък:

const totalBabiesByYear = Object.entries (data.reduce ((acc, row) => {

  if (row.yearOfBirth в съответствие) {

    acc [row.yearOfBirth] = acc [row.yearOfBirth] + row.count

  } друго {

    в съответствие с [row.yearOfBirth] = брой ред

  }

  връщане в съответствие;

}, {})). map (([k, v]) => ({x: + k, y: v}));

Когато го включите в VerticalBarSeries, получаваме някои резултати!

Това не е особено полезно само по себе си, но за щастие библиотеката React-vis предоставя някои допълнителни компоненти, които могат да се използват за контекстуализиране на информацията. Нека импортираме XAxisи YAxisтака можем да покажем повече информация в нашата диаграма. Ние ще изобразим тези компоненти вътре в XYPlotнашата VerticalBarSeries. Кодът и резултатите изглеждат така:

   
    

  ширина = {600}

  височина = {600}

    данни = {totalBabiesByYear}

  />

Нашите етикети на оста y са отрязани и етикетите на оста x се форматират като числа, но напредваме. За да получим оста x, обработена като дискретни редови стойности, за разлика от непрекъснат числов диапазон, ще добавим xType="ordinal"като свойство върху XYPlot. Докато сме готови, можем да добавим малко ляво поле към диаграмата, за да можем да видим повече от етикетите на оста y:

   
    

  ширина = {600}

  височина = {600}

  марж = {{

    вляво: 70

  }}

  xType = "пореден"

Ние сме в бизнеса! Нашата диаграма вече изглежда страхотно - и по-голямата част от работата, която трябваше да свършим, е свързана с масажирането на данни, а не с рендирането им.

Следващата седмица ще продължим да изследваме компонентите на библиотеката React-vis и ще дефинираме някои основни взаимодействия. Разгледайте този проект на GitHub, ако искате да си поиграете с набора от данни и React-vis библиотеката. Имате ли визуализации, които сте направили с React-vis? Изпратете ми екранна снимка в Twitter @freethejazz.