The Journal of the Society for Art and Science, Vol.15, No.4, pp.135 - 146 (2016)

A Daily Life Visualization by Representative Web Page Selection
and Magazine-Style Layout
Chica Matsueda1)

Takayuki Itoh1)

1) The Graduate School of Humanities and Sciences, Ochanomizu University{coco, itot} (at) itolab.is.ocha.ac.jp

Abstract
Web browsing history is a fruitful life log representing behavior and knowledge of users. Visualizationof summarized browsing history can contribute to represent these information. This paper proposesa system to extract representative Web pages from browsing history of users, and arranges them likea newspaper, called HistoryPaper. This system firstly clusters browsed Web pages based on theircontents. Then, it calculates priority of Web pages from search terms and rarity of accessed Web
pages, and selects the representative page of each cluster. HistoryPaper arranges the representative
pages by a layout algorithm following the magazine style applied in many news sites.

1 Introduction
Web browsing history contains fruitful information related to behavior and knowledge of users.
Visualization of Web browsing history can contribute to the reflections of actions of particulardays or previously studied knowledge of the users.
We suppose Web browsing history has bothadvantages of unconsciously and consciously
recorded life logs. Life log is a popular word in
the recent information technology field due to thegrowth of wearable devices. Sensing data including position and acceleration are recorded as unconscious life logs, while users consciously record
other kinds of life logs such as dailies. Unconscious life logs can be continuously recorded without any labor of users; however, limited typesof information can be stored due to functionality of the devices or equipment. On the other
hand, recording conscious life logs requires continuous labor. Web browsing history is a convenient life log, since we do not consciously record,even though it contains fruitful information related to behavior and knowledge of the users.
This paper presents “HistoryPaper”, a system

which displays sets of Web pages corresponding
to the summaries of browsing history of particular days. HistoryPaper consists of the following
two components. Firstly, it selects representative
Web pages in the browsing history of a day basedon the numbers of accesses and query words. It
then displays the selected Web pages applying
magazine-style layout.

2 Related WorkWeb page selection has been an active topic since
it is useful for summarization and classificationof Web sites. Many general purpose Web page
selection techniques apply link structures [1] orcontent similarity [5]. On the other hand, small
number of studies on Web page selection frompersonal browsing histories have been presented.
Web page layout is another key component ofHistoryPaper. Several experimental studies on
document layout, not only for Web pages but
also other media such as newspapers [12], demonstrate that document layout is critical for behavior of readers. Various rectangle packing tech-– 135 –

The Journal of the Society for Art and Science, Vol.15, No.4, pp.135 - 146 (2016)

niques have been applied for layout of Web pages
or other information. Squarified Treemap [2] is
one of the most popular techniques which divides
given rectangular spaces into particular number
of well-shaped small rectangles, and actually applied to many applications on Web page layout[10]. Also, there have been several techniques onlayout of multiple Web pages applying optimization techniques [3] [9] [11]. Meanwhile, there havebeen few studies on magazine-style-specific layout
for multiple Web pages. Kuhna et al. presented
a semi-automated magazine layout [4]; however,it places pieces of rectangular contents based onimage features, not importance and aspect ratios
which HistoryPaper applies.
There have been several services which display
representative Web pages related to the interest of the users. Paper.li (http://paper.li/) is
one of the typical services, which displays sets of
Web pages shared on social networking services
such as Twitter or Facebook. However, Paper.li
aims the all-in-one display of already shared Web
pages, while we focus on summarization of browsing history and real-time layout of Web pages
with magazine-style design.

3 Web Page Selection
HistoryPaper automatically selects multiple representative Web pages browsed on a particularday, and displays in a Web browser window. HistoryPaper firstly calculates importance of Web
pages browsed in a particular day. There havebeen several studies on selection of appropriate
number of representative text to summarize thelarge collections of documents. Lin et al. [6] presented that tf-idf based representative text selection brings satisfactory document summarization
results. We learned this knowledge to develop
an algorithm for representative Web page selection. The Web page selection technique implemented for HistoryPaper consists of the following
processes:

Process 1-2 then selects most important Web
pages from each of the clusters.
Process 1-3 finally calculates the importances ofclusters as sums of importance of Web pages.

3.1 Clustering of Browsed Web Pages
Process 1-1 firstly divides all the Web pages
browsed on a particular day into n clusters. It
specifies n (between 6 and 18 in our implementation) based on the size of a Web browser window
and the number of browsed pages on the day. We
calculate n by the following equation:n = max([18w/aw ], 6).

(1)Here, w is the number of pixels of the Webbrowser window, aw is the total number of pixels of the display, [∗] is the Gauss’s notation, andmax(a, b) is an operator to select the larger value.
The following is the brief description of Process
1-1.
1. Convert the contents of Web pages into Bagof-Words vectors.
2. Apply a dimension reduction to the Bag-ofWords vectors. Our implementation applies
Latent Semantic Analysis (LSA) for the dimension reduction.
3. Apply k-means clustering method to thedimension-reduced vectors.

3.2 Importance Estimation for Web Pages
Process 1-2 calculates the importance of the Web
pages pp by applying the following equation:
pp =

m+1
.
q

(2)

Here,

Process 1-1 firstly applies a clustering algorithm
to the Web pages based on the similarity of
their contents.
– 136 –

• m = mwm /mmax is the ratio of search keyword frequency, where mwm is the total number of keywords used for search query in the
day and contained in the current Web page,and mmax is the maximum value of mwm .

The Journal of the Society for Art and Science, Vol.15, No.4, pp.135 - 146 (2016)• q = qwp /qall is the valuableness of the current Web page, where qwp is the number ofaccesses to the current Web pages in the day,and qall is the total number of accesses to the
all Web pages in the day.
This definition is based on our heuristics thatWeb pages are important if they satisfy one ormore of the following conditions:• they are browsed over and over in theday, even though they are not usually wellbrowsed.
• they contain many keywords used for search
queries.
Process 1-2 selects the Web pages which havethe maximum pp values in each of the clusters as
the representatives.

3.3 Importance Estimation for Clusters
Finally, Process∑1-3 calculates the importance ofncclusters cp =k=1 pp (k), defined as a sum ofimportance of Web pages. Here, nc denotes thenumber of Web pages in a particular cluster, andpp (k) denotes the importance of the k-th Web
page in the cluster calculated by equation (2).
The value cp is used to calculate the areas of Web
pages in magazine-style layout.

4 Magazine-Style Layout
This section describes our algorithm to place
the selected representative Web pages mimicking
magazine-style layout.

4.1 Definition of Magazine-Style Web
Sites

Magazine-style design is a kind of informal design name. There is no standard theoretical definitions of magazine-style at least in our survey. This section describes our own definition ofmagazine-style design based on our observation of
Web sites as the Web design which satisfies thefollowing conditions:
Condition 1: Divide the window spaces into 2,
3, or 4 of vertically-long subspaces, and thenframe the Web pages into the subregions.
Condition 2: Assign independent areas to eachof Web pages based on their importance, andplace the important Web pages in the upperleft part of the window.
Condition 3: Unify the aspect ratios of the rectangular subregions.
Condition 4: Arrange the equally sized andshaped rectangular subregions adjacently.
We measured sizes and aspect ratios of rectangular subregions in the magazine-style news Web
site 2 to verify [Condition 3]. Based on this experiment, we defined the ideal aspect ratios of therectangular subregions as follows: 0.9(if an image is located upper-side)
1.6, 3.0, or3.8(if an image is located left-side)
1.0, 3.8, or5.0(if no image is located)
Here, we suppose one or no image is displayedin each of subregions. We also suppose that theimage is displayed in the upper or left side of thesubregions.
We also observed the same Web sites to verify[Condition 4]. As a result, we found that approximately 95% of Web pages are arranged adjacently
with equally sized and shaped Web pages.

4.2 Preliminary Experiment

Magazine-style design is a recent popular styleof Web sites, which divides the windows of Web
browsers into rectangular subregions, and frames
the text and images into the subregions. This
design is reasonable when we would like to show
various contents in a single page like magazines
or newspapers, and therefore many Web sites currently apply this design.

We tested Squarified Treemap [2] for the layout of Web pages before the development of themagazine-style layout algorithm. We applied
2

The New York Times (http://www.nytimes.com/),
The New Yorker (http://www.newyorker.com/),
Japan
Today
(http://www.japantoday.com/),sky NEWS (http://news.sky.com/), BBC NEWS(http://www.bbc.com/news/)– 137 –

The Journal of the Society for Art and Science, Vol.15, No.4, pp.135 - 146 (2016)

Squarified Treemap provided by d3.js, and found
the following problems on the rectangle layout by
Squarified Treemap after testing with several setsof Web pages.

We suppose the browser window is not scaled or
scrolled unless the layout is recaluclated.
The layout technique presented in this section
consists of the following processes:• Squarified Treemap generates too small subregions. In other words, it is not always visually preferable to assign the exact importance value cp as the areas of the subregions.
Rather, we would like to flexibly adjust theirareas to realize visually preferable layout.

Process 2-1 generates groups of Web page clusters based on their importance values.

• Squarified Treemap generates small numberof very thin rectangles while others are wellshaped.

4.3 Data Structure

Process 2-2 calculates areas of rectangles to be
assigned to groups of Web page clusters.
Process 2-3 generate the layout of rectangles.
Process 2-4 displays the representative Web
pages based on the layout result.

4.4 Cluster Grouping

We define the variables related to clusters of Web
pages as follows.
• R: The set of all clusters.
• Ri : The i-th cluster.
• G: The set of all cluster groups.

Process 2-1 generates groups of Web page clusters
based on their importance values cp , so that it canadjacently display the clusters which have similar
cp values as similarly-sized rectangles. Two clusters Ri and Rj would belong to the same group
if they satisfy the following equation:• Gi : The i-th cluster group.

cpj ≤ ⌈(cpi × 1.3)⌉.

• C: A set of arbitrary cluster groups Gi ,Gj ,...
• S: Set of Web pages which can be describedas either R, Gi or C.
Also, we define the following variables.
• |S|: The number of Web pages in S.
• area(S): Total area in the display space occupied by Web pages in S.
• priority(S): Sum of the values cp of the Web
pages in S.
• ratio(S): Ideal aspect ratio of the rectangle
occupied by S. See equation 3.
• type(R): Boolean value which denotes theexistence of an image in R.

(3)

Here, cpi and cpj are the importance value of clusters Ri and Rj respectively.
Process 2-1 repeats to group the clusters in theascending order of their cp values, so that we canaggressively form groups of smaller clusters. We
do not apply the above equation, if Ri has alreadybelonged to another group, or boolean values of
the two clusters are diﬀerent.
Figure 1(Left) shows an illustration of Process
2-1. Figure 1(Left)(1) depicts the list of originalimportance values, and Figure 1(Left)(2) depicts
the grouping result. This section describes thegenerated groups G1 ....GnG , where nG denotes
the number of cluster groups. Process 2-1 contributes to satisfy [Condition 4].

• W : Width of the browser window space.
• H: Height of the browser window space.

4.5 Area Assignment for Clusters• Wmin : Minimum value of width assigned to
Web pages.
• Hmin : Minimum value of height assigned to
Web pages.

Process 2-2 calculates the areas of rectangular regions which are to be assigned to Web pages fromtheir importance values cp . Here, we do not directly apply cp as relative values of areas. Instead,– 138 –

The Journal of the Society for Art and Science, Vol.15, No.4, pp.135 - 146 (2016)(1) Before grouping
cp

typeR

45
32
30
20
11
10
5
2
1

true
true
true
false
false
false
false
false
false

(2) After grouping

G1
G2
G3
G4
G5
G6

cp

typeR

45
32&30
20
11&10
5
2&1

true
true
false
false
false
false

G1
G2
G3
G4
G5
G6

cp

areaRi

typeR

45
32&30
20
11&10
5
2&1

27
20&18
12
7&6
3
2&1

true
true
false
false
false
false

G1
G2
G3
G4
G5
G6

Figure 1: (Left) Grouping of clusters. (Right) Calculation of areas for representative Web
pages.

area(Ri ) =priority(Ri )WH
Wmin Hmin priority(R)areaRi

typeR

20
15&15
11
7&7
4
3&2

true
true
false
false
false
false

I(a)

we defined the areas of the rectangular subregions
as the following equation.
(

cp

45
32&30
20
11&10
5
2&1

I(b)

20

Firstly place G1.

20

Firstly place G1.

11

G3 is preferable.
Error |10-11|=133

G2 is preferable.
Error |33-30|=3)1

I(a) is selected due to the smaller error.

α

. (4)

Here, α is a constant real value (1.3 in our implementation) to control the flexibleness of thearea assignment. This equation avoids to generate too small subregions, and therefore solves thefirst problem of Squarified Treemap discussed in
Section 4.2.
Figure 1(Right) illustrates an example of theset of areas of cluster groups illustrated in Figure1(Left)(2).

II(a)

II(b)

20

20

11

11

III(a)

III(b)
Place G2.

Place G2.

20

20

30

11

23

30
Too narrow.

11

G4 & G5 is preferable.
Error |23-18|=5
G4 + G5 = 7+7+4=18

4.6 Web Page Layout

III(a) is selected.

Process 2-3 divides the Web browser window into
multiple rectangular subregions according to theareas calculated by equation (4). Following is theprocessing flow of Process 2-3, while Figure 2 also
illustrates this process.

20

15 Deform G2.

20

15

14

11

15

11

15

4
5

VII

VI

1. Let S = G, rectW = W , and rectH = H.
20

2. Specify the cluster group Stop which has thelargest area in S. Calculate the areas of clusters in Stop , and tentatively place the clusters
at the upper-left end of the empty region of
the display space taking into account theiraspect ratios ratio(Stop ).

Place G4, G5 & G6.

V

IV

15

7
20

15

7

7
11

15

4
5

7

11

15

4
2
3

Figure 2: Illustration of our magazine-style layout• Figure 2 (I(a) and I(b)) shows illustrations of the tentative layout of G1 (corresponding to Stop ) with two choices of
the aspect ratio.
– 139 –

algorithm.

The Journal of the Society for Art and Science, Vol.15, No.4, pp.135 - 146 (2016)• If the width of the blank region at theright end is smaller than Wmin , the algorithm extends the width of Stop to fill
the right end of the blank. Similarly,
the algorithm extends the height of Stop
to fill the bottom of the blank, if theheight of the blank region at the bottom
is smaller than Hmin . Figure 2(III(a))
depicts an example of narrow blank atthe bottom, and Figure 2(IV) depicts
after the expansion of the rectangles.
3. Calculate the area of the blank region below
the tentatively placed rectangles. Rectangular regions painted in sky blue in Figure2(I(a)(b)) and Figure 2(III(a)(b)) are suchblank regions. Repeat this process for eachof the tentative layout results, and finallyselect the layout result which errors of areas between the selected cluster group andthe blank region is the smallest. At this moment, our algorithm extracts the candidatesof cluster groups to be placed at the sky blue
regions. This section describes the set of candidate cluster groups as Sopt .
• In the example illustrated in Figure2(I), G3 is selected for the layout in Figure 2 (I(a)), and G2 is selected for the
layout in Figure 2 (I(b)). In this caseG2 or G3 corresponds to Sopt . Layout in
Figure 2 (I(a)) is then selected, because
the error of areas is smaller.
This process is also applied to the empty
regions after the left end of the display
space has been filled. Figure 2(III) depicts
an example of this situation after the left
end of the display space has been filled by
G1 and G3 . G2 is selected from Sopt as
Stop , and placed at the upper-left end of theempty space with two choices of aspect ratios, as shown in Figure 2(III(a)) and Figure2(III(b)).

so that the rectangles satisfy the equation
asumbef ore = asumaf ter , where asumbef ore
is sum of the areas of rectangles before thedeformation, and asumaf ter is sum of the areas of rectangles after the deformation.
5. Apply the following process if Sopt is notcleared.
a) LetrectW = WStop , andrectH = rectH − HStop .
b) If |Sopt | ≥ 3:
Apply 2. and 3., replacing |Sopt | as
S. This process applies the nested
magazine-style layout to the rectangular subregions.
c) If |Sopt | < 3:
Apply 7., replacing |Sopt | as S. As a result, G4 in Figure 2(V) is divided into
two recrangles, as depicted in Figure2(VI).
d) Clear Sopt when its all cluster groups
are placed in the display space.
6. Apply the following process to S if Sopt iscleared.
a) Let rectW = rectW − WStop .
b) If |S| ≥ 3:
Apply 2. and 3. As a result, the process generates a series of rectangles illustrated in Figure 2(III(a)(b)).
c) If |S| < 3:
Apply 7. As a result, the process fills
the right end regions as illustrated in
Figure 2(V).
7.

4. Deform the placed rectangles to gather theirright end edges. Figure 2(II(a)) illustrates
the rectangles before the deformation, andFigure 2(II(b)) illustrates after the deformation. The technique gathers the edges– 140 –

a) If S corresponds to Gi :Horizontally or vertically subdivide into
|S| rectangles, and select one of the results which brings the better aspect ratios.
b) If S corresponds to C:
Horizontally or vertically subdivide,
and apply the following process replacing each of Ci as S.
• Apply 2. and 3. if |S| ≥ 3.
• Apply 7. if |S| < 3.

The Journal of the Society for Art and Science, Vol.15, No.4, pp.135 - 146 (2016)

Here, we limit the maximum number of combination of rectangles as 3 in our implementation,
because this layout problem is NP-hard. We estimate the complexity as O(|R|lmax ) where lmax isthe maximum number of set of rectangles, while
the complexity would be O(|R||R| ) if we do notlimit the maximum number of candidate layouts.
Process 2-3 roughly divides the display space
into vertically-long subregions to satisfy [Condition 1], and generates rectangular subregions assigning importance-based areas to them to satisfy[Condition 2]. Process 2-1 contributes to satisfy[Condition 3], and flexible aspect ratio selection
satisfies [Condition 4].
In the layout results, many of important Web
pages are placed in the upper-left side of the display space. It is generally a good property because many people firstly look at the upper-leftpart of the windows [8] [13].

4.7 Representative Web Page Display
Process 2-4 finally maps the representative Web
pages into the rectangular subregions. HistoryPaper displays the title of Web pages, URL, and thesummarized text in each of the rectangular subregions. We apply the lead technique [7] which
extracts important sentences in the beginning of
the documents to generate the summarized text.

5 Results
This section presents results and evaluations ofHistoryPaper. We implemented the Web page
selection module with Python 2.7 and several libraries including numpy, scipy, and scikit-learn.
We also implemented two versions of the Web
page layout module with JavaScript 1 and Python
2.7. JavaScript version is developed as a part of
Google Chrome Extension, while Python version
is just developed for the evaluation of the layout
algorithm as shown in this section.
We implemented and executed the client software including Web page layout module as anextension of Google Chrome. The extension
sends the browsing history and page contents to1

https://github.com/cocodrips/articlemap-js

Analysisserver(1) Browsing history&
Page contents(2) Selected pages

Client(Web browser)(3) Layout

Figure 3: Architecture of our implementation ofHistoryPaper.

the analysis server software. We implemented
and deployed the server software containing the
Web page selection module running on a locahost
server. The server then sends the set of selected
Web pages to the client software. Finally, theclient software calculates the layout and displays
the Web pages in the Web browser. Figure 3
shows the system architecture.

5.1 Examples of Layout
Figure 4 shows an example of Web page layout result by HistoryPaper. We can observethat HistoryPaper roughly divides the window
into vertically-long subregions, and then divides
into well-shaped rectangles which Web pages are
mapped. We can also observe that similarly-sizedsets of rectangles are adjacently placed. This
example demonstrates HistoryPaper realizes thelayout of Web pages mimicking magazine-style.
Figure 5 shows other examples of layouts generated from diﬀerent browsing histories. These
examples demonstrate that HistoryPaper realizes
various layouts from variety of browsing histories. Meanwhile, Figure 7 shows examples of layouts from the same browsing history while adjusting the number of representative Web pages andranges of importance values. Table 1 shows thecomputation time for layout calculation for eachof the examples shown in Figure 7. We measured
the computation time three times for each of thelayouts and showed these averages in this table.

– 141 –

The Journal of the Society for Art and Science, Vol.15, No.4, pp.135 - 146 (2016)

Web page contains images. Otherwise, x iseither 1.0, 3.8, or 5.0.
Dratio =n∑

1 − (max(x/ri , ri /x))2 .

(5)

i=0

Figure 4: Example of the layout result by HistoryPaper. (Left) Layout result. (Right) Web
pages mapped to the rectangular subregions of the layout result.

2. Calculate Wratio , the worst value of the difference between ideal and actual aspect ratios, by applying equation (6).
Wratio = max{Dratio (i), i = 1, · · · , n}. (6)We determine that the layout is better if Dratio
and Wratio are smaller.
This section shows the numeric comparison oflayout results between HistoryPaper and Squarified Treemap. We compared the following three
implementations in this experiment:
L1 by HistoryPaper.

Figure 5: Other examples from diﬀerent browsing
histories.

L2 by “Deformed Squarified Treemap” featuring
the area adjustment by equation (4).
L3 by “Squarified Treemap” without applying
the area adjustment.

5.2 Numeric Comparison of Layout
Results
We numerically compared the layout results ofHistoryPaper and Squarified Treemap. We defined evaluation functions as follows, where ri denotes the aspect ratio of the i-th rectangle.

Figure 6 shows examples of the layout results
applying two datasets. Table 2 also shows Dratio
and Wratio of the layout results.
Table 2: Dratio and Wratio of the layout results.

Dataset 1
Dataset 1
Dataset 2
Dataset 2

1. Calculate Dratio , the diﬀerence between theideal aspect and the actual aspect ratio, byapplying equation (5).
Here, x is either 0.9, 1.6, 3.0, or 3.8, if theTable 1: Computation times spent for the layout.
(msec.)
rectangles
10
20
30
40

[0, 10]
84
150
426
3675

[0, 50]
77
74
167
3881

[0, 100]
66
106
236
7428

DratioWratioDratioWratio

L1
5.3
1.3
8.5
2.0

L2
23.9
10.2
13.6
3.0

L3
11.6
3.4
9.5
2.2

The result suggests Squarified Treemap occasionally generates thin rectangles in the lowerright ends of the display spaces. Therefore, Wratio
sometimes gets extremely bad while using Squarified Treemap. Though this problem can be improved by the area adjustment applying the equation (4), this result demonstrates HistoryPaper
obtained better Dratio and Wratio values comparing with Squarified Treemap.

– 142 –

The Journal of the Society for Art and Science, Vol.15, No.4, pp.135 - 146 (2016)

5.3 Subjective Evaluation of Layout
Results
We showed the layout results shown in Figure 6
to 21 student participants majoring computer science. We asked to evaluate the layouts in thefive-point Likert scale from the following four aspects:

joring computer science. We asked them to use
HistoryPaper for one hour while observing the visualization results with their own browsing histories. We prepared the following three implementations of the representative Web page selection
process:(a): Selection as presented in this paper

Q1: Evaluate total aesthetics and balance of thelayout results.

(b): Random selection from browsing histories

Q2: Imagine and evaluate the comfort of reading
sentences embedded in the rectangles.

We then asked them the following two questions:

Q3: Evaluate the visibility of “every” rectangles.
Q4: Evaluate the eﬀect to emphasize rectangle
which have larger values.
Table 3 shows the average evaluation values. It
demonstrates that HistoryPaper received better
evaluations in Q1 and Q2. These results denotethat HistoryPaper archived more aesthetic andcomprehensive layouts. Also, this table demonstrates that L2 (Deformed Squarified Treemap)
received poor evaluations in Q4, while L3 (Squarified Treemap) received poor evaluations in Q3.
These results denote that existing techniques
have problems on particular rectangles comparing with HistoryPaper.
Table 3: Subjective evaluations of the layout
results.

Dataset 1
Dataset 2
Dataset 1
Dataset 2
Dataset 1
Dataset 2
Dataset 1
Dataset 2

Q1
Q1
Q2
Q2
Q3
Q3
Q4
Q4

L1
3.59
4.18
3.19
3.91
3.95
4.09
4.18
3.32

L2
2.95
3.90
2.68
3.86
3.95
4.45
2.31
2.77

L3
2.14
3.32
1.91
3.05
1.62
3.27
2.95
3.05

(c): Random selection from clusters

Q1: Did you have anything to remember yourpast actions or previously discovered knowledge while using HistoryPaper?
Q2: Which result was the best result for you?
Table 4: Subjective evaluations of the Web page
selection results.
Q1
Q2

Yes:9, No:1(a):8, (b):2, (c):0

Table 4 shows the evaluation results. This table shows that 9 of the participants answered thatthey remembered something while using HistoryPaper for the first question. This result suggests that the concept of HistoryPaper is eﬀective for the reflection of their past Web browsing. For the second question, 8 of the participants
selected (a), while other 2 participants selected(b). The 2 participants mentioned that it was
enjoyable if HistoryPaper displayed several unexpected Web pages, and therefore random selection seemed better. We would like to reflect thiscomments to make HistoryPaper more enjoyable
and satisfactory.

6 Conclusion and Future Issues
5.4 Subjective Evaluation of Web Page
Selection Results
Finally, we introduce our user evaluation on Web
page selection with 10 student participants ma-

We presented HistoryPaper aiming to the visualization of summarized daily life information ofusers’ activity and acquired knowledge.
Following are our future issues to extend HistoryPaper.

– 143 –

The Journal of the Society for Art and Science, Vol.15, No.4, pp.135 - 146 (2016)

Section 4.6. We would like to carefully adjust
Display of large number of Web pages. Our curthese values and observe how the layout results
rent implementation defines the number of repare customized, and parameterize such constantresentative Web pages based on sizes of Web
values if they are eﬀective to flexibly adjust thebrowser windows, usually between 8 and 16 in our
layout results. Then, we would like to valuate thesetting. In our observation there are two types oflayout results of HistoryPaper by comparing withmagazine-style Web sites: the former type does
the actual Web sites.
not require any scroll operations by placing all
representative Web pages in a limited window
space, while the latter type apply vertically-long
References
design which require scroll operations. Our current implementation is based on the former de[1] R. Baeza-Yates, E. Davis, Web Page Ranking Ussign. On the other hand, it is not necessary to
ing Link Attributes, International World Widelimit the number of Web pages if we apply the
Web Conference, 328-329, 2004.
vertically-long layout. We would like to extend[2] M. Bruls, K. Huizing, J. J. Van Wijk, Squarified
the algorithm to support such layout.
Treemaps, Data Visualization 2000, 33-42, 2000.
More factors for representative Web page selection.
[3] J. Gonzalez, I. Rojas, H. Pomares, M. Salmeran,In this study we supposed that important Web
J. J. Merelo, Web Newspaper Layout Optimizapages can be specified based on users’ aggressivetion using Simulated Annealing, IEEE Transacactions estimated from number of accesses andtions on Systems, Man, and Cybernetics, Part B:
query keywords. That is the reason we applied
Cybernetics, 32(5), 686-691, 2002.
just two variables m and q to equation (2).
[4] M. Kuhna, I.-M. Kivela, P. Oittinen, SemiWe can apply other factors obtained from Web
automated Magazine Layout Using Content-based
access analysis services such as Google Analytics
Image Features, ACM International Conference
to select proper representative Web pages.
on Multimedia, 379-388, 2012.
Our
Analysis of long-term browsing histories.
[5] O.-W. Kwon, J.-H. Lee, Text Categorization
current implementation supposes to select repbased on k-nearest Neighbor Approach for Web
resentative Web pages from browsing history ofSite Classificatiob, Information Processing andManagement, 39(1), 25-44, 2003.
a particular day. On the other hand, it is usefulto represent long-term (e.g. one year) behavior[6] C. Y. Lin, E. Hovy, Identifying Topics by Posiof a user from his/her browsing histories. It may
tion, Fifth Conference on Applied Natural Language Processing: Association for Computationalbe diﬃcult to appropriately select representative
Linguistics, 283-290, 1997.
Web pages from huge number of browsed Web[7] M. Litvak, M. Last, M. Friedman, A New Appages using our current algorithm. We would
proach to Improving Multilingual Summarization
like to extend the algorithm so that we can selectusing a Genetic Algorithm, 48th Annual Meeting
reasonable number of representative Web pagesof the Association for Computational Linguistics,
from long-term browsing histories.
927-936, 2010.
Aesthetic evaluation of layout results. We would[8] M. Nebeling, F. Matulic, M. C. Norrie, Metrics
like to discuss how to evaluate aesthetics of thefor the Evaluation of News Site Content Layout inlayout results, which is diﬃcult to essentially evalLarge-screen Contexts, ACM SIGCHI Conferenceuate by our current criteria Dratio and Wratio .
on Human Factors in Computing Systems, 1511Also, we would like to observe and measure the1520, 2011.
actual magazine-style Web sites more carefully.
[9] A. Oliver, N. Monmarch, G. Venturini, InterOur current implementation on magazine-styleactive Design on Web Sites with a Genetic
layout contain constant values based on our simAlgorithm, IADIS International Conference on
ple observation, such as aspect ratios of rectanWWW/Internet, 355-362, 2002.
gles described in Section 4.1, the constant value[10] T.-H. Ong, H.-C. Chen, W.-K. Sung, B. Zhu,
“1.3” in equation (3), and several other constant
Newsmap: a Knowledge Map for Online News,values defined in the processing flow described in
Decision Support Systems, 39(4), 583-597, 2005.
– 144 –

The Journal of the Society for Art and Science, Vol.15, No.4, pp.135 - 146 (2016)[11] T. Strecker, L. Hennig, Automatic Layoutingof Personalized Newspaper Pages, Operation Research, 469-474, 2008.
[12] C. Wartenberg, K. Holmqvist, Daily Newspaper
Layout - Designers Predictions of Readers Visual
Behaviour - A Case Study, Lund University Cognitive Studies, 126, 1101-8453, 2005.
[13] H. Weinreich, H. Obendorf, E. Herder, M. Meyer,
Not QUite the Average: An Empirical Study of
Web Use, ACM Transactions on the Web, 2(1), 5,
2008.

松枝知香
2013 年お茶の水女子大学理工学部情報科学科卒業．2015
年お茶の水女子大学大学院人間文化創成科学研究科理学専攻博士前期課程修了．
伊藤貴之
1990 年早稲田大学理工学部電子通信学科卒業．1992 年
早稲田大学大学院理工学研究科電気工学専攻修士課程修了．同年日本アイ・ビー・エム (株) 入社．1997 年博士(工学)．2000 年米国カーネギーメロン大学客員研究員．
2003 年から 2005 年まで京都大学大学院情報学研究科
COE 研究員（客員助教授担当）．2005 年日本アイ・ビー・
エム (株) 退職，お茶の水女子大学理学部情報科学科助教授．2011 年同大学教授，同大学シミュレーション科学
教育研究センター長，ACM, IEEE Computer Society,
芸術科学会，他会員．

– 145 –

The Journal of the Society for Art and Science, Vol.15, No.4, pp.135 - 146 (2016)

Proposed technique

Deformed Squarified Treemap

Squarified Treemap

Figure 6: Comparison of layout results. Areas of rectangles are calculated from values indicated in columns
of priority. Ideal aspect ratios of the rectangles are specified according to presense or absense of animage indicated in columns of image, as discussed in Section 4.1.

Figure 7: Examples of layout. Number of rectangles are 10, 20, 30, and 40, respectively, from the top to thebottom rows. Left layouts suppose the ranges of importance as [0, 10], while center and right layouts
suppose [0, 50] and [0, 100] respectively.

– 146 –