この記事では、以下のように D3.js を使用して描画した地図に対して、インタラクティブに制御する方法を共有します。 地図を自在に描画・制御できると、色々と幅が広がりそうでワクワクします。 1. D3.js とは D3.js はデータに基づいてドキュメント(SVG や DOM など)を操作するための JavaScript ライブラリです。 今回は D3.js を使い地図情報(GeoJson データ)から SVG を生成してブラウザに描画します。 2. 地図データの準備 D3.js を使ってブラウザで地図を描画するためには GeoJson 形式のファイルを用意する必要があります。 ネット上を探してみると直ぐに利用できる状態の GeoJson 形式ファイルもありますが、ここでは信頼性のありそうでライセンス的に扱いが簡単な Natural Earth からデータを取得して加工する方法を解説します
この記事は CivicTechテック好き Advent Calendar 2020 の 3 日目の記事です。 この記事について この記事では Vue.js と d3.js を組み合わせて SVG のシンプルな線グラフを書く際の、各要素の実装方法をまとめています。 Vue.js と d3.js の役割は、データや DOM の更新に対する処理の部分で一部被っているところがあるため、それらをどちらに担当させるかによって、組み合わせ方が何通りか存在します。この記事の方法では、データの更新と各要素の計算タイミングを Vue.js に、数値計算や軸の DOM 更新を d3.js に担当させています。 最小限のコードで動く完成品が CodePen に置いてあります。各種プロパティを input で変更できるようにもしています。 余談: この記事と CivicTech の関係性（がないこと）について 記事
Although D3 has powerful features like its selectors or an ajax wrapper already built-in, we are often times missing some jQuery functions in our D3 projects. That's why we will show some approaches on how you can replace jQuery by only using D3. The main benefits of this are: Reduced overhead in your visualization projects by removing unused functions.Only loading a single library (smaller size).
SVG patterns for Data Visualization Textures are useful for the selective perception of different categories View on Github Getting started -- from the top of d3.js -- var svg = d3.select("#example") .append("svg"); var t = textures.lines() .thicker(); svg.call(t); svg.append("circle") .attr("r", radius) .style("fill", t.url()); Lines
最近D3.jsをかなりいじってみました。APIをあれこれ調べ、すこし複雑なチャートを構築した後、長い間D3を誤解していたことに気づきました。それは私だけではありません。友達と話してみると、彼らもD3について勘違いをしています。そこで、よくある誤解のいくつかをはっきりとさせるために、この記事を書く事にしました。 D3はチャート・ライブラリではありません D3のホームページに行くと、たくさんの素晴らしいチャートとビジュアライゼーションを見ることができます。しかし、D3は、 Highcharts や Chart.js あるいは Google Charts のようなチャート・ライブラリではありません。ただ単に、データセットを受け渡すことや、必要なチャートのタイプ指定、凝ったチャートを入手することはできません。D3はそれよりもずっと低レベルなのです。D3上に構築されたチャート・ライブラリでは、たとえ
New! O’Reilly announces launch of the AI Academy. Read now Introducing the AI Academy Help your entire org put GenAI to work Every employee today needs to know how to prompt GenAI, use it to enhance critical thinking and productivity, and more. With the AI Academy they can. For less. O’Reilly AI-powered Answers just got even smarter O’Reilly Answers instantly generates information teams can trust,
Read it now on the O’Reilly learning platform with a 10-day free trial. O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers. Learn how to create beautiful, interactive, browser-based data visualizations with the D3 JavaScript library. This hands-on book shows you how to use a combination of JavaScript and SV
D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
※ 本記事で紹介した書籍の元となった web版のチュートリアルを翻訳しました。D3.js の作者マイク・ボストック氏も推薦するチュートリアルで、デザイナー、データアナリスト等、非プログラマの方までを対象とした分かりやすい内容です。基本的なところから実際にグラフを作成するまで順を追って解説しています。ぜひご参照ください。 D3 日本語チュートリアル (全16章） 米オライリより、D3.js の入門書 (洋書) “Interactive Data Visualization for the Web – An Introduction to Designing with D3” が発売になりました。私は昨秋、本書の “Early Release版” を購入していましたが、正式発売と同時に改めてダウンロードしてみました。 米オライリの Early Release 版というのは草稿版みたいなもので、
D3.js は「ビジュアライズ用のライブラリー」だと紹介されがちなんだけども、意外にも D3.js にはグラフを描画する機能がない。 D3.js のトップページには次のように書いてある。 D3.js はデータからドキュメントを生成するためのライブラリーです。D3 は HTML, SVG, CSS を使ってデータに命を吹き込みます。Web 標準を重要視しているので、独占的なフレームワークに縛られません。強力なビジュアライズ用のコンポーネントと data-driven な DOM 操作手順を組み合わすことで、モダン ブラウザーの能力を最大限に活用できます。 D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG
D3.jsって？ AWSの事しかかけないと思われているかもしれないあけりです。 4月になって、気分一新クラスメソッドぽいことを少し。 今日はAWSとは関係の無いD3.jsです。 D3.jsとは名前から想像出来る通りjavascriptで使えるライブラリで、 データを色々な形に見やすく表示（よくあるグラフなんかもその一つ）するものです。 D3はData-Driven Documentsの略だと思われます。 データとDOMをうまいこと連携させて、表を作ったり、SVGのグラフを描画させたりすることができる、なんか格好良いライブラリです。 ライセンスはBSD Licenseと書いてありますが、リンクを辿ってみると宣伝条項のない修正BSD Licenseとなっているので、なんか色々楽そうです。 使い始め方 使い始め方は簡単で、ここからダウンロードしてくるか、 HTMLに直接 <script src=
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
最近、「データビジュアライゼーション」に興味を持ち始め d3.js というjavascriptのデータビジュアライゼーションライブラリの使い方を学び始めました。海外では、結構有名なライブラリらいしいのですが、日本では利用者が少ないようなので、勉強がてら紹介をしてみたいと思います。 d3.js http://d3js.org/ 「データビジュアライゼーション」については以下を。 データビジュアライゼーションの美 ■データ駆動ドキュメント d3.jsは、データを基にDOM(ドキュメントオブジェクトモデル）を操作するためのライブラリです。 データとDOMのエレメントを結びつけ、データの変化をドキュメントへと反映させることができます。 d3.jsは、配列を渡すだけでグラフィカルな結果を出力してくれるようなフレームワークではありません。 その代わりに、柔軟なカスタマイズが可能で、webの標準の機能（
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く