Мы уже умеем строить статические графики с помощью matplotlib. Но если мы делаем веб-сервис, гораздо удобнее было бы представлять на сайте интерактивные графики, которые отзывались бы на жесты пользователя, то есть чтобы при наведении мыши появлялся бы какой-то дополнительный текст, линии подсвечивались, части графиков можно было бы перетаскивать. Со статическими картинками в форматах .png или .jpg это невозможно.
Интерактивными элементы на веб-страницы делает специальный язык -- JavaScript, который мы в нашем курсе программирования не изучаем (потому что он не так хорошо умеет обрабатывать языковые массивы, как Python), но если мы хотим сделать веб-страницу красивой и функциональной, без JavaScript совсем нам не обойтись.
Делать интерактивный график на чистом JavaScript (особенно без предварительного изучения языка) довольно сложно. Но у нас в руках есть инструменты, которые оказывают в этом существенную помощь -- это специальные подключаемые библиотеки для работы с графиками, прежде всего, Google Chart и d3.
Здесь можно посмотреть на то, какие типы графиков можно встроить в интернет-страницу, используя Google Chart. На самом деле таких типов гораздо больше.
График встраивается в HTML довольно просто. Нужно всего лишь:
- внутри тега
<head>поместить код подгрузки библиотеки:<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> - внутри тега
<body>в нужном месте поместить код того слоя, в котором будет отображаться график. Размеры слоя можно регулировать:<div id="curve_chart" style="width: 900px; height: 500px"></div> - выдать библиотеке данные, которые мы хотим отобразить на графике. Сделать это можно разными способами. Самое простое -- это зашить данные в коде JavaScript. Данные в нём представляется в очень похожем на питоновский синтаксисе:
[
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]
Знающий питон легко узнаёт в этом коде 5 массивов, вложенных в ещё один массив.
Если поместить эту структуру внутрь JavaScript-функции, даже не очень разбираясь в принципах её действия, можно получить желаемый результат:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
Получить из питона строку, которую можно было бы вставить внутрь JavaScript-кода, можно с помощью функции json.dumps() (вспомните, что и сам формат данных JSON появился благодаря языку JavaScript).
import json
js_function = 'function drawChart() { var data = google.visualization.arrayToDataTable({{data_to_display}});'
data = [['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540]]
data_for_visualization = json.dumps(data)
js_function = js_function.replace('{{data_to_display}}', data_for_visualization)
Другой способ создавать разнообразные интерактивные графики на веб-странице -- это библиотека d3.js. Галерея примеров того, что можно сделать с её помощью, лежит здесь. Как видно, возможности здесь практически безграничны, нужно только выбрать подходящий способ визуализации.
Здесь можно заранее сделать статическую картинку облака слов в svg (удобный для веба формат) и вставить её на ваш сайт. А здесь можно подсмотреть, как рисовать хордовую диаграмму, отражающую связи между группами объектов.
Вообще-то d3 -- это очень мощный инструмент, с помощью которого можно создавать свои достаточно сложные визуализации, для этого просто нужно достаточно подробно изучить устройство библиотеки. Но если вам хватает уже существующих инструментов, можно воспользоваться ими в том же духе, как мы работали с Google Chart: взять готовый образец и подставить в него свои данные.
В d3 и Google Chart есть много способов отобразить географические данные и построить на них карту (интерактивную и отображаемую на интернет-странице). Более сложный (но в чём-то и более простой) и настраиваемый способ -- это использовать формат geojson.
Для питона и этого формата есть специальная библиотека, но она нужна в том случае, если работа с данными автоматизирована. Если же вы работаете с обозримым объёмом данных вручную, их можно сформировать на сайте geojson.io, он представляет собой простой визуальный редактор, в котором слева вы видите карту, а справа -- geojson. Когда вы отмечаете что-то слева, оно тут же автоматически появляется в этом самом формате справа.
Например, мы можем поставить на карте какой-то маркер или нарисовать полигон, а щелчок по тому объекту, который мы добавили на карту, вызывает облачко с табличкой дополнительных признаков, которые можно прикрепить к маркеру. Например, в левой колонке таблички можно вписать слово title, а в той же строке справа название объекта ("метро Автозаводская" или что-то другое). Точно так же можно написать слева слово description, а справа что-то содержательное: "Лучшее место на свете!"
Когда вы сделали таким образом свою карту в http://geojson.io/, нужно сохранить получившийся результат в виде файла с расширением .geojson Это можно сделать с помощью меню "Save" в левой верхней части экрана. Из предложенных вариантов нужно выбрать "GeoJSON".
Если вы загрузите этот файл на github, то сайт по умолчанию будет не отображать содержимое файла, а сразу отрисовывать карту, как вот тут. Правда, это работает только если geojson-файл не больше 10 мегабайт. Кроме того, такую карту можно вставить и на вашу страницу в Интернете, если в html-код вставить строку:
<script src="https://embed.github.com/view/geojson/<username>/<repo>/<ref>/<path_to_file>"></script>
Для примера выше эта строка будет выглядеть так:
<script src="https://embed.github.com/view/geojson/nevmenandr/DigitalHumanitiesMinorFeatures/master/MoskowPetushkiWay.geojson"></script>
- Нарисуйте с помощью Google Charts график, который мы рисовали с matplotlib.
- Нарисуйте карту, взяв данные из WALS