>> [เล่นเพลง]
>> DAVID บอนี่: ฉันเดวิด บอนี่และนี่คือ D3
ยินดีต้อนรับ
เรากำลังจะไปเรียนรู้เกี่ยวกับ D3 วันนี้
D3 เป็นกรอบ JavaScript สำหรับการสร้างที่มีคุณภาพสูง
การสร้างภาพแบบโต้ตอบสำหรับเว็บ
สิ่งที่ชอบสิ่งที่เรากำลัง เห็นในด้านหลังของฉัน
เราจะเรียนรู้ที่จะทำให้ผู้ที่ สิ่งที่ชนิดของพื้นฐานของมัน
แต่มันก็เป็นไปได้เย็น
ขอเริ่มต้น ทำให้ภาพสวย
เราได้มีการสาธิตมากขึ้น ของลูกค้าที่มีอยู่
ลองทำมัน
>> ทำผม, DOM manipulation-- เรากำลังจะ ที่จะเริ่มต้นทันทีทำสิ่งดีๆ
แรกของทุกด้านซ้ายเรามีรหัส
ด้านขวาเรามี ผลของรหัสของเรา
Let 's go ผ่านมัน
>> ขอให้เป็นวงกลม
เสียงที่ไม่อย่างไร?
svg.append วงกลม เราเพิ่งทำวงกลม
คุณไม่เชื่อฉันใช่มั้ย?
มันไม่ได้มี
>> ดังนั้นสิ่งที่เราทำที่นี่คือ SVG เป็นกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้
นี่คือวิธีที่เราบอกเบราว์เซอร์ ทำให้กราฟิกแบบเวกเตอร์ในเบราว์เซอร์
สิ่งที่เราได้ทำในขณะนี้ จะมีการเพิ่มวงกลมเพื่อเรียกดู
>> สัญญาที่เป็นวงกลม ต้องใช้บิตของคุณลักษณะพื้นฐาน
ก่อนที่เราจะสามารถมองเห็นมัน
เราต้องบอกว่าตำแหน่ง x ของ และตำแหน่งของรัศมี
เราไม่ได้บอกว่าการใด ๆ ที่ ดังนั้นเราไม่เห็นได้ในขณะนี้
แต่ขอบอกสิ่งที่มัน
>> ดังนั้นแรกของทั้งหมดที่คุณมี เพื่อให้วงกลมของเราชื่อ
ดังนั้นขอเรียกว่าวงกลม
วงกลมของเรามีชื่อในขณะนี้
และขอให้มันไม่กี่คุณลักษณะ
วิธีการเกี่ยวกับ CX จะศูนย์ x ดังนั้น ศูนย์กลางของตำแหน่ง x
สมมติว่า 200 200 พิกเซล
>> ขอให้มัน y ของ 200 พิกเซลเป็นอย่างดี
และ R, รัศมีประมาณ 40 พิกเซล
ตอนนี้ขอดู
ฉันไม่สามารถสะกด
>> มีคุณไป
เรามีวงกลมที่ 200 ตำแหน่ง พิกเซล, 200 พิกเซล, รัศมี 40 พิกเซล
ชนิดของเย็นใช่มั้ย?
เรามีวงกลม
ใช่
>> ดังนั้นจำเป็นที่จะต้องทำตามไม่
ตัวอย่างทั้งหมดเหล่านี้ทั้งหมด รหัสที่ฉันทำในวันนี้
จะมีการจัดออนไลน์ในตอนท้าย ในรูปแบบของตัวอย่างแบบโต้ตอบ
กับจุดตรวจที่ ทุกการกระทำและอื่น ๆ
>> ลองทำสิ่งอื่น ๆ อีกมากมาย
นี้วงกลมสีดำน่าเกลียดจริงๆ
ฉันขอโทษสำหรับข้อผิดพลาดที่ ข้อความที่นั่น
มีที่เราจะไป
>> ขอให้มันสี
ที่ได้อย่างไร?
ผมชอบที่จะเหล็กสีฟ้า
ดีวงกลมของเราเปลี่ยนสี
นั่นวิเศษมาก
ขอให้มันกึ่งโปร่งใส too-- กึ่งโปร่งใส
>> ดังนั้นเหล่านี้เป็นคุณลักษณะ เรากำลังกำหนดบนวงกลม
สิ่งแรกที่เราทำคือ เราใส่วงกลมบนหน้าเว็บ
และจากนั้นเราจะกำหนด พวงของคุณลักษณะ
บางส่วนของเหล่านี้จะต้อง เช่น CX, CY และรัศมี
และอื่น ๆ ที่เป็นตัวเลือก
>> มีคุณลักษณะที่มากขึ้นเป็น
มีจำนวนมากของพวกเขาคือ
ตัวอย่างเช่นเราอาจมี โรคหลอดเลือดสมองเป็นอย่างดีจังหวะของสีแดง
แต่ขอเอาว่า
เรากลับไปที่วงกลม, วงกลมสีฟ้า
>> ดังนั้นขอให้วงการมากขึ้น
ที่ได้อย่างไร?
ขอให้วงกลมอีก
นี้เป็นที่น่าตื่นเต้นใช่ไหม?
>> ดังนั้นบอกว่าฉันเพียงแค่คัดลอกวาง สิ่งที่เรามีอยู่แล้ว
ขอเรียกว่าวงกลม 2
และขอทำที่แน่นอน สิ่งที่เหมือนกันและให้มัน
คุณลักษณะที่ได้รับตำแหน่ง x 300
ยายเรามีสองวงการในขณะนี้
>> และแน่นอนที่เราจะทำได้ อัพเดตค่าเหล่านี้
ฉันสามารถวางมันไว้ที่ 400 และตอนนี้ก็ย้าย
และเนื่องจากมันน่ารำคาญให้ เอามันออกไปดังนั้น circle2.remove
มันหายไปตอนนี้
>> ดังนั้นสิ่งที่เรากำลังทำอยู่และ เป็นเพียงมาก very-- นี้
จะคล้ายกับสิ่งที่คุณ อาจทำใน jQuery ตัวอย่างเช่น
เรากำลังจัดการกับ DOM ก็เรียกว่า
คุณอาจเคยได้ยินคำว่าก่อนที่
เรากำลังสร้างสิ่งที่การตั้งค่า คุณลักษณะในสิ่งที่เอาสิ่งที่
>> ตอนนี้ที่นี่คือสิ่งที่จะได้รับที่น่าสนใจ
ดังนั้นในภายหลังในรหัสที่เราจะทำได้ยังคง อ้างถึงวงกลมต้นฉบับที่นี่
ดังนั้นขอรีเซ็ตแอตทริบิวต์ที่จะ cx
สมมติว่าตำแหน่งของ x 400
และผมกำลังจะเปลี่ยน นั้นจึงเป็นสิ่งที่เห็นได้ชัด
มีที่เราจะไป
>> ดังนั้นเราจึงเพิ่มวงกลม
เราตั้งค่าคุณสมบัติบางอย่าง
เราได้เพิ่มอีกกลุ่มหยิบมันออกมา
และจากนั้นเรากำลังปรับเปลี่ยน วงกลมเดิม
>> แต่นี่คือสิ่งที่จะได้รับ มากน่าสนใจมากขึ้น
ไม่เพียง แต่เราสามารถตั้งค่าคุณสมบัติ เป็นเพียงค่าเราสามารถพูดได้ว่า
เดี๋ยวก่อนวงกลมให้ไปที่ตำแหน่ง 200
นอกจากนี้เรายังสามารถตั้งค่าให้เป็นฟังก์ชั่น
>> ดังนั้นแทนที่จะให้ 400 ที่นี่ เราสามารถทำให้การคำนวณบาง
ในการบินสำหรับสิ่งที่เรา ต้องการแอตทริบิวต์ที่จะเป็น
ดังนั้นนี่คือวิธีที่คุณจะแสดงว่า
เราพูดแทน 400 ให้ฉัน ให้คุณฟังก์ชั่นแทน
และที่นี่ภายในฟังก์ชั่นนี้ เราสามารถทำให้การคำนวณบ้าใด ๆ
>> เราอาจจะใช้เวลาและ ดูที่บางสิ่งอื่น ๆ
และแบบไดนามิกตัดสินใจ วงกลมสิ่งที่มีค่าที่เราต้องการ
วิธีการเกี่ยวกับเราเพียงแค่ให้ มันตำแหน่ง x สุ่ม?
ดังนั้นที่ว่า
>> ดังนั้นสิ่งที่ว่าคือสำหรับ x ทุกเรียกใช้ฟังก์ชั่นนี้
และสิ่งที่เรากำลังทำคือการคำนวณ บางสิ่งบางอย่างเวลาที่สุ่มกว้าง
และกลับมาที่
ดังนั้นเวลาที่เราทำงานที่ทุกคนที่เราได้รับ วงกลมที่จะไปยังสถานที่ที่สุ่ม
เป็นชนิดของเย็น
ฉันรู้สึกเหมือนฉันสามารถดู ที่นี้เล็ก ๆ น้อย ๆ
เราเริ่มที่จะได้รับ สิ่งที่น่าสนใจที่นี่
ขอให้ข้อมูลนี้ขับเคลื่อนในขณะนี้
ไม่มีข้อมูลที่นี่
ลองเปลี่ยนที่
>> Act II, Data Driven Documents-- ดังนั้นขอให้กลับไปที่นี่
และขอเพียงแค่ได้รับกำจัดของวงกลม 2, เพราะเราเพียงแค่การเพิ่มและลบ
มัน
ดังนั้นเราจึงไม่จำเป็นจริงๆ
เราจำเป็นต้องมีจำนวนมากฉลาดมากขึ้นที่นี่
สมมติว่าเรามี ข้อมูลบางส่วนของการจัดเรียงบาง
หนึ่ง moment-- สมมุติว่า เรามีข้อมูลของแบบฟอร์มนี้
เรามีอาร์เรย์เพียง พวงของตัวเลข
เรามีเจ็ดหมายเลขที่นี่ สิ่งเหล่านี้จำนวน represent--
ในบัญชีธนาคารของผู้คนว่า พวกเขามีน้ำหนักพระเจ้ารู้ว่าสิ่งที่
>> เหล่านี้เป็นตัวเลขและเรา ต้องการที่จะใช้วงกลมของเรา
เพื่อเป็นตัวแทนของตัวเลขเหล่านั้นอย่างใด
เราต้องการที่จะผูกของเรา วงการกับตัวเลขเหล่านั้น
ดังนั้นสิ่งที่เราทำ
สมมติว่าเราต้องการ วงกลมสำหรับทุกหมายเลข
เราสามารถทำเก่า สิ่งที่เรากำลัง doing--
ผนวกวงกลมและวงกลม 2 และ circle3
แต่ตอนนี้ได้รับจากมือและ มีจำนวนมากของการทำซ้ำตรรกะ
>> จึงขอได้ฉลาดมากขึ้นกับว่า
แทนการใช้วงกลม var svg.append ว่าเราเป็นเพียงแค่การใช้
เรากำลังจะใช้ นี้บล็อกเล็ก ๆ น้อย ๆ ที่นี่
ฉันไม่ต้องการที่จะไปในเชิงลึก เป็นสิ่งที่ทุกชิ้นส่วนเหล่านี้ทำ
และมันเป็นชนิดของหัวข้อขั้นสูง
และฉันหวังว่าฉันจะทำได้
>> แต่สิ่งที่สำคัญในการ recognize-- และ คุณจะเห็นมากมักจะอยู่ในรหัส D3
บล็อกพื้นฐานข้อความนี้ สร้างเป็นจำนวนมากวงการ
เนื่องจากมีองค์ประกอบของข้อมูล ในอาร์เรย์นี้ที่นี่
ดังนั้นนี้จะสร้างเป็นจำนวนมาก วงกลมที่มีองค์ประกอบ
มันจะสร้างเราเจ็ดวงการ
และมันไม่จริงๆสิ่งที่สำคัญจริงๆ
ดังนั้นเรามาทำงานที่
ลองเอาวงอื่น ๆ ของเรา
ขอเพียงแสดงความคิดเห็นนี้ เป็นส่วนหนึ่งออกมาและทำงานนี้อีกครั้ง
>> มีที่เราจะไป
ดังนั้นวงกลมของเราที่นี่คือ เข้มมากเพราะเรา
มีเจ็ดวงกลมหนึ่ง ด้านบนของที่อื่น ๆ
เราเพิ่งสร้างขึ้นเจ็ดวงกลมหนึ่ง แต่ละสำหรับแต่ละองค์ประกอบของข้อมูลเหล่านี้
แต่มีสิ่งที่สำคัญที่เกิดขึ้น กับตัวอย่างนี้ที่นี่
>> มันเป็นเรื่องที่เป็นข้อมูลที่ถูกผูกไว้
ดังนั้นทุกหนึ่งเดียวของ องค์ประกอบของข้อมูลเหล่านั้น
10, 45, 105, เป็นที่ถูกผูกไว้ วงกลมโดยเฉพาะอย่างยิ่ง
ดังนั้นเหล่านี้ไม่ได้สร้างเพียง พวงของวงการ
แต่ความสัมพันธ์ของทั้งสองสิ่งเข้าด้วยกัน
>> และในอนาคตเพราะเราสร้าง วงการผู้ที่มีฟังก์ชั่นนี้ D3,
ถ้าฉันให้คุณวงกลมคุณสามารถ ให้ฉันข้อมูลที่เกี่ยวข้องกับมัน
ดังนั้นเราจึงสามารถขอ D3
เฮ้ D3 ผมมีวงกลมนี้
อะไรคือข้อมูลที่วงกลมมี?
และ D3 จะบอกเรา 10 หรือ 45 หรือ 105
>> สิ่งเหล่านี้เป็นที่ถูกผูกไว้
นั่นเป็นมากแนวคิดพื้นฐานมาก
ลองดูที่ว่า
>> ดังนั้นวิธีที่เราต้องการขอ D3-- ดังนั้น นี้จะไม่เกี่ยวข้องสำหรับเรื่องนี้
แต่เชื่อฉันเกี่ยวกับมัน
นี่คือวิธีที่เราขอ D3
Hey, D3, ให้ฉันเป็นครั้งแรก วงกลมที่คุณสามารถค้นหา
ให้ฉันวงกลมแรกที่คุณสามารถหา
และจากนั้นเราสามารถถาม D3 อะไร ข้อมูลเกี่ยวกับที่ว่าเช่นนี้, 10
>> ดังนั้นเราเพียงแค่ถาม D3 หาฉัน วงกลมแรกที่คุณสามารถหา
อะไรคือข้อมูลของตนหรือไม่
10 ที่เป็นจริงของเรา องค์ประกอบของข้อมูลครั้งแรก
เราสามารถขอเดี๋ยวก่อน D3, พบกับเราได้วงกลมที่สามของเรา
105
นี่คือเหตุผลที่สำคัญจริงๆ?
>> ดังนั้นที่นี่ที่ผมกล่าวถึง ที่เราสามารถใช้ฟังก์ชั่น
และผมก็บอกว่าเป็น สิ่งที่ทรงพลังมาก
ดังนั้นไม่เพียง แต่ฟังก์ชั่นของเราสามารถทำสิ่ง เช่นทำคำนวณบางอย่างเช่น
กลับตัวเลขสุ่มก็สามารถ นอกจากนี้ยังทำสิ่งที่อยู่บนพื้นฐานของข้อมูล
นี่คือสิ่งที่ขับเคลื่อนด้วยข้อมูลเอกสารหมายถึง
นั่นคือสิ่งที่ D3 ย่อมาจาก
>> ดังนั้นนี่ x postition-- แทน บอกเพียงแค่วงกลมทั้งหมด
ได้รับตำแหน่ง x 200 เรา จะให้มันฟังก์ชั่น
และที่นี่เราสามารถทำให้การคำนวณบาง
และ d ที่นี่ตั้งอยู่ในสถานที่สำหรับข้อมูล
ดังนั้นเวลาที่เรามีทุก วงกลมโดยทั่วไป
D3 จะสร้างทั้งเจ็ดวงการ
และแล้วทุก
>> วงกลมก็จะไปเดี๋ยวก่อน วงกลม 1 สิ่งที่ตำแหน่ง x ของคุณ
ก่อนหน้านี้เรามี มักจะตอบ 200
แต่ตอนนี้เวลา D3 ทุกถาม เราสิ่งที่ตำแหน่ง x ของคุณ
มันจะทำให้เรามี us-- วงกลมที่ดังนั้นเรามีข้อมูล
มันจะทำให้เรามีข้อมูลและพูดว่า สิ่งที่คุณต้องการแสดงออกให้เป็นที่
บนพื้นฐานของข้อมูลที่
>> ขอเพียงกลับข้อมูลที่เกิดขึ้นจริง
ดังนั้นถ้าเราทำงานนี้นี้จะช่วยให้ เราข้อมูลเอกสารการขับเคลื่อน
วงการเหล่านี้จะขึ้น ในความสัมพันธ์ position--
พวกเขากำลังฐานเป็นหน้าที่ของข้อมูล
>> ดังนั้นสำหรับวงกลมแรก D3 ทำให้วงกลม
และแล้ว D3 ขอให้เราทำในสิ่งที่ คุณต้องการแสดงออกให้เป็น
และเราก็บอกว่าข้อมูลใดเป็น
ทำให้การแสดงออก 10
>> จากนั้นก็จะถามว่าสิ่งที่คุณต้องการ การแสดงออกที่จะให้วงกลมสอง
และเราตอบ 45
และเราแน่นอนสามารถ ทำให้การคำนวณบางอย่างที่นี่
ผมพบว่าวงการเหล่านั้น เป็นชนิดของ squished ขึ้น
>> ดังนั้นคูณด้วย 3 คูณ 3 ข้อมูลโดย
วงกลมของเราเพิ่งได้ขยายตัวออก
มูลค่าของเราได้สามเท่า
>> วงกลมที่เป็นจริงบนขอบ จึงขออาจจะชดเชยชนิดของมัน
สมมติว่า 20
นี่คุณไป
>> นี่คือการแสดงข้อมูล
มันเป็นหนึ่งในขั้นพื้นฐานมาก แต่นี้ ทำให้เราเข้าใจข้อมูลของเราบางส่วน
มันบอกเราว่าสำหรับตัวอย่างเช่นเรา มีกลุ่มเล็ก ๆ น้อย ๆ ขององค์ประกอบ
และเรามีขอบเขตใหญ่ที่นี่
นี้จะช่วยให้เราข้อมูลบางอย่าง เกี่ยวกับการกระจาย
>> ถ้าเรายกตัวอย่างเช่นการเปลี่ยนแปลง ข้อมูลถึง 150 นี่และฟื้นฟู
การสร้างภาพของเรามีการเปลี่ยนแปลง
เอกสารนี้มีข้อมูลขับเคลื่อน
>> ดังนั้นแน่นอนทุกองค์ประกอบเหล่านี้ คุณลักษณะทั้งหมดเหล่านี้ที่นี่
เราสามารถใช้ฟังก์ชั่นไม่ได้ เพียงตัวเลขที่ไม่เพียง
x และ y ตำแหน่ง
ดังนั้นเราจึงสามารถใช้ฟังก์ชั่นสี
ดังนั้นเราจะทำเช่นเดียวกัน
เราจะให้มันฟังก์ชั่น
>> และสมมุติว่าเราจะได้มี เงื่อนไขในการทำงานของเรา
ฟังก์ชั่นนี้จะมี ร้อยสายยาว
มันสามารถทำมากสิ่งที่ซับซ้อนมาก
>> ดังนั้นขอใส่ถ้ามีคำสั่งที่นี่
สมมติว่าถ้าข้อมูลของเรามีน้อย มากกว่า 50 ที่เกณฑ์บางอย่าง
ที่เราสนใจ ในเหตุผลบางอย่าง
ขอให้มันเป็นสีเขียว
มิฉะนั้นขอให้มันเป็นสีแดง
ที่ได้อย่างไร?
ดี
>> ดังนั้นการแสดงข้อมูลของเราคือการเริ่มต้น ในการถ่ายทอดข้อมูลที่น่าสนใจอื่น ๆ อีกมากมาย
ในหลายช่องทาง
ดังนั้นตอนนี้เรารู้อีกเล็กน้อย เกี่ยวกับการกระจาย
และเรารู้ว่ามีการจัดเรียงของบางอย่าง ตัดที่ 50 ที่เรากำลังสนใจใน
เรารู้ว่ามีสองจุดข้อมูล ต่ำกว่าเกณฑ์ที่และส่วนใหญ่ของพวกเขา
เหนือ
>> ดังนั้นในขณะที่ขั้นตอนสุดท้ายข้อมูลที่นี่ มันหายากมากที่จะเห็นเช่นนี้ว่า
เพื่อให้เพียงย้ายออกไปยังตัวแปร เพราะนั่นคือการทำความสะอาดเช่นนี้
และจากนั้นเราใช้ตัวแปรที่นี่
มันเป็นสิ่งเดียวที่แน่นอน
มันเป็นเพียงแค่ทำความสะอาดบิต
>> ถัดขึ้นไป, iii กระทำ Scales-- ดังนั้นหนึ่งปัญหาที่เหมาะสม
ที่นี่คือถ้าเราเปลี่ยนของเรา ข้อมูลใน 200 value--
ถ้าเราเปลี่ยนเป็น 400 หรือบางสิ่งบางอย่างและฟื้นฟู
แล้วค่านี้เพิ่งไป Offscreen
ดังนั้นตรรกะของเราที่นี่ ของวิธีการที่เราทำครั้งที่ 3
และ 20 เพื่อกระจายมันออกมาแล้ว ชดเชยมันบิตเป็น clunky จริงๆ
>> สิ่งใดที่ตัวเลขเหล่านั้นหมายถึงอะไร?
พวกเขากำลังเขียนยากเพียงแค่มี
และพวกเขากำลังเชื่อมโยงอย่างมากกับข้อมูลที่
เราต้องการข้อมูลเอกสารการขับเคลื่อน
เราต้องการเอกสารที่มีความยืดหยุ่นมาก ว่าข้อมูลที่ได้รับจะปรับไปใช้มัน
และเป็นตัวแทนของมัน
>> สิ่งที่เราต้องการโดยทั่วไปก็คือเรา มีช่วงของตัวเลข 10 นี้
45, 105
และเราต้องการแมปที่ออกไป ความกว้าง, ความกว้างเต็มได้ที่นี่
ดังนั้นเราจึงมีช่วงของ ตัวเลขไปจาก 0 ถึง 100
และเรามีผมวิทยาเขตนี้ไป 20-700 ในกรณีนี้
>> ชนิดของเราต้องการแมปที่เกี่ยวกับ
เราต้องการที่จะไต่ขึ้นมาและ ชดเชยแล้วมันนิด ๆ หน่อย ๆ
แต่กลับกลายเป็นว่า D3 มีเหล่านี้
มันเรียกว่าขนาด
ดังนั้นขอให้ใช้งานได้
>> วิธีการที่ works-- ฉันจะ พิมพ์นี้ขึ้นและจากนั้นอธิบายได้
นี่คือขนาด
สิ่งที่จะทำคือมันจะแผนที่ออก ค่า 1-200 เพื่อ 20-600
เราสามารถตรวจสอบว่า
เราจะเห็นว่าที่นี่
>> ดังนั้นถ้าฉันอาหารมัน 1-- ช่วงเวลาหนึ่ง
ให้ฉันหนึ่งวินาที
ฉันต้องได้พิมพ์ผิดมัน
มีคุณไป
ฉันขอโทษเกี่ยวกับว่า
>> ดังนั้นสิ่งที่ขนาดจะทำ คือมันจะใช้ค่า
แล้วแปลงนั้น ขยายออกจึง
เติมเต็มรูปแบบที่คุณขอ
ดังนั้นในกรณีนี้ถ้าเราจะให้มันหนึ่ง มันจะ map ที่ออกไปยัง 20
และถ้าเราจะให้มัน 200 ก็ จะ map ว่าเมื่อวันที่ 600
และบางแห่งในระหว่าง ถ้าเราได้รับ 100 ก็
จะไปอยู่ที่ไหนสักแห่ง ในระหว่างวันที่ 20 และ 600
>> และแน่นอนตอนนี้คือสิ่งที่ เราจำเป็นต้องลบรหัสยากเหล่านั้น
สิ่งที่เรามีสิทธิที่มี
ดังนั้นสิ่งที่เราต้องการจะทำคือ ใช้ข้อมูลที่เรา
กำหนดว่าข้อมูลของแต่ละบุคคล องค์ประกอบและผ่านมันจะไต่แรก
ดังนั้นขนาดจะขนาดมันขึ้นมา
>> สวยหน่อยโอ้เรามีข้อผิดพลาดเล็ก ๆ น้อย ๆ ที่นี่
เรากำลังขาดหายไปข้อมูล
มีคุณไป
และที่ขยายมันออกมา
>> ที่ทำให้เราเหมือนกัน ผลที่เรามีมาก่อน
แต่แทนที่จะมีผู้ ยากที่ จำกัด ของรหัส
และถ้าขนาดของเรา การเปลี่ยนแปลงผ้าใบยกตัวอย่างเช่น
ถ้าเราต้องการที่จะมีมากกว่านี้ 400 พิกเซลและมัน squishes ออก
เราสามารถมีได้ over-- เราสามารถขยายหรือเรา
สามารถลดอัตราการทำกำไรที่เหลือนี้ บางสิ่งบางอย่างมากหรือน้อยกว่า 20
ตัวเลขเหล่านี้เหล่านี้เขียนยาก ตัวเลขในขณะนี้ทำให้รู้สึกถึงเรา
>> และเราสามารถทำอะไรได้มากขึ้น สิ่งที่น่าสนใจเช่นกัน
ดังนั้นแทนที่จะมีเชิงเส้น ขนาดเราอาจต้องการที่จะเข้าสู่ระบบขนาด
และนั่นจะทำให้เรามีระดับการเข้าสู่ระบบ
>> ดังนั้นตอนนี้ขนาดของเราแทน เพียงแค่ขยายออกช่วงนั้น
ก็ทำสิ่งที่ซับซ้อนมากขึ้น
แทนที่จะมีช่วงนี้ยาก รหัสและแทนที่จะมีที่ 600,
เราอาจจะต้องการเพียงแค่ใช้ความกว้าง ดังนั้นจากความกว้าง 20 ลบ 40,
2 ครั้งอัตรากำไรขั้นต้นในด้านอื่น ๆ
และสิ่งนี้ทำให้มากรู้สึกมากขึ้น ใครบางคนที่อาจจะมองไปที่รหัส
>> ที่น่าสนใจ, เครื่องชั่งน้ำหนักได้ มากที่มีความซับซ้อนมากเช่นกัน
พวกเขาทำสิ่งต่างๆมากมายที่น่าสนใจ
ดังนั้นเครื่องชั่งน้ำหนักไม่จำเป็นต้องมี ในการดำเนินงานเพียงกับตัวเลข
ขอให้ระดับสี
>> ดังนั้นช่วงของเราสามารถ be-- โดเมนของเราคือ 1-200
นั่นเป็นสิ่งที่มีการป้อนข้อมูล
แต่เราอาจต้องการที่จะจากแผนที่ สีเขียวเป็นสีแดงเช่น
และตอนนี้ถ้าเราผ่านมันที่ 1, เรากำลังจะได้รับสีเขียว
ถ้าเราจะให้มัน 200, เราจะได้รับสีแดง
และถ้าเราผ่านมันบางสิ่งบางอย่างในระหว่าง มันจะเป็นส่วนผสมของว่าบาง
ที่ไหนสักแห่งบนทางลาด ระหว่างสีเขียวและสีแดง
>> และแทนที่จะต้อง ชนิดของตรรกะ clunky นี้
เรามีที่นี่ด้วย เงื่อนไขที่นั่น
เราอาจจะมีบางสิ่งบางอย่าง ขนาดเชิงเส้นระหว่างผู้
ดังนั้นเราจึงต้องการใช้ขนาดที่เราเพิ่ง สร้างขึ้นซึ่งเราเรียกว่าสี
และเราต้องการให้มัน d ซึ่ง เป็นองค์ประกอบข้อมูลของเรา
และมีที่เราจะไป
เรามีขนาดสี
>> ดังนั้นนี่คือการทำแผนที่
ดังนั้นซ้ายสุดเป็นสีเขียวอย่างสมบูรณ์
ขวาสุดจะเป็นสีแดงอย่างสมบูรณ์
และทุกสิ่งในระหว่าง เป็นหน้าที่ของง
เรามีที่น่าสนใจ การสร้างภาพที่นี่
แต่ข้อมูลของเราเป็นชนิดของน่าเบื่อ
ลองมาดูกันว่าเราจะทำอย่างไรถ้า เรามีข้อมูลที่น่าสนใจมากขึ้น
>> พระราชบัญญัติ IV, การทำงานกับ Data-- สิ่งแรก
เราจะต้องการที่จะทำเพื่อให้เรา การสร้างภาพที่น่าสนใจมากขึ้น
คือการย้ายข้อมูลที่อื่น
มันเป็น clunky มากที่จะมี ข้อมูลรหัสยากที่นี่
และโดยทั่วไปเราจะขอให้ คนอื่นสำหรับข้อมูลที่
เราจะอาจจะขอให้รัฐบาล สำนักสำรวจสำมะโนประชากรของสิ่งที่ข้อมูลของคุณ
แล้วพล็อตที่หรือถาม บางกิจการที่บุคคลที่สามสำหรับข้อมูลบางอย่าง
แล้วสร้าง การสร้างภาพว่า
>> ดังนั้นสิ่งแรกที่เราต้องการจะทำ มีการย้ายที่ไปที่อื่น
ดังนั้นฉันจะสร้าง ไฟล์ที่เรียกว่าที่นี่ data.json
JSON เป็นรูปแบบข้อมูล
คุณไม่จำเป็นต้องรู้มากเกี่ยวกับว่า
และเรากำลังจะคัดลอก ข้อมูลเล็ก ๆ น้อย ๆ ที่เรามีอยู่ที่นั่น
วางไว้ในคำต่อคำที่นั่นไป กลับไปที่รหัสการมองเห็นของเรา
ที่นี่และใช้ฟังก์ชันนี้ที่นี่
คุณไม่จำเป็นต้องทราบรายละเอียด
แต่สิ่งนี้จะทำคือ มันจะหาไฟล์ที่
เรียกมันและส่งกลับมาให้เรา
ดังนั้นสิ่งนี้จะเป็นมันไป และได้รับไฟล์ data.json
และแล้วทุกรหัสที่ เยื้องตัวในเป็นหลัก
รหัสทั้งหมดที่เรามีตรงนี้จะ ทำงานเฉพาะเมื่อเราได้รับข้อมูลกลับ
และจากนั้นก็จะไปทำงานที่ รหัสกับข้อมูลที่เรามี
ที่ดีที่เรามี การสร้างภาพที่จะสอบถาม
สำหรับรหัสบางอย่างอยู่ที่ไหนสักแห่ง อื่นซึ่งมักจะ
ที่มันจะสอบถามข้อมูลจากบางส่วน ที่อื่นซึ่งมักจะ
วิธีการสร้างภาพทำงาน
>> แต่ผมต้องการที่จะกลับไปที่ข้อมูล
ดังนั้นข้อมูลที่ลึกซึ้งใน D3-- D3 สิ้นเปลืองข้อมูลที่เป็นรายการของสิ่งที่
D3 คาดว่าข้อมูลเพียงแค่เป็นรายการ ของสิ่งอาร์เรย์ของสิ่ง
มันไม่สำคัญว่าสิ่งที่สิ่งเหล่านั้น ดังนั้นตราบใดที่มันเป็นอาเรย์ของพวกเขา
>> ดังนั้นที่นี่ตัวอย่างเช่นเราสามารถของ แน่นอนมีการลอยค่าจุด
เราจะได้มีเชิงลบ
D3 ไม่สนใจตราบ ที่เป็นรายการของสิ่งที่
>> สิ่งที่น่าสนใจในขณะที่เรา อาจมีเรายังสามารถทำได้
มีรายชื่อของสตริงเช่นนั้น
ดังนั้นเหล่านี้เป็นพาดหัวเป็นสีแดงเข้ม ผมหยิบขึ้นมาไม่กี่วันที่ผ่านมา
และบางทีคุณอาจพบที่น่าสนใจบางอย่าง สิ่งที่เกี่ยวกับเหล่านี้พาดหัว
>> ดังนั้นครั้งนี้เป็นรายการของสิ่งที่
D3 ไม่ได้ดูแล
เหล่านี้เกิดขึ้นจะเป็นสตริง
เราได้มีการเปลี่ยนแปลงข้อมูลของเรา
>> ลองกลับไปที่การสร้างภาพของเรา
ตอนนี้เราคาดว่าการสร้างภาพ การป้อนข้อมูลให้เป็นตัวเลข
ดังนั้นเรากำลังจะมี ที่จะทำให้การเปลี่ยนแปลงเล็กน้อย
ดังนั้นสำหรับตัวอย่างแรกของทุกคนอาจจะ เราต้องการที่จะนำวงการเหล่านี้พร้อม
โดยความยาวของพาดหัว, จำนวนตัวอักษรในพาดหัว
>> ดังนั้นสิ่งที่เราจะทำเท่าไหร่เวลาของเราทุกคน ฟังก์ชั่นเรียกว่ามีสตริง
เราจะพบว่ามันเป็นระยะเวลาและ แล้วผ่านที่จะไต่
สีผมจะกลับมา ที่เป็นสีฟ้าเหล็ก
และมีที่เราจะไป
เรามีการสร้างภาพ พาดหัวเป็นสีแดงเข้ม
>> ขนาดเราเป็นบิตออก
สมมติว่ายาวที่สุด พาดหัวเป็น 100 ตัวอักษรยาว
ดังนั้นช่วงที่ออกมาเล็กน้อย
และเรามีการสร้างภาพ
ดังนั้นจึงดูเหมือนว่าพาดหัวมากที่สุด มีความสวยใกล้กัน
ในแง่ของสายอักขระ
แต่สิ่งหนึ่งที่นั่นจริงๆยืนออก
>> เราสามารถสร้างเครื่องมือบางอย่าง ในการสำรวจว่า
แต่เมื่อผมทำงานเกี่ยวกับเรื่องนี้ผมเป็น อยากรู้อยากเห็นว่าในข้อมูลชุดนี้
พาดหัวข่าวกับลำไส้ใหญ่ ในพวกเขาจะเป็นอีกต่อไป
ผมถือว่าพวกเขาจะ
>> ดังนั้นเรามาหา
ลองใช้สี ช่องเหมือนที่เราทำมาก่อน
การเข้ารหัสบางอย่างเกี่ยวกับว่า มีลำไส้ใหญ่หรือไม่มีเลย
ดังนั้นเราจะใช้เงื่อนไขอีกครั้ง
คุณไม่จำเป็นต้องรู้ รายละเอียดของการนี​​้,
แต่นี่คือวิธีการที่เราตรวจสอบ สตริงสำหรับตัวละครโดยเฉพาะอย่างยิ่ง
ใน JavaScript อีกครั้งไม่เกี่ยวข้อง
>> แต่ถ้าเราจะไม่พบ ลำไส้ใหญ่เราจะกลับสีเขียว
และถ้าเราทำเราจะกลับสีแดง
ดังนั้นอีกครั้งพาดหัวข่าวว่า ได้ลำไส้ใหญ่จะเป็นสีแดง
นี่คือสิ่งที่ means-- นี้มีความสุข
>> ดังนั้นจึงดูเหมือนว่าฉัน สมมติฐานชน
มีเพียงสองคือ
เรามีเพียงหกจุดข้อมูล และมีเพียงสองมีทวิภาค
แต่ดูเหมือนว่าน้อยมาก ในระดับล่างสุดในความเป็นจริง
พาดหัวข่าวกับทวิภาคดูเหมือน ไปโดยทั่วไปจะสั้นลง
อย่างน้อยในข้อมูลของเราถึงตรงที่น่าสนใจ
>> ลองกลับไปที่ เหล็กสีฟ้าแล้วดู
สิ่งที่เราสามารถทำกับแม้กระทั่ง ข้อมูลที่น่าสนใจมากขึ้น
ดังนั้นอีกครั้งที่ผมกล่าวถึงว่า ข้อมูลใน D3 เป็นรายการของสิ่งที่
เราได้เห็นตัวเลขมากมายหลายชนิด
เราได้เห็นสตริง
แต่สิ่งที่ยังสามารถเป็นวัตถุ
>> พวกเขาสามารถเป็นสิ่งที่ซับซ้อน ที่มีสิ่งต่างๆมากมาย
ที่จะบอกว่าชัดเจนมากขึ้น ในกรณีส่วนใหญ่เรา
ต้องการที่จะสร้างจุดข้อมูลทุก ซับซ้อนมากขึ้นกว่าเพียงหนึ่งค่า
หากคุณต้องการจินตนาการ ฐานข้อมูลเกี่ยวกับนักเรียน
อาจจะมีนักเรียน ชื่อ, รหัสนักศึกษา,
และจำนวนมากของสิ่งที่เกี่ยวข้อง ที่มีการบันทึกโดยเฉพาะอย่างยิ่ง
ไม่ได้เป็นเพียงสตริงหรือจำนวน
ดังนั้นให้ดูที่ว่า
>> นี้เป็นหนึ่งในข้อมูลดังกล่าวตั้ง
นี้เป็นชุดข้อมูลที่เกี่ยวกับการเกิดแผ่นดินไหว
ดังนั้นทุกอย่างที่นี่ในรายการหรืออาร์เรย์ของเรา ของสิ่งที่มีหลายสิ่งที่ตัวเอง
ดังนั้นจุดข้อมูลทุกคนมี ขนาดและการประสานงาน
และพิกัดของตัวเอง มีสองสิ่ง
>> ดังนั้นทุกวันอยู่ในขณะนี้มากขึ้น ที่มีความซับซ้อนและมากน่าสนใจมากขึ้น
และมีมากขึ้น ข้อมูลที่น่าสนใจ
ลองมาดูกันว่าเราสามารถสร้างออกจากที่
กลับกลับไปที่นี่อีกครั้งโดยใช้ การสร้างภาพวงกลม histogram ของเรา
เราได้สร้างให้ดูว่าเราสามารถสร้าง การสร้างภาพของการกระจายขนาด
อยู่ในชุดข้อมูลของเรา
>> ดังนั้นที่นี่มันเป็นแนวคิดเดียวกัน
แต่ตอนนี้มีสิ่งที่ดีมากขึ้น
งมีองค์ประกอบข้อมูลจำนวนมาก
ดังนั้นเราจึงได้รับการ d กลับ
D3 ทำให้เรา d
และเราตอบสนองโดยการหาขนาด งแล้วผ่านที่ขนาด
>> แล้วเราต้องเปลี่ยน ขนาดของเราแน่นอน
ดังนั้นเคาะก็ทำไม่ได้ มากไปกว่า 10
ที่จริงมีไม่เคย แผ่นดินไหวขนาด 10
แต่นั่นเป็นชนิดของเราบน ปลายสเปกตรัมบนของเรา
>> ลองรีเฟรช
ดีที่เรามีการสร้างภาพ
มันน่าสนใจที่จะ note-- ดังนั้น มีสองจุดข้อมูลที่
เกือบจะตรงกับด้านบนของแต่ละ อื่น ๆ ในแง่ของขนาด
คุณจะเห็นนี้โดยความทึบแสงที่เรากำลังใช้
>> เรามีข้อมูลทางภูมิศาสตร์ในขณะนี้
เรามีละติจูดและลองจิจูด
บางทีเราอาจจะทำอะไรบางอย่าง จำนวนมากที่น่าสนใจมากขึ้นกับว่า
ลองหาข้อมูลเพิ่มเติมบางส่วน วิธีที่น่าสนใจที่จะเห็นภาพ
นี้มีความซับซ้อนมากขึ้น ข้อมูลที่เรามีการเข้าถึง
>> พระราชบัญญัติ V, Mapping-- พื้นฐาน เราต้องการที่จะนำเหล่านี้บนแผนที่
ฉันหมายความว่านี่คือที่นี้เป็นไป
เราต้องการที่จะเข้ารหัสข้อมูลเกี่ยวกับ ตำแหน่งของการอ่านแผ่นดินไหวเหล่านี้
รวมทั้งความสำคัญของพวกเขา เพราะเรามีที่ตอนนี้
เราเข้าใจวิธีการกิน ข้อมูลที่ซับซ้อนมากขึ้น
>> สิ่งแรกที่เราจะทำคือ สร้างแผนที่แผนที่พื้นหลัง
ผมกำลังจะผ่านไป นี้ได้อย่างรวดเร็ว
นี้เป็นรหัสยุ่งยาก
เป็นอีกหนึ่งในบรรดา สูตรที่คุณทำไม่ได้จริงๆ
ต้องเข้าใจอย่างเต็มที่เพื่อให้คุณใช้
แต่นี่เป็นรหัส
รหัสนี้ที่นี่สร้างแผนที่
>> เราไม่ได้จะไปในรายละเอียด
แต่เผิน ๆ สิ่งที่มันไม่เป็น มัน queries ไฟล์ us.json นี้ซึ่ง
เป็นแฟ้มข้อมูลเช่น คนที่เราเคยมีมาก่อน
มันเป็นเรื่องที่ซับซ้อนมากขึ้นแน่นอน
แต่ในกรณีนี้ทุกอย่าง จุดข้อมูลทุกรัฐนี้
และมีรายชื่อของ ละติจูดและลองจิจูด
ที่กำหนดรูปหลายเหลี่ยม, แบบฟอร์มที่รัฐว่า
>> ดังนั้นสิ่งที่จะทำ D3 คล้าย กับสิ่งที่เราทำมาก่อน
มันจะขอให้และ ผูกที่องค์ประกอบ
และมีฟังก์ชั่นที่ แผนที่จะองค์ประกอบที่ออก
ขึ้นอยู่กับละติจูดและลองจิจูด
คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการที่
และผมขอแนะนำให้มัน
>> มีการเชื่อมโยงที่มี ในตอนท้ายของรหัสนี้โพสต์
และรหัสที่มีการแสดงความคิดเห็น
ในที่มีการเชื่อมโยงสำหรับเพิ่มเติมเกี่ยวกับเรื่องนี้
ผมขอแนะนำให้คุณมองมันได้
แต่สิ่งที่เราสนใจคือ ฟังก์ชันการฉายนี้
ผมต้องการที่จะผ่านไปที่
>> ครั้งแรกของทั้งหมดให้ฉันแสดง คุณว่าใช่เรามีแผนที่
แผนที่จะเย็น
ดังนั้นเรามาดูที่นี้ ฟังก์ชั่นการผลิต
>> ฉายเป็นอย่างมาก เช่นขนาด, ตาชั่งอีกครั้ง
ดังนั้นสิ่งที่ผลิต ฟังก์ชันการฉายนี้
จะให้ความสำคัญเราสามารถผ่านมันเส้นแวง และ latitudes-- ในกรณีนี้
ค่าเหล่านี้ที่นี่มี ปรารถนา-lat ของอาคาร
เรากำลังนั่งอยู่ในที่เหมาะสม now-- ที่จะฉาย
และประมาณการจะแปลง ที่เป็น x และ y ค่าพิกเซล
>> ดังนั้นสิ่งที่ฉายจะทำ จะคล้ายกับขนาดของเรา
ก็สละละติจูดของเราและ เส้นแวงที่แสดงถึงโลกทั้ง
และหดตัวและการปรับขนาดที่ ลงไปที่ตารางที่เราต้องการ
ที่เราได้รับมัน
ในกรณีนี้เราไม่ ผ่านค่าเหล่านี้
และมันก็ทำให้เรามีดีที่ บนหน้าจอของคุณหมายถึง 640 พิกเซล
หน้าจอนี้ทั้งหมดเป็น 700 พิกเซล กว้างเพื่อที่จะทำให้เราเกี่ยวกับที่นี่
และ 154 พิกเซลลงที่ฉันจะ ประมาณการสวยมากที่นี่
>> ดังนั้นการผู้ lat-ปรารถนาซึ่ง เป็นตัวแทนของบางสิ่งบางอย่างในโลกทั้ง
และ squishing และการย้ายที่อยู่รอบ ๆ เพื่อให้เรามี x และค่าพิกเซล y,
นี้เป็นสิ่งแรกที่ ทำในรหัสการทำแผนที่นี้
และจากนั้นส่วนที่เหลือของ รหัสสิ้นเปลืองข้อมูล
แล้วแผนที่เหล่านั้น lat-ปรารถนา บนบางสิ่งบางอย่างบนหน้าจอของคุณ
>> แต่เรากำลังจะใช้การฉายภาพนี้ ฟังก์ชั่นเพราะมันจะเปิดออก
เรามีปรารถนา lat-ปรารถนาเป็นอย่างดี
มองย้อนกลับไปที่ข้อมูลของเราเรามี เส้นรุ้งเส้นแวงและพิกัด
สำหรับทุกการสังเกต
ดังนั้นขอให้ใช้การฉาย
>> ดังนั้นมองไปที่การแสดงออกของเรา เราต้องการ exposition-- ของเรา
เรามีละติจูดและลองจิจูด
แต่เราต้องการค่าพิกเซล
และมันจะเปิดออกเราได้ว่า สิ่งที่เรา want-- ฉาย
อย่างมากเช่นที่เราอยู่ โดยใช้มาตราส่วนที่นี่
ตอนนี้เราจะใช้การฉาย และผ่านมันพิกัด
ดังนั้นสิ่งแรกที่ เรากำลัง doing-- ดังนั้นเรา
รับวันซึ่งเป็นข้อมูลของแต่ละบุคคล องค์ประกอบของการเกิดแผ่นดินไหวแต่ละบุคคล
การอ่าน
สิ่งแรกที่เราทำ จะได้รับพิกัด
สิทธิทั้งหมดที่เรามีพิกัด
>> สิ่งที่สองที่เราทำคือ ที่ผ่านไปฉาย
ฉายแปลงพิกัดเหล่านั้น เป็นค่าพิกเซล, x และ y
และแล้วสิ่งสุดท้ายที่เรา ต้องการจะทำคือเพียงแค่ได้รับ x,
ซึ่งในกรณีนี้เป็นครั้งแรกหนึ่ง
มันเป็นครั้งแรกของทั้งสองสิ่ง ที่ส่งคืนโดยการฉาย
>> เราจะทำเช่นเดียวกันสำหรับปี
แต่แทนที่จะเราจะกลับมา องค์ประกอบที่สอง, y
พร้อมที่จะรับการฟื้นฟู
โออักขระพิเศษ มีความสุขตรงนี้เรามี
ข้อมูลเอกสารการขับเคลื่อนที่ ปกปิดไฟล์ JSON ของวัตถุนี้
การทำแผนที่และการเปลี่ยน แอตทริบิวต์ที่เกี่ยวข้องกับข้อมูล
โครงการบนแผนที่
นี้เป็นที่น่าสนใจจริงๆ
นี่คือเย็น
>> เราจะทำมันขึ้นรอย
ผมหมายความว่าเรามีสองชิ้น ข้อมูลที่มีจุดข้อมูลทุก
ผมหมายถึงสาม
เรามีพิกัด ซึ่งเป็น x และ y
และเรามีความสำคัญ
>> เราจำเป็นต้องมีการเข้ารหัสความสำคัญอย่างใด
เรามีจำนวนมากของช่องทาง
เราสามารถใช้สี
เราสามารถใช้รัศมี
เราสามารถใช้ความทึบแสง
เราสามารถใช้หลายสิ่งหลายอย่างในรหัส
ใด ๆ ของคุณลักษณะเหล่านี้และอีกมากมาย อื่น ๆ อีกมากมายที่ไม่ได้จดทะเบียนมี
เพราะพวกเขากำลังไม่จำเป็นที่เราจะทำได้ ใช้ในการเข้ารหัสข้อมูลนี้โรคหลอดเลือดสมอง
และสิ่งเหล่านี้ผมได้กล่าวถึง
>> ขอทำรัศมี
ผมคิดว่ารัศมีคือใช้งานง่ายที่สุด
ดังนั้นอีกครั้งเราจะเปลี่ยนที่กำหนดค่าตายตัว 40 และทำให้การคำนวณบาง
เราจะใช้ขนาดที่ชื่นชอบของเราอีกครั้ง
และเราก็ผ่านมาง
แต่ไม่ได้ d เพราะเราต้องการขนาด ง งเป็นเพียงจุดข้อมูล
เราจะผ่านความสำคัญในการปรับขนาด
>> ลองอีกครั้ง
โอ้วมันไม่ทำงาน
ทำไมมันไม่ทำงาน?
>> ดังนั้นอย่าลืมสิ่งที่ขนาดไม่
ลองดูที่ขนาดอีกครั้ง
แผนที่มาตราส่วน 1-10 บน เพื่อ 22-600 มากกว่าหรือน้อยกว่า
600 มีขนาดใหญ่มาก
นี่คือเหตุผลที่เราได้รับนี้
>> ดังนั้นเราจึงต้องการที่จะเปลี่ยนขนาดของเรา บางสิ่งบางอย่างที่เหมาะสมมากขึ้น
สมมติว่าเราต้องการที่ 0-60
60 มีขนาดใหญ่ แต่ 10 แผ่นดินไหว เป็นของหายากอย่างไม่น่าเชื่อ
ในความเป็นจริงพวกเขาไม่เคยเกิดขึ้น
>> ดังนั้นสิ่งนี้จะทำคือมันจะใช้เวลา ขนาดของเราที่จะไป 1-10
และแผนที่มันเกี่ยวกับที่จะขยายมันออกมา
และแผนที่มันไป 0-60
ลองรีเฟรช
>> ดีที่เรามีการสร้างภาพ
นี่คือที่ดี
นี้เป็นข้อมูลจริง
คุณจะสังเกตเห็นในของเล่นเล็ก ๆ น้อย ๆ ของฉัน ตัวอย่างเช่นแผ่นดินไหวที่ใหญ่ที่สุด
เป็นขวาด้านบนของเรา
แต่ที่มัน
เรามีการสร้างภาพที่ขับเคลื่อน ที่กินข้อมูล
และทำให้เราจริงๆ ข้อมูลที่น่าสนใจ
ใช่ให้เพิ่มบางส่วน การติดต่อสื่อสารกับมัน
ที่ผมกล่าวถึงว่าเป็น แรงของ D3
>> ดังนั้นที่นี่สำหรับทุกองค์ประกอบเราไม่ อธิบายพวงของคุณลักษณะ
แต่เรายังสามารถอธิบายสิ่งที่เราต้องการ ที่จะเกิดขึ้นกับองค์ประกอบการติดต่อสื่อสาร
ตัวอย่างเช่นเราสามารถอธิบาย สิ่งที่เกิดขึ้นเมื่อเราเลื่อนเมาส์ไป
และคล้ายว่า ที่จะนำฟังก์ชั่น
คล้ายกับ แอตทริบิวต์ที่เรามีมาก่อน
ที่เราทำบางอย่างเพื่อ องค์ประกอบเมื่อเราเลื่อนไปมัน
>> ดังนั้นสิ่งแรกที่เราต้อง ทำคือการเลือกองค์ประกอบที่
ที่จะหาได้โดยทั่วไปในเบราว์เซอร์
แล้วเราสามารถตั้งค่า แอตทริบิวต์กับมัน
ดังนั้นสิ่งที่ฉันทำที่นี่คือเมื่อเราเลื่อน มากกว่าสิ่งที่เราจะได้รับองค์ประกอบที่
จากนั้นตั้งค่าความทึบแสงของมันกลับ 1, การทึบแสงสมบูรณ์
ลองมาดูสิ่งที่ดูเหมือนว่า
>> มันจะปรากฏขึ้นที่เรามี อัฒภาคพิเศษที่นี่
ดังนั้นหากเราเลื่อนเมาส์ไปที่นี่จะได้รับเต็มรูปแบบ
แต่ตอนนี้แน่นอนมัน อยู่เต็มเพราะเรา
ต้องอธิบายสิ่งที่เกิดขึ้น เมื่อเอา​​เคอร์เซอร์ของเรา
ดังนั้นเรามาทำตรงว่าเมื่อวันที่ mouseout เมื่อเทียบกับการวางเมาส์
>> และเราจะตั้งค่าให้ สิ่งที่เรามี before-- 0.5
และตอนนี้ทุกครั้งที่เรา โฉบเราได้รับเต็มวง
มันจะช่วยให้เราเห็นสิ่งที่เรา เราเลือกเป็นหลัก
>> และตอนนี้ขอให้นี้ดีจริงๆ
ลองเชื่อมต่อนี้ไปยังข้อมูลจริง
ดังนั้นขอถามจะทำได้ USGS เกี่ยวกับข้อมูลของพวกเขา
ดังนั้นการสำรวจทางธรณีวิทยาของสหรัฐ มีข้อมูลเกี่ยวกับการเกิดแผ่นดินไหว
พวกเขามีประชาชน API ที่สามารถ ที่จะบริโภคในรูปแบบ JSON
ดังนั้นขอให้ทำอย่างนั้น
>> ดังนั้นนี่คือบิตของรหัสที่ เชื่อมต่อกับ USGS API
และมีบิตของการประมวลผลที่มัน
นี้ไม่ได้เกี่ยวข้อง แต่มันช่วยลดความยุ่งยาก เป็นรูปแบบข้อมูลง่ายอย่างหนึ่ง
เรามีมาก่อน
ดังนั้นผมจึงได้รับการกำจัดของสายของเราที่จะ data.json ปลอมของเราในแฟ้ม
และแทนฉันโทร USGS เป็นหลัก
>> ลองรีเฟรชดี
นี้เป็นจริงข้อมูลในชีวิตจริง จากสัปดาห์สำหรับการเกิดแผ่นดินไหวครั้งนี้
นี้เป็นที่น่าสนใจจริงๆ
นี้ไม่น่าแปลกใจ สำหรับเรา แต่มี
จำนวนมากของการเกิดแผ่นดินไหวบน ฝั่งตะวันตกในแคลิฟอร์เนีย
แต่ผมคิดว่ามันเป็นที่น่าสนใจมาก ว่ามีการเกิดแผ่นดินไหวจำน​​วนมาก
ในอลาสกาและเห็นได้ชัด ที่นี่ในมิดเวสต์
ผมหมายถึงที่น่าสนใจและเรากำลังดี
นั่นเป็นข้อสรุป
>> แต่พื้นฐานนี้ คือสิ่งที่จะช่วยให้เรา D3 ทำ
มันจะช่วยให้เราใช้ข้อมูลที่ผูก มันกับองค์ประกอบใน DOM,
และมีองค์ประกอบเหล่านั้นเปลี่ยน เป็นหน้าที่ของข้อมูล
มีแอตทริบิวต์เหล่านั้นทั้งหมด คุณลักษณะหลายองค์ประกอบ
ทั้งหมดจะเป็นประโยชน์สำหรับช่องทาง ในการถ่ายทอดข้อมูล
>> D3 เป็นที่มีประสิทธิภาพอย่างไม่น่าเชื่อ ห้องสมุดและทำงานได้ดีอย่างน่าอัศจรรย์
นี่คือบางสิ่งที่มีประสิทธิภาพ
การแสดงข้อมูลเป็น เครื่องมือที่มีประสิทธิภาพอย่างไม่น่าเชื่อ
สำหรับการถ่ายทอดให้กับคนที่ลึก ข้อมูลเชิงลึกที่ได้รับการหลักของพวกเขา
และช่วยให้พวกเขาเข้าใจใน วิธีนี้ลึกซึ้งและใช้งานง่าย
วิธีการทำงานของข้อมูลและวิธีการ เปลี่ยนแปลงข้อมูลชีวิตของเรา