JavaScript で始めるデータ ビジュアライゼーション –D3 連携編–
ArcGIS API for JavaScript を用いてデータ ビジュアライゼーションの手法とそれを実現する機能についてご紹介していく「JavaScript で始めるデータ ビジュアライゼーション」シリーズの第６弾です。 これまで紹介したサンプル コードとデモを確認したい方は GitHub リポジトリをご覧ください。 第１弾から様々な表現手法をお伝えしてきましたが、今回は少し趣向を変えて、データ ビジュアライゼーションを強みとするオープンソース JavaScript ライブラリである D3.js との連携例をご紹介します。 D3.js とは？ データ ドリブン ドキュメント（Data Driven Document）を略して「D3」と呼ばれている通り、データを操作し、可視化することに優れたライブラリです。Web サイトや Web アプリで採用される 2D ベクター グラフィックの標準形
JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders
JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK！ デモページ SVG Loadersの使い方 使い方は、簡単！ Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGファイルをダウンロードします。 SVG Loaders -GitHub Step 2: HTML あとは、imgタグで配置するだけです。 <img src="svg-loaders/puff.svg" /> アイコンのカラーを変更したい時は、svg要素のfill属性を変更します。 <svg fill="#fff" width="140" height="64" viewBox="0 0 140 64
vivus.js - svg animation
vivus, bringing your SVGs to life Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub Delayed Every path element is drawn at the same time with a small
ブラウザーに優しくて、アニメーションを滑らかに
ブラウザーに優しくして、 アニメーションを滑らかに Brian Birtles, Mozilla Japan html5j October 2014, Tokyo Animation is awesome… Source: Christopher Price 2013, http://topherchris.com/post/55109717733 Animation is awesome… Source: icanhasGIF.com windfinder.com earth.nullschool.net healthmap.org/ebola/ 蔓延[まんえん] = spread (disease) ebolavideo.org ウィンドウを最小化する 逆に負担になります。うまくいかなかった冗談みたい。 Animation is awesome? HTC J 端末上の Firefox
morris.js - SVGで手軽に綺麗なグラフを描くJavaScriptライブラリ MOONGIFT
管理画面などに格好いいグラフがあるとテンションがあがりますよね。とは言えグラフを表示するというのは意外と面倒で、ついつい後回しになってしまいがちです。 そこで手軽に格好いいグラフを描けるライブラリとしてmorris.jsを紹介します。 morris.jsの使い方 morris.jsはまずJavaScript/スタイルシートを読み込みます。 <link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-m
D3.jsでグラフを描いてみる - ワザノバ | wazanova
http://www.alexrothenberg.com/2014/01/06/learning-d3-by-building-a-chart.js.html1 comment | 0 pointsAlex Rothenbergが、GitHubグラフでおなじみのD3.jsの解説をしています。 今日は、D3.jsを使って、このようなグラフを描いてみる。D3.jsのポイントとしては、 データをDOM elementとバインディングする。 チャート、地図、配列など多くのAPIがある。 チャートなどをビジュアル化するにはSVGが適している。 Binding data to the DOM D3とはData-Driven Documentを意味し、データをDOM elementに同期する機能を提供してくれる。では早速見てみよう。 <script src="http://d3js.org/d3.v3
SVGMagic
div要素の背景画像としてSVGを使用します。 SVGMagicの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="SVGMagic.min.js"></script> </head> SVG画像をPNG画像に変換するのには、PHPを使用しています。 converter.php（ダウンロードファイル一式に含まれています） SVGMagic.min.js内では、配布元のサーバーのファイルを参照してい
今年こそついにSVG元年？まだ間に合う！SVGの学習に役立つサイト紹介 - 聴く耳を持たない(片方しか)
先日AdobeからこのようなJavaScriptライブラリが公開されました Snap.svg http://plus.adobe-adc.jp/post-4817/ 以前から人気の高かった、IE6でもSVGを表示できるJavaScriptライブラリRaphaelの作者 Dmitry Baranovskiy氏による新たなライブラリで、Raphaelとの違いはSnap.svgではIEなら9以上対応とモダンブラウザを対象にしたこと。さらに自由度と表現力の高いことができるようになっているのが大きな特徴です。 こうしたJavaScriptライブラリがオープンソースで、そしてAdobeから公開されたのは大きなことでこれからSVGもどんどん普及していくのではないでしょうか。 まさに2013年こそついにSVG元年と言えるかもしれません*1。 ……とは言え、そもそもSVGってなに？という人もまだまだ少なくな
requestAnimationFrame でフレームと再描画更新を制御する | Yomotsu net
Canvas や SVG などを用いて、アニメーションを行う場合の描画繰り返しについて考えます。 描画の繰り返しアニメーションには requestAnimationFrame や setTimeout など利用し、そのタイミングで再描画を繰り返すという手法が一般的です。 これまで、 setTimeout を利用することが主流で、60 FPS のアニメーションの場合は例えば以下の様なコードで実現することも多かったかと思います。 var x = 0; ( function loop(){ setTimeout( loop, 1000 / 60 ); x += 1; console.log( x ); } )(); ただし、setTimeout や setInterval は、ブラウザー側で再描画の準備が整っているか否かにかかわらず、必ず実行されてしまいます。また、ブラウザーのタブが非表示 (バ
コンテンツの内容はそのままで外枠だけに傾きを与えるJSライブラリ「Maskew」:phpspot開発日誌
Maskew - a javascript library for skewing the shapes of elements コンテンツの内容はそのままで外枠だけに傾きを与えるJSライブラリ「Maskew」。 次のように、中身はそのままなのに、枠だけ傾かせてちょっとオシャレにするライブラリ。依存ライブラリはなく５KBで手軽に使える 画像の一覧に適用したところ。単に四角形の枠で画像を見せるより新鮮 レイアウトの１つのテクニックとして覚えておいてもよさそう 関連エントリ HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 キーボードイベントを実装する際に単体で使える軽量JSライブラリ「Keypress」 スピード感が凄いプログレスバ
無料ではじめるフォント製作マニュアル
拙作スクリプトとwebサービスを利用してフォントファイルを作る方法についてまとめます．通常フォントを作るには専用のエディタを用意する必要がありますが，簡単な利用のために環境を整えるのは面倒です．今回紹介するのは品質はそこそこに，それなりに使い物になるフォントをできるだけ既存の環境を使って作る方法です．自作したフォントが動作するのは見ていてとても面白いので，是非試してみて下さい． 準備 用意するものはこれだけです．後は全てwebページから実行できます． フォント化したい画像ファイル（pngとか，svgとか） step1 フォント化の画像ファイルを用意する まずはじめにフォント化したい画像のファイルを作ります．画像形式としてはブラウザで読み込める形式であればpngでもjpegでも構いませんが，png形式のほうが良い結果が得られるでしょう． 例えば次のような画像を用意します． 画像の大きさは文字
Server Sideで作るVisualization - PolyPeaceLight
東京Node学園祭2012 アドベントカレンダーの10日目の記事です。 他の方のように、ベンチマークやコアっぽいところばかりなのですが、僕は少し軽めで最近調べているd3周りについてちょっと便利なツールを作ってみました。 d3jsは非常に優れたvisualizationツールで、モダンなブラウザでは実装されているSVGを使うことで、美しく、インタラクティブなvisualizationを作成することができます。 ところが、「モダン」なブラウザとある通り、IEは9以上が必要になります(幾つかのJSライブラリでコアに関しては8でも動くようですが試していません)。 d3jsが使いたいんだけど、上司から「IE6がまだしっかり生きているんだから対応しないと査定さがるよ」とか言われた時のための逃げ道としてd3rendererを作りました。 d3jsでhtmlを作って、phantomjsで書きだして、画像を
SVGをテンプレートとして使う - Enjoy*Study
SVGはJavaScriptで操作できるので、テンプレートとしてSVGを用意しておいて(デザイン自体はInkscapeとか使って)、JavaScriptで後から編集ってのは、わりと使い道がありそうな気がします。 あとは、File API使って、BlobのURLを作成すれば、クライアントサイドだけで、編集→編集後のSVGを出力ってのも出来ます。 デモ SVGをDOMで操作して var svg = displayElement.getElementsByTagName('svg')[0]; svg.getElementById('nameField').textContent = inputNameElement.value; svg.getElementById('telField').textContent = inputTelElement.value; そのSVGをFile API使っ
名前空間の速修講座 - SVG | MDN
SVGチュートリアルIntroducing SVG from scratch概要始めましょう配置基本図形パス塗りつぶしとストロークSVG におけるグラデーションパターンテキスト基本的な座標変換クリッピングとマスクSVG におけるその他のコンテンツフィルター効果SVG フォントSVG の image 要素SVG のツールSVG と CSSGuidesデータ型リンク名前空間の速修講座スクリプト処理SMIL による SVG アニメーション画像としての SVGHTML での SVG 効果SVG フィルターのチュートリアルHTML 内の SVG 入門リファレンス要素<a><animate><animateMotion><animateTransform><circle><clipPath><defs><desc><ellipse><feBlend><feColorMatrix><feComponen
SVGのグラデーションとJavaScriptとの連携
はじめに HTMLの周辺技術について解説する本シリーズですが、前回はSVGの様々な図形描画要素について解説しました。今回はWebデザインでも有用なSVGのグラデーション機能について解説します。また、JavaScriptからSVGの要素を操作する方法についても解説します。 サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 グラデーションを使ってみる 前回はfill属性を使って図形を単色のベタ塗りを行いましたが、SVGではよりスタイリッシュな、Webページで多用されるグラデーションによる塗りつぶしも可能です。SVGでは線形グラデーション（linearGradient要素）と放射状グラデーション（radicalGradient要素）の2種類のグラデーションに対応しています。 グラデーションの使い方はやや複雑なので、まずはサンプルから見ていきましょう。以下のコード
【raphael】パーツをまとめてドラッグする・・・応用してみるよ！ | 鰒。
引き続きraphaelです。 ごめんなさいね、たたまなくて。気にしないでね。 たぶん、実用的に使うのはこんなところだと思ったので、 前回作った３色のアレを、ひとつにまとめて移動したいと思います。 ＪＳファイル window.onload=function(){ ////////////////////////////////////////////// //複数をドラッグ ////////////////////////////////////////////// //キャンバスを作る(windowに対するx軸、windowに対するy軸、横幅、縦幅) var paper = Raphael(document.getElementById("hoge"), 640, 480); //キャンバスに白い四角をのせて、白くなってるように見せる paper.rect(0, 0
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
D3.js と SVG によるデータビジュアライゼーション
http://docs.bonsaijs.org/slides/webtechcon2012/
https://hg.fxtf.org/drafts/raw-file/tip/web-anim/index.html
d3.js - Data-Driven Documents