[เล่นเพลง] 

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 เป็นที่มีประสิทธิภาพอย่างไม่น่าเชื่อ ห้องสมุดและทำงานได้ดีอย่างน่าอัศจรรย์ นี่คือบางสิ่งที่มีประสิทธิภาพ การแสดงข้อมูลเป็น เครื่องมือที่มีประสิทธิภาพอย่างไม่น่าเชื่อ สำหรับการถ่ายทอดให้กับคนที่ลึก ข้อมูลเชิงลึกที่ได้รับการหลักของพวกเขา และช่วยให้พวกเขาเข้าใจใน วิธีนี้ลึกซึ้งและใช้งานง่าย วิธีการทำงานของข้อมูลและวิธีการ เปลี่ยนแปลงข้อมูลชีวิตของเรา