選択された範囲のグラフを表示する （d3.js v5 brush） - Qiita
d3.jsを使って選択された範囲のグラフを表示させる 使用するデータは乱数で生成した株価っぽいやつ。特に意味はない。 ソースコード デモページ svg領域への出力範囲（値域）は変えず、入力範囲（定義域）を変化させることで、グラフの拡大縮小・移動を行う。 処理フロー 範囲選択を始める 選択範囲から逆算して、元のサイズでの選択された範囲（\$1）を求める \$1を入力範囲として、スケール変換用の関数（\$2）を生成する \$2でデータを変換し、プロットする グラフの描画 グラフ描画はいいって人は範囲選択へ データ変換（スケール変換関数） d3.scaleLinear()はデータの入力範囲と出力範囲を決めるだけで線形変換を行う関数（一次関数）を作成してくれる。 domain()が入力範囲でrange()が出力範囲。 中学数学に即して言えば、domainがxの変域、rangeがyの変域。 でも入力
任意の期間の、dateオブジェクト配列を生成する。 - Qiita
//１日ごと d3.scaleTime() .domain([new Date(2018, 8, 1), new Date(2018, 9,1 )]) .ticks(d3.timeDay, 1) //区間指定 //2日ごと d3.scaleTime() .domain([new Date(2018, 8, 1), new Date(2018, 9,1 )]) .ticks(d3.timeDay, 2) //月曜日ごと d3.scaleTime() .domain([new Date(2018, 8, 1), new Date(2018, 9,1 )]) .ticks(d3.timeMonday, 1) //1時間ごと d3.scaleTime() .domain([new Date(2018, 8, 1), new Date(2018, 8,2 )]) .ticks(d3.timeHour
D3 軸と軸ラベル の微調整テク - Qiita
// input const sc = d3.scaleLinear().domain([0,100]).range([0, width-80]); const ax = d3.axisBottom().scale(sc); const ax2 = d3.axisBottom().scale(sc).ticks(4); const ax3 = d3.axisBottom().scale(sc).tickValues([0,20, 40, 80]); const ax4 = d3.axisBottom().scale(sc).tickFormat((val) => { return val === 30 ? '' : val.toString() }); const ax5 = d3.axisBottom().scale(sc).tickSize(10) // output const x
d3.js v5 で、x軸に日付を入れた折れ線グラフを作る - Qiita
v5の簡単なサンプルが少ない 2018年4月現在、簡単なサンプルが少ないです。 やりたいことは単に「x軸に日付・y軸に値」を取ったシンプルなグラフを書きたいことだけなんですが、v3かv4向けだったり、あるいは最初のステップとしては読解が難しいサンプルだったりして、作成に時間が掛かってしまいました。 最終的に欲しかったのは、下のようなやつだったので残しておきます。 (TODO: かなり参考にさせてもらったサイトがあったのに、リンクを消失してしまったので再発見したら貼る) 折れ線グラフのサンプル <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
d3.jsで地図をぬるっとアニメーションさせる。 - Qiita
前回、d3で気象庁降灰予報を描画しましたが、 https://qiita.com/miyawa-tarou/items/f101f0248cdc5744302d 地図の中心緯度経度やズームなどは一度描画した後でも変えることができます。 また単に変えるのではなく、ぬるっとスムーズにアニメーションしながら動かすことができます。 完成版はこちら：https://miyawa-tarou.github.io/d3_nuru_map/ 基本は前回のコードをもとに説明します。今回の説明に邪魔なので桜島に置いた丸は消しています。 https://github.com/miyawa-tarou/d3_nuru_map/tree/01.setting 1.クリックしたらズームするようにする やることは、初めに設定した // 中心座標とスケール var projection = d3.geoMercator(
IEでsvgタグ内のimageが表示されない - Qiita
<!DOCTYPE html> <html lang="ja" > #ライブラリ読込などは省略 <head> <meta charset="UTF-8" /> </head> <body> <div class="test" ></div> </body> <script> var svg = d3.select(".test").selectAll("svg").remove(); svg = d3.select(".test").append("svg") .attr("width", 300).attr("height", 300) .attr("stroke-width", 2).attr("xmlns","http://www.w3.org/2000/svg"); svg.append('image').attr({ 'x' : careerCX, 'y' : sides - r
D3.js V4 forceSimulation のノード動的更新(追加・削除) - Qiita
D3.js とは D3.js は Data-Driven Documents ということらしいですが、これだと良く分からんのでもう少し分かり易く言うと要素の座標を指定されたレイアウトで計算し、計算結果を DOM に反映させるアクセッサを提供する ライブラリです。実際の描画には何(svg や canvas など)を使うかはユーザ側で選択できます。 ちなみに svg は、 XML ベースのベクタ系画像フォーマットです。 D3.js の公式 HP (https://d3js.org/)は、オープンソースライブラリの中でもかなりの充実ぶりで多くのサンプルもあり、自分の実現したいことがサンプルと同じであればデータを変えるだけで実現できます。サンプルに無くても、ドキュメントを読めば大抵のことは実現可能でしょう。 とはいえ充実しているからこそ、それを読むのも大変な訳で。 そんな訳で多くの方は web で
ホールデムポーカ simulation & visualization ～ハンドの勝利確率とプレイ人数に非依存な特徴的なハンドの存在示唆～ - Qiita
役 組み合わせ 確率 累積確率 1-累積確率 役の名称 HC 23294460 17.4% 17.4% 82.6% ハイカード/ブタ 1P 58627800 43.8% 61.2% 38.8% ワンペア 2P 31433400 23.5% 84.7% 15.2% ツーペア 3K 6461620 4.8% 89.5% 10.5% スリーカード ST 6180020 4.6% 94.1% 5.9% ストレート F 4047644 3.0% 97.1% 2.9% フラッシュ FH 3473184 2.6% 99.7% 0.3% フルハウス 4K 224848 0.17% 99.9% 0.2% フォーカード SF 41584 0.031% 99.9% 0.0% ストレートフラッシュ 合計 133784560 100%
D3 で九九の表ならぬ FFの表をつくる - Qiita
<html> <head> <script src="https://d3js.org/d3.v4.js"></script> <script src="https://d3js.org/d3-color.v1.min.js"></script> <script src="https://d3js.org/d3-interpolate.v1.min.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> </head> <html> <head> <script src="https://d3js.org/d3.v4.js"></script> <script src="https://d3js.org/d3-color.v1.min.js"></script> <script
ホールデムポーカのプリフロップ戦略と可視化 - Qiita
はじめに プリフロップでは、はじめに配られる 2枚のカード(ホールカード) のみを頼りに、ゲームに参加するのかを判断しなければならない。 一般的な戦略としては、「この2枚が手元にある場合の勝利確率」という統計データを頭に叩き込む。この統計データは、以下に示すようなマトリックスで表現される。 引用元: https://www.cardschat.com/poker-starting-hands.php 対角線上には、ポケットペアでの勝率が並び、右上にはスーテッド（2枚のカードの種類がそろっている場合）の組み合わせでの勝率が並ぶ。左下にはオフスートの場合の勝利確率が並ぶ。 確率は全部足して 100% になっていない。これは条件付き確率だからだ。つまり、「AAが来た場合に 85% で勝てる」のと、「KKが来た場合に 83% で勝てる」の 85 + 83 を計算することに意味はない。 ちょっと待っ
【TypeScript+D3.js】Web初心者がWebアプリケーションをでっちあげるまでの道のり - Qiita
概要 タイトル通りの記事です。一応解説記事ですが、自身の脳内で理解している事柄を整理するために書いた、という面が強いです。制作物は以下のリンクからどうぞ。 艦これスケジューラー(Web版) GitHub 制作理由と使用技術について ○制作理由 元々、「艦隊これくしょん」用の遠征スケジュール管理ツールとして、「艦これスケジューラー」というアプリを制作、公開していました。このアプリはJava製ですので、「動作環境を選ばない」ことをウリの一つにしていました。 ただ、ご存知のように近年ではスマートフォンなどの「PC以外のデジタル端末」が増えています。すると、パソコン向けのアプリケーションがそのままでは動かず、いちいち移植版を作る必要がある……といった問題が出てきました。 そのため、「複数スマホOSで作成できる」「PC版もまとめて作成できる」といったクロスプラットフォーム開発用フレームワークを使おう
TypeScript Sampleをやってみるその３付録 - Qiita
import http.server import socketserver PORT = 8000 Handler = http.server.SimpleHTTPRequestHandler with socketserver.TCPServer(("", PORT), Handler) as httpd: print("serving at port", PORT) httpd.serve_forever() <!DOCTYPE html> <svg width="960" height="960" font-family="sans-serif" font-size="10" text-anchor="middle"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> var svg = d3.
D3.jsはバージョンに気をつけて - Qiita
D3.jsを勉強し始めた際、 バージョンの部分ではまったポイントがありました。 自分と同じくD3.jsを使い始める方を対象に情報共有したいと思います。 はじめに 本題に入る前に、D3.jsってなんぞや？ってところをざっくり触れていきたいと思います。 JavaScriptで作成された、SVG・canvasの描画するためのライブラリ JQueryのようにセレクタ指定での操作が可能 昨今だと、データ可視化（グラフとか）のために使用されていることが多い 詳しいことは、以下の記事で解説されています。 Qiita - D3.jsの概要と使い所について 自分は、D3.jsを学び始めるまで、グラフ描画のためのライブラリと勘違いしていました。 あくまで、SVG・canvasの描画するためのライブラリということを、 上記記事から理解することができました。 JSのグラフ系ライブラリ D3.js以外にも結構あるん
Django（D3.js）データビジュアライズことはじめ - Qiita
はじめに さて、Python(Django + Anaconda)が、MySQLからデータを抜いて、テンプレートに渡して、htmlがテーブルとして表示する、というところまでできました！感動！ LAMP+Wordpress+Python(Django)のセットアップメモ2018 つぎは、データを絵にする工程が必要だ。ここで出てくるのが d3.js。 いっきにリファレンス見ながらやろうとするとなにが書いてあるかちっともわかんないよね。 ぐえぇぇ...！とかなってくるわ。は？なに書いてあるの？これ、みたいな。 Radar Chart d3 v4 なるほどね、「描く」処理を書かないといけないのね...。グラフでポン出しできないのね...。「おーい、なかじまー！C++でペイント.exe 作ろうぜー！」って言ってるようなもんだよなぁ...。でもほかのチャートライブラリってどこかダサいので d3 にたど
D3.jsで作るフォーム1: チェックボックス付き折りたたみツリー - Qiita
動くサンプルがObservableにあります。D3.jsはversion 5です。 https://beta.observablehq.com/@mojaie/collapsible-tree-with-checkboxes-d3-js (2018/09/05追記) やや改良したバージョンのものをObservableに置きました。 https://beta.observablehq.com/@mojaie/d3-js-collapsible-tree-with-checkboxes-revised 元データ。{id: 'root'}は仮想の最上階層です。 data = [ {id: 'root'}, {id: 'Hominidae', parent: 'root'}, {id: 'Ponginae', parent: 'Hominidae'}, {id: 'Pongini', parent
D3.js ver.3向けのコードをver.4でも動かすよ - Qiita
目的 私はD3.js(Data Driven Document：JavaScriptの情報可視化ライブラリ)を導入する上で、バージョンの違いに苦しめられました。主に、D3のver.3(以下v3)からver.4(以下v4、2016/7月リリース)で大規模な変更があったためです。Webに掲載されているサンプルコードはv3で作られたものが多く、v4上ではその大半が動きません。 本記事の目的は、自分の備忘録および、同じくD3v4を新規導入する方々のために、v3からの変更点や、v3用に書かれたコードをv4用に再コーディングする場合のポイントを述べることです。 内容 重要な点は以下3点です。それぞれセクションを区切って説明します。 1. Scale 2. selection.attr / selection.style 3. selection.merge Scale Scaleは値の正規化（線形変換
be0a3eaf84273e2d42e7
version4ではかなり挙動が変わっているようだ 過去記事: D3.jsアプリケーション設計におけるデータとDOM操作の分離 http://qiita.com/mojaie/items/1c8ba9d70ab633938a1c 環境 D3.js version 4.2.4 Google Chrome version 52.0.2743.116 公式サイトの例 https://github.com/d3/d3-selection var circle = svg.selectAll("circle") // 1 .data(data) // 2 .style("fill", "blue"); // 3 circle.exit().remove(); // 4 circle.enter().append("circle") // 5 .style("fill", "green") // 6
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
D3 でヘキサゴン - Qiita
D3.jsのSelectionとDOMのSelection
D3.jsをv3からv4/v5にバージョンアップした際の変更点メモ - Qiita
