ชื่อหนังสือ : Interactive Data Visualization for the web (First Edition)
ผู้แต่ง : Scott Murray
สำนักพิมพ์ : O'REILLY
สำหรับการศึกษาใน Assignment ที่ 1 นี้ได้เลือกศึกษาตามบทที่ 1 ถึง 5 ซึ่งจะแบ่งได้ดังนี้
- Chapter 1 : Introduction
- Chapter 2 : Introducing D3
- Chapter 3 : Technology Fundamentals
- Chapter 4 : Setup
- Chapter 5 : Data
Chapter 1 : Introduction
บทที่ 1 เป็นการกล่าวนำถึงความสำคัญของการนำข้อมูลมาแสดงผล ในแง่ของการตั้งคำถามที่เกี่ยวข้องกับการเรียนรู้ D3 ซึ่งมีหัวข้อที่น่าสนใจดังนี้
- Why Data Visualization?
เพราะว่าการแสดงผลข้อมูลนั้น เป็นวิธีการที่เร็วที่สุดในการสื่อสารให้คนอื่นๆสามารถรับรู้และเข้าใจถึงข้อมูลได้
- Why Write Code?
เพราะการสร้างข้อมูลด้วยมืออาจช้าและไม่สะดวก หรือแม้แต่ความผิดผลาดในเรื่องของความแม่นยำ จึงต้องใช้ความสามารถของระบบคอมพิวเตอร์เข้ามาช่วยจัดการกับข้อมูลที่มีมากมายมหาศาล ซึ่งคนจะมีหน้ามีสร้างกระบวนการคำนวณและออกแบบระบบด้วยซอฟต์แวร์
- Why Interactive?
เพราะการสร้างข้อมูลที่มีความยืดหยุ่น หรือมีลูกเล่นสามารถเป็นสื่อที่ดีสำหรับการมีส่วนร่วมของผู้ชมที่อาจจะไม่เกี่ยวข้องหรือเป็นผู้ที่ดูแลข้อมูลนั้นๆอยู่
- Why on the Web?
เพราะต้องการการหลีกเลี่ยงการติดตั้งซอฟต์แวร์ลงบนอุปกรณ์ และสามารถทำงานได้บนอุปกรณ์ที่แตกกต่างกัน
Chapter 2 : Introducing D3
บทที่ 2 นี้ จะเป็นการแนะนำคุณสมบัติของ D3 ว่าคืออะไร
- Data หมายถึง ข้อมูลที่จะนำไปแสดงผล
- Driven หมายถึง การเชื่อมต่อกันระหว่างข้อมูลที่ต้องการใช่แสดงผลกับ Document
- Document หมายถึง สิ่งใดๆที่สามารถนำไปเรียบเรียงหรือแสดงผลบน web browser ได้ อย่างเช่น HTML และ SVG
คุณสมบัติ
- Loading data ไปยัง web browser
- Binding data(ซ่อนข้อมูล) เป็น element(องค์ประกอบ) ใน document และสร้าง element ใหม่ได้ตามต้องการ
- Transform elements โดยการตีความและการตั้งค่าคุณสมบัติต่างๆ
- Transitioning elements ไปตาม input ที่ผู้ใช้กำหนด
สิ่งที่ D3 ไม่สามารถทำได้
- D3 ไม่สามารถสร้างการแสดงผลข้อมูลที่ไม่มีอยู่หรือทำนายข้อมูลออกมาแสดงผล
- D3 ไม่รองรับ web browser ที่เก่าๆได้
- D3 ไม่สามารถจัดการกับแต่ละ pixel ของ bit map แต่จะจัดการในรูปแบบของ vector ที่ใช้การคำนวณทางคณิตศาสตร์
- D3 ไม่ได้ซ่อนข้อมูลเพราะ D3 ทำงานอยู่ในฝั่ง client อยู่แล้ว
Chapter 3 : Technology Fundamentals
การใช้งาน HTML
ในเนื้อหานี้จะมีการแนะนำถึงโครงสร้างของ HTML ว่ามีลักษณะเป็นอย่างไร และการลักษณะการจัดเรี่ยงข้อความให้สวยงามจะต้องใช้ tags อะไรบ้าง
องค์ประกอบในการเขียน HTML
<!DOCTYPE html>
เป็นการประกาศประเภทของเอกสาร มักจะอยู่ส่วนบนสุด
html
จะต้องปิดล้อมโค้ด HTML ในเอกสาร
head
เป็นส่วนที่ใช้ประกาศส่วนหัวข้อใหญ่ที่เกี่ยวข้องกับเอกสาร
title
หัวข้อย่อยของเอกสาร
body
ส่วนอื่นๆของเอกสารจะต้องอยู่ภายใน body
h1, h2, h3, h4
ใช้ประกาศส่วนหัวข้ออื่นๆ
p
ประกาศส่วนที่เป็น paragraph
ul, ol, li
list ข้อย่อยต่างๆเป็น จุดหรือตัวเลข
em
ใช้กำหนดตัวอักษรเอียง
โค้ดตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Amazing Visualization Tool Cures All Ills</h1>
<p>A new open-source tool designed for visualization of data turns out to havean unexpected, positive side effect: it heals any ailments of the viewer.Leading scientists report that the tool, called D3000, can cure even thefollowing symptoms:</p>
<ul>
<li>fevers</li>
<li>chills</li>
<li>general malaise</li>
</ul>
<p>It achieves this end with a patented, three-step process.</p>
<ol>
<li>Load in data.</li>
<li>Generate a visual representation.</li>
<li>Activate magic healing function.</li>
</ol>
</body>
<html>
ผลที่ได้
การใช้งาน CSS ร่วมกับ HTML
ในเนื่อหาส่วนนี้ได้มีการสอนการใช้งาน CSS เบื้องต้นร่วมกับ HTML เพื่อใช้ในการตกแต่งตัวอักษร
โค้ดตัวอย่างการฝัง CSS บน HTML
<html>
<head>
<style type="text/css">
p {
font-size: 24px;
font-weight: bold;
background-color: red;
color: white;
}
</style>
</head>
<body>
<p>If I were to ask you, as a mere paragraph, would you say that I
have style?</p>
</body>
</html>
ผลที่ได้
Chapter 4 : Setup
บทที่ 4 เป็นการเริ่มต้นการใช้งน d3 .js โดย D3 จะต้องมีการ import library เข้ามาในการใช้งาน ซึ่งสามารถเรียกได้ 2 วิธี คือ
- เรียกผ่านทาง link ได้เลย โดยการเรียกใช้ ผ่าน tag ดังต่อไปนี้ในไฟล์ html
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> - เรียกโดยไฟล์ ซึ่งจะต้องสร้าง directory มา เช่น Project_D3 และสร้าง directory ย่อยใช้ชื่อว่า d3 จากนั้นให้ download ไฟล์ D3 เป็น zip ไฟล์มา directory ย่อยที่สร้างขึ้น และแตกไฟล์ เมื่อประกาศใช้ library d3 จะต้องใช้ tags <script type="text/javascript" src="d3/d3.v3.js"></script>
ในโฟลเดอร์จะมีโครงสร้างดังนี้
project-folder/
d3/
d3.v3.js
d3.v3.min.js (optional)
index.html
โค้ดตัวอย่างใน index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
// Your beautiful D3 code will go here
</script>
</body>
</html>
Chapter 5 : Data
สำหรับบทที่ 5 นี้เป็นการนำข้อมูลมาแสดงผลบนเว็บ browser โดยการเรียกผ่าน method ที่สามารถเรียกได้จาก library ของ D3
โค้ดตัวอย่าง
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) { // <-- Note tender embrace at left
return "I can count up to " + d;
});
</script>
</body>
</html>
ผลที่ได้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น