Leaflet — an open-source JavaScript library for interactive maps
an open-source JavaScript library for mobile-friendly interactive maps Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can b
GitHub - mrdoob/three.js: JavaScript 3D Library.
import * as THREE from 'three'; const width = window.innerWidth, height = window.innerHeight; // init const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add
C3.js | D3-based reusable chart library
Comfortable C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. Customizable C3 gives some classes to each element when generating, so you can define a custom style by the class and it's possible to extend the structure directly by D3. Controllable C3 provides a variety of APIs and callbacks to access th
Cytoscape.js
Introduction Factsheet A fully featured graph library written in pure JS Permissive open source license (MIT) for the core Cytoscape.js library and all first-party extensions Used in commercial projects and open-source projects in production Designed for users first, for both frontfacing app usecases and developer usecases Highly optimised Compatible with All modern browsers Legacy browsers with E
Cubism.js
Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube and other sources. Cubism is available under the Apache License on GitHub. Scalable Cubism fetches time series data incrementally: after the initial display, Cubism reduces server load by polling only the most recent values. Cubism renders incrementally, too, u
リアルタイムにスムーズなグラフを描く·Smoothie Charts MOONGIFT
Smoothie ChartsはJavaScript製のオープンソース・ソフトウェア。Web上でのグラフ描画に対するニーズは多い。常時固定であれば画像でも良いだろうが、システムの値を使う場合は何らかのグラフ描画ライブラリを使うことになる。 複数グラフ同時描画も可能 さらにアクセスの度にレンダリングして終わる場合もあるが、刻々と変化するデータを常時アップデートしていくグラフもある。そんなリアルタイムに変化するグラフを必要とするならばSmoothie Chartsを使ってみよう。 Smoothie Chartsはリアルタイムに変化するデータをスムーズに描画していくライブラリだ。一つに限らず複数の線を同一グラフ内に描画することができる。例えばシステムのモニタリングであったり、アクセス数の変化などを追うのに使えそうだ。 canvasタグを使っているため、対応していないブラウザでは表示できないのが欠
表示位置をいい感じに調整してくれるネットワークグラフ·Springy MOONGIFT
Springyはネットワークグラフにおいてノード同士の表示を自動的に調整してくれるライブラリです。 オブジェクト同士の関連性からトレンドを見いだすのに使われるネットワーク図。そんなネットワーク図の表示において多数のオブジェクトが重なってしまう…といった時にはSpringyを使ってみましょう。 デモです。関連性が適切に見えます。この位置まで自動で調整されるのがSpringyの特徴です。 向きが変わったとしても大丈夫。 こんな感じに交わっていたとしても… 最終的にちゃんと調整されます。 Springyはこのレイアウトを決定するアルゴリズムを備えています。パラメータを自分で調整することもできますが、かなり高いレベルで表示が調整されるので殆どデフォルトのままで問題ないのではないでしょうか。 SpringyはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOO
JavaScriptを使ってSVGでグラフを描く·Morris.js MOONGIFT
Morris.jsはjQueryを使ったSVG描画型のグラフライブラリです。 Webブラウザ上でグラフを描画しようと思ったら従来はサーバサイドの仕組みかFlashを使うのが一般的でした。しかし今後はJavaScriptが便利です。Morris.jsはjQueryを使ったグラフライブラリです。 二つのデータがある折れ線グラフ。 棒グラフ。 エリアグラフ。 パイチャート。 今のところ対応しているのは折れ線、棒、エリア、ドーナッツチャートになっています。それぞれ豊富なオプションが用意されています。また、マウスオーバーで値をフローティング表示してくれるのも便利です。データはJavaScriptで与えますが、グラフはSVGで出力される仕組みになっています。 Morris.jsはjQuery/JavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
オブジェクト同士の関連性から価値を見いだそう·VivaGraphJS MOONGIFT
VivaGraphJSはオブジェクト同士の関連性をビジュアル化するJavaScriptライブラリです。 最近はソーシャルサービスが流行です。そこで求められるのはユーザまたはオブジェクト間の繋がりになります。それをビジュアル化するのに使えるライブラリがVivaGraphJSです。 Amazonの関連書籍をたどっていくグラフです。 書籍をクリックすると詳細が表示されます。 YouTube版。ノードをクリックするとその場で動画の再生ができます。 Facebookの友達情報の可視化です。 表示方式も様々にあります。大量の情報だとレンダリングが重たいのが難点ですが、インパクトがあります。 より表示したい情報に合わせたアクションを選んでみてください。 こんな密集するパターンも。 VivaGraphJSの使い方はシンプルで、ノードとなるオブジェクトを追加していった後、ノード間のつながりをリンクとして追加
HTMLテーブルの内容からグラフを描画·AttC MOONGIFT
AttCはHTMLテーブルのデータをGoogleチャートを使ってグラフ化するソフトウェアです。 数値データを表示する際に最も簡単なのは一覧表で表示することです。HTMLで言えばテーブルタグで表示するのが一番簡単でしょう。しかしそれではデータの傾向が分かりづらい…そう思ったならAttCを使ってみましょう。HTMLテーブルのデータからグラフを作成してくれます。 こちらはパイチャート。 データを表示しました。 選択肢を変えればリアルタイムにグラフが変わります。 棒グラフ。 エリアグラフ。 折れ線グラフ。 AttCが使っているのはGoogleチャートAPIです。テーブルデータを読み取って、円グラフ、棒グラフ、エリアグラフ、折れ線グラフを表示してくれます。クリックだけでグラフの種類や表示項目を変更できるので、どのグラフで表示すべきか色々テストしてみるというのにも使えそうです。 AttCはHTML/J
Web上でヒートマップを簡単に実現するHTML5/JavaScriptライブラリ「heatmap.js」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
heatmap.jsはWebベースのヒートマップ表示ライブラリ。 heatmap.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。グラフには様々な種類があるが、とりわけ作るのが難しそうなグラフにヒートマップがある。一定の範囲における影響度を表現したり、ユーザの動きを可視化するのに使われたりする。 デモ 動線を可視化することによってサイトの流れを変えたり、店の商品配置を変えるデータにもなりえる。そんなヒートマップを表示するためのライブラリがheatmap.jsだ。 heatmap.jsはWebブラウザ上で指定した範囲（画像など）の上にヒートマップを表示するライブラリだ。マウスの動きに合わせたり、クリックでヒートマップデータを作ることが出来る。クリック場所をトラッキングしておけば、元データを集積することができるだろう。 地図との組み合わせ 画像だけでなく、地図の上にレイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - domitry/elegans: Elegant 3D plots generator with WebGL.
GitHub - d3/d3: Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
実践! D3.jsで可視化入門
Reactive Charts with D3 and Reactive.js — Engineering Blog - Wealthfront
Interactive charting library | Highcharts