WebixとD3.jsを使ってレスポンシブな地図を作成する
Webix Advent Calendar 2014 １７日目の記事です。 グラフに引き続き、WebixとD3を使ってレスポンシブな地図を描画します。 コンポーネントとして表示した地図はウインドウや境界線を移動した際に、自動的にコンポーネントのサイズにグラフがリサイズされます。 サンプル example 前回作成したカスタムコンポーネントを使用します。 ■ 地図を描画する var japan_map = { view:"d3-chart", resize:true, url:"http://shimz.me/example/d3js/_geodata/ken.geojson", ready:function(){ var scale = Math.floor( (this.$width + this.$height) /2) ;//地図が収まるスケールを取得 var regulate =
[Webix]HTML要素にWebixコンポーネントを埋め込む
Webix Advent Calendar 2014 ３日目の穴埋め記事です。 WebixではUIをすべてJavaScriptで作成する以外に、HTML要素(主にdiv)を元にコンポーネントを埋め込んで画面を作成することができます。 画面内の一部の要素にWebixをコンポーネントを使用したい場合に便利です。 サンプル カレンダーコンポーネントとチャートコンポーネントをdiv要素を元に表示します。 example <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://shimz.me/libs/webix/codebase/webix.css" type="text/css" charset="utf-8"> <script src="http://shimz.me/libs/webix/codebase/webi
![[Webix]HTML要素にWebixコンポーネントを埋め込む](https://cdn-ak-scissors.b.st-hatena.com/image/square/987b6e2e8be6f0557c7d7f6eba0238b1f8835b7b/height=288;version=1;width=512/https%3A%2F%2Fgunmagisgeek.com%2Fblog%2Fwp-content%2Fuploads%2F2014%2F12%2Fwebix141217.jpg)
WebixとD3.jsを使ってレスポンシブなグラフを作成する
Webix Advent Calendar 2014 １６日目の記事です。 今回はWebixにD3.jsを組み込んでグラフを表示します。 example コンポーネントとして表示したグラフはウインドウや境界線を移動した際に、自動的にコンポーネントのサイズにグラフがリサイズされます。 カスタムコンポーネント WebixのコンポーネントとしてD3を利用できるカスタムコンポーネントを作成します。カスタムコンポーネントの作り方についてはまた別途説明するので、今回は下記コードを保存しWebixライブラリとともに外部ファイルとして読み込んでください。 webix.protoUI({ name:"d3-chart", defaults:{ }, $init:function(){ this._ready_awaits = 0; this.attachEvent("onAfterLoad", functi
「感染地図」感想
FOSS4G Advent Calendar 2014 とData Visualization Advent Calendar 2014の、 ６日目の参加記事です。 概要 本書は、原因不明の病に疫学という手法で立ち向かうことを発見した始まりの物語でもあり、強固な固定概念を打ち砕きパラダイムシフトを起こし世界を変えたデータジャーナリズムの先駆けの記録であり、オープンな地図システムと市民参加によって今後可能になるであろう未来を思い描くサイエンスノンフィクションです。 この物語には、致死的な細菌と、超成長する都市、そして天賦の才をもった二人の男という四つの主役が登場する。百五十年前のある一週間、底知れぬ恐怖と苦痛に見舞われたロンドン、ソーホーにあるブロードストリートでこの四つの主役たちは交差した。 （中略） この本は、そうしたさまざまなベクトルの交差点が無数に存在する地図の話、知覚で把握出来ない
[Webix]Listコンポーネント入門
Webix Advent Calendar 2014 ４日目の記事です。 昨日は突然過去を振り返りたくなって別の記事を書いていたためお休みしました。 さて、今回はWebixのListコンポーネントを使ってみます。 WebixのコンポーネントはJavaScriptオブジェクトとして必要な要素を指定してwebix.uiに渡してあげれば、後はWebixが良い感じに表示してくれます。 リストの表示 基本的には、viewプロパティで”list”を指定し、dataプロパティにリストとして表示したいデータ(JSON)を渡してtemplete内で表示する内容の書式を設定すればリストとして表示されます。 templateの中では「#key名#」で渡したデータの値を表示することができます。またHTMLタグも指定可能です。 （なおリストに渡しているtestDataはtestData.js内で宣言し外部スクリプト
![[Webix]Listコンポーネント入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/0ea4355dfd76479311e2f59be6ce9b5459d9a0b7/height=288;version=1;width=512/https%3A%2F%2Fgunmagisgeek.com%2Fblog%2Fwp-content%2Fuploads%2F2014%2F12%2Fwebixlist141204.jpg)
【D3.js】 LeafletにSVGをオーバーレイする。
Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示するJavaScriptライブラリです。最近、海外での存在感が高まっているような気がします。 今回は、D3で作成したsvg要素をLeaflet上にオーバーレイしてみました。 (まだ、ソースのコメントに書いたこと以上の知識がないので、サンプルコードのみで詳しい解説はありません) サンプル D3.jsとともにLeaflet.jsとleaflet.cssを読み込んでください。 <!-- leafletのcssを読み込む --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6H
Google Map上にGeoJSONデータを表示する | GUNMA GIS GEEK
Google、地図アプリのデベロッパー向けJavaScript APIでGeoJSONをサポート Google Maps APIでGeoJSONデータがサポートされたらしいので、試してみました。（一部、D3.jsを使用しています） 【参考】 Combining and visualising multiple data sources – Google Maps API — Google Developers ポイントデータを表示 ポイント(点)データは、スタイルを指定しないとマーカーで表示される。 example サンプルコード google.maps.event.addDomListener(window, 'load', function() { //Google Maps初期化 var map = new google.maps.Map(document.getElementByI
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
