plotly.jsでjitterグラフを書く

boxプロットを使って箱だけ非表示にするのも一手。 https://plotly.com/javascript/box-plots/ <div id="plot"></div> <script> const x = [0.5044528083813796, 0.49845872001357217, 0.4975016307388196, 0.5037510959564327, 0.4993219647633076, 0.50068155349606, 0.4977053870478837, 0.49718326250416833, 0.5007650843940975, 0.49773498865211385, 0.4951870445205525, 0.5046823671036484, 0.5011188386517081, 0.497133688616183, 0.49570519328218066, 0.49511830268928736, 0.4999495045661435, 0.5040788571123462, 0.49889019026034875, 0.4986065504776591, 0.5038025055164407, 0.49746132733779613, 0.4983757753323853, 0.4982843058261668, 0.4999374809403563, 0.5046458389327603, 0.5018365766216479, 0.5043385808190287, 0.5045928838954434, 0.5041046348766577] const y = [0.06439827631207162, 0.8441770694666793, 0.6813720832439308, 0.35060322424095514, 0.467048139705174, 0.620017287284704, 0.43537821196553583, 0.6101188972669156, 0.10748073863992014, 0.1533138955978588, 0.924650205508083, 0.8318203188022997, 0.41327132327091964, 0.32264726003151, 0.981510178301915, 0.5302127996786907, 0.18248359923337865, 0.4986798917953422, 0.9969050555031109, 0.3475448875799958, 0.4952059981669982, 0.5242979748824359, 0.39555263242199123, 0.07230858219753711, 0.7025945737378793, 0.6630819589030152, 0.5002874785404181, 0.34318587894609187, 0.8780836274864896, 0....

July 5, 2025 · K

plotly.jsのheatmapグラフ

<div id="plot"></div> <script> const x = [0.20403972570131645, 0.4916764106252982, 0.77931309554928] const y = [0.16395561645008805, 0.4571736709682602, 0.7503917254864324] const z = [ [0.0, 0.0, 1.0], [1.0, 0.0, 2.0], [2.0, 2.0, 2.0] ] const trace = { type: "heatmap", x: x, y: y, z: z, colorscale: "Viridis" } const layout = { title: {text: "heatmap sample"}, xaxis: { title: { text: "X", font: {size: 24} }, tickfont: {size: 24}, }, yaxis: { title: { text: "Y", font: {size: 24} }, tickfont: {size: 24}, }, } Plotly....

July 5, 2025 · K

plotly.jsのグラフをhugoに埋め込んでみる

https://misohena.jp/blog/2017-10-26-how-to-use-code-block-of-emacs-org-mode.html <div id="myplot" style="width:600px;height:400px;"></div> <script> Plotly.newPlot('myplot', [{ x: [1, 2, 3], y: [3, 1, 6], type: 'scatter' }]); </script>

July 5, 2025 · K

python chardetでエンコーディング(encoding)を判定する

課題 with open("textfile.txt", "r", encoding="sjis") as f: tmp = f.read() UnicodeEncodeError: 'shift_jis' codec can't encode character '\uff5e' in position 4807: illegal multibyte sequence というエラーが出て読み込みに失敗する場合がある。 原因 encoding の指定が適切でない。 解決 chardetでエンコーディングを判定する pythonの chardet というパッケージを使うとバイト列から文字コードを推定することができる。 まずはインストール。 python -m pip install chardet とりあえずバイトデータのまま読み込んで chardet で解析。 with open("textfile.txt", "rb") as f: bytestring = f.read() # バイト文字列 result = chardet.detect(bytestring) resultは {'encoding': 'utf-8', 'confidence': 0.99, 'language': ''} で99%の確率で utf-8 ということがわかる。 そうしたらバイト列をデコードする string = bytestring.decode(result["encoding"]) これで元の文字列を得ることができる。 文字コード この問題はoutlookの ....

April 15, 2025 · K

datatables ordering設定

ordering https://datatables.net/reference/option/ordering const table = $("#tableId").DataTable({ columns: [ { name: "link", data: "data_id", orderable: false, render: function(data, type, row, meta) { return '<a href="/{{request.blueprint}}/' + data + '/edit">Edit</a>'; } }, { name: "name", data: "name", title: "Name", }, { name: "position", data: "position", title: "Position", }, { name: "salary", data: "salary", title: "Salary", }, { name: "start_date", data: "start_date", title: "Start date", }, { name: "office", data: "office", title: "Office", }, { name: "extn", data: "extn", title: "Extn", }, ], ordering: true, }) デフォルト条件の設定 https://datatables....

March 17, 2025 · K

ubuntuでパーティションをマウントする

対象パーティションのUUIDを確認 sudo blkid /dev/nvme0n1p5: BLOCK_SIZE="512" UUID="F4F29332F292F856" TYPE="ntfs" PARTLABEL="Basic data partition" PARTUUID="844fb654-a7bf-44dd-affe-7fc5286b4b59" マウント先のディレクトリを作る sudo mkdir -p /mnt/data fstabにUUIDを追加して自動マウント設定をする sudo nano /etc/fstab UUID=F4F29332F292F856 /mnt/data ntfs defaults,nofail,uid=1000,gid=1000 0 0 を加える。 (必要なら)アンマウントする /media にマウントされている場合はアンマウントする必要がある。 sudo umount /media/usr/F4F29332F292F856 ターゲットがビジーのエラーが表示される場合 fuser コマンドでプロセスを確認 sudo fuser -m /media/usr/F4F29332F292F856 プロセスをキルする sudo kill -9 <processID> アンマウントする マウントする sudo mount -a fstabの変更を反映させる systemd を再読込 sudo systemctl daemon-reload エクスプローラーで開く アドレスバーに /mnt/data を入力

March 15, 2025 · K

datatablesのselect API

Download時にSELECTも含めておく。 初期化時に $("#table").DataTable({ select: true }) これは1つだけ選択する場合。 multi にすると複数選択できるようになる。 serverSideを使用しているときはrowIdも設定する データをサーバーから取ってくるようにしている場合は主キーに該当する列をrowIdに設定する必要がある。 $("#table").DataTable({ select: true, rowId: function(row) { return row["key"]; } }) これがないとリロード時にselectがリセットされてしまう。 (https://datatables.net/extensions/select/examples/initialisation/server-side-processing.html) 選択されたすべてのデータを取得する cumulative selectedIds = $("#table_id").DataTable().select.cumulative(); rowId のリストを取得できる event イベントも使用可能で、 // アイテムが選択された時 table.on('select', function (e, dt, type, indexes) { console.log('Items to be selected are now: ', type, indexes); if (type == "row") { var data = dt.rows(indexes).data().toArray(); console.log(data) } }); // アイテムが選択解除された時 table.on('deselect', function (e, dt, type, indexes) { console....

March 10, 2025 · K

datatablesのcolumnsオプション

例 const table = $("#tableId").DataTable({ columns: [ { name: "link", data: "data_id", orderable: false, render: function(data, type, row, meta) { return '<a href="/{{request.blueprint}}/' + data + '/edit">Edit</a>'; } }, { name: "name", data: "name", title: "Name", }, { name: "position", data: "position", title: "Position", }, { name: "salary", data: "salary", title: "Salary", }, { name: "start_date", data: "start_date", title: "Start date", }, { name: "office", data: "office", title: "Office", }, { name: "extn", data: "extn", title: "Extn", }, ], }) name 列の名前。普通は...

March 10, 2025 · K

datatablesのpaging処理

const table = $("#tableId").DataTable({ columns: [ { name: "link", data: "data_id", orderable: false, render: function(data, type, row, meta) { return '<a href="/{{request.blueprint}}/' + data + '/edit">Edit</a>'; } }, { name: "name", data: "name", title: "Name", }, { name: "position", data: "position", title: "Position", }, { name: "salary", data: "salary", title: "Salary", }, { name: "start_date", data: "start_date", title: "Start date", }, { name: "office", data: "office", title: "Office", }, { name: "extn", data: "extn", title: "Extn", }, ], paging: true, pageLength: 25, lengthMenu: [10, 25, 50, { label: 'All', value: -1 }] }) paging false の場合はすべてのデータがいっぺんに表示されるのでデータが多い場合は重くなってしまう。ただ、serverSide処理をしない限りは表示しようがしなかろうがすべてのデータを読み込むので重い場合はserverSideで処理すること。...

March 10, 2025 · K

datatablesのイベント処理

https://datatables.net/reference/event/?extn=autofill draw.dt https://datatables.net/reference/event/draw これはDataTablesが描画を完了したあとに実行される。 table.on('draw.dt', function() { var columns = table.columns().data(); var rows = table.rows().data(); }); functionは e と settings という引数を取れる。 settings というのは現在の DataTables の設定が読み込み専用の形ですべて登録されているオブジェクト(https://datatables.net/reference/type/DataTables.Settings)。 $.fn.dataTable.Api( selector ) で初期化(インスタンス化?)できる。 table.on('draw.dt', function(e, settings) { // initialize var api = new $.fn.dataTable.Api( settings ); const filteredData = api.rows( {search: "applied"} ).data().toArray(); if (settings._iRecordsTotal == filteredData.length) { console.log("フィルターはかかっていません"); } else { console.log("フィルターがかかっています"); } });

March 9, 2025 · K