web-dev-qa-db-ja.com

データ視覚化のためのd3.jsの学習

できればD3.jsパッケージを使用して、データの視覚化（PhDのサイドプロジェクトとして）の学習を開始したいと思います。私はJava- experienceを持っていませんが、OOPで私はほとんどpythonで働いているので、背景があります。 d3の使用方法と、推奨される環境を学習する方法。

javascriptd3.js
48
ruben baetens

最近見つけたので、 http://phrogz.net/js/d3-playground/ で作業することをお勧めします。サンドボックスでは、試用して作品の仕組みを学ぶことができます一緒に。

22
heckj

Scott Murrayのチュートリアルは、出発点として最適です。 http://alignedleft.com/tutorials/d3/

環境に関しては、これが役に立つかもしれません： http://tributary.io 。 d3の学習に役立つように設計されたインタラクティブなコーディングエディターです。

37
Gabriel Florit

Scott MurraysのWebサイトは、最初の良いスタートです http://alignedleft.com/tutorials/d3/ 。

それができたら、このウェブサイトをご覧になることをお勧めします http://techslides.com/over-1000-d3-js-examples-and-demos/ d3。通常、javascriptデータとコードをコピーして、自分のコンピューターでローカルに操作できます。

これらのプロットのいずれかを取得して、再構築できるかどうかを確認することもできます。

これが便利だと思った理由は、d3が投げるエラーを認識できる必要があるからです。面倒なエラーがある理由がわからない瞬間です。再構築する例を示すことで、自分でより簡単に修正できるように機能するコードのコピーを自分で保証できます。

8
cantdutchthis

私は初心者向けにいくつかのチュートリアルを作成しましたJavascriptとデータの視覚化：

http://blog.vida.io/2014/06/23/coding-visualization-tutorial-1-variables/http://blog.vida.io/2014/06/23/coding-visualization-tutorial-2-functions /

Wikiの最初の4つのチュートリアルは、学ぶのに非常に役立ちますD3の基礎：

https://github.com/mbostock/d3/wiki/Tutorials

はじめに、3つの小さな円、結合について考える、選択の仕組み。

私のチームは https://vida.io を実行しています。 d3にテンプレートアプローチを使用して、ユーザーが作業用ドキュメントをすばやく作成し、新しいデータをアップロードし、GUIエディターを介してドキュメントにデータをバインドできるようにします。開始するには、例を確認してください。

https://vida.io/explore

3
Phuoc Do

これが、私がd3jsを学ぶために使用しているリソースのリストです。公式サイトは、Web開発の初心者にとっては少々圧倒される可能性があるため、さらにいくつか紹介します。

チュートリアル

  • D3jsの公式Webサイトには、良い例とチュートリアルのリストがあります こちら
  • Squareは、オンボード時のD3への素早いクイックイントロ here
  • Christophe Viauには1ページの良い紹介があります こちら
  • D3のJerome Cukierの「Hello World」。使用可能な環境のセットアップの詳細について説明します here
  • Scott Murray（alignedleft）が非常によく説明しています。彼はまた、「インタラクティブデータビジュアライゼーション」の著者でもあります。チュートリアル ここ

参照

  • さまざまなd3関数を見て、それらが何をするのか疑問に思うでしょう。公式API here を使用します。
2
Will

私はd3.jsチュートリアルの多くを経験しましたが、混乱を招くことがわかりました。人がまだHTMLとCSSに精通していない場合、詳細についてもう少し説明が必要です。これらの詳細は、NRecursionsでより適切に提示されます。
Part1： http://nrecursions.blogspot.in/2014/11/getting-your-head-around-d3js.html
Part2： http://nrecursions.blogspot.in/2014/12/getting-your-head-around-d3js-part2.html

0
Nav