Test2

DV Test 2

repositary >> https://bitbucket.org/myuii/dv_test2

 

Log

changeset:   4:d7e30487c5ae
tag:         tip
user:        myuii
date:        Wed Apr 29 11:44:13 2015 +0700
summary:     barchart

changeset:   3:eada17004ea5
user:        myuii
date:        Wed Apr 29 11:02:31 2015 +0700
summary:     piechart2

changeset:   2:577bfb896eda
user:        myuii
date:        Wed Apr 29 11:02:12 2015 +0700
summary:     piechart1

changeset:   1:99a57785e787
user:        myuii
date:        Wed Apr 29 09:45:31 2015 +0700
summary:     add piechart.html

changeset:   0:ae09ecf711ab
user:        myuii
date:        Wed Apr 29 09:40:44 2015 +0700
summary:     first commit

Exersice5

ใช้ D3.js ทำ Assignment1

• เพิ่ม library d3 หรือ ใส่ <script src="http://d3js.org/d3.v3.min.js"></script>

ในไฟล์ index.html 

• แล้วจึงรันserver python -m SimpleHTTPServer 8888 หน้า index.html จะถูกแสดง 
• เปิด firefox แล้วใส่ url localhost:8888 เพื่อเปิด Developer Tools ขึ้นมา

 

================================================

oil sands มีปริมาณน้ำมันสำรองสูงเป็นอันดับ 3 ของโลก

จากการสำรวจเมื่อปี 2013 ทำให้ประเทศยักษ์ใหญ่อย่างจีนและสหรัฐ 

ต้องการเข้ามาลงทุน

แต่อุตสากรรมนี้ปล่อยก๊าซเรือนกระจกในปริมาณสูงและเป็นพิษต่อสิ่งแวดล้อม

Global GHG Emission 2013

ทรายน้ำมัน(oil sands) มีส่วนประกอบของ โคลน น้ำ และ บิทูเมน

บิทูเมน(Bitumen) เป็นยางมะตอบความหนาแน่นสูง ในอุตสาหกรรมของทรายน้ำมันจะนำ บิทูเมนมากลั่นให้ได้น้ำมันเหลวออกมา

Bitimen compound

ในกระบวนการกลั่นบิทูเมนต้องนำน้ำสะอาดจำนวนมาก พอๆ กับปริมาณน้ำมันสุดท้ายที่ได้ออกมา

น้ำ 0.8 barrels = น้ำมัน 1 barrels

น้ำที่ปนเปื้อนจากบิทูเมนจะถูกปล่อยออกมาซึมไปใต้ดิน ทำให้น้ำจืดใต้ดินใช้ไม่ได้

แล้วยังมีก๊าซคาร์บอนไดออกไซด์ และซัลเฟอร์ไดออกไซด์ซึ่งเป็นก๊าซเรือนกระจกออกมาด้วย

Table 5 – Oil and gas sector: emissions by production type (Mt CO2e)
2005		2010		2020		Absolute Change 2005 to 2020
Natural Gas Production and Processing	57		46		44		-13
Conventional Oil Production	33		29		27		-6
Oil Sands	32		48		104		73
Oil and Natural Gas Transmission	16		11		9		-7
Downstream Oil and Gas	22		20		20		-2
Total	160		154		204		44

ปริมาณผลกระทบกับปริมาณน้ำมันที่ถูกผลิต

Exercise4

Let’s Make a Bar Chart

• Coding a Chart, Manually

4

8

15

16

23

42

Code

<!DOCTYPE html>
<style>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>
<div class="chart">
  <div style="width: 40px;">4</div>
  <div style="width: 80px;">8</div>
  <div style="width: 150px;">15</div>
  <div style="width: 160px;">16</div>
  <div style="width: 230px;">23</div>
  <div style="width: 420px;">42</div>
</div>

Code

Exercise4 - Start learning D3.js and Think about topic for your presentation

Exercise4

Interactive Data Visualization ,O'Reilly

- Start learning D3.js
Learning 

• codecademy
• github-d3-Tutorials
• Interactive Data Visualization for the Web, O'Reilly  << Read online

บทที่3

        Web server คือเครื่องคอมพิวเตอร์ที่ให้บริการเอกสารตามข้อมูลที่ร้องขอ  Web server ที่นิยมใช้ที่สุดคือ Apache ซึ่งมันไม่จำเป็นต้องดูดี  ในขณะที่ Browser ต้องดูดีมากเช่น Chrome, Firefox, Safari ทั้งหมดนี้มีไว้สำหรับให้ Client เรียกชมหน้าเว็บไซต์ได้โดยใช้โพรโทคอล HTTP ผ่านทางเว็บเบราว์เซอร์

DOM : Document Object Model  เป็นโครงสร้างลำดับชั้น(hierarchical) ของภาษา HTML  

DOM จะแบ่งข้อมูลออกเป็นคอมโพเนนต์ต่างๆ เช่น หัวข้อ ย่อหน้า ตาราง  เพื่อให้สามารถจัดการกับเอกสารได้ง่ายขึ้น ไม่ว่าจะเพิ่มหรือลบ และแก้ไขคอมโพเนนต์ต่างๆ ซึ่งสามารถทำผ่านทาง Java หรือ JavaScript

Press Ctrl + Shift + C  บน Chrome

DOM style on google Chrome

https://developer.chrome.com/devtools/docs/dom-and-styles

Inheritance, Cascading, and Specificity

<html>
  <head>
    <title></title>
      <style type="text/css">
        div {
          background-color: red;
          font-size: 24px;
          font-weight: bold;
          color: white;
        }
      </style>
    </head>
    <body>
      <p>I am a sibling to the div.</p>
      <div>
        <p>I am a descendant and child of the div.</p>
      </div>
  </body>
</html>

ข้อความที่ถูกแทกด้วย <div> จะถูกใส่รูปแบบ CSS ที่กำหนดไว้

INTRODUCTION TO JAVASCRIPT

ศึกษา Javascript บน codecademy

• Interactive JavaScript

confirm("I feel awesome!");
confirm("I am ready to go.");
>> show popup

• the program needs an input. You can ask for input with a prompt.

prompt("What is your name?");
prompt("What is Ubuntu?");

• Data Types I & II: Numbers & Strings

"What is your name?".length
>>18

• Data Type III: Booleans

"I'm coding like a champ".length >= 23;

>>true

• Using console.log

console.log("Hello")

console.log(2 * 5)

>> Hello

>> 10

ถูกเรียกว่าการ print

• Comparisons

console.log(15 > 4);
console.log("Xiao Hui".length < 122);
console.log("Goody Donaldson".length > 8);
console.log(8*2 === 16);
>>true
>>true
>>true
>>true

• Decisions, decisions

if ( "wispmyuii".length >= 7 ) {
    console.log( "You have a long name!" );
}
>> You have a long name!

- Think about topic for your presentation

Topic  Tar Sand Production Growing VS Tar Sand getting Dirty 

Tar Sand น้ำมันเหนียว

        สาเหตุที่เลือกหัวข้อนี้เพราะปัจจุบัน  ความต้องการน้ำมันสูงมาก  ทำให้ราคาน้ำมันต่อหนึ่งหน่วยจึงสูงตามไปด้วย  เมื่อมีความต้องการมากก็ย่อมทำให้ราคาดีดตัวสูงขึ้นไปอีก  จึงมีการสำรวจหาแหล่งพลังงานที่ยั่งยืน  คือ Alberta ซึ่งมีน้ำมันจำนวนกว่า 170 พันล้านบาเรล (เพิ่มอัตราการสำรองน้ำมันเท่ากับ 5 ปี)

ศักยภาพในการลงทุนเพื่อสำรวจ oil sand   ปตท.สผ. ลงทุน 68,000 ล้านบาทใช้ซื้อหุ้น 40% ในแหล่งทรายน้ำมัน (tar sands) KKD ในประเทศแคนาดา

 ที่มา : http://www.bangkokbiznews.com/blog/detail/526613

http://www.pttep.com/en/ourBusiness_EAndPprojectsDetail.aspx?ContentID=118

Impact ผลกระทบ

Giant Machine for Alberta

Alberta forest 10,000 year old VS Destroy for Tar Sand

New Alberta

        การขุด Tar Sand ถือเป็นปัญหาระดับโลกด้านจิตสำนึก  การทำลายป่าอายุกว่าหมื่นปี  เพื่อให้ได้มาพลังงาน  ป่าเหล่านี้ทำงานให้มนุษย์ทุกวันด้วยการปรับออกซิเจน  คาร์บอนได้ออกไซด์ สร้างสภาพแวดล้อม แต่ทว่าปัจจุบันมนุษย์ไม่ได้หายใจด้วยออกซิเจนอีกแล้ว  มนุษย์หายใจได้ด้วยเงิน  ป้อนทรายเข้าไปมากเท่าไร ผลกำไรยิ่งสูงเท่านั้น  การเสพติดปิโตรเลียมของคนทั้งโลก  และการแสวงหากำไรจากทรายสีดำของคนบางกลุ่ม  พลิกป่าเหล่านั้นเป็นป่าเสื่อมโทรม  

Improve การพัฒนา
        เพื่อนำกราฟ ที่ได้นำไปประยุกต์กับ Info-graphic เพื่อให้คนจำนวนมากได้เข้าใขถึงปัญหาที่ทุกคนจำเป็นต้องช่วยแก้ไข และแนวโน้มที่ทุกคนจะได้มีโอกาศใช้น้ำมันเหนียว
Inspiration แรงบันดาลใจ
        การสร้างระบบในเชิงวิศวกรรมที่เคยเรียนมาคือการป้อน input น้อย เพื่อให้ได้ output มาก  แต่การขุด tar sand ลบความคิดเชิงวิศวกรรมนี้ทั้งหมดเพื่อป้อน input (ทรายจำนวนมาก) เพื่อให้ได้ output (น้ำมันจำนวนน้อย) 
สารคดี Alberta Oil Sand พากย์ไทย
oil sand greenhouse
http://www.livescience.com/37962-tar-sands-expansion-impact.html
rgytrendsinsider.com/2013/11/11/oil-sands-and-the-environment-part-i/
http://www.oag-bvg.gc.ca/internet/English/parl_cesd_201410_02_e_39849.html

Exercise3 - Try one or more web-based tools

Exercise3

• Try one or more web-based tools 

เลือกเวป - easycalculation 

มีหัวข้อเรื่องสำหรับการสร้างกราฟหลายหัวข้อ

เลือกการใช้ charts and graph เพื่อศึกษาการใช้งานเบื้องต้น

สร้าง Chart

1.Exploded Pie Chart

มีการกำหนด platform ให้ใส่ข้อมูลโดยการพิมพ์แล้วคั่นข้อมูลด้วยลูกน้ำ ","

สามารถ Download script ได้(แต่เสียเงิน) และสามารถเซฟรูปภาพได้เลย

สร้าง Graph

2.Line graph

3.Stacked Bar Graph

4.Histogram Graph

• Find types/structures not mentioned in lecture

1.Range Bar Charts -  canvasjs

บอกช่วงอุณหภูมิสูงสุด ต่ำสุดในแต่ละเดือน

ส่งข้อมูลผ่าน API

2.Gantt Chart - smartsheet

Gantt Chart แบบ web application 

สามารถทำงานได้ใกล้เคียงกับ microsoft project ใช้งานฟรี 30 วัน

highcharts

Exercise2 - try other tools(continue)

Exercise2 

• Try google charts

Pie chart https://developers.google.com/chart/interactive/docs/quick_start

• Find/try more tools

Area Chart http://www.onlinecharttool.com/graph

Exercise2 - try other tools(continue)

Exercise2 

• Try google charts

      บริการ google chart พัฒนาจาก Javascript ทำให้สำดวกในการใช้งานร่วมกับเอกสาร HTML มีรูปแบบกราฟหลากหลาย  ทำงานผ่าน Visualization API โดยการส่งข้อมูลทางสถิติไปยัง google และรับ script ที่ google chart สร้างขึ้นกลับมาแสดงผล (รับ-ส่ง ข้อมูลในรูปแบบ client-server architecture)  
ข้อดี - กราฟมีการตอบสนองเป็น อนิเมชัน
        - หากนำไปใช้ใน E-book หรือ สื่อออนไลน์เพราะกราฟจะแสดงผลได้แบบ real time และสามารถอัพเดทข้อมูลได้เสมอ

Line chart https://developers.google.com/chart/interactive/docs/gallery/linechart

code

<html>
<head>
  <script src="https://www.google.com/jsapi" type="text/javascript"></script>
  <script type="text/javascript">
    google.load('visualization', '1.1', {packages: ['line']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Year');
      data.addColumn('number', 'Smart Phone');
      data.addColumn('number', 'PC');
      data.addColumn('number', 'Tablet');

      data.addRows([
        ['2009',  175,  305,  0],
        ['2010',  297,  346,  18],
        ['2011',  468,  370,  64],
        ['2012',  630,  393,  104],
        ['2013',  789,  418,  178],
        ['2014',  947,  482,  252],
        ['2015',  1105,  535,  326]
      ]);

      var options = {
        chart: {
          title: 'Sale of client devices 2009 to 2015',
          subtitle: 'millions of units'
        },
        width: 750,
        height: 500,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="line_top_x">
</div>
</body>
</html>

Highlighter