概要

d3-floorplan は結構古いライブラリで更新もあまり行われていないのですが、インストールからデモの表示までやってみたので紹介します

環境

Apache Http Server 2.2.15
JQuery 1.12.2
JQuery UI 1.11.4
D3 3.5.16
Firefox 45.0.1

インストール

各種ライブラリを必要なディレクトリにダウンロードします

JQuery
- cd /var/www/html/fp
- mkdir -p lib/jquery/
- wget http://code.jquery.com/jquery-1.12.2.min.js
- wget http://jqueryui.com/resources/download/jquery-ui-1.11.4.zip
- unzip jquery-ui-1.11.4.zip
D3
- cd /var/www/html/fp
- mkdir -p lib/d3/
- wget https://github.com/mbostock/d3/releases/download/v3.5.16/d3.zip
- wget https://raw.githubusercontent.com/dciarletta/d3-floorplan/master/d3.floorplan.min.js

d3-floorplan は Github から min ファイルを直接ダウンロードします

デモ用のファイルの作成

ではデモ用のファイルを作成していきます

index.html の作成
- cd /var/www/html/fp
- touch index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Floor Plan - local coordinate map layers for D3.js</title>
  <script type="text/javascript" src="lib/jquery/jquery-1.12.2.min.js"></script>
  <script type="text/javascript" src="lib/jquery/jquery-ui-1.11.4/jquery-ui.min.js"></script>
  <script type="text/javascript" src="lib/d3/d3.min.js"></script>
  <script type="text/javascript" src="lib/d3/d3.floorplan.min.js"></script>
  <script type="text/javascript" src="fp.js"></script>
  <style type="text/css">
    @import url('lib/jquery/jquery-ui-1.11.4/jquery-ui.min.css');
    @import url('fp.css');
  </style>
</head>
<body>
  <h1><a href="http://dciarletta.github.io/d3-floorplan/">Floor Plan <small>(0.1.0)</small></a></h1>
  <p>A layered map <a href="http://bost.ocks.org/mike/chart/">reusable chart</a> suitable for small area, local coordinate systems like building floor plans. There is no tiling or projection capabilities, just simple X-Y scaled coordinates, pan-zoom functionality, and a set of layers for data visualization over the region.</p>
  <p style="text-align: right">Layer Controls &darr;</p>
  <div id="demo"></div>
  <h3>Example</h3>
  <p>This basic example demonstrates how to create and assign data for each layer. Interact with the map by zooming and then panning or access the different layers by turning off higher layers in the map layer controls in the upper right.</p>
</body>
</html>

必要なライブラリのパスが間違っていないか確認します
JQuery や D3 のバージョンが異なる場合は適宜変更してください

デモ用の CSS ファイルの作成
- cd /var/www/html/fp
- touch fp.css

/* map menu controls */
.ui-active rect {fill: #212121}
.ui-active text {fill: #fff}
.ui-default rect {fill: #e6e6e6}
.ui-default text {fill: #000}

/* heatmap colors (courtesy of colorbrewer2.org) */
.RdYlBu .d6-6 {fill:#D73027;background:#D73027;color:#121212}
.RdYlBu .d6-5 {fill:#FC8D59;background:#FC8D59;color:#121212}
.RdYlBu .d6-4 {fill:#FEE090;background:#FEE090;color:#121212}
.RdYlBu .d6-3 {fill:#E0F3F8;background:#E0F3F8;color:#121212}
.RdYlBu .d6-2 {fill:#91BFDB;background:#91BFDB;color:#121212}
.RdYlBu .d6-1 {fill:#4575B4;background:#4575B4;color:#121212}

/* overlays */
.polygon {stroke:white;stroke-width:2px;fill-opacity:0.2}
.vertex {stroke:lime;stroke-width:2px;fill:none}

/* vector field */
.vector {stroke-width:1px;stroke:lightsteelblue}

/* path plot */
.pathplot path {stroke-width:2px;stroke:steelblue}
.planned {stroke-dasharray:9, 5}

body {
      font-size: 14px;
      font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
      margin: 50px auto 20px;
      width: 720px;
      background: #fcfcfc;
      line-height: 1.45em;
}
a {
    color: #555;
}
a:hover {
    color: #000;
}
ul {
    margin: 0 20px;
    padding: 0;
}
div.code {
    border: 1px solid #ccc;
    background: #eee;
    margin: 10px 0 10px 0;
    padding: 10px;
    width: 720px;
}

デモ用の JS ファイルの作成
- cd /var/www/html/fp
- touch fp.js

var xscale = d3.scale.linear()
               .domain([0,50.0])
               .range([0,720]),
    yscale = d3.scale.linear()
               .domain([0,33.79])
               .range([0,487]),
    map = d3.floorplan().xScale(xscale).yScale(yscale),
    imagelayer = d3.floorplan.imagelayer(),
    heatmap = d3.floorplan.heatmap(),
    vectorfield = d3.floorplan.vectorfield(),
    pathplot = d3.floorplan.pathplot(),
    overlays = d3.floorplan.overlays().editMode(true),
    mapdata = {};

mapdata[imagelayer.id()] = [{
    url: 'Sample_Floorplan.jpg',
    x: 0,
    y: 0,
    height: 33.79,
    width: 50.0
     }];

map.addLayer(imagelayer)
   .addLayer(heatmap)
   .addLayer(vectorfield)
   .addLayer(pathplot)
   .addLayer(overlays);

d3.json("demo-data.json", function(data) {
    mapdata[heatmap.id()] = data.heatmap;
    mapdata[overlays.id()] = data.overlays;
    mapdata[vectorfield.id()] = data.vectorfield;
    mapdata[pathplot.id()] = data.pathplot;

    d3.select("#demo").append("svg")
    .attr("height", 487).attr("width",720)
    .datum(mapdata).call(map);
});

資材のダウンロード
- cd /var/www/html/fp
- wget http://dciarletta.github.io/d3-floorplan/Sample_Floorplan.jpg
- wget http://dciarletta.github.io/d3-floorplan/demo-data.json

ちょっと長いですが準備は以上です
基本はバージョン等が同じであればコピペで動作するはずです

動作確認

http://localhost/fp にアクセスしてみましょう
以下のような感じで表示されると思います

これでデモの動作は完了です

これからどうするか

ベースになっているフロアプラン自体は画像をただ表示しているだけです
その上にレイヤを重ねてヒートマップやらパスの線を表示しているだけです
なので大本のフロアプランを例えば自宅とか会社の間取りにしたい場合は自分で作るなり画像をどっかから引っ張ってくる必要があります

で、その上のレイヤに関しては「demo-data.json」というファイルですべて管理されています
なので例えばヒートマップの位置を変更したい場合は heatmap -> map -> x とかの値を変更すると位置が変わると思います

最後に

d3-floorplan 自体のメンテは最近行われていませんでしたが、比較的新しい JQuery や D3 で動作したので使うのに現状、問題はなさそうです

実は自分がやりたかったのはフロアプラン自体を作りたかったのでそれが画像だと知ってちょっと残念でした

hawksnowlog

2017年3月9日木曜日

d3-floorplan を使ってみた

概要

環境

インストール

デモ用のファイルの作成

動作確認

これからどうするか

最後に

0 件のコメント:

コメントを投稿