History

leestott b83ba9ded4 🌐 Update translations via Co-op Translator		4 weeks ago
..
README.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

Unescape Escape

Създаване на смислени визуализации


Смислени визуализации - Скетч от @nitya

"Ако измъчвате данните достатъчно дълго, те ще признаят всичко" -- Роналд Коуз

Едно от основните умения на специалиста по данни е способността да създава смислена визуализация на данни, която помага да се отговори на въпросите, които може да имате. Преди да визуализирате данните си, трябва да се уверите, че те са почистени и подготвени, както направихте в предишните уроци. След това можете да започнете да решавате как най-добре да представите данните.

В този урок ще разгледате:

Как да изберете правилния тип диаграма
Как да избегнете подвеждащи визуализации
Как да работите с цветове
Как да стилизирате диаграмите си за по-добра четливост
Как да създавате анимирани или 3D визуализации
Как да изградите креативна визуализация

Тест преди лекцията

Избор на правилния тип диаграма

В предишни уроци експериментирахте със създаването на различни интересни визуализации на данни, използвайки Matplotlib и Seaborn за диаграми. По принцип можете да изберете правилния тип диаграма за въпроса, който задавате, като използвате тази таблица:

Трябва да:	Трябва да използвате:
Показвате тенденции във времето	Линейна диаграма
Сравнявате категории	Лентова, Кръгова диаграма
Сравнявате общи стойности	Кръгова, Слоеста лентова диаграма
Показвате връзки	Разпръсната, Линейна, Фасетна, Двойна линейна диаграма
Показвате разпределения	Разпръсната, Хистограма, Кутия
Показвате пропорции	Кръгова, Донът, Вафлена диаграма

✅ В зависимост от състава на вашите данни, може да се наложи да ги преобразувате от текстови в числови, за да поддържате даден тип диаграма.

Избягване на подвеждане

Дори ако специалистът по данни внимателно избере правилната диаграма за правилните данни, има много начини, по които данните могат да бъдат представени, за да докажат дадена теза, често за сметка на самите данни. Има много примери за подвеждащи диаграми и инфографики!

🎥 Кликнете върху изображението по-горе за конференция относно подвеждащи диаграми

Тази диаграма обръща оста X, за да покаже обратното на истината, базирано на дата:

Тази диаграма е още по-подвеждаща, тъй като окото се насочва към заключението, че с времето случаите на COVID са намалели в различните окръзи. Всъщност, ако погледнете внимателно датите, ще откриете, че те са пренаредени, за да създадат този подвеждащ низходящ тренд.

Този известен пример използва цветове И обърната ос Y, за да заблуди: вместо да заключите, че смъртните случаи от огнестрелни оръжия са се увеличили след приемането на законодателство, благоприятстващо оръжията, окото е заблудено да мисли, че обратното е вярно:

Тази странна диаграма показва как пропорциите могат да бъдат манипулирани, с комичен ефект:

Сравняването на несравними неща е още един съмнителен трик. Има чудесен уебсайт, посветен на 'фалшиви корелации', показващ 'факти', които корелират неща като процента на разводите в Мейн и консумацията на маргарин. Група в Reddit също събира грозни примери за използване на данни.

Важно е да разберете колко лесно окото може да бъде заблудено от подвеждащи диаграми. Дори ако намерението на специалиста по данни е добро, изборът на неподходящ тип диаграма, като кръгова диаграма с твърде много категории, може да бъде подвеждащ.

Цветове

Видяхте в диаграмата за 'насилие с оръжие във Флорида' как цветът може да добави допълнителен слой смисъл към диаграмите, особено тези, които не са проектирани с библиотеки като ggplot2 и RColorBrewer, които идват с различни проверени цветови библиотеки и палитри. Ако създавате диаграма ръчно, направете малко проучване на теорията на цветовете.

✅ Бъдете наясно, когато проектирате диаграми, че достъпността е важен аспект на визуализацията. Някои от вашите потребители може да са цветно слепи - дали вашата диаграма се показва добре за потребители с визуални увреждания?

Бъдете внимателни при избора на цветове за вашата диаграма, тъй като цветът може да предаде значение, което не сте възнамерявали. 'Розовите дами' в диаграмата за 'височина' по-горе предават ясно 'женствено' значение, което добавя към странността на самата диаграма.

Докато значението на цветовете може да бъде различно в различни части на света и има тенденция да се променя според нюанса им, общо казано, значенията на цветовете включват:

Цвят	Значение
червен	сила
син	доверие, лоялност
жълт	щастие, предпазливост
зелен	екология, късмет, завист
лилав	щастие
оранжев	жизненост

Ако ви е възложено да създадете диаграма с персонализирани цветове, уверете се, че вашите диаграми са както достъпни, така и че цветът, който избирате, съответства на значението, което се опитвате да предадете.

Стилизиране на диаграмите за четливост

Диаграмите не са смислени, ако не са четливи! Отделете момент, за да обмислите стилизирането на ширината и височината на вашата диаграма, така че да се мащабира добре с вашите данни. Ако трябва да покажете една променлива (като всички 50 щата), покажете ги вертикално на оста Y, ако е възможно, за да избегнете диаграма с хоризонтално превъртане.

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

Ако вашите данни са текстови и подробни на оста X, можете да наклоните текста за по-добра четливост. plot3D предлага 3D графики, ако вашите данни го поддържат. Сложни визуализации на данни могат да бъдат създадени с него.

Анимация и 3D визуализация

Някои от най-добрите визуализации на данни днес са анимирани. Шърли Ву има невероятни примери, направени с D3, като 'цветя от филми', където всяко цвете е визуализация на филм. Друг пример за Guardian е 'bussed out', интерактивно преживяване, комбиниращо визуализации с Greensock и D3 плюс формат на статия с разказ, за да покаже как Ню Йорк се справя с проблема с бездомните, като ги изпраща извън града.

"Bussed Out: Как Америка премества своите бездомни" от Guardian. Визуализации от Надие Бремер и Шърли Ву

Докато този урок не е достатъчен, за да навлезе в дълбочина и да ви научи на тези мощни библиотеки за визуализация, опитайте да използвате D3 в приложение Vue.js, като използвате библиотека за визуализация на книгата "Опасни връзки" като анимирана социална мрежа.

"Опасни връзки" е епистоларен роман, или роман, представен като поредица от писма. Написан през 1782 г. от Шодерло дьо Лакло, той разказва историята за жестоките, морално банкрутирани социални маневри на двама дуелиращи се протагонисти от френската аристокрация в края на 18-ти век, виконт дьо Валмон и маркиза дьо Мертьой. И двамата срещат своя край, но не без да нанесат значителни социални щети. Романът се развива като поредица от писма, написани до различни хора в техните кръгове, планиращи отмъщение или просто създаващи проблеми. Създайте визуализация на тези писма, за да откриете основните фигури в разказа, визуално.

Ще завършите уеб приложение, което ще показва анимиран изглед на тази социална мрежа. То използва библиотека, създадена за визуализация на мрежа с Vue.js и D3. Когато приложението работи, можете да местите възлите на екрана, за да пренареждате данните.

Проект: Създаване на диаграма за показване на мрежа с D3.js

Тази папка на урока включва папка solution, където можете да намерите завършения проект за ваша справка.

Следвайте инструкциите в README.md файла в корена на папката starter. Уверете се, че имате инсталирани NPM и Node.js на вашата машина, преди да инсталирате зависимостите на проекта.
Отворете папката starter/src. Ще откриете папка assets, където можете да намерите .json файл с всички писма от романа, номерирани, с анотации 'до' и 'от'.
Завършете кода в components/Nodes.vue, за да активирате визуализацията. Потърсете метода, наречен createLinks() и добавете следния вложен цикъл.

Циклирайте през .json обекта, за да извлечете данните 'до' и 'от' за писмата и изградете обекта links, така че библиотеката за визуализация да може да го използва:

//loop through letters
      let f = 0;
      let t = 0;
      for (var i = 0; i < letters.length; i++) {
          for (var j = 0; j < characters.length; j++) {
              
            if (characters[j] == letters[i].from) {
              f = j;
            }
            if (characters[j] == letters[i].to) {
              t = j;
            }
        }
        this.links.push({ sid: f, tid: t });
      }

Стартирайте приложението си от терминала (npm run serve) и се насладете на визуализацията!

🚀 Предизвикателство

Направете обиколка из интернет, за да откриете подвеждащи визуализации. Как авторът заблуждава потребителя и дали това е умишлено? Опитайте да коригирате визуализациите, за да покажете как трябва да изглеждат.

Тест след лекцията

Преглед и самостоятелно обучение

Ето някои статии за четене относно подвеждащи визуализации на данни:

https://gizmodo.com/how-to-lie-with-data-visualization-1563576606

http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/

Разгледайте тези интересни визуализации за исторически активи и артефакти:

https://handbook.pubpub.org/

Прегледайте тази статия за това как анимацията може да подобри вашите визуализации:

https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4

Задача

Създайте своя собствена персонализирана визуализация

Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

README.md Unescape Escape