"War and Peace" - the test of time

4 December days in a row, about 1,300 people for 60 hours from 30 cities read "War and Peace." An unprecedented multimedia project from VGTRK , during which the work of Leo Tolstoy was read from the first to the last line. The project captures its grandeur and draws on the Guinness Book of Records.

In addition to the literary marathon, a series of interactive infographic works was released under the auspices of the Tolstoy Digital analytical community. Each infographic, and a total of 4, analyzes the product from different angles: human relations, places, time, history, objects, culture in general.
')
Under the cut, excerpts from the novel, some code and my thoughts on the process of infographic data on the example of an event timeline.

“He didn’t really care at that moment, whoever stood over him, no matter what he said about him; he was only glad that people had stopped over him, and only wished that these people would help him and bring him back to a life that seemed so beautiful to him, because he understood her so differently now. ”

Volume I, Part 3, Chapter 19

The essence of the infographic is getting answers to questions . Infographics can answer as one of the questions: What? Where? When? How? So combine different aspects of understanding several issues. And sometimes infographics is just beautiful, without any measures for calculating the entropy.

What you can be sure of is that infographics cannot exist without data . If there is no data, then the infographics loses its meaning. We will try to characterize the data in the context of an infographic - usually these are numbers , texts, and links between these numbers and texts, both multiple and single.

The numbers themselves are already beautiful, and if they have a certain meaning, then they become more beautiful two, or even three or ten times for those who have guessed this meaning.

Texts, in contrast to numbers, are meaningless, but sometimes, as it became with the work “War and Peace”, the texts become masterpieces. They are able to revive the events of two hundred years ago right before your eyes! Especially if they are read by over a thousand people.

The relationship between the data is the most difficult and intricate part when building infographics. It is hard to hit the bull's eye the first time, ensuring the readability of infographics, selected links. The first attempts cover the screen with the intricate intricacies of multicolored lines that come from nowhere and fall into unknown places.

“The emperor said bluntly that the Council and the Senate are the essence of the state class; He said that the board should have no basis for arbitrariness, but solid beginnings. The Sovereign said that finances should be transformed and reports should be public. ”

Volume II, Part 3, Chapter 18

If you have data on your hands, this is half the battle. And what is the secret of the second half of the case? :) How quickly we can sort them out!

What do you need to do? Of course, to try to understand the data, look for patterns until blue in the face, try to bring them to an idealized scheme. But the work can be simplified, both for yourself and for your colleagues, if you adhere to the following principles.

Connect programmers at the design and data analysis stage

Even if you are developing a static infographic, the programmer will be able to quickly prove or disprove the existing data view.

Never edit raw data manually.

This has a detrimental effect on job performance. I want to immediately assure those who think that the data does not change. They change more often than you think :) Therefore, we agree that our infographics accept the data that comes from the editors. So you extend to the editors the boundaries of thinking, without driving them into narrow columns of a programmatic data set. If there is too much data and the preparation process for live takes a long period of time, then it is necessary to bring them to a normalized form in advance. But for starters, this process can be described in the infographics itself, and then cut into a separate data preparation module. As we followed this advice as part of developing infographics:

The essence of the timeline is to show how events in the novel correspond to the real course of historical events. Each chapter, if it allows you to understand the text of the novel, is assigned a time range or a specific date. All this information is contained in one of the columns in the source table. It was he who caused the first difficulties, since the format was chaotic, but as it turned out, amenable to certain rules. After a brief analysis, it turned out that there are about 12 patterns. We write handlers and normalize the column to a single format:

convertDate: function (date, year) { //      date = util.clearValue(date); //   ,        if (['', ''].indexOf(date) !== -1) { return null; } //        28.01.1812 if (this.tests.testDate(date)) { return this.getDate(date); } //   ,         var dateParts = _.without(date .split(/[\s-]/g), '', '', '', '', ''); var patternId = ''; //         id  //  id    "42423",     9- for (var key in dateParts) { patternId += this.getPatternId(dateParts[key]); } //   ,      if (this.patterns[patternId]) { return this.patterns[patternId](dateParts, year); } } 

The chapters that correspond to the historical period are described in another column. They also have a chaotic representation, but are amenable to a certain logic:

 getChapters: function (chapters) { //   ,        if (['', ''].indexOf(this.clearValue(chapters)) !== -1) { return []; } return _.chain(this.clearValue(chapters, true) //           .replace(/[\.\,]$/g, '') //  ,      .split(/[\.\,]/g)) .map(chapter => { //    - var chapters = chapter.split('-'); if (chapters.length == 1) { return chapters[0]; } return _.invoke(_.range(Number(chapters[0]), Number(chapters[1]) + 1), 'toString'); }) //       .flatten() .uniq() .value() ; } 

Cache everything you can when starting your infographic

Avoid runtime calculations, thereby you spare the users' cars from overloading. Clean the data in advance. Generate the missing pieces of data needed for visual collections. If visual collections require repeated access after building HTML, cache all necessary elements into a data structure.

 //           svg -  yearTimelineView.selectAll('.year') .data(yearsData) .enter() .append('g') .each(function(d) { d.yearNext = d.year + 1; d.startYearY = timeScale(new Date(d.year, 0)); d.endYearY = timeScale(new Date(d.yearNext, 0)); d.localYearY = (d.endYearY - d.startYearY)/2 d.yearView = d3.select(this); }) ; 

Prepare multilayer data

Get separate convenient data structures for each visual collection. Do not be afraid to duplicate the data, sometimes it is vital to preserve the transparency of the project.

 //         var timelineData, filteredTimelineData, historyFilteredTimelineData, yearsData, dataByType, dataLinks, dataUrls, dataChapters; 

Turn the data inside out

Manipulate data with the help of libraries: underscore, lodash and built-in d3 functions. Always achieve the format that ensures you a comfortable work. The most colorful examples of inversion of data in infographics:

Baseline data are presented in 4 tables. Not the best format for building two dependent timelines (history and novel). Since the infographics is still about the book, we chose the novel as the main timeline, while the historical one was awarded a secondary role. The underlying table describes three kinds of events: only in the novel, only in history and related events. One adjacent event is described by two lines of data, and the connection is put through the field related_book_id in an adjacent historical event. Since the book was chosen as the main timeline, the table had to be turned into two dependent lists linked by the related_book_id field.

All infographic works are covered with references to the novel, this is done in order to go to the cash register and continue reading the novel, starting with the selected quotation. The book, in turn, contains backlinks to infographics. There were some difficulties in comparing links from infographics to the desired fragment in the book. Since the quotation was the only key to get the link, I had to use an inaccurate string comparison algorithm. An exact comparison gave only 30% compliance.

Cover the data with tests

Limits, checking for links in lists, correct sequences within the framework of infographic logic, formats - try to cover all possible cases. Again, returning to the issue of teamwork, it is better to do it once in parallel with the main development and sleep well. Any change of data will not pass by you, be sure.

 // vpc -   , ,  //         console.log(v.id, '   vlc_id:', v.vpc_id); //       console.log(historyEvent.id, '  id  :', historyEvent.related_book_id); 

Complete the prototype in the first 10 hours

This will give an idea where there are most serious inconsistencies in your understanding of how data works. What it gave us:

We were able to determine at an early stage that the history correspondence grid is too cumbersome in the order of 350 temporary serifs. Moreover, a good half of them fall on a modest period in 1812. A good idea with the analogy of the notebook in the ticker was only a good idea. From this implementation had to be abandoned. Instead, we left a grid of related events, it partly implements this functionality. So it looked when there was a grid:



I had to give up the range distribution in chapters, the picture became completely unreadable. In some cases, it was not clear what color to color ties, the color of war or peace. And the columns of information once contained too many quotes. One of the early screenshots:



The events of the novel develop from 1805 to 1820, but the coverage is uneven. It was decided to scale the years from the number of events. The algorithm of the next 35% of the height of the timeline falls on all years in equal shares, the remaining 65% are divided between years with events, in proportion to the number of events.

Many historical events, took place consistently with a small gap in time to avoid porridge, the points of events move a little downward relative to their initial positions, if the points are dropping.

Historical events that occurred at the beginning of the year crawled on the dividing lines, as in the previous paragraph, we move them down a bit relative to the initial position.

This is the final infographic:

“Moscow was so empty when Napoleon, tired, restless and frowned, walked up and down at the Kamercolledskiy rampart, waiting for the external, but necessary, in his opinion, respect for decency - deputation. In different corners of Moscow, people were just senselessly still moving, observing old habits and not understanding what they were doing. ”

Volume III, Part 3, Chapter 19

In addition to practices and methodologies, there is an important point - tools . To understand how everything is arranged in d3, you do not need to have a 7-span in the forehead. To begin with, we will bring to automatism the skills of working with three basic library features:

• Construction: enter - update - exit . We memorize as a mantra. The more often you use it in work, the better - it characterizes the successful preparation of your data.
• Scaling data. The second most popular feature of the framework.
• Drawing helper path. Without it, it is difficult to imagine at least one project on d3.

“It was frosty and clear. Above the dirty, dim streets, above the black roofs stood a dark starry sky. Pierre, only looking at the sky, did not feel the insulting baseness of all earthly in comparison with the height at which his soul was located. ”

Volume II, Part 5, Chapter 22

There was a final touch, preparation of the project for production. As a build system, I used a webpack. The transparency and flat structure of the rules allows you to completely forget about the routine of the task. Here lies a clean template for launching a project with a webpack (also used in infographics).

Epilogue

"There are only two virtues: activity and mind"

Volume I, Part 1, Chapter 22

All battles begin in our head. Strive for peace in your head and peace will reign around you.

I would like to thank my ex-colleagues from the RIA Infographic Studio and all the participants of the literary marathon for this event.

Hmm, what's an interesting idea: to make an infographic about how to read "War and Peace" ..?!

Timeline Sources
Webpack template
Infographic project "War and Peace"
Separately timeline here