Gio.jsを使って地球儀を表示してみた話
はじめに 前々から気になっていたGio.jsを使ってみました。 技術記事というよりは感想やメモの記事になります。 Gio.jsとは Gio.jsは、Three.jsで構築されたWeb3Dグローブデータ視覚化用のオープンソースライブラリです。Gio.jsの違いは、Gio.jsを使用して、宣言的な方法で3Dデータ視覚化モデルをカスタマイズし、独自のデータを追加して、それを独自の最新のWebアプリケーションに統合するのが簡単なことです。 (Gio.js READMEの翻訳を引用) 文章だとイメージが掴みづらいですが、要するに地球儀の3Dモデルを表示できます。 またデータを登録することでデータを地球儀上で可視化できるので、以下画像のような地球儀の表示ができます。 Gio.jsの特徴 Gio.jsは以下の3点を特徴として挙げています。 ①導入のシンプル性 最低4行のJavaScriptコードで3Dの
大規模グラフデータの可視化：Cosmographの紹介
テラーノベルで機械学習を中心に担当している川尻です。最近、グラフニューラルネットワーク(GNN)に注目しており、サーベイや検証をしております。以前にも以下の記事を書きました。 複雑なアルゴリズムを適用する前に、当たりをつけたり、結果を確認したりするためには、可視化が重要です。本記事では、いくつかあるグラフの可視化ツールの中でも、大規模なネットワークでも簡単に使えるCosmographを紹介し、テラーノベルのデータを使って可視化してみます。 Cosmographとは グラフデータを可視化するツールはたくさんありますが、もっとも有名なのはgrapgvizです。graphvizにはsfdp[1]という大規模なデータに対応したアルゴリズムが用意されていますが、ノード数が10k以上のような大規模なグラフになると計算時間もかなりかかって、パラメータ調整も大変になります。 Cosmographは、Web
D3.jsと学ぶVisualization（可視化）の世界
CAジャーナルクラブ Dremel: Interactive Analysis of Web-Scale Datasets
高速 scatter plot 描画（apache-arrow + regl 利用） - Qiita
こんにちは。 apache-arrow (IPC) データをプロットしました1。データ (columnar typed array) を取得しそのまま regl の WebGL バッファーへ書き込むことにより高速描画を行なっています。 この例のデータの取得（ダウンロード）進行中は、データは逐次分割されて取得され（10,000行単位）、その都度、データを追加して描画しています（ストリーム型処理）。 ただし、データの取得自体はネットワークを通したダウンロードなので高速ではありません2 3。 ソースおよび実行例はこちら、 regl + apache-arrow: fast WebGL scatter plot (bl.ocks.org) 参考：Efficiently loading massive D3 datasets using Apache Arrow (Chris Price, scot
nuxt-coreuiでデータサイエンスの可視化ダッシュボードを自作してみる - Lean Baseball
このエントリーは、Vue.js #3 Advent Calendar 2018アドベントカレンダー初日の記事です. 開幕投手をつとめます、@shinyorkeと申します. この記事では、「データサイエンスもいいけど自前で可視化ダッシュボード作ると面白いぞ！」っていうテーマで、 nuxt-core-ui vue-chartjs で実際作った時の勘どころやノウハウを紹介します. TL;DR データサイエンスに必要なダッシュボードを作りたくなったらnuxt-core-uiを使おうぜ！ nuxt-core-uiのグラフの動的更新はvue-chartjsのmixins.reactivePropで、API（データ）の呼び出しは普通にaxiosでやろう オレオレ分析基盤は作ると楽しい 完成イメージ データ（DBとか、何でもいい）をグラフで可視化する、Redash（の簡易版）っぽいダッシュボードの雛形をn
D3.js v4/v5 折れ線グラフ/散布図補完 種類一覧 – データビジュアライゼーション・ラボ
D3の折れ線グラフの種類を紹介します。基本的な折れ線グラフの作り方の詳細はこちらに記載しています。 基本の折れ線グラフを表示するプログラムは下記です。 基本の折れ線グラフ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Line Plot</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <script> // 1. データの準備 var dataset = [ [5, 20], [25, 67], [85, 50], [150, 70], [220, 88], [250, 50], [330, 95], [410, 12], [475, 44], [480, 90] ]; var width = 800; /
D3.js v4 の Hierarchical Edge Bundling を理解する(1) - # cat /var/log/stereocat | tail -n3
はじめに 最近、某プロジェクト用の補助ツールとかを作るために D3.js - Data-Driven Documents を触ってるんですね。で、Hierarchical Edge Bundling - bl.ocks.org みたいなのを描きたいなあとおもったんですが、壁がありまして。 そもそもこのサンプルスクリプト自体が(自分にとっては)複雑で何をやっているのかわからない… もともと javascript 自体ほとんど描いたことがない状態から始めているので、ますますわからない。この辺はちょっとは勉強したつもりですが、言語仕様とかについての理解はまだ曖昧なところがあります。なので、この記事の中で使われている用語やそもそもの理解について、不適切なものがあったり誤りがあったりする可能性があります。 D3.js v4 になったら (2016/6月) いろいろ変わったところがあって、過去のサンプ
SVGとD3.jsの入門まとめ - Qiita
最近勉強し始めたので、備忘録も兼ねてSVGやD3.jsなどの全体的且つ基本的なところを浅く広く触れます。 SVGとは Scalable Vector Graphicsの略。普通のビットマップ画像と比べて、拡大しても荒れたりしません。 その代わりに小さい画像で凄い複雑な構造になっていると、負荷が高くなったりします。 IE9以前だとSVG自体やフィルターなどの機能が使えなかったりするので、どうしても古いブラウザまでサポートしないといけない場合は諦めて普通にビットマップ画像を利用します。 D3.jsとは SVG含めたHTML上でのビジュアライズやインタラクティブな処理・アニメーションが色々できるjsのライブラリ。 シンプルな記述で凝った表現のものが作れます。インタラクティブなグラフ（プロット）を作ったりなどに使われます。 2019年1月現在、githubのリポジトリにおけるスター数が8万を超えて
d3.jsでParticleをSVGのPath上で動かす - Qiita
version d3.jsのversionは4.1.0です。 Code 今回使用した全コード demo demo: "d3jsはこういうこともできるっぽいw 使い道はわからない😇 ・参考 これをversion4の書き方にして、いろいろいじってみました。 Point-Along-Path Interpolation - bl.ocks.org ランダムの座標 SVG全体の大きさを定義 this.margin = {top: 10, right: 10, bottom: 0, left: 0}; this.width = window.innerWidth - this.margin.left - this.margin.right, this.height = window.innerHeight - this.margin.top - this.margin.bottom;
D3.js v5 カラーテーマまとめ (d3-scale-chromatic) – データビジュアライゼーション・ラボ
2018-03-032018-03-10 D3のv5から追加されたカラーテーマです。 v4でもHTMLファイルのヘッダーに下記を追加して呼び出すと使うことができます。 <script src="https://d3js.org/d3-interpolate.v1.min.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
D3.js v4/v5 force simulation 最小構成 – サンプル – データビジュアライゼーション・ラボ
2018-02-022018-03-31 D3 forceSimulationのプログラムデモです。 forceSimulationの最も簡単な構成のプログラムを紹介します。はじめてforceSimulationを使う際などに活用ください。 サンプルデモ – ノードをドラッグしてください。 D3.jsのforceSimulationは、ノードの位置をばね力などを考慮して計算するものです。v3以前ではforce layoutとして定義されていて、同じ関数が使えないので書き換える必要があります。設定できるパラメータがいくつもありますが、ここではまず導入できることを目指して最小構成のデモとプログラムを解説します。 サンプルコード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 v5 force simulation</
amCharts: customizable free flash charts
JavaScript Charts & Maps Programming library for all your data visualization needs. Readme.md Came here to find your next charting library? Good. Our charts were designed to feel modern, sleek and fast, out-of-the box. But don’t take our word for it – check out our demos and fall in love. And best of all, our libs natively integrate with TypeScript, Angular, React, Vue and plain JavaScript apps. S
[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ
![[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts](https://cdn-ak-scissors.b.st-hatena.com/image/square/b793c623eb3187e192351b9611f75aea908bbf46/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080101-02.png)
Smooth Pie Chart Transitions with D3.js
Hey, so this post is broken. I moved platforms and some of my old tutorials don’t play nicely with WordPress. I’m working on fixing them, but in the meantime you can view the old version here: https://cagrimmett-jekyll.s3.amazonaws.com/til/2016/08/27/d3-transitions.html Part 1: Let’s Make a Pie Chart with D3.js Part 2: Let’s Update a Pie Chart in Realtime with D3.js Part 3: Smooth Pie Chart Transi
D3.js v4/v5 アニメ―ション使い方 エフェクト一覧(transition, ease) – データビジュアライゼーション・ラボ
D3のアニメーション用API、transitionと一緒に用いるeaseを紹介します。D3でのアニメーションの設定は下記です。 d3.select("circle") .transition() .duration(750) .attr("cx", 500);この設定では、選択した”circle”がcx=500の位置に750ミリ秒かけて移動します。D3のメソッドeaseを用いるとエフェクトを変更することができます。 d3.select("circle") .transition() .duration(750) .ease(d3.easeBounceInOut) .attr("cx", 500);d3.easeBounceInOutはエフェクトを変化させるための関数で、次の種類が用意されています。サンプルとしてcircleに時間変化のアニメーションを、グラフに時間と変化量の関係を表示します
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「モダンな」可視化アプリケーション開発とはどのようなものか？
JSのProxyでアルゴリズムを可視化する - Qiita
SVG animation to video
Curved Links
Realtime tSNE Visualizations with TensorFlow.js
