Flotでグラフ作成 時系列のグラフ | Arti
続いて、時系列のグラフを作成してみます。 時間データは1970/1/1からのミリ秒で表現します。 UNIX時間とかエポックミリ秒といわれるやつです。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Basic Linechart</title> <!-- 必要なライブラリのインポート --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/flot/jquery.flot.min.js">
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
Highcharts - Interactive Charting Library for Developers
Our core library. Includes all standard chart types and more.
jsとcanvasでグラフの描画(力学モデル)を実装した
こんにちは。 今回は、力学モデル (グラフ描画アルゴリズム) – Wikipediaというグラフを描画するための面白いアルゴリズムを見つけたので、 こいつをJavaScript(CoffeeScript)とcanvasで実装してみました。 動作デモ まずはこちらを御覧ください。 ５つの丸が、ふわふわ動いてバランス良い配置になると思います。 用語の整理 まず、グラフとは、折れ線グラフや円グラフのようなものではありません。 頂点と辺の集合で構成されている方のグラフです。 グラフ理論 – Wikipedia グラフとは、↑のグラフのことで、 グラフの頂点のことをノード ノードの点と点を繋ぐ辺をエッジと呼びます。 基本的な理論のおさらい 力学モデルのWikiに書いてある通りですが、少し噛み砕いてみます。 まず、ノードの座標決定には **クーロンの法則とフックの法則**という法則が絡んできます。 ど
Sheetsee.js
Sheetsee.js is a client-side library for connecting Google Spreadsheets to a website and visualizing the information in tables and maps. Spreadsheets!? Google Spreadsheets can be used as simple and collaborative databases, they make getting a data driven site going much easier than traditional databases. Read more about using spreadsheets for databases. Modules Each of Sheetsee's functions are div
Web上でインタラクティブな図を描く·JointJS MOONGIFT
JointJSはJavaScript製のオープンソース・ソフトウェア（Mozilla Public License）です。 Web上で図を表示したいと思うことは多々あります。そんな時に画像を使うのは最も知られた方法ですが、再利用性や修正コストが大きくなります。図にもよりますが、JointJSがカバーできる範囲は大きいのではないでしょうか。 こんな複雑な図の描画も行えます。 マウスオーバーで線の削除ができます。 線のポイントを変更して曲がり方を変えることもできます。 組織図。こちらも移動ができます。 ER図。リレーションの関係も表せています。 DEVSの図とのこと。 チェス。オブジェクトの動きはチェス盤上に固定されます。 アニメーション付きの図です。 リンクの表現も多様です。 UMLのクラス図。 ステートチャート図。 JointJSでは多様な図を描くことができます。図はドラッグして動かすこと
GitHubのアクティビティカレンダー風表示·Cal-HeatMap MOONGIFT
Cal-HeatMapはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 GitHubの活動によって色が変わるヒートマップはプログラマの間で人気があります。同じような表示を行うJavaScriptライブラリがCal-HeatMapです。 デモです。それっぽい表示が出来ています。 開始日を指定する事もできます。 年月だけの表示。 日付ごとの小さな表示版。 二ヶ月分表示。 カラーリングを変えられます。 月によって変更もできます。 Cal-HeatMapはある日付における状態に応じて色を変えるのが面白いところです。中長期的に取得しているデータがあれば、そのJSONをCal-HeatMapで見てみると面白い見せ方ができそうです。 MOONGIFTはこう見る Webサービスの数多くは今、または未来における行動に関するデータだけを見せます。そして過去については大して
CreativeJS
Two CreativeJS workshops are back and updated. The first, CreativeJS for Designers is aimed at creative people who have never done any JavaScript programming. I learned to code by drawing pictures and animating stuff, and it’s seriously fun – the … Continue reading → @oosmoxiecode has released this lovely C64 styled post-processing WebGL shader. Seen running on-top of a trailer for the forthcoming
【D3.js + node.js】 ブログのデータをGithub風のカレンダーに表示する
example WordPressもくもく勉強会@群馬 #1で作成したものです。 サンプルコードが公開されているのでそれを元に作成しました。 Githubのカレンダー表示機能はD3.jsで作成されているのですが、そのBlog版のようなものです。 ↓これ 色がついているセルが記事を描いた日、同じ日に書いた記事が多いほど濃い緑色で表示されるようになってます。 セルにマウスオーバーすると記事のタイトルが表示されクリックするとその日のブログ記事へ飛びます。 カレンダーにしてみると、ブログ記事を頑張って書いた月とそうでもない月が一瞥できてなかなか面白いですね。 データセットの作成 WordPressのダッシュボードから「ツール→エクスポート」を選択し、投稿記事をエクスポートします。 エクスポートしたxmlファイルをnode.jsを使ってjsonに変換しました。 変換スクリプトは、以前RSSリーダーを
WebGLを利用して3Dな地図を作成できるライブラリ「Cesium」
Cesium はApache 2.0ライセンスの下、オープンソースとして作成された3D地図作成ライブラリです。 ハードウェアアクセラレーショングラフィックスにWebGLを使用しており、クロスプラットフォーム、クロスブラウザで、動的なデータ可視化を行うのに利用することができます。 公式サイトのデモなどを見ると、その性能の高さを感じることができます。 (以下スクリーンショット、公式サイトより） ほんの少しだけ触ってみました。 サンプルコード ぐんまちゃんを群馬に貼り付けてみました。 //セシウムウィジェットを作成 var widget = new Cesium.CesiumWidget('cesiumContainer'); //イメージレイヤーを取得 var layers = widget.centralBody.getImageryLayers(); //イメージレイヤにぐんまちゃん画像を
D3.jsで再利用可能なコードの書き方を教えてくれる参考書
Developing a D3.js Edge D3.jsを取り扱った参考書としては、「Getting Started with D3（D3をはじめよう）」や「Interactive Data Visualization for the Web」、「D3 Tips and Tricks」などがありますが、「Developing a D3.js Edge」は、一連の参考書より深く踏み込んだ内容となっています。 本書の概要は以下となります。 再利用可能なD3プラグインの作成 Jasmineを用いてのユニットテストやTDD/BDD Crossfilter.jsとD3.jsの連動 アプリケーションへブラッシングを組み込む 地図APIの作成 最終的に以下のような、円形のヒストグラム図と地図が連動するビジュアライゼーションを再利用可能なプラグイン(オリジナルなグラフレイアウト)として作成します。 現時
データを可視化する 20 のツール - 旧・私と私の猫の他は誰でも隠し事を持っている
海外サイトで「The top 20 data visualisation tools」という記事を見かけたのですが、可視化はかねてから興味を持ち続けているテーマなので、紹介も兼ねて大雑把に纏めておきます。英語は得意じゃないので若干主観を交えた超訳ですけどw 入門者用ツール 1. Excel 初心者レベルならツールは使い慣れたものを使うのが一番。Excel って結構複雑なこともできるんですよ。温度一覧表のセルに色付けして分散図っぽくするとか。人様向けに Web 公開するって訳でもなけりゃ、スピーディにデータ加工できるツールを選ぶべきかと。もし持っていなかったら、Google Docs のスプレッドシートを使うのもいいでしょう。 http://www.netmagazine.com/features/top-20-data-visualisation-tools 2. CSV/JSON 可視化
可視化周辺の進化がヤヴァイ～rChartsを中心として～
TDD bootcamp 札幌2.0 http://atnd.org/events/15811 の自己紹介で使った資料です。
D3.js と SVG によるデータビジュアライゼーション
CAジャーナルクラブ Dremel: Interactive Analysis of Web-Scale DatasetsNaoyuki Yamada
Silk – Interactive Generative Art
Silk was made by Yuri Vishnevsky, with music and sound crafted by Mat Jarvis. Art shared with Silk is licensed under Creative Commons. If you enjoyed Silk, please let me know! ✨ It's 2024 and I’m working on a new Silk. Is there anything you'd like to see? Call or text me at ☎ (415) 671-6855 If I don't reply I might be asleep, so feel free to leave a message. Double-click the ? (top right) to remov
FOSS4G 2018 - Dar es Salaam, Tanzania
Community Program Review The community and conference registrants will have an opportunity to read through and score potential presentations prior to the selection of the final conference program. There is enough room in the conference schedule for about 144 presentations. The conference committee will use the aggregate scores from the community review process to help choose which presentations to
arbor.js
about arbor Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling. It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whate
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Paper.js
WEBSITE.WS - Your Internet Address For Life™
GitHub - raphv/gexf-js: A JavaScript GEXF viewer
