選択された範囲のグラフを表示する （d3.js v5 brush） - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
任意の期間の、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.クリックしたらズームするようにする やることは、初めに設定した svg.selectAll("path") // おまじない。というか理解できてない .d
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 -
D3.js V4 forceSimulation のノード動的更新(追加・削除) - Qiita
D3.js とは D3.js は Data-Driven Documents ということらしいですが、これだと良く分からんのでもう少し分かり易く言うと要素の座標を指定されたレイアウトで計算し、計算結果を DOM に反映させるアクセッサを提供する ライブラリです。実際の描画には何(svg や canvas など)を使うかはユーザ側で選択できます。 ちなみに svg は、 XML ベースのベクタ系画像フォーマットです。 D3.js の公式 HP (https://d3js.org/)は、オープンソースライブラリの中でもかなりの充実ぶりで多くのサンプルもあり、自分の実現したいことがサンプルと同じであればデータを変えるだけで実現できます。サンプルに無くても、ドキュメントを読めば大抵のことは実現可能でしょう。 とはいえ充実しているからこそ、それを読むのも大変な訳で。 そんな訳で多くの方は web で
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> <body> <div id="hoge"></div> <script> // constants const canvas = [600, 600]; const margin = {top: 30, right: 15, bottom: 15, left:
ホールデムポーカのプリフロップ戦略と可視化 - 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
<!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.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); var format = d3.format(",d"); var color = d3.scaleOrdinal(d3.schemeCategory20c); var pack = d3.pack() .size([width, height]) .padding(1.5
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
$ tree . ┝ app1 │ ┝ __init__.py │ ┝ __pycache__ │ ┝ admin.py │ ┝ apps.py │ ┝ migrations │ ┝ models.py │ ┝ static │ ┝ templates │ │ ┝ index.html #New │ │ ┝ radarChart.js #New │ │ └ index.html.org #いままでのやつはいったん退避 │ ┝ tests │ │ ┝ __init__.py │ │ ┝ __pycache__ │ │ └ tests.py │ ┝ urls.py │ └ views.py ┝ manage.py └ pj1 ┝ __init__.py ┝ __pycache__ ┝ settings.py ┝ urls.py └ wsgi.py <!DOCTYPE html> <html>
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点です。それぞれセクションを区切って説明します。 Scale selection.attr / selection.style selection.merge Scale Scaleは値の正規化（線形変換、対数変換
be0a3eaf84273e2d42e7
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 .merge(circle) // 7 .style("stroke", "black"); // 8 上記コードを順を追って説明すると、 svgの全てのcircle要素を選択 circleに対応するデータを更新する データと対応しているcircleを青で塗りつぶす 対応するデータが無くなったcircleを削除 新しく加わったデータのcircle要素を作成して選択 新しく作成したcircleを緑で塗りつぶす 新しく作成したcirc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
D3 でヘキサゴン - Qiita
D3.jsのSelectionとDOMのSelection
ホールデムポーカ simulation & visualization ～ハンドの勝利確率とプレイ人数に非依存な特徴的なハンドの存在示唆～ - Qiita
D3.jsをv3からv4/v5にバージョンアップした際の変更点メモ - Qiita
D3.jsで作るフォーム1: チェックボックス付き折りたたみツリー - Qiita
