コーディング関連の情報をお届けします。

ウェブ制作、コーディング初心者のメモ

vesna

: CSS

フレキシブルボックスレイアウトを使う

2015/11/5 フレキシブルボックスレイアウト

久しぶりにCSSの記事を書いていきます。タイトルの通りフレキシブルボックスレイアウトについて書きます。ボックスのサイズや配置を柔軟に設定したり、調整したりできる方法をフレキシブルボックスレイアウトとい ...

D3.js サーバーのログを読み込んで、OSのシェアを表示してみる

2015/10/29 match()()メソッド, ログ解析

D3.jsを利用して、サーバーログを読出して、情報を得ることができます。サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.jsでサーバーログを取得する</title>
	<script src="../js/d3.js"></script>
	<style>
		svg{
			width:640px;
			height:480px;
			border:2px solid black;
			background-color:#ffffff;
		}
	</style>
</head>
<body>
	<h1>OS情報を取得して表示する</h1>
	<div id="time"></div>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title>D3.jsでサーバーログを取得する</title>

<script src="../js/d3.js"></script>

<style>

svg{

width:640px;

height:480px;

border:2px solid black;

background-color:#ffffff;

}

</style>

</head>

<body>

<h1>OS情報を取得して表示する</h1>

<div id="time"></div>

<svg id="graph"></svg>

<script src="test.js"></script>

</body>

</html>

[crayon-66437 ...

: D3.js

フィッシュアイプラグインを使ってみる

2015/10/29 パイチャート, フィッシュアイプラグイン

今回は、マウスカーソルを重ねたときに、マウスカーソルを中心にして拡大するフィッシュアイプラグインを利用します。フィッシュアイプラグインはこちらまずは上記のプラグインをダウンロードします。今回は、j ...

: D3.js

グラフをソートして表示する

2015/10/29 データソート, 縦棒グラフ

以前、縦棒グラフを表示するサンプルコードを書きましたが、時と場合によりただ棒グラフを表示するだけではなく、インタラクティブに表現したいことがあります。たとえば、棒グラフで商品別の売り上げを表示する時、 ...

: D3.js

鶏頭図(けいとうず)を表示する

2015/10/29 鶏頭図

D3.jsでは円グラフに一工夫を加えることで鶏頭図を表示できます。鶏頭図は円グラフと似ていますが。それぞれの扇形の中心角は一定で、量は中心からの半径で表示されます。サンプルコードの実行結果はこちら ...

: D3.js

ツリーレイアウトを表示する

2015/10/29 ツリーレイアウト

D3.jsにはツリーレイアウト(樹形図・木構造といったりもします)を生成することができます。ツリーレイアウトは以前の記事で書いたツリーマップと似ています。データセットに必要なプロパティ(キー名)も同一 ...

: D3.js

積み上げ棒グラフ

2015/10/27 積み上げ棒グラフ

D3.jsでは積み上げ棒グラフもあります。積み上げ棒グラフはグループ化のg要素を使い、その中に、rect要素を生成します。コメントはサンプルコードの中に書きました。サンプルコードの実行結果はこちら ...

: D3.js

フォースレイアウト

2015/10/27 フォースレイアウト

D3.jsでは、フォースレイアウトを作成する機能も用意されています。フォースレイアウトは予めノードとノードを結びつけるリンク情報が必要です。今回用意したサンプルコードではデータセットのnodesにノー ...

: D3.js

日本の地図データ(国土数値情報)を使い、地図を表示する

2015/10/26 国土数値情報, 地図表示

世界地図を表示したので、今回は日本国内の地図を表示します。サンプルコードにコメントを付しましたので、そちらをご覧ください。地図データは国土数値情報ダウンロードサービス手順：１．上記のリンクより表 ...

: D3.js

地球を表示する

2015/10/26 地球, 球体

D3.jsでは投影方法を指定できるので、前回使用した世界地図のデータを利用して球体にマッピングして、地球儀を表示します。サンプルコードの実行結果はこちら [crayon-66437ef80ce9e7 ...

« Prev 1 … 4 5 6 7 8 … 40 Next »