Как создавать интерактивную инфографику: пособие по визуализации данных для начинающих

Как создавать интерактивную инфографику: пособие по визуализации данных для начинающих
Как создавать интерактивную инфографику: пособие по визуализации данных для начинающих

Пред­став­ля­ем вам руко­вод­ство по визу­а­ли­за­ции дан­ных для начи­на­ю­щих, кото­рое будет полез­но всем, кто хочет научить­ся созда­вать интер­ак­тив­ную инфо­гра­фи­ку и кар­ты.

Инфо­гра­фи­ка и интер­ак­тив­ные кар­ты ста­ли частью мно­гих про­ек­тов, кото­рые реа­ли­зу­ют акти­ви­сты, жур­на­ли­сты и обще­ствен­ные дви­же­ния. Но как быть орга­ни­за­ци­ям, у кото­рых нет штат­но­го дизай­не­ра? Даже в таком слу­чае мож­но созда­вать каче­ствен­ные визу­аль­ные мате­ри­а­лы – The Guardian рас­ска­зал, как это делать.

Данные

Пер­вое, что вам нуж­но сде­лать – это понять, какие имен­но дан­ные вы хоти­те визу­а­ли­зи­ро­вать.

Давай­те пред­ста­вим, что вы про­во­ди­те кам­па­нию, при­зы­ва­ю­щую к улуч­ше­нию сани­тар­ных усло­вий во всем мире. Что­бы пока­зать, насколь­ко это важ­но, нуж­но под­черк­нуть, как мно­го стран до сих пор име­ют огра­ни­чен­ный доступ к чистым туа­ле­там и как незна­чи­тель­но эта ситу­а­ция изме­ни­лось за послед­ние 10 лет. В этом руко­вод­стве мы вос­поль­зу­ем­ся набо­ром дан­ных от World Bank.

Теперь у нас есть дан­ные за 10 лет, но нам нуж­ны толь­ко циф­ры за 2000 и 2012 годы. Поэто­му, после того, как мы загру­зи­ли себе дан­ные, мы уда­ля­ем ненуж­ные ряды и колон­ки (совет: сохра­ни­те ори­ги­наль­ный файл с дан­ны­ми).

Файл с данными до и после удаления ненужной для нашей инфографики информации. Photograph: Rachel Banning-Lover
Файл с дан­ны­ми до и после уда­ле­ния ненуж­ной для нашей инфо­гра­фи­ки инфор­ма­ции. Photograph: Rachel Banning-Lover

Теперь, когда вы очи­сти­ли дан­ные, вы гото­вы к тому, что­бы их визу­а­ли­зи­ро­вать. В нашем слу­чае перед визу­а­ли­за­ци­ей была добав­ле­на еще одна колон­ка – раз­ни­ца в про­цен­тах меж­ду 2000 и 2012 года­ми.

Как создать интерактивный график

Пока­зать дан­ные на гра­фи­ке – это самый быст­рый и про­стой спо­соб визу­а­ли­зи­ро­вать инфор­ма­цию. Такие сай­ты, как DatawrapperInfogr.am и PiktoChart явля­ют­ся лег­ки­ми и удоб­ны­ми в исполь­зо­ва­нии инстру­мен­та­ми, с помо­щью кото­рых вы може­те созда­вать раз­лич­ные гра­фи­ки и диа­грам­мы и встра­и­вать их в любой сайт.

Еще по теме: Инфо­гра­фи­ка, кар­ты, визу­а­ли­за­ция: 24 интер­ак­тив­ных про­ек­та

Datawrapper, воз­мож­но, явля­ет­ся самым инту­и­тив­но понят­ным, а так­же он бес­плат­ный. Сла­бая сто­ро­на это­го инстру­мен­та заклю­ча­ет­ся в том, что он не очень хоро­шо отоб­ра­жа­ет боль­шие мас­си­вы дан­ных, поэто­му мы будем визу­а­ли­зи­ро­вать толь­ко 10 стран, в кото­рых про­изо­шло боль­ше все­го изме­не­ний за послед­ние 10 лет.

Создание графика с помощью Datawrapper
Созда­ние гра­фи­ка с помо­щью Datawrapper

Как создать гра­фик с помо­щью Datawrapper:

  1. Заре­ги­стри­руй­тесь на сай­те Datawrapper и создай­те новый гра­фик.
  2. Ско­пи­руй­те и вставь­те ваши дан­ные в спе­ци­аль­ное поле.
  3. Про­верь­те ваши дан­ные.
  4. Теперь весе­лая часть – выбе­ри­те шаб­лон гра­фи­ка. Для дан­ной визу­а­ли­за­ции был выбран про­стой интер­ак­тив­ный гра­фик, но вы може­те выбрать из боль­шо­го коли­че­ства пред­став­лен­ных на сай­те вари­ан­тов.
  5. Послед­ний шаг – окон­ча­тель­ное редак­ти­ро­ва­ние ваше­го гра­фи­ка. Вы може­те изме­нить цве­та, доба­вить заго­ло­вок, опи­са­ние и т.д.

В резуль­та­те полу­чи­лась такая интер­ак­тив­ная инфо­гра­фи­ка.

Как создать интерактивную карту

Для того, что­бы пока­зать дан­ные, отно­ся­щи­е­ся к раз­ным стра­нам, луч­ше все­го исполь­зо­вать кар­ту. Пред­став­ля­ем вам обзор трех бес­плат­ных инстру­мен­тов для начи­на­ю­щих.

Datawrapper

В этом инстру­мен­те теперь есть опция choropleth map – созда­ние гра­ди­ен­та в зави­си­мо­сти от ваших дан­ных. Кар­ты с помо­щью Datawrapper созда­ют­ся так же, как и гра­фи­ки.

За: один из самых быст­рых и про­стых инстру­мен­тов. Datawrapper под­ска­жет вам, когда вы вве­ли назва­ние стра­ны не пра­виль­но. Еще одним плю­сом это­го инстру­мен­та явля­ет­ся то, что если вы наве­де­те кур­сор на опре­де­лен­ный цвет в леген­де, толь­ко стра­ны с таким цве­том будут под­све­че­ны на кар­те.

Про­тив: нет шаб­ло­нов для отдель­ных стран или горо­дов.

Интерактивная карта, созданная с помощью Datawrapper
Интер­ак­тив­ная кар­та, создан­ная с помо­щью Datawrapper

Google Fusion Tables

За: бес­плат­ный и про­стой в исполь­зо­ва­нии (осо­бен­но для созда­ния точек на кар­те).

Google Fusion Tables
Google Fusion Tables

Про­тив: допол­ни­тель­ные воз­мож­но­сти, напри­мер, изме­не­ние цве­то­вой схе­мы, могут пока­зать­ся для начи­на­ю­щих слож­ны­ми (но если вы зна­е­те, как соеди­нить KML-фай­лы с суще­ству­ю­щи­ми дан­ны­ми, вы смо­же­те создать такую кар­ту). Слож­но доба­вить на кар­ту леген­ду.

Google Fusion Tables
Google Fusion Tables

CartoDB

На пер­вый взгляд CartoDB может пока­зать­ся пуга­ю­щим, но с помо­щью это­го инстру­мен­та вы смо­же­те создать самые раз­но­об­раз­ные кар­ты и настра­и­вать их в зави­си­мо­сти от того, что вы хоти­те видеть на кар­те.

За: поз­во­лят делать мно­го настро­ек и добав­лять допол­ни­тель­ные слои. Рабо­та­ет на мобиль­ных устрой­ствах.

Еще по теме: 90 инстру­мен­тов и ресур­сов для инфо­гра­фи­ки и визу­а­ли­за­ции

Про­тив: если вы пла­ни­ру­е­те создать боль­ше, чем 5 карт, и ожи­да­е­те, что у вас будет боль­ше 10 000 про­смот­ров в месяц, вам нуж­но будет пла­тить за исполь­зо­ва­ние это­го инстру­мен­та.

CartoDB
CartoDB

Как создать традиционную инфографику

Тра­ди­ци­он­ная инфо­гра­фи­ка – это ста­тич­ное, цвет­ное изоб­ра­же­ние, на кото­ром циф­ра­ми и икон­ка­ми отоб­ра­же­на инфор­ма­ция. Инстру­мен­ты, кото­рые уже упо­ми­на­лись ранее – Infogr.am и PiktoChart – помо­гут вам в созда­нии тако­го изоб­ра­же­ния. Они про­стые в исполь­зо­ва­нии – вы може­те про­сто пере­тя­ги­вать нуж­ную инфор­ма­цию и встав­лять ваши дан­ные для созда­ния гра­фи­ков. Коли­че­ство шаб­ло­нов, доступ­ных в бес­плат­ных вер­си­ях инстру­мен­тов, огра­ни­че­но.

При­мер быст­рой визу­а­ли­за­ции наше­го набо­ра дан­ных с помо­щью Infogr.am:

Традиционная инфографика, созданная с помощью инструмента Inforg.am
Тра­ди­ци­он­ная инфо­гра­фи­ка, создан­ная с помо­щью инстру­мен­та Inforg.am

С помо­щью пред­став­лен­ных в этом руко­вод­стве инстру­мен­тов каж­дый, не зави­си­мо от име­ю­щих­ся навы­ков, смо­жет создать кра­си­вую интер­ак­тив­ную инфо­гра­фи­ку или кар­ту и доне­сти свое сооб­ще­ние до широ­кой ауди­то­рии.

По мате­ри­а­лам: The Guardian