Week #4

Learning D3.js

เกี่ยวกับ D3 (Data Driven Document)

เป็น Java Script Library ที่สามารถนำข้อมุล(data) เข้ามาประมวลและแสดงผล โดยใช้ HTML, SVG และ CSS  มีความสามารถอย่างเช่น สามารถตอบสนองได้โดยตรง ต่อข้อมูลชุดนั้นๆ 

ทดสอบ_1

• ทดลองคำสั่งงานเบื้องต้นในการวาดรุป SVG เบื้องต้น

ตัวอย่างการใช้งาน SVG ทั่วไป

ตัวอย่างการวาดวงกลมโดย SVG ทั่วไป

ตัวอย่างการใข้งาน SVG ด้วย D3.js

ตัวอย่างการวาดวงกลมโดยใช้ SVG ด้วย D3.js

ตัวอย่าง

ทดสอบ_2

• ลองนำเอาข้อมูลมาใช้งาน
• ทดลองการไล่สีโดยการแปลงข้อมูลจริง (domain) ไปเป็นสิ่งที่เราต้องการ (range)

แหล่งข้อมูลอ้างอิง :

• https://www.youtube.com/watch?v=TR39nfAW1dw
• https://www.youtube.com/watch?v=4haBbPEClP4
• http://evolonm.blogspot.com/2014/08/d3js-d3js-13.html

                  

Week #3

Try more web-based tools : Raphaël

ที่มารูปภาพ : ลิงก์

เกี่ยวกับ Raphael : (ราฟเพอล์)

เป็นเครื่องมือสำหรับวาด รูปร่างกราฟฟิคต่างๆ บน Web-Brower ในรูปแบบของ JavaScript Library คล้ายๆกับ Processing.js จึงง่ายต่อการนำไปประยุกค์ใช้บนเว็ปต่างๆ และก็เป็นทางเลือกอีกทางสำหรับ JavaScript Library

( ที่มา : http://raphaeljs.com/ )

การใช้งาน :

1. เริ่มต้นต้อง Include -> Raphael.js จาก : ลิงก์ เข้ามาในไฟล์ HTML ของเรา โดยที่ไฟล์ Raphael.js ต้องอยู่ใน Folder เดียวกับ index.html ของเรา
   


2.  โครงร่างของ Code ที่สำคัญๆคือ window.onload() โดยที่ทุกอย่างจะอยู่ภายในส่วนนี้ จากนั้นจะเป็นคำสั่งต่าง ซึ่งสามารถศึกษาเพิ่มเติมได้จาก Document ของ Raphael ที่ ลิงก์
( Code แสดงตัวอย่างการใช้คำสั่งวาดรุปร่างพื้นฐานโดย Raphael Library )

ศึกษาการใช้งานเบื้องต้นเพิ่มเติมได้ที่ : https://www.youtube.com/watch?v=IPy77zMsd0Y

 

 ตัวอย่าง Demo การใช้งานรูปแบบต่างๆ :

แสดงรูปแบบการใช้งานในแบบต่างๆ

 ตัวอย่างเพิ่มเติมที่ : http://raphaeljs.com/ 

ทดลองวาด Line_Chart : Raphaeljs

• ข้อมูลการเจริญเติบโตของต้นพืช A1, B10, C1, C7, E3 ในช่วงวันที่() 
• ศึกษาอ้างอิงจาก

• https://gist.github.com/boazsender/447379
• https://www.exratione.com/2011/10/a-few-tips-for-graphael-line-charts/

  

Find types/Structures not mentioned in lecture

Pyramid Chart :

Chat รูป พิระมิด เป็นอีกทางเลือกหนึ่งให้การแสดงข้อมูลที่เป็นลำดับส่วนกัน เพื่อให้สามารถเปรียบเทียบ ระหว่างสิ่งหนึ่งกับอีกสิ่งหนึ่ง ได้อย่างชัดเจนมากยิ่งขึ้น

กราฟแสดงปริมาณอาหารประเภทต่างๆ ที่ควรกินให้เหมาะสม

ที่มารูปภาพ : http://www.lifeclinic.com/focus/nutrition/food-pyramid.asp

ที่มารูปภาพ :  http://yellowsubstudio.com/search/Foods-Rich-In-Vitamins-And-Minerals-Chart