3d.js(v5)で、グラブにラベル(テキスト)を追加する方法をご紹介します。 下記の散布図を使って、円にラベルを追加していきます。 HTML/JavaScriptサンプル <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> svg{ font: 10px sans-serif; background-color: #eee; text-align: right; padding: 3px; margin: 1px; color: #333; } </style> <script src="d3.min.js"></script> </head> <body> <script> // 1. データの準備 x座標,y座標,r半径 var dataset = [ [1, 4, 4], [2, 6, 4], [3, 11, 4
ウェブデザインやグラフィックデザインにおいて色の選択は非常に重要かつ難しい作業ですが、デザイナーでなくともグラフを作る際などに色の選択をする必要に迫られることがあります。データを分かりやすく可視化するためには、どのような色の組みあわせを選択すべきなのか、プロでなくともプロのようなグラフを作れるようになるポイントを、ビジュアルコミュニケーションを専門とするLisa Charlotte Rostさんがまとめています。 How to pick more beautiful colors for your data visualizations | Chartable https://blog.datawrapper.de/beautifulcolors/ ◆色相をあれこれピックアップしすぎない カラーホイール上の色を大別すると、赤・オレンジ・黄・緑・青・紫の6つの色相となりますが、データを可視化
【JS/ Python両方OK!】「データ可視化」が歴史から実装まで体系的に学べるStanford講座の独習ノートJavaScriptd3.jsデータ分析データサイエンスcolaboratory CS 448B Visualization (2020 Winter)は、Maneesh Agrawala氏による、Stanford大で行われた、データの可視化に関する体系的な講義です。 スタンフォード大の"CS 448B Visualization (2020 Winter)" がすごい。 データ可視化の体系的講義。どう図表に変換するかの理論、探索的データ分析、ネットワーク分析等の実践と盛り沢山。 スライドに加え、Observable(JavaScript), Colab(Python)どちらでも例を試せる。https://t.co/lGyPElrihg pic.twitter.com/mWZn
最新のスーパーコンピューターを使って、新型コロナウイルスの患者が病室でせきをした場合などに飛まつがどう広がるか、シミュレーションした動画を神戸市の理化学研究所が新たに発表しました。 エアコンを切った病室で仰向けになった患者4人が同時にせきをしたという想定では、小さな飛まつが天井に達したあと、仕切りのカーテンの隙間から部屋中に広がりました。 エアコンをつけて窓を開けていれば広がった飛まつは早い時間で薄まることが分かり、院内感染を防ぐためには換気の徹底が効果的だと分析しています。 机をはさんで4人が対面しているという想定では、マスクをつけずにせきをした場合に正面にいる人に飛まつがかかる一方で、隣や斜め前にいる人にはほとんど飛んでいかないことが分かったということです。 さらに湿度が高い場合は低い場合に比べて飛まつが蒸発せず机の上に残りやすいことが分かり、接触感染のリスクが高まるとしています。 坪
How Do Sectors Perform After the First Interest Rate Cut?
チャーリーです。 今回は「環境問題」の図解をしてみました。国立環境研究所さんと協働したプロジェクトです。「環境問題ってどうやって起こるの?なぜ起こるの?」みたいな疑問に少しでも答えようとしたものです。ふくざつで一見わかりにくくとっつきにくい環境問題を、共通のフォーマットで構造化して図解にすることで、より多くの人にわかりやすものにしたいという狙いがあります。 ここから図解です。 図解は以上です。 共通の「環境問題」の図解、問題別の「公害」「気候変動」「資源問題」を取り上げています。環境問題はとても複雑で、ここに書かれたようにシンプルに言えないことも多いため、どんな情報を載せ、どんな情報は省くか、判断に迷うことも多々ありましたが、国立環境研究所さんの専門的なアドバイスとディスカッションを経て、こうした形におさまりました。 図解としては、大きく3つのポイントがあります。 1. 共通化・すべての図
概要 先日、Unityの新機能であるVisual Effect Graph(VFX Graph)のプレスリリースが公開されました。 unity.com VFX Graphを使うことで、GPUを利用し、大量のパーティクルなどを効率的に描画できるようになるそうです。 Visual Effects Graphヤバい pic.twitter.com/h57g89qfzs— のたぐすECSキャット@cluster (@notargs) 2018年10月25日 使うための準備 リポジトリのクローン まず、gitにて、下記のリポジトリからScriptableRenderPipelineをcloneし、release/2018.3ブランチに移動します。 https://github.com/Unity-Technologies/ScriptableRenderPipeline/tree/vfx/2018.
Q:これは何の構造を表しているでしょう? グラフ理論 上の構造のように、頂点(ノードともいいます)の集まりと、2つの頂点をつなぐ辺(エッジともいいます)の集まりでできたもののことを「グラフ」あるいは「ネットワーク」と呼び*1、このような構造を研究する分野こそが「グラフ理論(Graph theory)」です。今回はそんなグラフを使うと、身近なものの新たな側面が見えてくる話。 (余談ですが「グラフ」という用語は、数学だと関数のグラフとか円グラフみたいなやつもあって検索精度が悪いです。グラフ理論に関してわからないことがあった場合に「グラフ ○○」や「グラフ理論 ○○」とググるよりも、「ネットワーク ○○」とググったほうが得たい情報にリーチしやすいというライフハックが知られています) さて、冒頭のグラフです。グラフ理論の知識なんかひとつもなくても、このグラフから読み取れることはいくつもあります。例
United States gun and firearm killing data visualization by Periscopic
Twitter Japanは、8月25日(月)に閉幕した第96回全国高校野球選手権大会のツイート分析をブログで公開しました。決勝戦に関するツイートが国内で盛り上がっていく様子を可視化した動画や、期間中にハッシュタグ「#高校野球」を付けて投稿された累計ツイート数、今大会で最もツイートが多かった試合のトップ5などを紹介しています。 ▽ 全国高校野球選手権大会を振り返って 決勝戦では、大阪代表の大阪桐蔭高校が三重代表の三重高校に4対3で勝利し、2年ぶり4回目の優勝を果たしました。Twitter Japanは激闘を繰り広げた両校にTwitterでも惜しみない拍手と歓声が送られたとして、決勝戦をはじめ、8月11日から8月25日まで開催された今大会をデータで振り返っています。 8月25日に行われた決勝戦については、午前11時から午後6時59分までに投稿された高校野球関連のツイートの盛り上がりを光のよう
PHPにはGDモジュールという画像処理系のモジュールが用意されています。これが入っていると画像処理•図形描画系の関数が使用する事ができ、基本的な機能は一通り用意されています。 例えばさくらのレンタルサーバーやロリポップでもこれらの関数を標準で使えたりするので、PHPでちょっとした画像処理や図形描画をする敷居は結構低いんじゃないかな、と思ってます。 軽くググってみた感じ、PHPでの図形描画やアニメーションについて紹介をしている記事があまり見つからなかりませんでした。恐らくあまり需要がないというのが理由なのだと思いますが、面白そうなのでサンプルを作りながら軽くPHPでのアニメーション表現について紹介してみようと思います。 前置き GDの関数は結構癖があります。単純にリサイズしたりする程度なら簡単に実装でき問題ありませんが、少し複雑な事をしようとすると、その癖を知っておく必要があり面倒です。 な
フラクタルを描く 樹木や、葉脈、稲妻など、自然界にある形の中には、同じ形(パターン)が小さくなりながら繰返され、全体として複雑な形を成しているものがあります。 自分自身の形はそのまま、大きさを変えたものが自己相似形です。自己相似形が小さくなりながら繰り返して生まれる形態を、1975年に数学者マンデルブローがフラクタルと呼びました。 左図はリアス式海岸線のようなコッホ曲線(線分を3分割しながら二等辺三角形を描く)、右図はシダのようなピタゴラスの木(直角三角形とその辺上の正方形からなる相似形)です。 自分自身が小さくなりながら、入れ子のように形作られるフラクタル図形を描くプログラムは、再帰関数と呼ばれる関数を使うとスマートに書けます。 まずは再帰関数を理解し、フラクタル図形を描いてみましょう。 再帰関数 再帰関数とは、その関数の中から、自分自身を呼出している関数で、自分自身を呼出すことを、再帰
どうも、kaminalyです。 以前に振り子の不思議を表現しようと思って、 「振り子のやつを作ってみた編」というメモを書いたのですが、 不完全のままフォウチプレイを楽しませていただいていました。 そんな事も忘れていたのですが、 今日vimeoをふらふらしていた時にたまたま見つけた空飛ぶスパゲッティモンスター教信者のmemoさんの動画を見て、 その理由がわかったかもなのでリベンジすることにした。 以前の振り子は 振り子 Pendulum - wonderfl build flash online 新しい振り子は forked from: 振り子 Pendulum - wonderfl build flash online 変わった事は、2点あります。1点は玉っころのスタート位置です。 以前はスタート位置を同じ角度の延長線上に置いていたのですが、 新しいのは、一番短い振り子の下に一直線で並ぶよ
The Point Cloud Library (PCL) is a standalone, large scale, open project for 2D/3D image and point cloud processing. PCL is released under the terms of the BSD license, and thus free for commercial and research use. Whether you’ve just discovered PCL or you’re a long time veteran, this page contains links to a set of resources that will help consolidate your knowledge on PCL and 3D processing. An
このサイトについて DERiVEはコンピュータビジョン、画像認識が専門のMasaki Hayashiがお送りしている、コンピュータビジョン(Computer Vision)を中心としたITエンジニア、研究向けのブログです。※「DERiVE メルマガ別館」は2015/9月で廃刊致しました、 「PCLを触ってみよう!」と題してPoint Cloud Library(PCL)という、フリーでオープンソースの3Dポイントクラウド(点群)データ処理をまとめたライブラリについて、シリーズで紹介していきたいと思います。 PCL - Point Cloud Libary http://pointclouds.org/ 私の研究室で使う人が出てきそうなので最近本格的にPCLを触り始めているのでこのブログでも紹介できるという流れではあるのですが、そもそもPCLはこの後述べるようにKinectの登場で要注目のラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く