Analysis of spatial (GIS) and temporal information

Search in spatial ranges

Search in temporal ranges（the spatial rages satisfying the condition XX）（the temporal range satisfying the condition XX）

Tutorial about Web HuTime

LineChart

event1

event3
event2

event4
event5event6ChronologicalTable

Tatsuki Sekino
International Research Center
for Japanese Studies

Temporal Information Analysis

GIS
www.hutime.org

1Time Information System - HuTime

www.hutime.org

2

Overview: Time Information System - HuTime

A software specialized for visualization and analysis of temporal information.
There are two versions of HuTime.

Features• GIS like operation to visualize and analyze temporal information.
• Visualization and analysis of spatial information are omitted on purpose.

Major Functions• Chronological tables and charts (line, bar and plot) are displayed on the same
temporal axis
• Search and extract of events• logical operation between layers• Time ruler according to different types of calendar system

Desktop HuTime(Stand Alone Version)for visualization and analysis
Web HuTime(embedded in a webpage)
only for visualization

Download site
http://www.hutime.org

www.hutime.org

3

www.hutime.org

4Time Information System - HuTime
LayersLine Chart

Desktop HuTime
Layers
List

Chronological Table

Time Ruler(Ticks)

Time Ruler(Periods)

Time Slider
interface to move and zoom in/out displayed time range
www.hutime.org

5Marge of temporal data with HuTime

www.hutime.org

6

Example for merge of chronological tables
Chronological Table
about Shiga Prefecture（Shiga Prefecture）

Chronological Table
about Lake Biwa

Layer 1

（Lake Biwa Research Institute）

Chronological Table
about Documents relating withLake Biwa Development（Library of Shiga Prefecture）

Chronological Table
about Water Resource Developmentand Environment in Lake Biwa

Layer 2（Executive Committee ofSymposium for Issues about
Development of Lake Biwa）

Events including word of "red tide"are extracted from the four tables

SearchResult" Red Tide Chronological Table
in Lake Biwa"
www.hutime.org

7

www.hutime.org

8Temporal analysis using HuTime
What kind of disasters were occurred during heavy rain fall and strong wind?
(Shiga Prefecture, Japan)

HuTime Web API

www.hutime.org

9

Web platform for temporal informationwww.hutime.org

10

HuTime Web API

There are many web platform for spatial information
Features of HuTime Web API
Visualization
What can we do using Google Maps?

• Changing displayed temporal range(move, zoom in/out)• Embedding a map in a web page

• Operation about panels and layers(changing size and position)• Intuitive and simple operation

Data• Loading local and remote data

• Customizing a map using API

There is few web platform for temporal information

Extended Features• There are web applications showing timelines and charts, but available features are limited.

• Time scale according to local calendars• It is impossible to integrate various kinds of temporal information.

• Figures, characters and images can be shown on a layer• Customizing original function

Purpose of the project• Event handling

Developing Web API for temporal information
Features like Google Maps (API) will be realize for temporal information.
www.hutime.org

11

www.hutime.org

12

An usage example of Web HuTime API

Detailed information is available on the web

A timeline and charts
are embedded in a web
page
Note about the chart
Overlaying charts
Decorated chart(icons as plots)
Note about timeline
Time scale according toJapanese Calendar

http://web.hutime.org/manual/
www.hutime.org

13

www.hutime.org

15

www.hutime.org

14

Tutorial(HuTime API)

http://www.hutime.org/tutorial/20180824/
www.hutime.org

16Basic Operation

Basic Structure

OperationPC

Smart Device

Moving temporal range

Drag horizontally

Swipe horizontally

Zoom in/out temporal range

Turn mouse wheel

Pinch horizontally

Scrolling panels

Drag vertically

Swipe vertically

Changing height of a panel

Drag a boundary between panels

Pinch vertically

Changing order of a panel

Drag with SHIFT key

Hold with two fingers andswipe

www.hutime.org

17

Basic structurewww.hutime.org

18

Append a layer of temperature<!DOCTYPE html><html lang="en"><head><meta charset="UTF‐8"><script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script><title>Web HuTime Tutorial</title></head><body><div id="timeline"></div><script type="text/javascript">var ht = new HuTime();var pnls = new HuTime.PanelCollection(300);
ht.appendPanelCollection(pnls, document.getElementById("timeline"));var pnl = new HuTime.TilePanel();pnls.appendPanel(pnl);

var ht = new HuTime();var pnls = new HuTime.PanelCollection(300);
ht.appendPanelCollection(pnls, document.getElementById("timeline"));var pnl = new HuTime.TilePanel();pnls.appendPanel(pnl);
var lyrTemp = new HuTime.LineChartLayer(
new HuTime.CalendarChartRecordset("http://www.hutime.org/tutorial/20180824/Climate.csv",“date", "date", "temperature"));pnl.appendLayer(lyrTemp);
ht.redraw(HuTime.timeToJd(2014, 1, 1), HuTime.timeToJd(2018, 6, 1));

ht.redraw(HuTime.timeToJd(2014, 1, 1), HuTime.timeToJd(2018, 6, 1));</script></body></html>http://www.hutime.org/tutorial/20180824/step01.html
www.hutime.org

http://www.hutime.org/tutorial/20180824/step02.html
19

www.hutime.org

20

Sample data

Append a layer of precipitation

Climate.csv
date
1982-06
1982-07
1982-08
1982-09
1982-10temperature
27.2
26.6
26.5
26.7
26

precipitation
122
109
117
165
243

var lyrTemp = new HuTime.LineChartLayer(new HuTime.CalendarChartRecordset("http://www.hutime.org/tutorial/20180824/TaipeiClimate.csv",“date", “date", "temperature",null, new HuTime.FigureStyle("red"), new HuTime.FigureStyle(null,"red", 3)));
pnl.appendLayer(lyrTemp);
var lyrPrep = new HuTime.BarChartLayer(new HuTime.CalendarChartRecordset("http://www.hutime.org/tutorial/20180824/Climate.csv",“date", “date", "precipitation"));pnl.appendLayer(lyrPrep);

date,temperature,precipitation
1982-06,27.2,122
1982-07,26.6,109
1982-08,26.5,117
1982-09,26.7,165
1982-10,26,243

ht.redraw(HuTime.timeToJd(2014, 1, 1), HuTime.timeToJd(2018, 6, 1));

http://www.hutime.org/tutorial/20180824/step03.html
www.hutime.org

21

www.hutime.org

22

Decoration of the layersAppend timeline layer

var lyrTemp = new HuTime.LineChartLayer(
new HuTime.CalendarChartRecordset("http://www.hutime.org/tutorial/20180824/Climate.csv",“date", “date", "temperature",null, new HuTime.FigureStyle("red"), new HuTime.FigureStyle(null,"red", 3)));lyrTemp.style.zIndex = 100;
pnl.appendLayer(lyrTemp);

lyrPrep.vScales[0].side = 1;
lyrPrep.showVScaleLine = false;
pnl.appendLayer(lyrPrep);

var lyrPrep = new HuTime.BarChartLayer(
new HuTime.CalendarChartRecordset("http://www.hutime.org/tutorial/20180824/Climate.csv","date", “date", "precipitation",null, new HuTime.FigureStyle("cyan")));
lyrPrep.vScales[0].side = 1;
lyrPrep.showVScaleLine = false;
pnl.appendLayer(lyrPrep);

var pnl2 = new HuTime.TilePanel();pnls.appendPanel(pnl2);
var lyr3Typhoon = new HuTime.TLineLayer(
new HuTime.CalendarTLineRecordset("http://www.hutime.org/tutorial/20180824/Typhoon.csv","From", "To", "Name"));pnl2.appendLayer(lyr3Typhoon);
ht.redraw(HuTime.timeToJd(2014, 1, 1), HuTime.timeToJd(2018, 6, 1));

http://www.hutime.org/tutorial/20180824/step04.html
www.hutime.org

http://www.hutime.org/tutorial/20180824/step05.html
23

www.hutime.org

24Sample data

Decoration of the layers

Number Name
1001
1002
1003
1004

Omais
ConsonChanthu
DianmuFrom
2010-03-23
2010-07-12
2010-07-18
2010-08-07

To
2010-03-26
2010-07-18
2010-07-23
2010-08-13

URL
https://www.data.jma.go.jp/fcd/
https://www.data.jma.go.jp/fcd/
https://www.data.jma.go.jp/fcd/
https://www.data.jma.go.jp/fcd/

Number,Name,From,To,URL
1001,Omais,2010-03-23,2010-03-26,https://www.data.jma.go.jp/fcd/yoho/data/typhoon/T1001.png
1002,Conson,2010-07-12,2010-07-18,https://www.data.jma.go.jp/fcd/yoho/data/typhoon/T1002.png
1003,Chanthu,2010-07-18,2010-07-23,https://www.data.jma.go.jp/fcd/yoho/data/typhoon/T1003.png
1004,Dianmu,2010-08-07,2010-08-13,https://www.data.jma.go.jp/fcd/yoho/data/typhoon/T1004.png

var lyr3Typhoon = new HuTime.TLineLayer(new HuTime.CalendarTLineRecordset("http://www.hutime.org/tutorial/20180824/Typhoon.csv","From", "To", "Name",null, new HuTime.FigureStyle("lime"), new HuTime.StringStyle(16, "orange")));
pnl2.appendLayer(lyr3Typhoon);

http://www.hutime.org/tutorial/20180824/step06.html
www.hutime.org

25

www.hutime.org

26

Append calendar scales

Basic Temporal Data
andCalendar Web API

pnl2.appendLayer(lyr3Typhoon);var lyrScl1 = new HuTime.CalendarScaleLayer(50, null, 0, "2.1");
lyrScl1.zIndex = 200;
pnl.appendLayer(lyrScl1);
var lyrScl2 = new HuTime.CalendarScaleLayer(50, null, 0, "103.1");
lyrScl2.zIndex = 200;
pnl2.appendLayer(lyrScl2);
ht.redraw(HuTime.timeToJd(2014, 1, 1), HuTime.timeToJd(2018, 6, 1));

http://www.hutime.org/tutorial/20180824/step07.html
www.hutime.org

27

www.hutime.org

28Three kinds of knowledge for temporal information analysis

Feature of the Calendar Web API(1) Obtaining information about a calendrical period

There is less basic data for temporal analysis• The next era name of “元禄” in Japanese calendar• Convert “元禄14年3月14日” into Chinese letters (元禄十四年三月十四日)(2) Calendar conversion

Time Basic data

• Convert “元禄14年3月14日” into date of Gregorian calendar

・ Essential for temporal information analysis
・ General and Common for various research and education(3) Adding duration to a calendrical period• Date after 22 months of “元禄14年3月14日”(1) Base Chronological Table

Base Maps(4) Duration between two calendrical periods(2) Event Index

Gazetteers(3) Calendar Conversion

Datum Conversion

www.hutime.org

29

How to use• Duration between “延宝8年7月18日” and “宝永6年1月10日”(5) Relative relationship between two calendrical periods• Is it true that “延宝4年” > “寛文7年” and “延宝4年” < “元禄14年” ?

www.hutime.org

30

Usage of the Calendar API in HuTime Project

Manual of Calendar Web API

http://ap.hutime.org/cal/index.html※English version is in preparation.

How to access to the API• Set required valuables, and request following URL (GET or POST method)

http://ap.hutime.org/cal/（An example by GET method）
http://ap.hutime.org/cal/?method=conv&ical=101.1&itype=date&ival=2017-12-09&ocal=1001.1“9th December 2017” in Gregorian calendar is converted into Japanese Calendar

http://www.hutime.org/basicdata/calendar/form.html
www.hutime.org

31

www.hutime.org

32

Append a form onto the page

Tutorial(Calendar API)

ht.redraw(HuTime.timeToJd(2014, 1, 1), HuTime.timeToJd(2018, 6, 1));</script><p><form>
from <input name="from" />to <input name="to" /><input type="button" value="redraw" onclick="redrawWithCalendar()"></form></p></body>http://www.hutime.org/tutorial/20180824/step08.html
www.hutime.org

33

Append a function to change temporal range

www.hutime.org

34

Tutorial is completed

ht.redraw(HuTime.timeToJd(2014, 1, 1), HuTime.timeToJd(2018, 6, 1));function redrawWithCalendar() {var begin, end;var request = new XMLHttpRequest();request.open('GET',"http://ap.hutime.org/cal/?method=info&ical=103.1&oprop=jdBegin&ival="+ document.forms[0].from.value, false);
request.send();if (request.status == 200)
begin = parseFloat(request.responseText);
request.open('GET',"http://ap.hutime.org/cal/?method=info&ical=103.1&oprop=jdEnd&ival="+ document.forms[0].to.value, false);
request.send();if (request.status == 200)
end = parseFloat(request.responseText);
ht.redraw(begin, end);}</script><p>

http://www.hutime.org/tutorial/20180824/step09.html
www.hutime.org

35

www.hutime.org

36

Final Goal of Web HuTime
Integration of temporal information onto Web HuTime• As a tool for viewing and analyzing temporal information(easy tool for publishing temporal information)

Thank you for your attention• As a hub for linking various kinds of data on the web, according to time
(Google Maps has the same role about location)

Tatsuki Sekino(International Research Center for Japanese Studies)

It is welcome bug reports.
sekino@nichibun.ac.jp

www.hutime.org

37

www.hutime.org

38