【1日間】D3.js・基礎

D3.js を使って、ウェブで動くインタラクティブな可視化を自分の手で書けるようになるための1日講座です。SVG、DOM操作、データバインディング、スケール、インタラクションまで、D3.js の基礎を一気通貫で扱います。

D3.js は、ウェブブラウザ上でデータを自在に可視化できる JavaScript ライブラリです。既成のチャートライブラリでは表現しきれない、独自のインタラクティブな可視化を作るための基礎を、一気通貫で学びます。

自分の手でコードを書いて、以下のような静的なチャートからインタラクティブなアニメーションまで作れるようになります。

折れ線グラフ（静的）

ビースウォーム（静的）

ビースウォーム（動的）

少人数制で、コードを読み、書き、動かしながら進めます。完成コードを眺めるだけではなく、静的チャートから動的チャートへ段階的に発展させ、D3.js の考え方を手で確かめます。

ノートPC、インターネットブラウザ、任意のテキストエディタをご用意ください。事前に最低限の HTML/CSS/JavaScript の知識があるとスムーズです。

講習に利用したPDFファイルとサンプルコード・サンプルデータを差し上げます。
講習の内容を網羅したエージェント・スキルズ（Agent Skills）ファイルを差し上げます。
- エージェント・スキルズとは、AIが特定のタスクを効率的・専門的にこなすための「拡張機能」や「専門能力」のことを指します。Claude Code、OpenAI Codex、Google Antigravity、GitHub Copilot、Cursorなどに対応しています。
- 対応しているプロダクト一覧：Client Showcase - Agent Skills
講義の録画データをご提供します。繰り返し視聴いただくことで復習に役立てていただけます。

10:00-11:25（85分）イントロダクション
- JavaScript とは？
- D3.js とは？
- 事例を知る
- 環境セットアップ
11:25-12:25（昼食休憩）
12:25-13:50（85分）静的チャートをつくる
- 画面（開発環境）の使い方
- ブロックごとのコードの読み方
- 折れ線グラフをつくろう
- データと表現をつなぐ「スケール」とは
- 大きさのスケールを変更してみよう
- カラー・スケールを変更してみよう
13:50-14:00（休憩）
14:00-15:25（85分）動的チャートをつくる
- ビースウォーム・プロットをつくろう
- データの追加／更新／削除パターン（enter / update / exit）
- フォームからデータと表現を更新しよう
15:25-15:35（休憩）
15:35-17:00（85分）公開とこれから
- レスポンシブレイアウト
- ウェブサイトとしてアップロードして共有しよう
- ヴァイブコーディングを取り入れよう
- Q&A

以下のフォームよりお申し込みください。お申し込み後、Stripe 決済画面へ移動します。決済完了をもって正式な受付となります。