タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Atomic Design思考でVue.js×Plotly.jsでのグラフComponentを実装した結果 - ABEJA Tech Blog
第0章：はじめに こんにちは。はじめまして。 ABEJAでフロントエンドとバックエンドをフラフラしているエンジニアの齋藤(@z-me)*1です。 本ブログは ABEJA Advent Calendar 2019 の9日目です。 不本意ながらABEJAで開催するフロントエンドのミートアップやカジュアル面談でよく、 ABEJAってAIの会社ってイメージはあるけどUI/UXガッチリやってるイメージがない。 と言われる事が多いので、当ブログ編集長*2が言っている通り*3、ABEJAではプロダクトを開発＆提供しているということをお伝えしたいと思います。 今回はその中でも、あまり外部に広く知られていない、ABEJA Insight for Retailの提供しているDashboardで、どのようにUI/UXに力を入れて開発しているのかや、その開発手法(Atomic Design)やグラフCompone
概要 OCRを使った文字読み取りの開発をしていると、読み取られたテキストと画像と見比べて結果の確認をすることがよくあります。読み取られたこの文字は画像のどこから出てきたのかとか、単語の区切りが不自然なときになぜそうなったのかとかといった確認の際には、テキストとその座標から画像中の該当箇所を見つける必要があり、人間が目視で行うにはなかなか大変な作業です。物体認識などのタスクでは、画像上に四角形のバウンディングボックスを物体名のラベルとともに描写して可視化していますが、OCRの読み取りの場合は文字が画像上で密に配置されていたりと、画像上に直接描写するには情報量が過多になってしまいます。なるべくインタラクティブに操作出来る形で情報を表示し、必要な部分だけを確認できるようにしたい場合が多いです。 この記事では、OCR読み取りの結果を画像上に描写して、インタラクティブに結果を確認する方法を紹介します
チャート描画ライブラリ『Plotly』をPythonで試す：インストール＆環境設定編 | DevelopersIO
データアナリティクス事業本部 サービスソリューション部 サービス開発部のしんやです。 ここまで色々な可視化におけるツールやサービスを個人的に触ってきましたが、何らかの言語でサクッとデータを可視化出来るライブラリとかないものかなーと思っていたところ、『Plotly』というプロダクトの存在を知りました。ザッと内容を確認してみたところとっつき易さと表現の幅の広さが良い感じっぽいぞ！ということで個人的にこのプロダクトを触っていってみようと思います。 ? Announcing Plotly.js 2.0! - Graphing Library / Plotly.js - Plotly Community Forum Webブラウザ上でグラフを描画できる「Plotly.js 2.0」がリリース：CodeZine（コードジン） 目次 Plotly 概要 Plotlyとは Dashとは 環境構築 導入環境
アニメウマ娘にハマったので，35年分の重賞[1]のレース結果をnetkeibaから取得した Plotlyでインタラクティブな散布図を描き，馬・タイトル・適性毎に分布を見てニヤニヤした 散布図に謎のクラスターが生じたが，1993年頃までの上りタイムの定義がわからず，原因解明に至らなかった 1993年頃まで一部のレースで上りタイムの計測方法が異なっていたことが原因と考えられる （長い記事なので，YouTubeの字幕をONにしてデモだけでもご覧頂けますと幸甚です） はじめに ウマ娘プリティーダービー（以下，ウマ娘）とはCygamesによるスマホ向けゲームを中心とするとメディアミックスコンテンツ[2]です．テレビアニメは2018年4月から6月まで第1期，2021年1月から3月まで第2期が放送されました．私は当時それどころではなかったこともありリアルタイムで視聴できませんでしたが，のちほど全話視聴し
GitHub - DonJayamanne/typescript-notebook: Run JavaScript and TypeScript in node.js within VS Code notebooks with excellent support for debugging, tensorflowjs visulizations, plotly, danfojs, etc
Enhanced REPL experience for Node.js in Notebooks (with top level awaits) Run & debug JavaScript, TypeScript code in node.js Built in support for typescript (ships with TypeScript & ts-node). Built in support for plotly (plotly.js is shipped with the extension) Rich (inline visualizations) using @tensorflow/tfjs-vis & Tensorboards Excellent support for danfo.js (rich HTML output and plots) Excelle
JSer.info #544 - React 18のα版のリリースとReact 18での変更予定についての記事が公開されています。 The Plan for React 18 – React Blog React 18のα版はライブラリのメンテナー向けで、これにあわせてReactのワーキンググループが作られています。 React 18の詳細な変更予定については、次のDiscussionsにまとめられて議論されています。 Discussions · reactwg/react-18 React 18の変更は基本的に ReactDOM.createRootという新しいAPIを使った場合のopt-in方式となっています。 全体的な概要は次のスレッドにまとめられています。 Introducing React 18 · Discussion #4 · reactwg/react-18 それぞれの変更
Pythonでネットワークグラフを描くならNetworkx + Plotlyが便利！ | 子育て×エンジニアの超自由研究ブログ
How to make Network Graphs in Python with Plotly. One examples of a network graph with NetworkX ここでは、例として以下の3ノードのネットワークグラフをNetworkxで定義します。 import networkx as nx G = nx.Graph() G.add_node(1) G.add_node(2) G.add_node(3) G.add_edge(1, 2) G.add_edge(2, 3) G.add_edge(1, 3)このネットワークグラフを、以下の図のように自動で瞬時に可視化することが目標です！ まず、注意してほしいのはPlotlyには直接ネットワークグラフを描写するメソッドは用意されていません。なので、以下のように、ネットワークグラフをノードとエッジの二つに分けて、後で重ね
Pythonの「Plotly」ライブラリで「ゴールデンクロス」「デッドクロス」を可視化する：「Python」×「株価データ」で学ぶデータ分析のいろは（4）（1/2 ページ） 日々変動する株価データを題材にPythonにおけるデータ分析のいろはを学んでいく本連載。第4回は株価の上昇、下落を示すゴールデンクロスとデッドクロスを描画させる方法を紹介します。
Pythonベースでインタラクティブなダッシュボードを作成するためのフレームワークの1つにStreamlitがあります。現在最も人気があるフレームワークはDashのようですが、下のグラフのようにGithub上では2020年以降Streamlitの人気が急激に伸びていることが分かります。 StreamlitはDashのように見た目の細かいカスタマイズができないという欠点がありますが、ある程度デフォルトの設定を受け入れることができれば非常に簡単にダッシュボードを作成することができます。今回はStreamlitとPlotlyでKaggleデータの特徴量とラベルを可視化するダッシュボードを作ります。 データとダッシュボード 今回はkaggleのtabular playground series Mar 2021のデータを使います。このデータは下表の通りサンプルidと19個のカテゴリカル変数(cat
年始は今後に関して考え行動する時期にあります。今年はコロナもあり、今後の住環境を考えていました。その際に、果たしてその街の将来人口は？と気になりました。住宅価格は市場あってのものなので、欲しい人が多ければ上がるし、逆も真なりです。そしてそれって人生で最も大きな投資だったりします。 将来人口気になる・・・とググってみたところ、国立社会保障・人口問題研究所という組織が2015年の国勢調査をもとに、2045年までの都道府県・市町村別の日本の地域別将来推計人口（平成30（2018）年推計・5年ごと、男女年齢（5歳）階級別）というデータを作られていることが分かりました（データソース）。 このデータはたくさんの市区町村の人口を推計されているそうです（原文: 推計の対象とした地域は、平成30（2018）年3月１日現在の１県（福島県）および1,798市区町村（東京23区（特別区）および12政令指定都市※の
Plotly.pyによるデータ可視化のすすめ7月にキャリア採用していただいて、早3ヶ月が経とうとしています 。Futureの人はみんな自分の知見を積極的に発信していて、自分も乗るしかないこの波にという気持ちで一本書きました。 現在業務でいわゆるビッグデータを扱っていまして、アウトプットを可視化する機会が多くあります。Pythonでデータ可視化といえばmatplotlibが定番で、メンバー単位でのアウトプット共有なら特に不便は無いのですが、顧客への説明資料などに使い回すことを考えると、もう少し見栄え良く仕上げたくなる時があります。しかし、matplotlibはデフォルト設定だと素っ気無いグラフになるので、そこから見栄えを良くしようとするとかなり手間がかかります。 plotlyはデフォルトで作成できるグラフが既に美しいので、誰でも手間なく見栄えのいいグラフを作成することができます。（もちろん見
plotlyで画像を簡単に分析してみます 環境 python==3.8 plotly==4.10.0 scikit-image==0.17.2 requests==2.24.0 Pillow==7.2.0 matplotlib==3.3.2 よくある画像の扱い まずpillowつかっていきます import matplotlib.pyplot as plt from PIL import Image import requests import io url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Crab_Nebula.jpg/240px-Crab_Nebula.jpg' img = Image.open(io.BytesIO(requests.get(url).content)) plt.figure(f
最近注目を集めているグラフツールPlotly。 久しぶりに調べてみれば、なんとベクター画像出力が追加されているじゃないですか！ これは論文用の作図もmatplotlibからPlotlyに移行できるぞ！ ということで、Plotlyの基本的な使い方を復習ついでにまとめてみました。 この記事では、Pythonからグラフを画像として保存する方法と、自分が資料用のグラフを作るときによく使うレイアウト調整の方法を紹介していきます。 スポンサーリンク ちなみに、以下の記事で紹介している小技を組み合わせればPlotlyの活用範囲がより広がるかなと思います。 興味があればこちらも読んでみてください。 kamino.hatenablog.com 執筆時のバージョン情報 Python : 3.7.2 plotly : 3.7.0 orca : 1.2.1 psutil : 5.5.0 もくじ 1. ツールのイン
こんにちは、機械学習の講師をしている木下です！ ビックデータ自体の今、時系列データが多く取得できるようになっています。しかし、時系列データは分析・可視化・解釈が難しく、多くの人の頭を悩ませています。 多くの人が用いているのが、Prophet という非常に便利なライブラリです！Prophet を用いると簡単に分析できるのですが、その後の解釈や可視化の難しさはまだ課題として残っています。 ここでは、そんな時に便利なライブラリ plotly について Google Colaboratory を用いて初学者向けに解説していきます。
はじめに 株式市場は気まぐれで、よく変化します。人間は歴史の中で雄牛を飼い慣らそうとしてきたが、決して成功しなかった。株式市場の予測が難しいのは、あまりにも多くの要因が絡み合っているからであり、そのような分散を考慮したモデルを作成することはほとんど不可能です。しかし、近年の機械学習やコンピューティングの進歩により、機械が大量のデータを処理できるようになりました。これにより、過去の証券取引所のデータを利用し、トレンドを分析することができるようになります。この記事では、pythonとGridDBを活用して、Googleの過去1年間の株価データを分析します。 株価は毎日保存されます。そのため、日々の株価データは非常に大きくなります。データを保存するデータベースとして、大規模なデータセットをうまく扱えることで知られているGridDBを使用します。GridDBは、スケーラブルで信頼性が高いと同時に、
時系列をグリグリしていきます 環境 python==3.8 plotly==4.10.0 plotlyを使った時系列の可視化 時系列データは前処理も大変ですが、綺麗な可視化も同じように大変です 時系列の可視化ではおかしなピークがあると、 ・それが何月何日のことだったのか ・異常ならその時のコメントを参照できないか ・もう少しスケールを拡大したり、変化させられないか というリクエストが発生します そのたびにソースデータ側を見に行くのは大変ですが、plotlyの動的な可視化ならば その時点が何月何日なのかを特定することも簡単ですし 特定の期間に絞る、半年オーダーだけに拡大することも可能です まずline plot plotlyのラインplotをつかってみる import plotly.express as px fig = px.line(x=[1,2,3,4,5], y=[10,11,15,
アイドルマスター ミリオンライブ！の呼称表をplotlyでインタラクティブに可視化 - ML^2
アイドルマスター ミリオンライブ！ 呼称表（β） 2020-06-01追記 plotlyのグラフは動作が重かったのでJava Scriptで実装しなおした． ミリシタ呼称表（β） pythonのplotlyでインタラクティブな呼称表を作った． アイドル同士の組合せを示す52x52のグリッド上をマウスオーバー（タブレットやスマホ*1の場合はタップ）すると呼称が吹き出しで表示される． グリッドは以下の分類で色分けしている． 青色：姓＋さん（例．二階堂さん） 紫色：名＋さん（例．千鶴さん） 水色：名＋ちゃん（例．千鶴ちゃん） 緑色：名（例．千鶴） 桃色：愛称（例．ちづるん） 茶色：敬称（例．千鶴お嬢さん） 白色：一人称などのプロフィール情報 灰色：未定義 周りと違う色のグリッドを確認してみると面白い． 呼称の記載にあたっては以下のサイトの情報を参考にした． グリマス日和 呼称まとめ ニコニコ大百
Python Interactive Network Visualization Using NetworkX, Plotly, and Dash
They say a graph is more than a thousand words. I totally agree with it. I would prefer to look at a network graph, rather than reading through lengthy documents, to understand a complicated network pattern. This post is about a Python interactive network visualization application. In the first half, it covers the network visualization application features and a introduction of the tools I used fo
plotly備忘録 - Qiita
df = pd.read_csv('https://raw.githubusercontent.com/jbrownlee/Datasets/master/daily-total-female-births.csv') df['Births2'] = df['Births'] + np.random.normal(0, df['Births'].std(), [len(df)]).astype(int) df['Births3'] = df['Births'] + np.random.normal(0, df['Births'].std() * 2, [len(df)]).astype(int) df = df.loc[:50, :]
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Plotlyで動かせる、数値を表示できる、2次元と3次元を切り替えられるグラフを作る Plotlyで動かせる、数値を表示できる、2次元と3次元を切り替えられるグラフを作る 1. はじめに 2. コード 3. 説明 3.1 前準備 3.2 グラフの作成 3.2 図の変更 3.3 色の変更 4. おすすめ参考書 1. はじめに これまでPythonでグラフを作るときはMatplotlibを利用していましたが、最近はPlotlyというライブラリを利用する事が多くなりました。PlotlyはMatplotlibと比べて、 ・そこまで有名でないため日本語の情報量が少ない ・Tkinterなど他ライブラリとの連携が劣っている などのデメリットがありますが、 ・マウスで自由に動かせる3次元グラフが作れる ・グラフにマウスを近づけるとその点の値をリアルタイムで表示できる ・ボタンやスライダーを使ってグラフの
<head> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head> <body> <img src="img/ex1.png"> <div id="myDiv"><!-- ここにグラフを表示する --></div> <script> var data = [{ values: [19, 26, 55], labels: ['Residential', 'Non-Residential', 'Utility'], type: 'pie' }]; var layout = { height: 400, width: 500 }; Plotly.newPlot('myDiv', data, layout); </script> </body>
はじめに この記事では、インタラクティブなグラフを簡単に描画できるOSSのライブラリ plotly.jsについて取り扱います。本記事の内容はJavaScriptについてですが、PlotlyはPython、R、MATLAB、Juliaなどでも利用することが出来ます。 https://plot.ly/ Plotlyの強み Plotly以外にもOSSで完成度の高い可視化ライブラリは多数あります。 Highchart Charts.js Recharts (for react) c3.js etc... Plotlyのメリットは個人的にこのあたりかと思っています。 図を直接変更可能 細かい設定項目 画像エクスポート 他のライブラリでも軸のスケールをカーソル操作で変更できたりするようなものはあります。Plotlyはそれ加え、アノテーションの編集や移動など、より高度なインタラクティブ性を提供しています
1. はじめに Python のプロットツールとして、matplotlib の代わりに、下の図のようなブラウザ上でぐりぐりと操作できる Plotly が便利で使うことが多いのですが、 大容量データを一度にプロットすると、非常に重くなるのが気になっていました。 これまで描画のときだけデータを粗くするなど工夫してきたのですが、毎回大変なので、なにか便利なものはないかなーと探していたら、よいカスタムライブラリを見つけたので、この記事で紹介したいと思います！ 2. 通常のプロットサンプル まず、比較のために、1000万のサンプルデータを作成して、通常の方法で Plotly でプロットしてみます。 コードはこちらです。 import pandas as pd import numpy as np from plotly.subplots import make_subplots import plo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Python&Plotlyを使って、OCR結果を画像上でインタラクティブに可視化する
ウマ娘にハマったので35年分のレース結果をPlotlyで散布図にした
2021-06-15のJS: React 18 αリリース、Deno 1.11(Docker Images)、Plotly.js 2.0
Pythonの「Plotly」ライブラリで「ゴールデンクロス」「デッドクロス」を可視化する
【Python】 StreamlitとPlotlyでダッシュボードを作成する方法
住処探しのために、Plotly/Dashでみる私の町の将来人口 - Qiita
Plotly.pyによるデータ可視化のすすめ | フューチャー技術ブログ
【plotlyで画像分析いろいろ】plotlyで動的な可視化をする【python,画像】 - Qiita
Plotlyでレポート・論文に使えるグラフを描こう - かみのメモ
【Python 入門】Prophet を使った時系列データ分析と Plotly による可視化！
Python Pandas, Plotly, GridDBによる株式市場分析 - Qiita
【plotlyで時系列】plotlyで動的な可視化をする【python,株価】 - Qiita
Webブラウザ上でグラフを描画できる「Plotly.js 2.0」がリリース
PythonのPlotlyでカッコいい3次元グラフを描く - 機械系エンジニアの備忘録
Plotly.jsに入門した - Qiita
plotly.jsでインタラクティブなグラフを描画する - Qiita
大容量データもサクサク動くPlotly！「plotly-resampler」で楽々高速化！ - Qiita
www.kobonemi.com
www.trial-net.co.jp
hajimete-sangokushi.com
ameblo.jp/winningticket-2025
www.itmedia.co.jp
note.com/kinma