Gif rendering - SVG to GIF
(function(c){function a(b,d){if({}.hasOwnProperty.call(a.cache,b))return a.cache[b];var e=a.resolve(b);if(!e)throw new Error('Failed to resolve module '+b);var c={id:b,require:a,filename:b,exports:{},loaded:!1,parent:d,children:[]};d&&d.children.push(c);var f=b.slice(0,b.lastIndexOf('/')+1);return a.cache[b]=c.exports,e.call(c.exports,c,c.exports,f,b),c.loaded=!0,a.cache[b]=c.exports}a.modules={},
Data manipulation, cleaning, and processing in JavaScript
Data cleaning, manipulation, and wrangling in JavaScript Grouping Data Grouping data is an important capability to have when doing data analysis. Often times, you will want to break apart the data by a categorical variable and look at statistics or details for each group. D3 includes the powerful d3.nest functionality to produce these groupings with a minimal amount of code. Nest Basics Fundamenta
Textures.js
SVG patterns for Data Visualization Textures are useful for the selective perception of different categories View on Github Getting started -- from the top of d3.js -- var svg = d3.select("#example") .append("svg"); var t = textures.lines() .thicker(); svg.call(t); svg.append("circle") .attr("r", radius) .style("fill", t.url()); Lines
SoundJSを使って音を見えるものへ―CreateJS勉強会 - ICS MEDIA
ウェブ技術でサウンドを扱える技術「Web Audio API」。表現系の技術として、JavaScriptを使うことで、音に連動したビジュアライゼーションを作成できます。本記事では、Web Audio APIを使ったサウンドビジュアライザーの作り方を解説します。 まずは以下の2つのデモをご覧ください。 2Dデモ 別タブで再生する ソースコードを確認する 1つ目は2D版のデモです。Web Audio APIでフーリエ変換を行い、divタグのスタイルでビジュアライゼーションを作成しています。CSSのFlexboxを利用して水平方向にdivを並べています。コードがシンプルなので、Web Audio APIの使い方を理解したい方は参考にしてみてください。 3Dデモ 別タブで再生する ソースコードを確認する もう1つは、3D版のデモです。サウンドの解析部分をWeb Audio APIで行い、ビジュアラ
A visual introduction to machine learning
: In machine learning, computers apply statistical learning techniques to automatically identify patterns in data. These techniques can be used to make highly accurate predictions. Keep scrolling. Using a data set about homes, we will create a machine learning model to distinguish homes in New York from homes in San Francisco. First, some intuition Let’s say you had to determine whether a home is
Jupyter Notebook x d3.jsでリッチなデータビジュアライゼーション - Qiita
この記事はOrigami Advent Calendar 2016 10日目の記事です。 データエンジニアやデータサイエンティストの日常業務で使用するツールにJupyter Notebookという便利な分析道具があります。弊社でもアドホックな分析をするのに使用しています。 Jupyter Notebookですが、線グラフや円グラフのような単純な可視化をするにはmatplotlibやbokehを使えば十分ですが、データを見ているともっと複雑なデータ可視化したい、インタラクティブにデータ深掘りたいというニーズが出てくると思います。 この記事ではそのようなニーズを解決するためにJupyter上でd3.jsを動かせるようにしてmatplotlibだけでは対応できないビジュアライズ方法を紹介します。 この記事で使用したサンプルコードは全てこちらのリポジトリに置いてありますので参考にしてみてください。
階層構造を持つデータの可視化 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 随時更新します。 階層構造を持つデータ 社会に存在するデータのうち、たとえばこのようなデータが該当する。 コンピュータOSが管理するファイルシステムにおけるファイルとディレクトリの関係 書籍の構造（部、章、節） レガシーな会社組織（社長、部長、課長） 生物の分類法 文献学（philology） 表現方法 大きく三つに分ける。 隣接関係・ダイアグラム（Adjacency diagrams）...入れ子（nested） アイシクル・ツリー（Icicle Tree） サンバースト・チャート（Sunburst Chart） エンクロージャー・ダ
おじさんにモテるファンネルチャートのつくりかた - Qiita
こんにちは。d3.jsアドベントカレンダーの１８日目です。 突然ですが、おじさんに絶大な人気を誇るチャートをご存知でしょうか。 それは**「ファンネルチャート」**です。 【管理職すきなチャートアンケート（当社調べ）】 ２位のパイプラインチャートとはつまりファンネルチャートのことなので、合わせると半数以上のおじさんが好きなチャートはファンネルで決まり！ なのです。 なんかはやりのキュレーションメディアっぽい書き出しになりましたがこの記事はそういうのではありません。 ファンネルチャートとは？ ファンネルチャートとは、その名のとおりファネル（じょうご）のかたちをしたチャートです。データの表し方は積み上げ棒チャートに似ていて、全体の総和に対して各ステップの比率をそれぞれの高さで表します。というかまんま積み上げ棒と同じです。違うところは、棒が一本しかないところと、「先細り感」が表現できるところです
electron-viz - GUIのGraphvizチャートエディタ&ビューワー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Graphvizを使うとノードを使ったフローチャート、クラス図をはじめ様々なチャートを画像にすることができます。ただし最初に環境を整えるのが手間であったり、dotファイルを書いた後にコマンドで変換しなければなりません。 そんな手間暇を軽減してくれるのがelectron-vizです。Electronで開発されており、GUIでGraphvizを編集できます。 electron-vizの使い方 electron-vizのメイン画面です。左側がエディタ、右側にチャートが描かれます。 例えばこのような図を描きました。オートプレビューが有効になっていれば編集した直後にチャートが描かれます。チャートの内容はGraphviz チュートリアルよりお借りしました。 二つに分かれるサンプル。 さらに複雑
Raspberry Piで取得したセンサーデータをリアルタイムに可視化する（グラフ編） | Milkcocoa Engineers' Blog
前々回、前回に引き続き、Raspberry Piでセンサーデータを取得して、Milkcocoaを使ってリアルタイムにブラウザ上にグラフ化する方法を紹介していきます。 弊社オフィスの玄関の明るさをリアルタイムで表示しているデモはこちらです 今回は以下の流れで、保存されたセンサーデータのリアルタイムなグラフの描画について説明していきます。 D3.jsで折れ線グラフを表示する際に必要な知識 Milkcocoaのデータストアからデータを取り出して、入出力の範囲を指定する グラフを描画する リアルタイムアニメーション D3.jsで折れ線グラフを表示する際に必要な知識 D3.jsの基礎知識については以下で学習すると良いかと思います。 D3.js入門 (全17回) - プログラミングならドットインストール D3 入門 | スコット・マレイ | alignedleft 面倒な人は、最低でも以下を頭に入れて
vis.js
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.
d3.nestを使った配列のグルーピング - Qiita
var dataSet = [ {"year":2014, "name":"hoge", "group":"A", "count":200}, {"year":2013, "name":"test", "group":"C", "count":110}, {"year":2013, "name":"shimizu", "group":"B", "count":310}, {"year":2014, "name":"suzuki", "group":"A", "count":260}, {"year":2015, "name":"tanaka", "group":"C", "count":180}, {"year":2014, "name":"sato", "group":"B", "count":220}, {"year":2015, "name":"hello", "group":"B"
d3.js超初心者向け ①→②を表現してみる - Qiita
d3.js凄そうなんですけど、ちょっと応用しようとすると途端に表示されなくなったりとか、意図と違ったりとかで、挫折する気がします。 そんな超初心者向けのtipsです。 この記事で行うこと d3.jsで丸を描く d3.jsで線を引く d3.jsで矢印を描く svgの要素を知る 環境 Mac OS X(10.9.1) + Google Chrome(2014/2/26現在 最新) で確認しています。 準備 コピペして試せるように準備しておきます。 htmlとjavascriptファイルを分けて、javascriptファイル側だけ編集すればいいようにしておきます。 何度もリロードすることになると思うので、d3.jsのファイルはローカルに保存しておいたほうがさくさく進めます。
Integrating D3.js visualizations in a React app
A small example exploring how to integrate D3.js data visualizations into a React app. I've been working with D3.js and React lately, and in this post I wanted to share a few ways I found in building components and the interface between them. I think they help make both libraries work together quite nicely. We'll be building a small example to illustrate this, and you can find the full code on Git
機械学習の過程をD3.jsで可視化する - Qiita
機械学習の過程をD3.jsで可視化する はじめに(お決まりのやつ) こんにちは。 そしてはじめまして、dr_paradiです。 CYBIRDエンジニア Advent Calendar 2014 - Qiitaの12日目です。 CYBIRDエンジニアの昨日の記事は SayakaItoさん(いつもお世話になっております)のルカによる福音書24章でした。最近入った私としては昔のCYBIRDの話（というかITビジネス黎明期）のお話は非常に参考になります。 本日の要約 今回、私はD3.jsというわりと人気なJavaScriptライブラリを用いて、 代表的なクラスタリングアルゴリズムであるK-meansを可視化したお話をします。 ソースとデモはこちらです。 Visualization of K-means bl.ocks.orgを用いています。 自己紹介 フルスタックデータアナリスト(自称)として活躍
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create beautiful test-driven data visualisations with D3.js | Heart Internet Blog – Focusing on all aspects of the web
WebGL + d3.layout.force
Data Visualization meetup 2017
GitHub - aksakalli/gtop: System monitoring dashboard for terminal
GitHub - DKirwan/calendar-heatmap: A d3 heatmap for representing time series data similar to github's contribution chart
