Дървовидните визуализации се използват широко в йерархичния анализ на данни. Ако трябва да създадете такъв, но никога преди не сте го правили, може да си помислите, че процесът е малко сложен. Е, не е задължително. Реших да направя урок стъпка по стъпка, обясняващ как да създавам страхотни интерактивни диаграми с дървовидна карта с лекота с помощта на JavaScript. И илюстрациите ще ви харесат!
Сами ли сме във Вселената? Въпрос, който всеки от нас си е задавал в даден момент. Докато мислим за шансовете Земята да бъде единствената обитаема планета във Вселената или не, едно от нещата, които може да вземем предвид, е колко голяма е Вселената. Нека да разгледаме това с помощта на дървовидни карти! В този урок ще визуализираме мащаба на 10-те най-големи галактики в познатата вселена, използвайки техниката за дървовидно картографиране.
И така, бихте ли искали да знаете как бързо да създадете JS-базирана дървовидна диаграма? Следвайте ме в този поетапен урок и научете по лесен и забавен начин!
Какво е дървовидна карта?
Преди да преминем към самия урок, нека да разгледаме концепцията за дървовидни карти. „Дървовидната диаграма“ е популярна техника за визуализиране на йерархично организирани, дървовидно структурирани данни. Проектиран да показва с един поглед структурата на йерархията заедно със стойността на отделните точки от данни, той използва вложени правоъгълници, чийто размер е пропорционален на съответните количества.
Всеки клон на дървото е правоъгълник, а за подклоните има по-малки правоъгълници, вложени вътре в тях. Показвайки данни по цвят и близост, дървовидните карти могат лесно да представят много данни, като същевременно използват ефективно пространството и са чудесни за сравняване на пропорции в йерархии.
Типът дървовидна карта е изобретен от професор Бен Шнайдерман, който има значителен принос в областта на информационния дизайн и взаимодействието човек-компютър. Дървовидните карти се използват в много области за визуализация на данни и могат да бъдат намерени приложени в анализа на данни от фондовия пазар, системи за преброяване и изборна статистика, както и в журналистика на данни, инструменти за изследване на твърди дискове и др.
Надникнете в нашата JS Treemap диаграма
Така че сега ще изградим дървовидна карта с помощта на JavaScript, за да сравним размерите на първите 10 галактики в известната вселена. Вижте какво точно ще създадем. Ето как ще изглежда нашата диаграма на JS дървовидна карта до края на урока.
Да започнем нашето междузвездно пътешествие!
Създайте базова JS Treemap диаграма
Създаването на базирана на JavaScript диаграма на дървовидна карта обикновено отнема четири основни стъпки, които са както следва:
- Създайте HTML страница
- Референтни JavaScript файлове
- Задайте данни
- Напишете малко JS дървовиден код
И не се притеснявайте, ако сте новак в HTML, CSS и JavaScript. Ще преминем през всяка стъпка в детайли и до края на този урок ще имате готова своя собствена JS дървовидна карта.
И така, обратното броене започна, нека подготвим нашата диаграма за стартиране.
1. Създайте HTML страница
Първото нещо, което правим тук, е да създадем основна HTML страница. Там добавяме HTML блоков елемент (<div>) - там ще бъде поставена нашата дървовидна диаграма - и му присвояваме ID атрибут (например нека бъде "контейнер"), за да го препращаме по-късно в кода.
Трябва също така да зададем някакъв стил за <div>. Нека дефинираме свойствата width и height като 100%, а margin и padding като 0. Можете да промените това по ваш вкус.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Treemap Chart</title>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
2. Референтни JavaScript файлове
След това трябва да посочим всички необходими скриптове, които ще бъдат използвани за създаване на дървовидна диаграма.
Има „множество“ JavaScript библиотеки за диаграми, от които да избирате. Основните стъпки за създаване на интерактивни визуализации на данни остават повече или по-малко същите при всяка от тях. Тук, за илюстрация, ще използвам AnyChart — той поддържа дървовидни карти и има безплатна версия, като изходният код е отворен в GitHub.
И така, за да изградим диаграма на дървовидна карта, се нуждаем от „модулите“ „core“ и „treemap“. Нека се позоваваме и на двете в главата на HTML страницата, създадена в първата стъпка. Ще ги получим от CDN (алтернативно скриптовете могат да бъдат изтеглени).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Treemap Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-treemap.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
3. Задайте данни
Ето ги и данните. Ще визуализираме мащаба на първите 10 най-големи галактики в известната вселена. Галактиките са толкова невероятно големи, че се измерват с това колко светлинни години са в диаметър. Светлинна година е разстоянието, което лъч светлина изминава за една земна година, което се равнява на приблизително 6 трилиона мили.
Вече взех данните за мащаба на галактиката от Largest.org.
За нашата диаграма данните за дървовидната структура ще изглеждат по следния начин. Елементът на коренно ниво е „Галактики“, разделени (по тип галактика) на „Елиптични“ и „Спирални“ като свои деца, които освен това имат масиви от отделни галактически обекти като свои собствени деца.
Всеки обект галактика е снабден със свойства ключ-стойност на име и мащаб в светлинни години. Например {name: "IC 1101", value: 4000000} означава галактиката IC 1101 с мащаб от 4 000 000 светлинни години. Честно казано, много е трудно да се разбере колко масивна е тя.
var dataSet = [
{name: "Galaxies", children: [
{name: "Elliptical", children: [
{name: "IC 1101", value: 4000000},
{name: "Hercules A", value: 1500000},
{name: "A2261-BCG", value: 1000000},
{name: "ESO 306-17", value: 1000000},
{name: "ESO 444-46", value: 402200},
]},
{name: "Spiral", children: [
{name: "Rubin's Galaxy", value: 832000},
{name: "Comet Galaxy", value: 600000},
{name: "Condor Galaxy", value: 522000},
{name: "Tadpole Galaxy", value: 280000},
{name: "Andromeda Galaxy", value: 220000}
]}
]}
];
4. Напишете код за JS Treemapping
Сега само няколко реда код на JavaScript, за да подхраним нашата диаграма с дървовидна карта.
Първо, включваме функцията anychart.onDocumentReady(), която ще обгради целия JavaScript код на дървовидната карта, като гарантира, че ще се изпълни, когато уеб страницата е напълно заредена и готова.
<script>
anychart.onDocumentReady(function () {
// The JS treemapping code will be written here.
});
</script>
Второ, добавяме данните, които искаме да визуализираме в дървовидна диаграма, от стъпка 3.
<script>
anychart.onDocumentReady(function () {
var dataSet = [
{name: "Galaxies", children: [
{name: "Elliptical", children: [
{name: "IC 1101", value: 4000000},
{name: "Hercules A", value: 1500000},
{name: "A2261-BCG", value: 1000000},
{name: "ESO 306-17", value: 1000000},
{name: "ESO 444-46", value: 402200},
]},
{name: "Spiral", children: [
{name: "Rubin's Galaxy", value: 832000},
{name: "Comet Galaxy", value: 600000},
{name: "Condor Galaxy", value: 522000},
{name: "Tadpole Galaxy", value: 280000},
{name: "Andromeda Galaxy", value: 220000}
]}
]}
];
});
</script>
Трето, добавяме следния ред, за да създадем дървовидна карта от данните за дървото.
var chart = anychart.treeMap(dataSet, "as-tree");
Накрая добавяме заглавие, поставяме диаграмата в предварително дефинирания контейнер <div> и я показваме с помощта на командата draw.
chart.title("The 10 Largest Galaxies in the Known Universe");
chart.container("container");
chart.draw();
Сега нашата JS дървовидна карта е основно готова и ако спрем на това, ще изглежда така:
Има само две плочки, които се виждат незабавно, когато се зареди диаграмата на дървовидната карта, „Елиптична“ и „Спирала.“ Можем да щракнем върху тях и те ще се разширят, за да покажат съответните си галактики – това е, което се нарича „разбивка надолу“ действие .
Защо се случва това, само две плочки? Тъй като по подразбиране максималната стойност на дълбочината е зададена като 1. Това означава, че можем да виждаме само едно ниво с неговия родител в даден момент. Долните нива са скрити. На първо ниво имаме „галактики“, разделени на „елиптични“ и „спирални“, така че виждаме само това по подразбиране.
Сега, какво да направим, за да покажем всички галактически плочки наведнъж? Много е просто. Просто трябва да променим стойността на максималната дълбочина с помощта на функцията maxDepth().
chart.maxDepth(2);
Обратното броене приключи и нашата дървовидна карта вече е!
В тази диаграма можем да видим как галактиките са групирани въз основа на йерархия и можем също да щракнем върху заглавките „Елиптични“ или „Спирални“ в горната част, за да увеличим галактиките на децата им.
Погледнете интерактивната версия на тази основна диаграма на JavaScript дървовидна карта на JSFiddle [или AnyChart Playground]. Чувствайте се свободни да си играете с него. Можете също да разгледате пълния код по-долу.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Treemap Chart</title>
<script data-fr-src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script data-fr-src="https://cdn.anychart.com/releases/8.11.0/js/anychart-treemap.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// create the data
var dataSet = [
{name: "Galaxies", children: [
{name: "Elliptical", children: [
{name: "IC 1101", value: 4000000},
{name: "Hercules A", value: 1500000},
{name: "A2261-BCG", value: 1000000},
{name: "ESO 306-17", value: 1000000},
{name: "ESO 444-46", value: 402200},
]},
{name: "Spiral", children: [
{name: "Rubin's Galaxy", value: 832000},
{name: "Comet Galaxy", value: 600000},
{name: "Condor Galaxy", value: 522000},
{name: "Tadpole Galaxy", value: 280000},
{name: "Andromeda Galaxy", value: 220000}
]}
]}
];
// create the treemap chart and set the data
var chart = anychart.treeMap(dataSet, "as-tree");
// set the chart title
chart.title("The 10 Largest Galaxies in the Known Universe");
// set the container id for the chart
chart.container("container");
// initiate drawing the chart
chart.draw();
});
</script>
</body>
</html>
Беше доста лесно да създадете красива диаграма на JavaScript дървовидна карта, нали? Сега можете да видите с един поглед как изглежда мащабът на 10-те най-големи галактики и да ги сравните.
Получената диаграма вече ми изглежда много добра. Но нека ви покажа как можете да персонализирате JavaScript дървовидни карти, когато пожелаете повече.
Персонализирайте диаграмата на JS Treemap
Сега нека добавим някои естетически и функционални промени, за да направим нашата интерактивна дървовидна карта още по-добра и по-проницателна.
А. Промяна на цветовете
Лесен начин да промените облика и усещането на всяка диаграма е да промените цвета, за да съответства на данните, които представяме. Тук показваме галактики във Вселената. Когато мисля за вселената, си представям тъмносините и лилави облаци от звезди в тъмното пространство.
И така, нека променим цвета на плочките. И нека ги боядисаме в лилаво. Освен това нека ги направим тъмносини, когато са избрани.
chart.normal().fill('#B46FC2');
chart.hovered().fill('#44008B', 0.8);
chart.selected().fill('#0A0068', 0.8);
chart.selected().hatchFill("forward-diagonal", '#282147', 2, 20);
Тук добавихме методите fill() и hatchFill() за промяна на цветовете на нашата диаграма с дървовидна карта.
B. Приложете линейна цветова скала
В дървовидните карти не само размерът, но и цветът на плочките могат да бъдат полезни за подчертаване на пропорциите. Нека видим страхотен начин за автоматично оцветяване на плочките въз основа на съответните измерения на данните с помощта на линейна цветова скала.
Създаваме линейна цветова скала, предоставяме й две стойности, едната за най-ниската стойност на диапазона, а другата за най-високата, и накрая активираме цветовия диапазон.
var customColorScale = anychart.scales.linearColor();
customColorScale.colors(['#37B8F7', '#ffcc00']);
chart.colorScale(customColorScale);
chart.colorRange().enabled(true);
chart.colorRange().length('90%');
За да се осъществят тези реализации, трябва да се отървем от кода, написан в предишния раздел.
Тук имаме светло синьо за най-ниското и жълто за най-високото. Играйте заедно с цветовете.
C. Форматиране на етикети и подсказки
Можем да форматираме нашите етикети с помощта на HTML. За целта трябва да активираме HTML за етикети. Тогава няма ограничение за това как можете да ги стилизирате с помощта на HTML.
За да го опростим, ще форматираме етикетите като <span> HTML елемента и ще ги стилизираме, за да увеличим размера на шрифта и да променим цвета.
chart.labels().useHtml(true);
chart.labels().format(
"<span style='font-size: 24px; color: #00076f'>{%name}</span><br>{%value}"
);
Както можете да видите в кодовия фрагмент по-горе, ние също използвахме токените {%name} и {%value}, за да променим текста на етикетите на дървовидната карта и подсказките. По този начин името и стойността на мащаба ще бъдат изведени за всяка галактика, докато се създава визуализацията.
В допълнение, нека персонализираме текста на подсказката с помощта на метода format(). Информативна подсказка може значително да помогне за по-доброто разбиране на данните.
chart.tooltip().format(
"Scale: {%value} light-years"
);
Нашата базирана на JS диаграма с дървовидна карта изглежда много подобрена с форматирането на етикета и подсказката.
D. Сортирайте плочките във възходящ ред
По подразбиране плочките на дървовидната карта са в низходящ ред. Можем да видим, че галактиките са сортирани от най-високата към най-ниската, а галактиката IC 1101 с най-голям мащаб е първата отляво.
Но това не винаги трябва да е така. Понякога може да се наложи да покажем данни във възходящ ред. Пригответе се да бъдете изумени да видите колко лесно е това! Правим това с един ред код.
chart.sort("asc");
Вижте целия код на тази финална интерактивна JavaScript дървовидна карта по-долу [а също и на AnyChart Playground]. Чувствайте се свободни да опитате някои експерименти с него.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Treemap Chart</title>
<script data-fr-src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script data-fr-src="https://cdn.anychart.com/releases/8.11.0/js/anychart-treemap.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// create the data
var dataSet = [
{name: "Galaxies", children: [
{name: "Elliptical", children: [
{name: "IC 1101", value: 4000000},
{name: "Hercules A", value: 1500000},
{name: "A2261-BCG", value: 1000000},
{name: "ESO 306-17", value: 1000000},
{name: "ESO 444-46", value: 402200},
]},
{name: "Spiral", children: [
{name: "Rubin's Galaxy", value: 832000},
{name: "Comet Galaxy", value: 600000},
{name: "Condor Galaxy", value: 522000},
{name: "Tadpole Galaxy", value: 280000},
{name: "Andromeda Galaxy", value: 220000}
]}
]}
];
// create the treemap chart and set the data
var chart = anychart.treeMap(dataSet, "as-tree");
// set the chart title
chart.title("The 10 Largest Galaxies in the Known Universe");
// set a custom color scale
var customColorScale = anychart.scales.linearColor();
customColorScale.colors(['#37B8F7', '#ffcc00']);
chart.colorScale(customColorScale);
chart.colorRange().enabled(true);
chart.colorRange().length('90%');
// format the labels
chart.labels().useHtml(true);
chart.labels().format(
"<span style='font-size: 24px; color: #00076f'>{%name}</span><br>{%value}"
);
// format the tooltips
chart.tooltip().format(
"Scale: {%value} light years"
);
// sort in ascending order
chart.sort("asc");
// set the container id for the chart
chart.container("container");
// initiate drawing the chart
chart.draw();
});
</script>
</body>
</html>
Заключение
Може да не сте получили отговора на въпроса „Сами ли сме във Вселената?“. Но вие се научихте да създавате страхотни интерактивни JavaScript дървовидни диаграми без усилие!
Сега е ваш ред да създадете своя собствена визуализация на диаграма на дървовидна карта, базирана на JS. Вижте документацията на дървовидната карта, за да разберете как може да се направи нещо друго в допълнение към това, което обсъждахме в този урок, или приложете същата логика с различна библиотека с диаграми и със сигурност не се колебайте да се свържете с мен, ако имате нужда от допълнителна помощ (ще направя всичко възможно).
Вселената продължава да се разширява и нека да бъде така и с нашето обучение, знания и творчество.
Публикувано с разрешението на Awan Shrestha. Първоначално се появи в DZone със заглавието „Как да изградим дървовидна карта с помощта на JavaScript“ на 1 юни 2022 г.
Може също да искате да видите основния JavaScript Урок за диаграма на дървовидна карта, първоначално публикуван в нашия блог.
Разгледайте други уроци за диаграми на JavaScript.
Първоначално публикувано в https://www.anychart.com на 8 юни 2022 г.
Повече съдържание в PlainEnglish.io. Регистрирайте се за нашия безплатен седмичен бюлетин. Следвайте ни в Twitter и LinkedIn. Вижте нашия Community Discord и се присъединете към нашия Talent Collective.
