4日間連続で、約1300人が60の都市から60時間にわたって戦争と平和を読みました。 全ロシア国営テレビおよびラジオ放送会社による前例のないマルチメディアプロジェクトで 、その間にレオトルストイの作品が最初から最後まで読み上げられました。 このプロジェクトは、その壮大さを捉え、ギネス記録に基づいています。
文学的なマラソンに加えて、 一連のインタラクティブなインフォグラフィック作品が、分析コミュニティであるトルストイデジタルの後援の下でリリースされました。 各インフォグラフィックは合計4つあり、人間関係、場所、時間、歴史、物、文化全体など、さまざまな角度から作品を分析します。
カットの下には、小説からの抜粋、いくつかのコード、およびイベントタイムラインを例として使用してデータをインフォグラフ化するプロセスに関する私の考えがあります。
「彼が彼について何を言ったとしても、彼はその瞬間に気にしませんでした。 彼は人々が彼の上に立ち止まったことだけを喜んでおり、これらの人々が彼を助けて、彼にとってとても美しく見えた人生に彼を連れ戻すことだけを望んでいた。
I巻、パート3、第19章
インフォグラフィックの本質は、質問への回答を得ることです。 インフォグラフィックスは、質問の1つとして回答できます。 どこ？ いつ？ どうやって？ したがって、いくつかの問題を理解するさまざまな側面を組み合わせてください。 また、エントロピーを計算する手段がない、インフォグラフィックスが単に美しい場合もあります。
確信できるのは、 インフォグラフィックはデータなしでは存在できないということです。 データがない場合、インフォグラフィックは意味を失います。 インフォグラフィックのコンテキストでデータを特徴付けようとします-通常、これらは数字 、 テキスト 、およびこれらの数字とテキスト間の複数形と単数形のリンクです。
数字自体はすでに美しいものであり、特定の意味を持っている場合、この意味を理解した人にとっては2倍、さらには3倍から10倍も美しくなります。
数字とは異なり、テキストは無意味ですが、戦争と平和の場合と同様に、テキストは傑作になります。 彼らはあなたの目の前で200年前の出来事を復活させることができます！ 特に1000人以上に読まれた場合。
インフォグラフィックを作成するとき、データ間の関係は最も困難で扱いにくい部分です。 選択したリンクでインフォグラフィックを読みやすくするために、初めて目にするのは難しいです。 最初の試みは、どこからでも行き、どこからでも落ちない、マルチカラーの線の複雑な複雑さで画面をカバーしようとします。
「主権者は率直に言って、評議会と上院は国有財産である。 彼は、ルールは意性に基づいているのではなく、堅実に基づいているべきだと述べた。 皇帝は、財政を変革し、報告書を公開するべきだと言った”
IIボリューム、パート3、第18章
データが手元にある場合-これはすでに戦いの半分です。 そして、問題の後半の秘密は何ですか？:)私たちはどれくらい早くそれを理解することができますか！
これには何が必要ですか？ もちろん、データを掘り下げて、青に変わる前にパターンを探し、それらを理想的なスキームにするようにしてください。 ただし、次の原則を順守すれば、自分と同僚の両方にとって作業を簡素化できます。
プログラマーを設計およびデータ分析フェーズに接続します
静的なインフォグラフィックを開発している場合でも、プログラマーは既存のデータの考え方を迅速に証明または反証することができます。
ソースデータを手動で編集しないでください
これはパフォーマンスに悪影響を及ぼします。 データが変わらないと思う人にはすぐに保証したいです。 彼らはあなたが思うよりも頻繁に変更します:)したがって、私たちのインフォグラフィックは編集者からのデータを受け入れることに同意します。 そのため、エディターをソフトウェアデータセットの狭い列に配置することなく、エディターの思考の境界を広げます。 データが多すぎて、ライブ準備プロセスに時間がかかる場合は、事前に正規化された形式にする必要があります。 しかし、初心者にとっては、このプロセスはインフォグラフィック自体に記述され、その後、別のデータ準備モジュールに分類されます。 インフォグラフィックの開発の一環として、このアドバイスを順守しました。
タイムラインの本質は、小説のイベントが実際の歴史的イベントにどのように対応するかを示すことです。 これにより、小説のテキストを理解できる場合、各章には時間範囲または特定の日付が割り当てられます。 この情報はすべて、ソーステーブルの列の1つに含まれています。 フォーマットが混oticとしていたため、最初の困難を引き起こしたのは彼でしたが、判明したように、特定のルールを受け入れました。 短い分析の後、約12のパターンがあることが判明しました。 ハンドラーを作成し、列を単一の形式に正規化します。
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); } }
履歴期間に対応する章については、別の列で説明します。 また、混oticとした表現もありますが、特定のロジックに役立ちます。
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() ; }
インフォグラフィックを実行するときにできることをすべてキャッシュします
実行時の計算を避けることで、ユーザーの車を過度の負荷から解放します。 事前にデータを消去してください。 視覚的なコレクションに必要なデータの欠落部分を形成します。 HTMLを作成した後にビジュアルコレクションに再アクセスする必要がある場合は、必要なすべての要素をデータ構造にキャッシュします。
// 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); }) ;
階層化されたデータを準備する
ビジュアルコレクションごとに個別の便利なデータ構造を作成します。 データを複製することを恐れないでください。プロジェクトの透明性を維持することが不可欠な場合もあります。
// var timelineData, filteredTimelineData, historyFilteredTimelineData, yearsData, dataByType, dataLinks, dataUrls, dataChapters;
データを裏返す
ライブラリを使用してデータを操作します：d3のアンダースコア、lodash、および組み込み関数。 常に快適な仕事ができる形式に努めてください。 インフォグラフィックのデータ反転の最もカラフルな例：
初期データは4つの表に示されています。 2つの依存するタイムライン（歴史と小説）を構築するのに最適な形式ではありません。 インフォグラフィックスはまだ本に関するものであるため、小説をメインのタイムラインとして選択しましたが、歴史的なものには副次的な役割が与えられました。 ベーステーブルは、3種類のイベントを説明します。小説のみ、歴史と関連イベントのみです。 1つの隣接するイベントは2行のデータによって記述され、接続は隣接する履歴イベントのrelated_book_idフィールドを介して付加されます。 本がメインのタイムラインとして選択されたため、テーブルをrelated_book_idフィールドでリンクされた2つの依存リストに変換する必要がありました。
すべてのインフォグラフィック作品は、小説へのリンクで覆われています。これは、選択された引用から始めて、小説を繰り返し読んだり読み続けたりするために行われます。 この本には、インフォグラフィックへのバックリンクが含まれています。 インフォグラフィックから本の目的の断片へのリンクを比較するのは困難でした。 リンクを取得するための唯一のキーは引用であるため、不正確な文字列比較アルゴリズムを使用する必要がありました。 正確な比較では、わずか30％の一致が得られました。
テストでデータをカバーする
制限、リスト内のリンクの存在のチェック、インフォグラフィックのロジックのフレームワーク内の正しいシーケンス、フォーマット-考えられるすべてのケースをカバーするようにしてください。 繰り返しになりますが、チームワークの問題に戻って、これをメイン開発と並行して一度実行し、静かに眠ることをお勧めします。 データの変更はあなたに渡されません、必ず。
// vpc - , , // console.log(v.id, ' vlc_id:', v.vpc_id); // console.log(historyEvent.id, ' id :', historyEvent.related_book_id);
最初の10時間でプロトタイプを完成させる
これにより、データがどのように機能するかを理解する上で最も深刻な矛盾がある箇所がわかります。 それが私たちに与えたもの：
ストーリーの小説の通信グリッドは、一時的なセリフ350個のオーダーでは大きすぎると判断することができました。 さらに、それらのかなりの半分が1812年にささやかな期間を占めました。 定規ノートブックの類推との良いアイデアは、ちょうど良いアイデアであることが判明しました。 この実装は放棄されなければなりませんでした。 代わりに、関連イベントのグリッドを残し、この機能を部分的に実装しています。 そのため、グリッドがあるときに見えました：
私は章の範囲分布を放棄しなければならなかった、写真は完全に読めなくなった。 場合によっては、つながりを描く色、戦争や平和の色が明確ではありませんでした。 また、情報の列に引用符が多すぎます。 初期のスクリーンショットの1つ：
小説の出来事は1805年から1820年まで発展しますが、出来事の報道は不均一です。 イベントの数から年をスケーリングすることが決定されました。 タイムラインの高さの次の35％のアルゴリズムは、すべての年に均等に配分され、残りの65％は、イベントの数に比例して、イベントのある年に分割されます。
おridgeを避けるために、多くの歴史的イベントが小さな時間差で連続して行われました。ポイントの衝突がある場合、イベントのポイントは初期位置に対してわずかに下にシフトされます。
前の段落のように、年初の歴史的出来事は分割線をcい回り、それらを初期の位置に対してわずかにシフトしました。
これは、インフォグラフィックの最終バージョンがどのように見えるかです：
「疲れていて落ち着きがなく、眉をひそめているナポレオンがカメルコルジェスキーの縦坑を前後に歩いたとき、モスクワはとても空っぽだった。 「モスクワの別のコーナーでは、人々は無意味に動いて、古い習慣を観察しているだけで、自分たちが何をしていたのか理解していない。」
ボリュームIII、パート3、第19章
実践と方法論に加えて、重要なポイントツールがあります 。 d3ですべてがどのように機能するかを理解するには、額に7つのスパンを持つ必要はありません。 まず、ライブラリの3つの基本機能を操作するスキルを自動化していきます。
- 構築：enter-update-exit 。 私たちはマントラのように暗記します。 仕事で頻繁に使用するほど、データの準備がうまくいくことを特徴としています。
- データのスケーリング。 フレームワークの2番目に人気のある機能。
- パス描画ヘルパー。 それなしでは、d3で少なくとも1つのプロジェクトを想像することは困難です。
「それは冷ややかで澄んでいた。 汚れた暗い通りの上、黒い屋根の上に暗い星空が立っていました。 ピエールは、空を見ているだけで、彼の魂がいた高さと比較して、地上のすべてのin辱的なベースネスを感じませんでした
IIボリューム、パート5、第22章
最後の仕上げがあり、生産のためにプロジェクトを準備しました。 ビルドシステムとして、webpackを使用しました。 ルールの透明性とフラットな構造により、タスクのルーチンを完全に忘れることができます。 ここにwebpackでプロジェクトを起動するためのきれいなテンプレートがあります（インフォグラフィックでも使用されます）。
エピローグ
「2つの美徳のみがあります：活動と心」
I巻、パート1、第22章
すべての戦いは頭の中で始まります。 あなたの頭の中で平和を求めてください。あなたの周りに平和が君臨します。
RIAインフォグラフィックスタジオの元同僚と、このイベントの文学マラソンのすべての参加者に感謝します。
うーん、しかし、何を面白い考え：彼らが「戦争と平和」を読む方法についてのインフォグラフィックを作成するために..？！
タイムラインソース
webpackを使用したテンプレート
インフォグラフィックプロジェクト「戦争と平和」
ここで別のタイムライン