• JUGEMテーマ
  • MonoColle
  • PICTO

ブログテーマ

ユーザーテーマ

JavaScript

このテーマに投稿された記事:106件 | このテーマのURL:http://jugem.jp/theme/c91/6579/
このテーマに投稿された記事
rss

1  2  3  4  5  6  7  8  9  10  11 >

JavaScriptからHTTPリクエスト

今回は技術ネタ。興味ない方はスルーしてください。 XMLHttpRequestの使い方 ↑こーゆーのを使えばね。JavaScriptからhttp通信でGet出来るんですよ。 でもコレだと別ドメイン(Yahoo等)のページは取得出来ないんでやんす。。 そこで!!↓こーゆーテクニックが必要となるワケですねー。コレが。 クロスドメインで使う XMLHttpRequest と JSONP のお話 が、そもそもJSONて何やねん?13日の金曜日?? …とゆーレベルなので詰みました^^;ヘルプのヘルプが欲しい。。 本日はここまで!解散!!(ヤケ酒を飲みながら) ◆...

やっぱとんとんネギラーメンでしょ | 2017.01.07 Sat 07:45

onclickを指定したa hrefに"#"を使わない(ページの上に戻らない)方法[JavaScript]

テキストリンクをクリックすることで特定のjavascriptの関数を走らせたいとき、aタグにonclickを指定する人が大半だと思います。   <a href="" onclick="clickEvent();">clickEventを実行</a>   しかし、aにhrefを指定しないと色々と不都合があるため、便宜上なにかを挟んでおく必要が出てきます。このとき、一般的な手段の一つとしてハッシュ(#)を使う方法があります。   こんな感じです。   <a href="#" onclick="clickEvent();&q...

文系PGの一里塚 | 2016.09.04 Sun 15:39

【D3.js】Chordダイアグラムの作成

JUGEMテーマ:JavaScript D3.js には Chordダイアグラム (Chord diagram) を作成するための d3.layout.chord() というメソッドがあるのですが、そもそも Chordダイアグラム自体に馴染みがないというかたが多いのではないでしょうか。そこで、Chordダイアグラムについて簡単に説明したうえで、D3.jsによる作成方法を紹介します。 Chordダイアグラムは、グループ間の関連性を図示するときによく使われます。例えば、ある集団を「男性/女性」という2つのグループに分けた場合と、「犬好き/猫好き」という2つのグループに分け...

Agata's Blog | 2016.05.27 Fri 23:07

過去30日間に世界で発生した地震を可視化する

JUGEMテーマ:JavaScript アメリカ地質調査所 (USGS: United States Geological Survey) の公開データをもとに、世界で過去30日間に発生したマグニチュード2.5以上の地震を可視化しました。楕円のサイズが地震の規模を示しています。日本で発生した地震はオレンジで表しています。 ⇒ サンプルページ var dataSet = []; // X,Y軸を表示できるようにグラフの周囲にマージンを確保する var margin = {top: 40, right: 20, bottom: 40, left: 20}; var width = 1200 - margin.left - margin...

Agata's Blog | 2016.05.21 Sat 11:09

折れ線グラフをアニメーションで表示する

JUGEMテーマ:JavaScript 前回作成したグラフですが、せっかくなので表示に動きをつけてみます。散布図をアニメーションで表示する方法については以前このブログで取り上げました。今回は、折れ線グラフをアニメーションで表示する方法を紹介します。 D3.js を使った折れ線グラフの作成では、まず d3.svg.line() メソッドを使って path を生成します (詳しくは以前の記事を参照)。この path をアニメーションで表示させるには、stroke-dasharray と stroke-dashoffset という、2種類のプロパティを操作します。前者の s...

Agata's Blog | 2016.05.08 Sun 22:17

グラフにグリッド線を追加する

D3.js でグリッド線を追加する方法はいくつかありますが、今回はいちばん簡単な方法を紹介します。 それでは前回作成したグラフにグリッド線を追加してみましょう。まず、html ファイルの <style>〜</style> タグ内 (CSS) に以下を追加します。   .tick line{     opacity: 0.2;   } 次に、軸の目盛り線の長さを指定する innerTickSize() メソッドでマイナスの値を指定して、目盛り線をグラフの内側に伸ばしてしまいます。内側に伸ばす線の長...

Agata's Blog | 2016.05.07 Sat 11:21

世界の総人口の推移を片対数グラフで描画する

JUGEMテーマ:JavaScript 急速に増加するようなデータを可視化するには、対数グラフが便利です。今回は D3.js で片対数グラフを作成する方法を紹介します。 一例として、国連 (United Nations) による世界の総人口の推計値データをグラフ化してみました。まず、データをCSV形式で保存します。 Year,Population 1000,0.31 1250,0.4 1500,0.5 1750,0.79 1800,0.98 ・・・ このCSVファイルを読み込んで、片対数グラフで表示するプログラムを作...

Agata's Blog | 2016.05.06 Fri 10:11

データの変化をSVG要素に反映する

JUGEMテーマ:JavaScript データの要素数や要素の順序が変化する様子を、アニメーションで可視化したい場合があります。今回はそんな場面で役に立つ、セレクションの仕組みについて見ていきます。 d3.selectAll については、これまでにもしばしば使ってきました。しかしこれまでは、データの要素数や順序が変化しない、いわば「静的」なデータの可視化方法の説明にとどまっていました。データの要素数や要素の順序の変化に応じてDOM要素やSVG要素をダイナミックに操作するためには、D3.js では Enter, Update, Exit という3...

Agata's Blog | 2016.04.13 Wed 22:35

ツールチップの作成方法

JUGEMテーマ:JavaScript 今回は、D3.jsを使ってグラフにツールチップ (Tooltip) を加える方法を見ていきます。 ツールチップとは画面の表示要素の一種で、対象にマウスポインタを合わせたときに出現させる小さな領域のことを指します。データ可視化では、グラフ上のデータ点にマウスポインタを合わせたときに詳細な数値や注釈などを表示させる方法としてよく使われるテクニックです。このツールチップを D3.js で実現する方法はいくつかありますが、今回は div 要素を使って実現する方法を紹介します。それでは以前作成した...

Agata's Blog | 2016.04.04 Mon 23:47

【D3.js】 バラ曲線 (Rose curve) を描画する

JUGEMテーマ:JavaScript 前回は D3.js を使って、プルダウンメニューで選択した数値によって変化するリサージュ曲線 (Lissajous curve) を描画しました。リサージュ曲線と同じように sin, cos を使った曲線として、バラ曲線 (Rose curve) があります。そこで今回は、このバラ曲線 (別名「正葉曲線」とも呼ばれます) を描画するプログラムを作成してみました。 バラ曲線は、局座標表示で下式によって現される曲線です。 r = sin((a/b)θ) とてもシンプルな方程式ですが、変数 a, b を変化させることで、驚く...

Agata's Blog | 2016.03.27 Sun 21:11

このテーマに記事を投稿する"

1  2  3  4  5  6  7  8  9  10  11 >

全106件中 1 - 10 件表示 (1/11 ページ)

[PR] レンタルサーバー heteml [ヘテムル]
あなたのクリエイティブを刺激する、
200.71GBの大容量と便利な高機能!