この記事では、プロジェクト開発の経験を簡単に共有し、フィードバックを受け取るために追加の視聴者を引き付けます。
1年以上前、RIA NovostiとRVCとともに、
FutuReViewプロジェクト（説明された未来の実験的ナビゲーションツール）がRIA Novosti Media Laboratoryで誕生しました。 本質的に、このプロジェクトは、約1世紀前の未来の文明の生活のさまざまな側面を説明するドキュメント（先見性）のライブラリの視覚化です。 さまざまな技術、都市、生命維持セクター、健康、通信などの配置に関するアイデア-これらはすべて、さまざまな企業や研究機関からのものです。
データ
RIA Novostiの特別編集チームは約200の先見性を選択し、それらを特別編集システムのデータベースに入力しました。それには、業界、技術プラットフォーム、特定の業界での関連時間、説明のローカルカバレッジなどを含む複数のメタデータが伴います。 編集作業に加えて、キーワードのサードパーティサービス（
Alchemyなど）を使用して、元のドキュメント（主にpdfやdoc記事）のテキスト表現を「切断」し、キーワード、ジオロケーション、キーフレーズなどのエンティティのセットを先見性のあるものとして選び出しました、つまり、元のテキストからの意味的な「絞り込み」。
私たちのプロジェクトのバックエンドは、絶えず進化している開発であるDataflo.wsフレームワークを介してNodeJS + MongoDBバンドル上に構築されています。 追加のフルテキストモジュールとして、Sphinxを使用しました。 サーバー負荷の大部分は、フィルター処理されたドキュメントのコレクションの統計処理に該当します。
プレゼンテーションコンセプト
1年前の最初の近似では、プロジェクトの視覚的魅力に注目しました。 タスクは、「非標準の非リストの方法で」多くのドキュメント（ほぼ引用）を提示することでした。 視覚化の問題は、いくつかのアイデアを中心に展開されました。
- 接続グラフ：すべての先見性をグループ化するメタデータが選択されます。これらのグループ間には同じドキュメントへのリンクの形のリンクがあり、これらのデータに基づいて「反発ノード、ゴム接続」のグラフが作成されます。
- タイムライン：各先見のタイムスタンプがありますが、1つだけあります。すべてのドキュメントはほぼ同時に2000年代に始まります。
- 「マルチバース」：コンテンツへの「ディップ」を伴うカテゴリのクラウド。
その結果、特に
d3jsを使用した作業の例がすでにあったため、「接続グラフ」に
落ち着きました 。 最初のバージョンでは、例に加えて、魚眼の再加工されたグラフ歪みモディファイヤも使用しました（その性質上、頂点シェーダーとして機能し、Z座標の代わりにスケール係数を使用しました）。これは
d3jsの例にも
あります。 これらはすべて非常に魅力的に見え、数分間、フリーズしてアニメートされた分子で再生することができました。これは、ある形式から別の形式に非常に鮮明に物理的に変換されます。
功利主義
プロジェクトの独立した生活のほぼ1年後、私たちはそれに戻り、最初のバージョンの欠点を分析することを決めた。 最初のバージョンの問題は、注意を引くこと以外はほとんど何もしなかったということでしたので、プロジェクトをより実用的でユーザー指向にすることを決定しました-研究者や起業家がプロジェクトをより効果的に方向付けたり、興味のあるものを見つけることができます将来のビジョンの分野での彼の情報。 先見性のリスト、追加の視覚的スライス表現、およびユーザー設定とフィルター処理されたコレクションの作成/保存に焦点を合わせることにしました。 他のすべてに、pdfポストを作成する機能を追加しました。これにより、ユーザーの関心のビジョンを印刷ベースで翻訳できます。
経験と落とし穴
- d3jsは強力なsvgベースのデータプレゼンテーションプラットフォームであり、今日、私の意見では、このようなさまざまなビューと機能のパワーを誇る類似プロジェクトはありません。
- ブートストラップ3をHTMLフレームワークとして使用し、JSでのカスタマイズとコンポーネント管理の可能性に満足しています。
- 初期の段階で人間のmvcのバックボーンを習得する時間がなかったことを非常に残念に思います。そのため、このプロジェクトでは、自己記述コントローラーのリファクタリングと反復可能なコードフラグメントによる最適化に大きな余裕がありました。
- CanvasとSVG。 ラスタライズsvg-ここでは塵を食べました。 キャンバスとsvgを扱うことの1つのひどい機能、つまりdrawImageを使用してsvgで描画された（xml-valid）のキャンバス画像を「image / jpeg | png」データに変換できないことを発見しました。 結局のところ、レンダリングに有効なsvgには、headタグにxmlns属性が含まれている必要があり、その値はw3cリソースへのリンクです。 canvas.toDataURL（）を呼び出そうとすると、セキュリティ関連の実行がスローされ、「別のドメインから受信した画像をエクスポートしようとしています」と表示されます。 canvgプロジェクトが助けになりました-svgの本体を走査し、キャンバスメソッドを正確に呼び出して特定のノードを描画します。
- 今日、 qrcode.jsライブラリを使用してブラウザでQRコードを直接生成できるのは非常に便利です。
一般に、私にとってこのプロジェクトは、経験を積むという点で非常に価値があり、ユーザーにとっては価値があります。時間はわかります。 サーバー部分（NodeJS + MongoDBバンドルでのmapReduceの実装の経験）と編集システムについては、トピックが興味深い場合は別のディスカッション、おそらくそれについて書くことができます。