deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets.

プレゼン資料を作っている時に「このコミットグラフをMarkdownかテキストで書けたらな」と思ったことがある人、結構いるのではないでしょうか。 GitGraph.js を使うと、JavaScriptで記述したコミットログをcanvasを使って可視化できることを知りました。なかなかおもしろいです。 準備 まず GitGraph.js の JavaScript と CSS ファイルを読み込みます。GitHub からソースをcloneするなり、bowerを使うなり、CDNを使うなり、お好みで。ここではコミットグラフを定義するコードも別ファイル index.js に書くことにします。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GitGraph.js</title> <link rel="stylesheet" type=
こんにちは、トレンド調査ラボの井上寛之(@inohiro)です。 クックパッドの検索ログを基にした法人向けデータサービス「たべみる」の開発を担当しています。 本稿では、現在開発を行っているスマートフォン向けウェブアプリケーション(Rails)で採用した、 JavaScriptチャートライブラリを選定するにあたって検討した観点について述べます。 また、実際に採用したライブラリと、その利用例を簡単に紹介します。 ウェブ上に無数にあるJavaScriptチャートライブラリから、最適なものを一つ選択するのは なかなか難しい作業ではないかと考えています。おそらく、これから記述する条件を満たすライブラリは数多く存在し、 今回私が選択したライブラリ以上に良いものがあるのではないかと思います。 「何を以って良いライブラリとするか」という議論もまた難しい話題です。 そのようなライブラリについては、はてブコメ
JavaScriptのグラフライブラリを52種類も集めた「JavaScript Graphs」。グラフの種類や依存ライブラリ、価格などで絞り込み可能 数年前に自作のアプリケーションをJavaScriptで作ったときにグラフ機能を実装しようとして、いくつかのグラフ用のJavaScriptライブラリを探して試したことがありました。JavaScriptライブラリを探すのは、それなりに手間がかかるものでした。 もちろん当時からJavaScriptのグラフライブラリの情報をまとめたサイトはいくつかありましたが、最近登場した「JavaScript Graphs」は52種類ものライブラリを集めて、ビジュアルに一覧できるようにしたサイトです。 さまざまな条件で絞り込みができる便利な機能も備えており、条件としては折れ線グラフやドーナッツグラフに対応したものなどグラフの種類、無料や有料、非商用のものなどの価格
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
サイカでエンジニアをしております田中です。 今回は弊社の統計分析ツール adelie でも採用している C3 というチャートライブラリを紹介したいと思います。 C3 とは C3 はチャートに特化したビジュアライゼーションライブラリです。D3 のラッパーライブラリで、D3 の見た目の美しさやインタラクション性などの特徴を残しながら、チャートライブラリとして分かりやすいインターフェースを提供するという方針で開発を進めています。 開発のきっかけ 現在弊社の adelie では UI の一部として C3 を使ったチャートを搭載していますが、初期バージョンでは D3 を直接使い自前で実装していました。またちょうど同じ頃、私の個人的なプロジェクトでも D3 を使ったチャートを実装しており、それらで得たノウハウをもとに再利用可能なライブラリとして個人的に開発を始めました。その後は基本的には上述の方針の
dc.js is a javascript charting library with native crossfilter support, allowing highly efficient exploration on large multi-dimensional datasets (inspired by crossfilter's demo). It leverages d3 to render charts in CSS-friendly SVG format. Charts rendered using dc.js are data driven and reactive and therefore provide instant feedback to user interaction. dc.js is an easy yet powerful javascript l
We’re thrilled to announce Highcharts 4, including new feature like the long-awaited 3D display and heatmaps, as well as new graphic design and solid, colored gauges. New is also the Download Builder, where you can pick the features you need for your project and create a customized file for quick delivery. Along with the new release comes Highstock 2, including the new Highcharts 4, new design and
vis.js community edition * A dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d.
JavaScriptと連携できる地図が欲しかった方は要チェック! Web上でSVGを扱う際に使われるライブラリで有名なのがRaphaëlです。そんなRaphaëlをjQueryベースで使えるようにしたプラグインがjQuery Mapaelになります。地図に限定されますが、SVGで描かれた地図に様々な情報を付与したりJavaScriptと連携させることができるようになっています。 実際の例としてはフランスの地図を扱ったものが多くなっています。 マウスオーバーでハイライトされます。 さらにズームもできるタイプもあります。この辺りはSVGならではと言えるでしょう。 JavaScriptと連携させることでクリックイベントをキャッチできるようになっています。 人口の多い町や都市を描いています。こういった外部データとの連携も容易です。 最後はフランスではなく世界地図のデモです。 国ごとにデータを色分け
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。 また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取るのは困難です。 そこで、データの見せ方や伝え方が重要になってきます。 インフォグラフィックスやデータビジュアライゼーションといったキーワードにも注目が集まりつつありますね。 本記事ではD3.jsというJavaScriptのライブラリを利用し、このブログ(Teck-Sketch)のはてなブックマーク数や、世界の国別の人口の比較を視覚的に分かりやすく表現していきたいと思います。 インフォグラフィックス?データビジュアライゼーション? キーワードとしてインフォグラフィックスとデータビ
README.md Click in the open space to add a node, drag from one node to another to add an edge. Ctrl-drag a node to move the graph layout. Click a node or an edge to select it. When a node is selected: R toggles reflexivity, Delete removes the node. When an edge is selected: L(eft), R(ight), B(oth) change direction, Delete removes the edge. To see this example as part of a larger project, check out
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 No external dependencies Compatible with All modern browse
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く