Data Visualization: กุมภาพันธ์ 2015

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