Опыт погружения задействован в анализе данных с ослепительным набором методов визуализации. Эволюция анализа данных на основе визуализации влияет на бизнес и отличает его от конкурентов, поскольку он может помочь обеспечить желаемый пользовательский опыт. Пользователи предпочитают рассказывать истории и требуют визуализации данных, а не отчетов и информационных панелей. ИТ-команды добавляют функции визуализации для включения и стандартизации визуализации данных, поскольку это мощный режим для отображения метрик.
Вам также может понравиться: Какие инструменты анализа данных я должен изучить, чтобы начать карьеру в качестве аналитика данных?
Deck.gl — это платформа на основе WebGL от Uber для визуального анализа исследовательских данных больших наборов данных. Проще говоря, Deck.gl — это библиотека, которая используется для создания интерактивных визуализаций в Интернете для больших наборов данных, а библиотека работает на основе WebGL.
В этом блоге будет описан метод создания интерактивной визуализации геопространственных данных с помощью Angular 8, MapboxGL и DeckGL. Здесь вы можете найти способ интеграции Deck.gl, библиотеки Uber Visualization в Angular Apps. После нескольких проб и ошибок из нескольких направляющих Vanilla JS / Non-Angular, эта практическая процедура справедлива с большинством угловых версий (2+), но наиболее точна с Angular 8.
Чтобы обеспечить работоспособную среду для Angular CLI, необходима предварительная установка узла и npm .
Создание углового приложения
- Если у вас установлен Angular CLI, то все готово, иначе установите Angular CLI отсюда.
- Создайте приложение Angular , используя новую визуализацию CLI .
- Если вы используете CLI V8, то перед созданием приложения вам будет предложено задать пару вопросов о маршрутизации и конфигурации препроцессоров CSS, выберите подходящий вариант, который вам подходит, и приступайте к генерации приложения.
- Теперь перейдите в каталог визуализации вашего проекта .
- Запустите команду ng serve и откройте localhost: 4200 в своем браузере. Вы увидите экран ниже (или другой, в зависимости от вашей CLI / угловой версии).
Создать токен Mapbox
- Перейдите в Mapbox, создайте учетную запись и сгенерируйте токен Mapbox.
- Добавьте токен Mapbox в свой файл src / environment / environment.ts .
CSS
xxxxxxxxxx
1
export const environment = {
2
production: false,
3
mapboxToken: ‘YOUR_MAPBOX_TOKEN’
4
};
Установите и инициализируйте MapboxGL
- Теперь установите пакеты MapboxGL в свой проект, используя npm i –save mapbox-gl
@types/mapbox-gl - Удалите все в файле src / app / app.component.html и добавьте следующий HTML-код.
HTML
xxxxxxxxxx
1
<div id=”container”>
2
<div id=”map”></div>
3
</div>
- Добавьте следующий CSS в ваш src / app / app.component.css.
CSS
xxxxxxxxxx
1
#container {
2
position: fixed;
3
top: 0;
4
left: 0;
5
right: 0;
6
bottom: 0;
7
}
8
#container > * {
9
position: absolute;
10
top: 0;
11
left: 0;
12
width: 100%;
13
height: 100%;
14
}
- Импортируйте MapboxGL, настройте токен Mapbox и инициализируйте Mapbox-gl на контейнере, как показано ниже в вашем файле src / app / app.component.ts .
CSS
xxxxxxxxxx
1
// src/app/app.component.ts
2
import { Component, AfterViewInit } from ‘@angular/core’;
3
import { environment } from ‘src/environments/environment’;
4
import * as mapboxgl from ‘mapbox-gl’;
5
@Component({…}) // default code
6
export class AppComponent implements AfterViewInit{
7
ngAfterViewInit() {
8
(mapboxgl as any).accessToken = environment.mapboxToken; // configure the mapbox token
9
const INITIAL_VIEW_STATE = {
10
latitude: 51.47,
11
longitude: 0.45,
12
zoom: 4,
13
bearing: 0,
14
pitch: 30
15
};
16
const map = new mapboxgl.Map({
17
container: ‘map’, // should be the div id
18
style: ‘mapbox://styles/mapbox/dark-v10’,
19
interactive: false, // deck.gl will be in charge of interaction and event handling
20
center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
21
zoom: INITIAL_VIEW_STATE.zoom,
22
bearing: INITIAL_VIEW_STATE.bearing,
23
pitch: INITIAL_VIEW_STATE.pitch
24
});
25
}
26
}
Перезагрузите окно браузера (если оно не загружено автоматически), и вы увидите карту, загруженную на ваш экран. Он не интерактивен, так как вы использовали флаг интерактивный: false в конфигурации Mapbox выше. Мы объясним это в следующих шагах.
Установите и инициализируйте DeckGL
- Установите необходимые пакеты для использования deck.gl
npm i –save deck.gl @deck.gl/core @deck.gl/layers - Добавьте элемент canvas в src / app / app.component.html, и ваш HTML-код должен выглядеть следующим образом:
HTML
xxxxxxxxxx
1
<div id=”container”>
2
<div id=”map”></div>
3
<canvas id=”deck-canvas”></canvas>
4
</div>
- Импортируйте необходимые пакеты в src / app / app.component.ts
CSS
xxxxxxxxxx
1
import { Deck } from ‘@deck.gl/core’;
2
import { GeoJsonLayer, ArcLayer } from ‘@deck.gl/layers’;
- Добавьте источники данных внутри ngAfterViewInit
JSON
xxxxxxxxxx
1
const AIR_PORTS = ‘https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson’;
Приведенный выше источник данных, если из официальных примеров DeckGL.
- Инициализируйте deck.gl чуть ниже карты const инициализации MapboxGL = new mapboxgl.Map ({…});
CSS
xxxxxxxxxx
1
const deck = new Deck({
2
canvas: ‘deck-canvas’,
3
width: ‘100%’,
4
height: ‘100%’,
5
initialViewState: INITIAL_VIEW_STATE,
6
controller: true,
7
onViewStateChange: ({ viewState }) => {
8
map.jumpTo({
9
center: [viewState.longitude, viewState.latitude],
10
zoom: viewState.zoom,
11
bearing: viewState.bearing,
12
pitch: viewState.pitch
13
});
14
},
15
layers: [
16
new ArcLayer({
17
id: ‘arcs’,
18
data: AIR_PORTS,
19
dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
20
getSourcePosition: f => [-0.4531566, 51.4709959], // London
21
getTargetPosition: f => f.geometry.coordinates,
22
getSourceColor: [0, 128, 200],
23
getTargetColor: [200, 0, 80],
24
getWidth: 1
25
})
26
]
27
});
Вы можете использовать тот же подход, чтобы добавить другой набор слоев DeckGL на карту или интегрировать эту карту в другие компоненты.
Deck.gl имеет удивительный набор готовых визуализаций, которые вы можете использовать для визуального представления больших наборов данных. Несколько скриншотов примеров приведены ниже. Если вы хотите попробовать их, вы можете найти список примеров здесь.
С помощью описанных выше строительных блоков визуализации данных предприятия могут создавать более совершенную визуализацию данных, чтобы рассказывать интересные истории. Интерактивные способы, которыми предприятия предоставляют аналитику в режиме реального времени, повышают осведомленность о данных и обеспечивают понимание таким образом, чтобы взаимодействовать с лицами, принимающими решения, в легко усваиваемой форме.
Дальнейшее чтение
Сравнение инструментов анализа данных: Excel, R, Python и BI Tools