*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2018年10月20日 星期六

「第一次」搞定圖表視覺化的呈現:flot




搞定圖表視覺化的呈現:flot
►視覺化,或圖表資料學,正紅。◄

一位申請到英國碩士的學生來說,那學校要求要有資料圖表數據的能力。那麼,我們就來學 flot 這個簡單的圖像化程式。

選用這個模型,是因為這是最常用的。
二組數據線條,可以呈現出比較以及時間的變化。


下列資料請放到< head>xxx</head>之間:

<style type="text/css">
#flot-placeholder{width:570px;height:400px; margin: auto;}  
 /*<<放圖表的DIV設定*/
</style>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/flot-0.8.3/flot/jquery.flot.min.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/flot-0.8.3/flot/jquery.flot.time.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/flot-0.8.3/flot/flot-axislabels-master/jquery.flot.axislabels.js"></script>


<script type="text/javascript">
var data1 = [[3, 130], [4, 40], [5, 80], [6, 160], [7, 159], [8, 200]];   
 /*<<黃色折線的數據結構。 [3, 130]是指x軸 3月,y軸按讚數130。 數字請使用半型數字。*/
var data2 = [[3, 170], [4, 30], [5, 120], [6, 100], [7, 119], [8, 210]];   
 /*<<藍色折線的數據結構。如果只要 一條線,這組不要有就成了。*/

var dataset = [{label: "李某人",data: data1},   
 /*<<黃色折線的說明文字*/
{label: "陳某人", data: data2}   
 /*<<藍色折線的說明文字。如果只 要一條線,這組不要有就成了。同時上面那組最後的「,」要拿掉。*/

];

var options = {
series: {
lines: { show: true },

points: {
radius: 3,
show: true
}
},

xaxis: {

axisLabel: "月分",     /*<< X軸的說明文字*/
tickSize: 1
},

yaxis: {

axisLabel: "按讚數"     /*<< Y軸的說明文字*/
}

};

$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
});
</script>



這是要呈現圖表的 HTML設置,放於<body>xxx</body>之間:

<div id="flot-placeholder"><br>
</div>


圖表的呈現:






2018年1月3日 星期三

滑鼠移入,就產生引起注意的動態效果



滑鼠移入,就產生引起注意的動態效果

透過這樣的動態互動表現文本,可以使得圖像的意義呈現獲得了「更豐富」的緃深。「身體」的動作而來的互動意向性,使得圖像產生了以往的媒材所沒有的一種意義展現能力。 圖像,在其靜態的「視覺意義給出」之外,現在也可以「再更多」為讀者給出了其他的意義。

例如,下圖的互動,你不會只是看到「貓」這樣的文本意義,同時你也感受到了「貓在想著什麼」這樣的互動文本意含之呈現。

這是互動文本帶來的新的意義呈現方式。


〔請按下列的效果模式 ↓ 〕
搖動的效果
跳躍的效果
高亮的效果;。




教學影音:




構思:

先寫一個DIV,依續置入二張圖。
第二張圖使用position: absolute語法,移動下圖往上。
在DIV寫入「滑鼠移入後第二圖動作」的語法。



寫作程續


請先寫<head>xxx</head>中寫入外掛程式:

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


編輯內容的HTML語法:

<div id="ui20171226"
onmouseenter="$('.imgab20171225').effect('shake', { times: 3, distance: 12 }, 500);"
style="width: 560px; height: 420px;" class="divimgab20171225">
<img style="width: 560px; height: 420px;" alt=""
src="第一張圖網址"><br>
<img style="width: 120px; height: 120px;" class="imgab20171225" alt=""
src="第二張圖網址(在上面跳的)"><br>
</div>


編輯內容CSS 語法:

<style>

/*設定當定位點的DIV文字框之屬性,以四角可為原點*/
.divimgab20171225 {
position: relative; 
}

/*第二張圖的absolute之位置,使用top, left, bottom, right*/
.imgab20171225 {
position: absolute;
top: 25px;
right: 150px;

}

</style>



滑鼠移入後的jQuery UI 語法


搖動效果:

onmouseenter=" $('.imgab20171225').effect('shake', { times: 3, distance: 12 }, 500); "

【說明】
  1. times: 3  這是指搖動次數,可以自行增減數字。
  2. distance: 12  這是搖動的距離,可以自行增減數字。
  3. 500 是指動作效果的時間,1000是1秒。


跳躍效果:

onmouseenter=" $('.imgab20171225').effect('bounce', { times: 5, distance: 15 }, 400); "


高亮效果:

onmouseenter=" $('.imgab20171225').effect('highlight', 800); "




補充:效果出現後再換圖



請 將滑鼠移入此處。



         


以搖動效果為例,語法:

滑鼠移入後,

onmouseenter=" $('.imgab20180105').effect('shake', { times: 3, distance: 12 }, 500).queue(function() {$('.imgab20180105' ).attr('src', '要換照片網址').dequeue();}); "

滑鼠移出後,

onmouseleave=" $('.imgab20180105').attr('src', '要換回原照片的網址'); "

說明:

滑鼠移入後搖動,最後再加上「換新圖」的語法(紅色字體)。
滑鼠移出後,又換回到原來的圖。