Vue.js で d3.jsを使う その2（svgのcircleの半径を動的に変更する） - Qiita
<head> <script src="https://unpkg.com/vue"></script> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <div id="vue"> <svg id="circle-002" :width="width" :height="height" style="border: 1px dotted"></svg> <div>r: {{ r }}</div> <div><input type="range" v-model="r" min="1" max="150" step="1"></div> </div> <script> new Vue({ el: '#vue', data: { width: 800, height: 500, r: 75 }, mou
Vue.js で d3.jsを使う その1（svgのcircleを表示） - Qiita
Vue.jsのフレームワークの中でd3.jsを使う場合どうすればいいのか困ったので、メモとして投稿します。 Vue.jsを触ったことのある人、かつd3.jsを触ったことある人を対象にしています。 ※ Vue.js v2.5.2 / d3.js Version 4.11.0にて確認 コード全文 <head> <script src="https://unpkg.com/vue"></script> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <div id="vue"> <svg id="circle-001" :width="width" :height="height"></svg> <div>r: {{ r }}</div> </div> <script> new Vue({ el: '#vu
FN1701003 | D3.jsを使う | HTML5 : テクニカルノート
ID: FN1701003 Technique: HTML5 / JavaScript Library: D3.js 4.4.0 D3.jsは、データにもとづいて動的にコンテンツを描くJavaScriptライブラリです。HTMLやSVG、CSSなどのWeb標準にのっとって、モダンブラウザにデータを可視化します。本稿はライブラリの基本的な使い方と構文について、かいつまんでご説明します。 01 D3.jsをインストールする ライブラリはD3.jsサイトからダウンロードできます(図001)。本稿執筆時のバージョンは、4.4.0です。また、GitHubでソースが公開されています。CDNを使う場合には、つぎのコードをコピーしてください。
D3.jsでアロー関数を使う時の注意点 - Qiita
既存のD3.jsのコードをアロー関数で置き換える際に変な動作を起こしてしまったのでメモしておきます。 追記 (2020/08/29) 2020年8月にリリースされた D3 v6 ではイベントリスナの書き方が変わりました。 詳しくは D3 v6 アロー関数使用時の移行ガイドへ。以下は v5 以前のコードとなります。 D3.jsでは、DOMにイベントを与えるselection.on(typenames, listener)で、イベントリスナ内でそのDOMを選択したいときにthisを使うことが多いです。 例えば、以下のようなコードがよく使われます。 d3.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", function(d) {return xScale(0);}) .attr("y", function(d)
D3.jsで日本地図を作成しデータを反映するサンプル（コロプレス地図） ｜ Tips Note by TAM
前回の記事「D3.jsの使い方とグラフを作成するサンプル」に引き続き、今回もD3.jsを使用します。 今回はD3.jsを使用してブラウザ上に日本地図を作成し、 CSVファイルに記載された果物の都道府県別出荷量のデータを反映してみます。 ⇒サンプルデモ（平成25年産 主要果樹都道府県別出荷量） まずは必要なデータを準備します。 [準備1] 地図データの取得（日本地図の座標データ / JSONファイル） 日本地図は座標データを元にSVGの要素を使用してパスを作成します。 ひとつひとつ座標データを設定するのは大変なので、フリーの地理データを使用します。 フリーの地理データは下記のサイトで取得できます。 ●Natural Earth このサイトで取得できるデータはShape形式なので、 これをブラウザ上で使用するために、Shape形式→GeoJSON→TopoJSONの順番で変換します。 GeoJ
d3.js Force Simulation の世界 - Qiita
とは、 のような、グラフ可視化ができるシステム。リンク先を見ればコードの書き方はだいたい分かるけれども、実際に自分のデータでやってみると、いい感じになるパラメータの調整が意外と難しいので、この世界を簡単に解説する。詳しい説明は、 https://github.com/d3/d3-force 力あれ 1. 摩擦力 この世界には摩擦力があるので、動いているものはやがて止まる。
D3.jsの概要と使い所について - Qiita
個人的に初めてD3.js（以下、D3と呼びます）を使う機会があったので、その時に得られたD3の大まかな概要やD3（もしくはSVG）の使い所を纏めておきたいと思います。特にD3を使った事がない人向けですが、ここではD3についてハンズオン的な事はしないのでご了承ください。 D3とは D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving yo
d3.jsでスゴイっぽい図(force layout)を作ってみたら思ったより簡単だった件 - Qiita
スゴイっぽい図((force layout))って何 こんな感じの、なんかビヨーンとなってシャキシャキして動くやつ。 説明するより動くものを見てもらった方が早いかも。 作ったdemo やってみた感想 グワングワン動いて楽しい 動的な描画をするのは難しそうだと思ってたが、そうでもなかった。 d3.js自体も難しいものだと避けてきたが、たくさんの人が記事にあげてくれているからググればなんとかなる。 実際に何かに使うには、描画したいデータを必要なフォーマットに直すところがちょっと大変そう。 解説 0. 全ソース 一旦全ソースを貼ってみる。 コピペしていくつかの値をいじってみるだけでも楽しい。 <!DOCTYPE html> <html> <head> <title>d3test</title> <script src="http://d3js.org/d3.v3.min.js" charset=
D3.js で六角形を描く (hexbin) その2 | Agata's Blog
JUGEMテーマ：JavaScript 前回につづいて、hexbin を使った基本的なヒートマップの作り方を紹介します。 前回は hexbin() メソッドを使って、平面を六角形で分割したうえで、個々の六角形の領域内にデータ点がある場合に六角形を描画していました。今回は、個々の六角形の色を領域内のデータ点数によって変化させることで、ヒートマップを作製します。 データ点数によって色を変化させるには、2 つの色の間を補完する interpolateLabメソッドを使います (⇒ 関連記事)。ちなみに今回は、白とロイヤルブルー (royalblue) の間で補完してみました。HTTP で使えるカラーコードについては、ここなどを参照してください。 また、今回は個々の六角形を分かりやすく表示するため、css (あるいは html ファイルの <style>〜</style>) に以下の記述を加えて、
【D3.js】 ローソク足チャートの作成 | Agata's Blog
JUGEMテーマ：JavaScript 前回まで、3回に分けて D3.js による折れ線グラフの作成方法を紹介してきました。その際に 2 月の日経平均株価データ (日毎の始値・高値・安値・終値データを含むCSVファイル) を読み込んで折れ線グラフを作成していましたが、せっかくなので D3.js を使ってローソク足チャートを作成してみました。 ローソク足チャート（ローソクチャートとも言う）は、株価の変動をビジュアル化する方法の一つです。ローソク足チャートでは、日毎の始値と終値を長方形で示し、その上と下にその日の高値と終値を線で示します。始値と比べて終値が高いかどうか (=株価が上がったかどうか) によって長方形の色を変えて表示することで、株価の変動が一目で把握できる仕組みになっています。 ローソク足チャートを描くには TechanJS という財務関係の描画に特化した JavaScript ラ
D3.jsを使ってスキルマップを作ってみる - Qiita
はじめに Data Visualization Advent Calendarの15日目の記事です （投稿が遅れました申し訳ありません） データビジュアライゼーションの話をすると、よく出てくるD3.js。 Webサイト上でインタラクティブなグラフを表示するにはうってつけなものです。 いちエンジニアとして、これは習得しなければならない！ という謎の衝動に駆られ、最近手を出し始めました。 今日はそのD3.jsを使って、ちょっとしたツールを作ったお話です。 d3.jsについて 正式名称はData-Driven Documentsといいます。 Javascriptのライブラリファイルになります。 Dが頭文字の単語が３つなのでD3ですね。 ちなみにAmazonが展開しているクラウドサービスの一つ、「Simple Storage Service」はS3と呼ばれていますね。関係ないですね。 公式サイトは
デザイン性と柔軟性にフォーカスしたD3.jsベースのチャートライブラリ・「Taucharts」
Tauchartsはデザイン性と柔軟性を重視したD3.jsベースのJSライブラリです。多くのチャートライブラリが見難いと感じた為、本職のデザイナーや情報視覚化の専門家の監修のもと、情報の整理、可視性が向上されたデザイン性と、プラグインを使って機能を拡張できる等の柔軟性を持ったチャートライブラリを公開したそうです。プラグインはエクスポート機能やチャートの印刷に最適化されたCSS、ツールチップ等が用意されているみたいですが、ドキュメントでは準備中との事なので拡張面は今後に期待でしょうか。まだよく触ってないのでアレな記事ですが、個人的にはシンプルで情報も整理されていて見やすい印象でした。ライセンスはApache2.0ライセンスとの事。 Taucharts
Taucharts flexible javascript charting library for data exploration
Flexible javascript charting library for data exploration.Designed with passion and taste :)
点を積み上げた棒グラフ表現とアニメーション --データジャーナリズムへのヴィジュアライゼーションの寄稿 - Qiita
この記事は Data Visualization Advent Calendar 2014 の 3 日目の記事です。 記事の概要 この記事では、E2D3 チームの活動として、朝日新聞社の衆議院選の得票数に関する記事に寄稿したヴィジュアライゼーションの技術的な解説をしていきます。（リンク先の記事は過去の衆院選を、得票の絶対数、棄権・無効票の数の増減という観点で、わかりやすい解説とともに振り返った良記事です） 得票率１割台で政権取る可能性 グラフで見る衆院選 - withnews（ウィズニュース） ポイントといきさつ 今回のヴィジュアライゼーションのポイントは * 選挙のある年に注目して、各党の得票と棄権・無効票の比較がしやすいこと * ある党（または棄権・無効票）に注目して、前後の回との得票数の増減がわかりやすいこと の二つです。時間変化に伴う各党の得票数の変化を表現するなら、線グラフが第一
データビジュアライゼーション「d3.js」 | GUNMA GIS GEEK
最近、「データビジュアライゼーション」に興味を持ち始め d3.js というjavascriptのデータビジュアライゼーションライブラリの使い方を学び始めました。海外では、結構有名なライブラリらいしいのですが、日本では利用者が少ないようなので、勉強がてら紹介をしてみたいと思います。 d3.js http://d3js.org/ 「データビジュアライゼーション」については以下を。 データビジュアライゼーションの美 ■データ駆動ドキュメント d3.jsは、データを基にDOM(ドキュメントオブジェクトモデル）を操作するためのライブラリです。 データとDOMのエレメントを結びつけ、データの変化をドキュメントへと反映させることができます。 d3.jsは、配列を渡すだけでグラフィカルな結果を出力してくれるようなフレームワークではありません。 その代わりに、柔軟なカスタマイズが可能で、webの標準の機能（
D3.jsはなぜ人気があるのか？ そして、なぜ難しいのか？
個人的なD3愛についてはこちらに。 日本ではまだまだ知名度の低いD3.jsですが、海外ではGithubの人気レポジトリランキングで上位(現在7位)に上がるなど非常に注目度の高いライブラリです。 JavaScriptには他にも多数のChartライブラリが存在しているのですが、その中でなぜD3がこんなにも注目されているのか？ その理由を考えてみました。 結論 なんかスッゲー長くなったので先に結論を書いておきます。 他のChartライブラリより柔軟性が高いコードが簡潔に書けるJavaScriptの面白さを味わえる理解が進む程に惹かれる設計の妙 以上。以下、詳細。 柔軟性 データをグラフとして表示するには、データを画面上の座標に変換しなければなりません。散布図として表示するためにはデータの値を画面上のXY座標変換する必要がありますし、円グラフとして表示するには値の割合からそれぞれの内角の角度などを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
C3.jsが実現する，学習不要のグラフ機能
WEBSITE.WS - Your Internet Address For Life™