特定の要素やある段落のフォントを設定するのはCSSで簡単に設定できます。しかし、今回は一続きの文の各文字のフォントを変えてみます。こういう時はJavaScriptが便利です。 テキストボックスの設定(HTML) 今回は、入力された文を読み取って、各文字のいろい…

ウエブフォントを使うと、個性的なテキスト表示が可能です。やり方はとても簡単なのでメモとしてここにまとめておきます。 font-faceの設定 フォントの属性をCSSのなかでfont-faceとして設定します。font-familyでは後でフォントを呼び出すための名前を設定…

今回はSVGオブジェクトの上に設定したテキストをいろいろな向きに反転する方法をまとめます。 ポイントは次の2点です。 text要素ではなくその上位のg要素で反転させる 反転に伴ってテキストが移動するので補正する 反転はテキスト要素ではなくg要素 SVGオブ…

入力フォームを記入して、別のプログラムへ送信するときのボタンですが、formの中にあるか外にあるかで動作が異なります。若干はまったので、メモ代わりにまとめておきます*1。 formの中のbutton formの中にbuttonを設定するとクリックしたときに、submitさ…

HTMLでは、セレクトボックスで、多肢選択の質問ができます。選択肢をセレクトボックスに設定するのは、簡単ですが、任意の項目を初期値にする際に、ちょっとはまったので、メモを残します。 セレクトボックスの設置 まずはHTMLでセレクトボックスを作ります…

今回は、セレクトボックスの選択肢を任意の配列の情報から取得する方法を紹介します。このやり方を覚えておくと、データをインタラクティブに可視化する際に便利かもしれません。 HTML: セレクトボックスの設定 セレクトボックスにidをつけておくと後でd3.js…

今回は色を混ぜるという話です。色を混ぜるといっても二種類のやり方があるので、それを整理しながら、D3.jsでSVGオブジェクトの色を変換する方法を紹介します。 混ざると明るくなる加法混色 混ざると明るくなるのは、いわゆるRGBに基づく色の場合です。光の…

SVGオブジェクトでたくさんのテキストを表示をする場合、\nのような改行コードが認識されません。 仕様で改行ができないようです。でもD3.jsを利用すれば比較的簡単に改行を行うことができます。 テキストの準備 ここでのポイントはテキスト全体を改行位置で…

大量のデータをまとめて、視覚的に表現すると、データが持つ特徴を直感的に理解できることがあります。今回は、データを視覚化する際に施される「正規化」について考えます。wikipediaの正規化の定義は以下のようになっています。 正規化（せいきか、英: nor…

D3.js の面白い点の一つが、transition によるアニメーションです。DOMツリーの中の任意のノードを選択し、位置、色、大きさなどを変更できます。色々なtransition を試しているうちに、少しコツがあることに気づいたので、今回はそれを紹介します。 transit…

D3.jsを利用して棒グラフを作成する手順をまとめておきます。 今回は、前にGoogleChartsを利用した棒グラフを作成したときの気温データを使いましょう。 準備：データリストの作成 var data = [ ["date","tempmax","tempmin"], ["12/11",12.8,7.3], ["12/12"…

集計したデータを表にする場合、Tableノードのtr,th,tdノードに数値を埋めていく必要があります。 これを自動化するためD3.jsを利用してみましょう。 HTML Tableノードの構造 一番外にくるのがtableノードで、その内側にtrノードが来ます。trノードは一行に…

学会発表などでスライドをつくるための定番ソフトウエアといえば、パワーポイントとキーノートです。最近は、Preziを使う人も増えてきました。 Prezi - Presentation Software JavaScriptライブラリを利用すれば、どちらの形式のスライドも作れます。パワー…

今回はHTML5のaudio要素の使い方を簡単に紹介します。ウエブ上で音声ファイルを実行したい場合、HTML5以前は何らかのプラグインを導入する必要があったようです。しかし、HTML5でaudio要素が導入されて、その必要がなくなりました。ウエブ上では、Web Audio …

このブログではSVGオブジェクトをよく取り上げてきました。いわゆるペイントのようなソフトなしで図形を描けるので、とても便利です。しかし、不便なこともあります。その一つが重なり順序の統制の問題です。 SVGオブジェクトの重なり順 単一のSVGオブジェク…

今回は、読書の話をします。読書中、あなたの「意識」はどんなふうに進んでいると感じますか？私は、特に難しい言葉などがなければ、一定のスピードで言葉を理解していると感じます。「流れるように意識が文字の上を通り過ぎていく」というのが感覚的にぴっ…

SVGオブジェクトに画像ファイルを読みこむ際、周囲の形を変形させたいことがあります。イラストレーターのクリッピングマスクを利用した画像の切り取りのような場合です。javascriptでこれをやろうとすると、クリッピングパスの作り方が少しややこしいです。…

前回、transitionを利用して画面上を円が駆けるアニメーションを作りました。 その際、先に座標データを連想配列として準備しておきました。 円の中心座標が、次々にその座標データを読み込んで移動しました。 今回は、ちょっと違う切り口で円が駆けるアニメ…

前の投稿で、D3.jsのtransitionを利用したsvgオブジェクトの変化を扱いました。 Flashに頼らずとも、簡単にオブジェクトを移動できる点がすばらしいと思います。今回は、その続きです。 transitionを利用して、オブジェクトが設定範囲内を文字通り「駆け巡る…

D3.jsの最大の特徴の一つがtransitionを利用したアニメーションです。今回は、これを利用してsvgオブジェクトが画面内を移動する方法を紹介します。 transitionとは transitionはhtmlにおいてDOM要素に時間的な変化を加えるための機能です。新たな要素を加え…

JavaScriptには色々なライブラリがあり、ライブラリを使いこなすことでブラウザが魔法の道具のようになりそうです。 今、注目しているライブラリの一つがD3.jsです。 D3とはData Driven Documentを意味していて、データの可視化に特化したライブラリになって…