この無料D 3でデータを視覚化することを学んでください.JSコース

画像をクリックして、コースを取得します.
D 3 .JSは、HTML、SVG、およびCSSを使用して生活にデータをもたらすことができるJavaScriptライブラリです.それはあなたが考えることができる任意の可視化を作成することが基本的にできるように、それはあなたがデータから値を抽出することになると超大国を与える学習.
しかし、それを学ぶための最も簡単なライブラリではないので、少しトリッキーすることができます始める.だからこそ、我々はウェブ開発者とインストラクターSohaib Nehalと提携して、コース全体を作成し、Sohaibはあなたに強力なライブラリへのソフト導入を与える.
どのようにレイアウトされて見てみましょう!

内容

コースは合計で1時間未満の10のスクリーンキャストから成ります.これは、選択、操作、データの読み込みなどの最も基本的な概念で起動します.これは、コースの残りの部分を通して作成することを学ぶ様々な視覚化のための基礎を産む.

コース1 :コース紹介

Scrimbaコースではいつものように、それはD 3にイントロと一緒にコースの内容のクイックウォークスルーで始まります.JSとインストラクター.

φ2 :選択と操作

あなたが学ぶ必要がある最初のことは、D 3でDOM要素を選択して操作する方法です.jsライブラリは実際にDOMを操作するという点でかなり強力です.したがって、あなたは理論的にreplacement for jQuery.としてそれを使うことができました

φ3：データローディング及び

あなたが視覚化を作成するつもりであるように、データをロードする方法とDOMにそれを結合する方法を学ぶことは重要です.だから、この講義では、あなたはそれを学びます.

残高4：簡単なバーを作成するチャート

番目の講義では、あなたの非常に最初の可視化を構築する方法を学びます:簡単な棒グラフ.私たちがあなたにとても早く初期のものを造ることをあなたに紹介している理由は、単に理論について話すより、視覚化を作成することがずっと楽しいです.それで、我々はあなたがこのレッスンを楽しむと思います.

△5

次のステップは、あなたが頻繁に実際の生活の中でこれを行うには、棒グラフにラベルを追加することです.これは短くて簡単な講義です.ここでは、コードとの対話のシンプルで楽しい方法として、ラベルの位置を再生することをお勧めします.

○○六尺

スケールはd 3の重要概念である.彼らはあなたが他の関連する範囲にデータをマップすることができます、例えば、あなたが利用できるスペースの量.この講義では、scaleLinear()の方法について学びます.

var yScale = d3.scaleLinear()  
    .domain(\[0, d3.max(dataset)\])  
    .range(\[0, svgHeight\]);

角7軸

軸は任意のグラフの不可欠な部分であり、D 3はそれらを作成するためのいくつかの簡単なメソッドを提供します.このレッスンは、軸を作成するときにスケールを利用するので、最後のものを構築します.また、あなたはコースの最終的なスクリーンキャストで学びます超クールライングラフを理解するために設定します.

△8 : SVG要素の作成

以前にSVG要素を既に作成していたとしても、それ自身の講義に値する重要な概念です.それには、<rect>、<circle>、および<line>の要素について学びます.

△9 :パイをグラフ作成する

円グラフは多くの場合、便利ですので、この講義では、どのように1つを作成する方法を学びます.D 3はこれを行うための単純なAPIを提供していますので、この時点では難しいことはありません.

△10：線図を作成する

最後に、どのようにビットコイン価格を視覚化するライングラフを作成する方法を学びます.データを取得するには、外部APIを使用します.このプロジェクトは、あなたがコースを通して学んだ多くの概念を結び付けます、それで、それは終わりまで大きな可視化です.
そして、それ!これらの10のレッスンを経験した後に、あなたはD 3を使用し始めるためによくセットアップされなければなりません.あなたの仕事や個人プロジェクトのJS.
あなたがこの点に達するならば、あなたがSohaib Aを出すならば、我々は本当に感謝します!

Scrimba

あなたが去る前に、コースの後のテクノロジーを簡単に見ましょう.これは、対話型のコーディングスクリーンキャストツールを使用して構築されています.“scrim”通常のビデオのように見えるが、それは完全にインタラクティブです.つまり、スクリーンキャスト内のコードを編集できます.
以下にその概念を説明します.
スクリーンキャストを一時停止する→ コードを編集→ それを実行!→ を参照してください
これは、コードを適切に理解するためにコードを使用して実験する必要があるとき、または単にコードの一部をコピーしたいときに最適です.
だから何を待っている?
読書ありがとう!私の名前は一人です、私は共同創設者です、そして、私は人々が新しい技術を学ぶのを援助します.あなたが新しい記事と資源について通知されるならば、私について来てください.