javascript - 列車運行グラフの作成

Question

毎日の列車の動きを反映するグラフを作成する必要があります。このようなもの：

私はそのようなグラフを作成したことがありません。何から始めればよいか分かりますか？グラフィック ライブラリを見つけましたd3.jsが、まだ使用した経験がありません。

少しご案内いただけますか？

ありがとう！

Answer 1

これは、EJマリーの1880年の列車のスケジュールのように見えます。これは、タフテの「定量的情報の視覚的表示」の表紙にあり、このブログ投稿で説明されています。

実際には、Protovisに組み込まれているMareyの視覚化をコピーしたCalTrainスケジュールのインタラクティブな視覚化があります。Protovisはこれ以上積極的に開発されていませんが、その例を使用できる可能性があります。

ただし、@ HBPが言うように、この種の視覚化は、特殊な視覚化ライブラリを学習しなくても、手作業で作成するのは非常に簡単です。

Answer 2

最初のタスクは、データを整理して理解することです。あなたの（小さめの）画像からわかるように、グリッドに斜めの線が重ねられています。グラフィック ライブラリを使用すると仮定すると、最初にグリッドを描画し、グリッドの交差座標をデータ構造に追加します。そうすれば、データを走査して対角線を引くという比較的単純な問題になるはずです。

ご案内をお願いしました。試してみて、行き詰まった場合は、開発したコードとデータ構造を元に戻してください。