[მუსიკალური სათამაშო] 

DAVID Chouinard: მე ვარ დავით Chouinard, და ეს არის D3. მივესალმებით. ჩვენ ვაპირებთ, რომ გაიგოთ D3 დღეს. D3 არის JavaScript ფარგლებში მშენებლობის მაღალი ხარისხი ინტერაქტიული თვალსაჩინოება ვებ. რამ, როგორიცაა, რაც ჩვენ ხედავს უკან ჩემთვის, ჩვენ ვაპირებთ, რომ ისწავლონ, რათა იმ რამ, სახის საფუძვლებს იგი. მაგრამ ეს იქნება მაგარი. მოდით დავიწყოთ მიღების ლამაზი სურათები. ჩვენ მივიღეთ უფრო demos პერსპექტივები შესაძლებელი. მოდით ეს. 

აქტის მე, DOM manipulation-- ჩვენ ვაპირებთ დაიწყოს დაუყოვნებლივ მიღების მაგარი რამ. პირველ რიგში, მარცხენა, ჩვენ გვაქვს კოდი. მარჯვენა, ჩვენ გვაქვს შედეგი ჩვენი კოდი. მოდით გავლა იგი. 

მოდით, რათა წრე. როგორ, რომ ხმის? svg.append circle-- ჩვენ უბრალოდ გააკეთა წრე. თქვენ არ მჯერა მე, არა? ეს არ არსებობს. 

მერე რა ჩვენ სწორედ აქ არის, SVG არის scalable ვექტორული გრაფიკა. ეს არის გზა, რომელსაც ჩვენ გეტყვით ბრაუზერი რათა ვექტორული გრაფიკა ბრაუზერში. რაც ჩვენ გავაკეთეთ ახლავე ემატება წრე დაათვალიეროთ. 

დაპირება, რომ წრე მოითხოვს ცოტა ძირითადი ატრიბუტები სანამ ჩვენ შეგვიძლია რეალურად ვხედავ მას. ჩვენ უნდა გითხრათ, რომ ეს მისი x პოზიცია, მისი Y პოზიცია, მისი რადიუსი. ჩვენ არ ვუთხრა ის, რომ არც ერთი, ასე რომ, ჩვენ არ ვხედავთ, რომ ეს ახლა. მაგრამ მოდით გეტყვით, რომ ეს ნივთები. 

ასე რომ, პირველ რიგში, თქვენ მოხვდით რათა ჩვენი წრე სახელი. ასე რომ, მოდით ეძახით წრე. ჩვენი წრე აქვს სახელი ახლა. და მოდით მივცეთ მას რამდენიმე ატრიბუტები. როგორ შესახებ cx იქნება ცენტრის x, ასე ცენტრში x პოზიცია. ვთქვათ, 200 200 pixels. 

მოდით მივცეთ მას y 200 pixels ასევე. და რ, რადიუსი, დაახლოებით 40 პიქსელი. ახლა ვნახოთ. მე ვერ მართლწერის. 

იქ წასვლა. ჩვენ გვაქვს წრის პოზიცია 200 pixels, 200 pixels, რადიუსი 40 პიქსელი. სახის cool, არა? ჩვენ გვაქვს წრე. Yeah. 

ასე არ უნდა დაიცვას გასწვრივ. ყველა ეს მაგალითები, ყველა კოდი მე ვაკეთებ დღეს უზრუნველყოფილი იქნება ონლაინ ბოლოს სახით ინტერაქტიული მაგალითები ერთად საგუშაგოებს ყველა აქტი, და ასე შემდეგ. 

მოდით გავაკეთოთ მეტი პერსონალი. ამ შავი წრე მართლაც მახინჯი. მე ვწუხვარ, რომ შეცდომა შეტყობინებები უფლება არსებობს. იქ ჩვენ წავიდეთ. 

მოდით მივცეთ მას ფერი. როგორ არის, რომ? მე მიყვარს ფოლადის ლურჯი. ასევე, ჩვენი წრე შეიცვალა ფერი. ეს არის დიდი. მოდით ეს ნახევრად გამჭვირვალე too-- ნახევრად გამჭვირვალე. 

ასე რომ ეს არის ატრიბუტები ჩვენ განსაზღვრის წრე. პირველი, რაც ჩვენ გავაკეთეთ არის ჩვენ დააყენა წრე გვერდზე. და მაშინ ჩვენ განმსაზღვრელი რამოდენიმე ატრიბუტები. ზოგიერთი მათგანი საჭირო, როგორიცაა CX, CY, და რადიუსი. და სხვა აუცილებელი. 

არსებობს ბევრი სხვა ატრიბუტები. არსებობს უამრავი მათგანი. მაგალითად, ჩვენ შეგვეძლო ინსულტის ისევე, ინსულტის წითელი. მაგრამ მოდით ამოიღონ, რომ. ჩვენ უკან წრე, ლურჯი წრე. 

მოდით უფრო წრეებში. როგორ არის, რომ? მოდით, რათა კიდევ ერთი წრე. ეს არის საინტერესო, არა? 

ასე ვთქვათ, მე უბრალოდ ასლი გაკრული ის, რაც ჩვენ უკვე. მოდით ეძახით circle2. და მოდით ზუსტი იგივე და მისთვის ატრიბუტები, ეძლევა x პოზიცია 300. Yay, ჩვენ გვაქვს ორი წრეების ახლა. 

და რა თქმა უნდა, ჩვენ შეგვიძლია განახლება ამ ფასეულობების. მე ვერ დააყენა ის 400, და ახლა ის მოძრაობს. და რადგან ეს არის შემაშფოთებელი, მოდით ამოიღონ იგი, ასე circle2.remove. ის წავიდა ახლა. 

ასე, რას ვაკეთებთ და მხოლოდ ძალიან, very-- ეს ძალიან ჰგავს, რაც თქვენ შეიძლება გავაკეთოთ jQuery, მაგალითად. ჩვენ უბრალოდ მანიპულირების DOM, ის მოუწოდა. თქვენ ალბათ გსმენიათ, რომ სიტყვა, სანამ. ჩვენ შექმნის პერსონალი, შექმნის ატრიბუტები პერსონალი, მოხსნის პერსონალი. 

ახლა, აქ, სადაც იგი იღებს საინტერესო. ასე მოგვიანებით კოდი, ჩვენ შეიძლება მაინც ეხება ორიგინალური წრის აქ. ასე რომ, მოდით აღადგინოთ მისი ატრიბუტი cx. ასე ვთქვათ, მისი x პოზიცია 400. და მე ვაპირებ გადასვლას რომ, ასე რომ ცხადია. იქ ჩვენ წავიდეთ. 

ამიტომ ჩვენ დამატებული წრე. ჩვენ მითითებული ზოგიერთი ატრიბუტები. ჩვენ დაემატა კიდევ ერთი წრე, მოიხსნება ეს. და მაშინ ჩვენ შეცვლის ორიგინალური წრე. 

მაგრამ აქ, სადაც იგი იღებს კიდევ უფრო საინტერესოა. არა მხოლოდ შეიძლება ჩვენ მითითებული ატრიბუტები როგორც მხოლოდ აფასებს, შეიძლება ითქვას, hey, წრე, წასვლა პოზიცია 200. ჩვენ შეგვიძლია ასევე მათ, როგორც ფუნქციები. 

ასე გაცემის ნაცვლად 400 აქ, ჩვენ შეგვიძლია გარკვეული გაანგარიშებით on the fly, რასაც ჩვენ მინდა, რომ ატრიბუტი უნდა იყოს. ასე რომ, ეს არის, თუ როგორ მინდა რომ გამოეხატათ. ჩვენ ვამბობთ, ნაცვლად 400, ნება მომეცით გაძლევთ ფუნქცია ნაცვლად. და აქ, შიგნით ამ ფუნქციას, ჩვენ შეგვიძლია რაიმე გიჟები გაანგარიშებით. 

ჩვენ შეგვიძლია დრო და შევხედოთ ზოგიერთი სხვა რამ და დინამიურად გადაწყვიტოს წრე, რა მნიშვნელობა გვინდა. როგორ შესახებ ჩვენ მხოლოდ მისცეს ეს შემთხვევითი x პოზიცია? ასე რომ. 

მერე რა, რომ ამბობს, არ არის, ყველა x, აწარმოებს ამ ფუნქციის. და იმას, რასაც ვაკეთებთ არის საანგარიშო ზოგიერთი რამ, შემთხვევითი ჯერ სიგანე და დაბრუნების რომ. ასე რომ ყოველ ჯერზე ჩვენ აწარმოებს, რომ, მივიღებთ წრე, რომელიც მიდის შემთხვევითი ადგილი. ეს სახის cool. მე ვგრძნობ, რომ მე ვერ შეხედავს ამ ცოტა. ჩვენ ვიწყებთ მისაღებად რაღაც საინტერესო აქ. მოდით ეს მონაცემები ამოძრავებს არის. არ არსებობს მონაცემები აქ. მოდით შეცვლის. 

მეორე მოქმედება, მონაცემთა Driven Documents-- ასე რომ, მოდით დაბრუნდეს აქ. და მოდით, უბრალოდ, თავი დაეღწია circle2, იმიტომ, რომ ჩვენ ვამატებთ და მოხსნის მას. ასე რომ, ჩვენ ნამდვილად არ სჭირდება. ჩვენ უნდა იყოს უფრო ჭკვიანი აქ. ვთქვათ, ჩვენ გვაქვს ზოგიერთი მონაცემები გარკვეული. ერთი წუთით მოდით, ვთქვათ, ჩვენ გვქონდა მონაცემები ამ ფორმით. ჩვენ გვქონდა მასივი, უბრალოდ რიცხვების. ჩვენ გვაქვს შვიდი ნომრები აქ, ის, რასაც ეს represent-- თანხა ხალხის საბანკო ანგარიშზე, თუ როგორ რამდენად ისინი მოხდეს, ღმერთმა იცის რა. 

ეს არის ნომრები, და ჩვენ გსურთ გამოიყენოთ ჩვენი წრეების წარმოადგენს იმ ნომრები რატომღაც. ჩვენ გვინდა, რომ ჩვენი წრეების იმ ნომრები. რასაც ჩვენ ვაკეთებთ. ვთქვათ, ჩვენ გვინდა წრე ყველა ნომერი. ჩვენ შეგვიძლია ამის გაკეთება ძველ რამ ჩვენ აკეთებს წრე დამატება და circle2 და circle3. მაგრამ ეს გამოდის მხრივ, და არსებობს ბევრი იმეორებს ლოგიკა. 

მოდით კიდევ უფრო ჭკვიანი რომ. იმის მაგივრად, რომ var წრე svg.append, რომ ჩვენ უბრალოდ გამოყენებით, ჩვენ ვაპირებთ გამოვიყენოთ ამ პატარა ბლოკი აქ. მე არ მინდა წასვლა სიღრმისეული შევიდა რა ყველა ეს ნაწილები გააკეთოს. და ეს არის სახის მოწინავე თემაზე. და მე მინდა შემეძლო. 

მაგრამ მთავარია, რომ recognize-- და დაინახავთ ძალიან ხშირად D3 კოდი. ამ ტექსტს ძირითადი ქმნის როგორც ბევრი წრეების როგორც არსებობს მონაცემთა ელემენტები ამ მასივი უფლება აქ. ასე რომ, ეს ქმნის როგორც ბევრი წრეებში არსებობს ელემენტები. ის აპირებს შექმნას შვიდი წრეებში. და ეს ასეა ნამდვილად, ნამდვილად მთავარია. მოდით აწარმოებს, რომ. მოდით ამოიღონ ჩვენი სხვა წრეში. მოდით უბრალოდ განვიხილოთ ეს ნაწილი და აწარმოებს ამ ერთხელ. 

იქ ჩვენ წავიდეთ. ასე რომ, ჩვენი წრე აქ ბევრი მუქი, იმიტომ, რომ ჩვენ შვიდი წრეების, ერთი თავზე სხვა. ჩვენ შევქმენით შვიდი წრეების, ერთი თითოეულ თითოეული ამ მონაცემთა ელემენტს. მაგრამ არსებობს გასაღები რამ, რაც მოხდა ამ მონაკვეთში უფლება აქ. 

ის, რომ მონაცემები იყო ვალდებული. ასე ყველა ერთი იმ მონაცემთა ელემენტები, 10, 45, 105, იყო შეკრული კონკრეტულ წრეში. ასე რომ, ეს არა მხოლოდ შექმნა რამოდენიმე წრეების მაგრამ კავშირები იმ ორი რამ ერთად. 

და მომავალში, რადგან ჩვენ შევქმენით იმ წრეებში ამ D3 ფუნქცია, თუ მე გაძლევთ წრე, თქვენ შეგიძლიათ მომეცი მონაცემები ასოცირდება იგი. ასე რომ, ჩვენ შეგვიძლია მოვითხოვოთ, D3. Hey, D3, მაქვს ამ წრეში. რა არის მონაცემები, რომ წრე აქვს? და D3 გვითხრათ 10 ან 45 ან 105. 

ეს ყველაფერი იკვრება. ეს ძალიან, ძალიან ფუნდამენტური კონცეფცია. მოდით შევხედოთ, რომ. 

ასე რომ, სხვათა შორის, ჩვენ მინდა ვთხოვო D3-- ასე ეს არის შეუსაბამო ამ, მაგრამ უბრალოდ მერწმუნეთ იგი. ეს არის გზა, ჩვენ ვთხოვთ D3. Hey, D3, მომეცი პირველი წრე, რომელიც შეგიძლიათ. მომეცი პირველი წრე შეგიძლიათ. და მაშინ ჩვენ ვერ ვთხოვ D3, რა არის მონაცემები, რომ, როგორც ეს 10. 

ასე რომ, ჩვენ უბრალოდ ვთხოვთ D3, იპოვოს me პირველ წრეში შეგიძლიათ. რა არის მისი მონაცემები? 10, რომელიც ნამდვილად არის ჩვენი პირველი მონაცემთა ელემენტს. ჩვენ შეიძლება ვთხოვოთ მას, hey, D3, მოგვაგნოთ ჩვენი მესამე წრე. 105. რატომ არის ეს მართლაც მნიშვნელოვანია? 

ასე რომ სწორედ აქ, აღვნიშნე, რომ ჩვენ შეგვიძლია გამოვიყენოთ ფუნქციები. და მე ვთქვი, რომ იყო ძალიან ძლიერი რამ. ასე არა მხოლოდ შეგიძლიათ ფუნქციები გავაკეთოთ რამ, როგორიცაა დაკავდით გამოთვლები, მაგალითად, დაბრუნდეს შემთხვევითი ნომერი, მას შეუძლია ასევე გავაკეთოთ რამ, მონაცემების საფუძველზე. ეს არის ის, რაც მონაცემთა ორიენტირებული დოკუმენტების ნიშნავს. რომ ის, რაც D3 დგას. 

ასე რომ, ეს x postition-- ნაცვლად მხოლოდ ვამბობთ, ყველა წრეების, მიიღეთ x პოზიცია 200, ჩვენ შეიძლება ეს ფუნქცია. და აქ, ჩვენ შეგვიძლია გარკვეული გაანგარიშებით. დ აქ დგას ადგილი მონაცემები. ასე რომ ყოველ ჯერზე ჩვენ გვაქვს წრე, ძირითადად, D3 შევქმნით ამ შვიდი წრეებში. და შემდეგ ყველა 

წრე, ის აპირებს, hey, circle1 რა არის თქვენი x პოზიცია. ადრე ვიყავით, ყოველთვის პასუხობდა 200. მაგრამ ახლა, ყოველ ჯერზე D3 სთხოვს us რა არის თქვენი x პოზიცია, ის აპირებს, რათა us-- გვაქვს რომ წრე, ამიტომ ჩვენ გვაქვს მონაცემები. ის აპირებს მოგვცეს მონაცემები და აცხადებენ, რა გინდათ ექსპოზიცია უნდა იყოს, საფუძველზე, რომ მონაცემები. 

მოდით უბრალოდ დააბრუნებს ფაქტობრივი მონაცემები. ასე რომ, თუ ჩვენ აწარმოებს ამ, ეს აძლევს ჩვენს მონაცემთა ორიენტირებული დოკუმენტები. ამ წრეებში ეფუძნება დაკავშირებით position-- ისინი ბაზების როგორც ფუნქცია მონაცემები. 

ასე რომ პირველი წრე, D3 აყენებს წრე. და შემდეგ D3 გვთხოვს, რა გსურთ ექსპოზიცია უნდა იყოს. და ჩვენ უბრალოდ, ვამბობთ, რასაც მონაცემები. რათა ექსპოზიცია 10. 

მაშინ იგი სთხოვს, რა გინდათ ექსპოზიცია იყოს მეორე წრეში. და ჩვენ ვპასუხობთ, 45. და ჩვენ, რა თქმა უნდა, შეგიძლიათ მიიღოს გარკვეული გამოთვლები აქ. მე რომ იმ წრეებში სახის squished up. 

ასე გამრავლების იგი 3, გამრავლების მონაცემები 3-ზე. ჩვენი წრე უბრალოდ მიიღო გაფართოვდა. ჩვენი ღირებულება გასამმაგდა. 

წრე ნამდვილად ზღვარზე, მოდით იქნებ სახის ოფსეტური იგი. ვთქვათ, 20. აქ წასვლა. 

ეს არის მონაცემთა ვიზუალიზაცია. ეს არის ძალიან ძირითადი, მაგრამ ეს გვაძლევს რამდენიმე რისთვისაც ჩვენი მონაცემებით. იგი გვეუბნება, რომ, მაგალითად, ჩვენ აქვს პატარა კასეტური ელემენტები. და ჩვენ გვაქვს დიდი outlier აქ. ეს გვაძლევს რამდენიმე ინფორმაცია განაწილების. 

თუ ჩვენ, მაგალითად, შეცვალოს მონაცემები 150 აქ და განახლება, ჩვენი ვიზუალიზაცია შეიცვალა. ეს დოკუმენტი მონაცემები ამოძრავებს. 

ასე რომ, რა თქმა უნდა, ყველა ამ ელემენტების, ყველა ეს ატრიბუტიკა აქ, ჩვენ შეგვიძლია გამოვიყენოთ ფუნქცია, არ უბრალოდ ნომრები, არა მხოლოდ x და y პოზიციებზე. ასე რომ, ჩვენ შეგვიძლია გამოვიყენოთ ფუნქცია ფერი. ამიტომ ჩვენ ყველაფერს გავაკეთებთ იგივე. ჩვენ მივცემ ეს ფუნქცია. 

და ვთქვათ, ჩვენ შეგვეძლო conditionals ჩვენი ფუნქცია. ეს ფუნქცია შეიძლება ასი ხაზების ხანგრძლივი. მას შეუძლია გააკეთოს ძალიან, ძალიან რთული რამ. 

მოდით დააყენა თუ განაცხადი აქ. ვთქვათ, თუ ჩვენი მონაცემებით ნაკლებია 50-ზე, რომ ზოგიერთი ბარიერი რომ ჩვენ დაინტერესებული in რატომღაც. მოდით ეს მწვანე. წინააღმდეგ შემთხვევაში, მოდით ეს წითელი. როგორ არის, რომ? ლამაზი. 

ასე რომ, ჩვენი მონაცემების ვიზუალიზაცია იწყება გადმომეცა უფრო საინტერესო ინფორმაცია ბევრი არხებით. ახლა ჩვენ ვიცით, ცოტა განაწილების. და ჩვენ ვიცით, რომ არსებობს გარკვეული შეწყვიტა 50 რომ ჩვენ დაინტერესებული. ჩვენ ვიცით, რომ არსებობს ორი მონაცემების რაოდენობა ქვემოთ რომ ბარიერი და მათი უმრავლესობა ზემოთ. 

ისე, საბოლოო ნაბიჯი, ეს მონაცემები აქ, ეს ძალიან იშვიათი, რომ ეს იგრძნობა. ასე რომ, მოდით უბრალოდ გადატანა out ცვლადი იმიტომ, რომ სუფთა, მოსწონს ეს. და მაშინ ჩვენ რომ გამოიყენოს ცვალებად აქ. ეს არის ზუსტად იგივე. ეს უბრალოდ ცოტა სუფთა. 

შემდეგი up, აქტის III, Scales-- ასე რომ, ერთი პრობლემა უფლება აქ არის, თუ შევცვლით ჩვენი მონაცემები ამ 200 ღირებულება თუ შევცვლით მას 400 ან რაღაც და განახლება, მაშინ ეს მნიშვნელობა უბრალოდ წავიდა offscreen. ასე რომ, ჩვენი ლოგიკა უფლება აქ როგორ გავაკეთოთ ჯერ 3 და 20, გავრცელება და შემდეგ ოფსეტური ეს ცოტა ნამდვილად clunky. 

რას ნიშნავს ეს ციფრები ნიშნავს? ისინი უბრალოდ მყარი კოდირებული არსებობს. და ისინი ძალიან მიბმული მონაცემები. ჩვენ გვინდა მონაცემთა ორიენტირებული დოკუმენტი. ჩვენ გვინდა ძალიან მოქნილი დოკუმენტი, რომ ეს მონაცემები, იყენებს მას და წარმოადგენს მას. 

ის, რაც ჩვენ ძირითადად გვჭირდება, ჩვენ აქვს ამ სპექტრს ნომრები 10. 45, 105. და ჩვენ გვინდა, რუკაზე რომ out გადატანა სიგანე, სრული სიგანე აქ. ასე რომ, ჩვენ არ სპექტრი ნომრები მიმდინარეობს 0 100. და ჩვენ გვაქვს ამ campus I მიდის 20-დან 700, ამ შემთხვევაში. 

ჩვენ სახის მინდა განვსაზღვრავთ, რომ. ჩვენ გვინდა, რომ გავაფართოვოთ, რომ და მაშინ ოფსეტური იგი ცოტა. გამოდის, რომ D3 აქვს. ეს ე.წ. მასშტაბით. მოდით გამოვიყენოთ იგი. 

ისე, რომ works-- მე ვაპირებ აკრიფოთ ამ და შემდეგ ამას. ეს არის მასშტაბით. რას გააკეთებს ის არის, რომ ეს განვსაზღვრავთ ღირებულებები 1-დან 200 on 20-დან 600. ჩვენ შეგვიძლია შევამოწმოთ, რომ. ჩვენ ვხედავთ, რომ აქ. 

ასე რომ, თუ მე შესანახი 1-- ერთ მომენტში. მომეცი მეორე. მე უნდა აკრიფეთ იგი. იქ წასვლა. ვწუხვარ, რომ. 

ასე რომ, რა მასშტაბის გააკეთებს არის, დასჭირდება მნიშვნელობა და შემდეგ გარდაქმნას, რომ, გაფართოებას, რომ, ასე, რომ ეს ავსებს სრულ სპექტრს თქვენ ითხოვს. ასე რომ, ამ შემთხვევაში, თუ ჩვენ მას ერთი, ის აპირებს რუკაზე რომ out გადატანა 20. და თუ ჩვენ მას 200, ეს ვაპირებთ რუკაზე რომ 600. და სადღაც შორის, თუ მივიღებთ 100, ეს იქნება სადმე შორის 20 და 600. 

და რა თქმა უნდა, ახლა ეს არის ის, რაც ჩვენ უნდა ამოიღონ იმ რთული კოდირებული რამ გვაქვს უფლება არსებობს. ასე რომ, ჩვენ გვინდა გავაკეთოთ არის მიიღონ მონაცემები, რომ ჩვენ იმის გათვალისწინებით, რომ ინდივიდუალური მონაცემები ელემენტს, და გაივლის მას მასშტაბის პირველი. ასე მასშტაბის მასშტაბის up. 

Well-- Oh, ჩვენ გვაქვს პატარა შეცდომა აქ. ჩვენ დაკარგული მონაცემები. იქ წასვლა. და რომ ფართოვდება იგი out. 

რომ გვაძლევს იგივე შედეგი გვქონდა ადრე, მაგრამ იმის მაგივრად რომ იმ მყარი კოდირებული შეზღუდვები. და თუ ზომა ჩვენი ტილო ცვლილებები, მაგალითად, თუ ჩვენ გვინდა ამ მეტი 400 პიქსელი და squishes out, ჩვენ შეიძლება ჰქონდეს მას over-- ჩვენ შეგვიძლია გაფართოების, ან ჩვენ შეგიძლიათ შეამციროს ამ დატოვა ზღვარი რაღაც ნაკლებად ან 20-ზე მეტი. ამ ნომრებზე, ეს რთული კოდირებული ციფრები, ახლა აზრი ჩვენთვის. 

და ჩვენ შეგვიძლია ამის გაკეთება გაცილებით მეტი საინტერესო რამ ისევე. ასე ნაცვლად, რომელმაც ხაზოვანი მასშტაბის, ჩვენ დაგვჭირდება შეხვიდეთ მასშტაბით. და რომ მოგვცემს ჟურნალი მასშტაბით. 

ასე რომ, ახლა ჩვენი მასშტაბის, ნაცვლად უბრალოდ გაფართოების სპექტრი, ის აკეთებს უფრო დახვეწილი რამ. იმის მაგივრად, რომ ამ სპექტრს მძიმე დაშიფრულია, და იმის მაგივრად, რომ 600, ჩვენ დაგვჭირდება უბრალოდ გამოიყენოთ სიგანე, ასე 20 სიგანე მინუს 40, 2 ჯერ ზღვარი მეორე მხარეს. და რაც უფრო გრძნობა, რომ ვიღაც, ვინც შეიძლება შევხედოთ კოდი. 

საინტერესოა, რომ სასწორები მისაღებად ძალიან, ძალიან დახვეწილი, ასევე. მათ ბევრი საინტერესო რამ. ასე მასშტაბებს არ არის აუცილებელი მუშაობას მხოლოდ ნომრები. გადავდგათ ფერის. 

ასე რომ, ჩვენი სპექტრი შეიძლება be-- ჩვენი დომენი 1 200. რომ შეყვანის რამ. მაგრამ ჩვენ დაგვჭირდება MAP- დან მწვანე წითელი, მაგალითად. და ახლა, თუ ჩვენ გაიაროს ეს 1, ჩვენ ვაპირებთ, რომ მიიღოთ მწვანე. თუ ჩვენ მას 200, ჩვენ კიდევ წითელი. და თუ ჩვენ გაიაროს ეს რაღაც შორის, ეს იქნება გარკვეული ნაზავი, რომელიც, სადღაც გრადიენტი შორის მწვანე და წითელი. 

და იმის მაგივრად ამ სახის clunky ლოგიკა ჩვენ გვაქვს აქ პირობითი უფლება არსებობს, ჩვენ შეგვეძლო რაღაც ხაზოვანი მასშტაბი შორის იმ. ასე რომ ჩვენ გვინდა გამოვიყენოთ მასშტაბის ჩვენ უბრალოდ შექმნა, რომელიც ჩვენ მოუწოდა ფერი. და ჩვენ მინდა მისცეს მას D, რომელიც ჩვენი მონაცემთა ელემენტს. და იქ ჩვენ წავიდეთ. ჩვენ გვაქვს ფერის. 

ასე რომ, ეს არის რუკების. ასე შორს წავიდა სრულიად მწვანე. შორს უფლება მთლიანად წითელი. და ყველაფერი შორის ფუნქცია დ. ჩვენ გვაქვს საინტერესო თვალსაჩინოება აქ. მაგრამ ჩვენი მონაცემებით იყო ერთგვარი მოსაწყენი. ვნახოთ, თუ რისი გაკეთება შეგვიძლია, თუ ჩვენ გვქონდა უფრო საინტერესო მონაცემები. 

აქტის IV, სამუშაო მონაცემები პირველი, რაც ჩვენ გვინდა, რომ გავაკეთოთ, რათა ჩვენი ვიზუალიზაცია უფრო საინტერესო გადაადგილება მონაცემები სხვაგან. ეს ძალიან მოუხერხებელი აქვს მონაცემები რთული კოდირებული აქ. და საერთოდ, ჩვენ უნდა ითხოვს სხვისი მონაცემები. ჩვენ უნდა იქნებ ითხოვენ, მოსახლეობის აღწერის ბიუროს, რა არის თქვენი მონაცემები და შემდეგ შეთქმულება, რომ ან ითხოვს ზოგიერთი მესამე მხარის პირის ზოგიერთი მონაცემები და შემდეგ აშენებს ვიზუალიზაცია, რომ. 

ასე რომ, პირველი, რაც ჩვენ გვინდა, რომ არის ნაბიჯი, რომ სხვაგან. ამიტომ, მე ვაპირებ, რომ შევქმნათ ფაილი აქ მოუწოდა data.json. JSON არის მონაცემები ფორმატში. თქვენ არ ვიცი ბევრად შესახებ, რომ. და ჩვენ ვაპირებთ კოპირება პატარა მონაცემები გვაქვს იქ, ჩასვით იქ verbatim, წავიდეთ უკან ჩვენი ვიზუალიზაცია კოდი აქ, და გამოიყენოთ ეს ფუნქცია უფლება აქ. თქვენ არ ვიცი დეტალები. მაგრამ რა ამ ყველაფერს გააკეთებს, ეს ნახავთ, რომ ფაილი, მოიტანონ, და დაგვიბრუნოთ ის. რა ეს იმას არის, ის მიდის და მიიღეთ data.json ფაილი. და მაშინ ყველა კოდი, რომელიც არის indented შიგნით არსებითად, ყველა კოდი ჩვენ გვაქვს იქ იქნება აწარმოებს მხოლოდ მაშინ, როდესაც ჩვენ ვიღებთ მონაცემები უკან. და მაშინ ის აწარმოებს, რომ კოდი მონაცემებს გვაქვს. დიდი, ჩვენ გვაქვს ვიზუალიზაცია, მიმართეთ ზოგიერთი კოდი სადღაც სხვა, რაც, როგორც წესი, სადაც ეს შეკითხვა ზოგიერთი მონაცემები სხვაგან, რაც, როგორც წესი, როგორ თვალსაჩინოება მუშაობა. 

მაგრამ მე მინდა, რომ დაბრუნდეს მონაცემებით. ასე მონაცემები ფუნდამენტურად D3-- D3 მოიხმარს მონაცემები, რომ სიაში რამ. D3 ელოდება მონაცემები უბრალოდ იყოს სიაში რამ მასივი რამ. არ აქვს მნიშვნელობა, რა იმ რამ , ასე რომ სანამ ის მასივი მათ. 

ასე რომ, აქ, მაგალითად, ჩვენ ვერ და რა თქმა უნდა, არ მცურავი პუნქტიანი ღირებულებებს. ჩვენ შეგვეძლო ნეგატივები. D3 არ აინტერესებს, თუ ისე დიდი ხნის როგორც ეს სია რამ. 

როგორც საინტერესო რამ ჩვენ შეიძლება, ჩვენ შეგვიძლია ასევე აქვს სტრიქონების სია, როგორიცაა, რომ. ასე რომ ეს არის Crimson სათაურები მე აიყვანეს რამდენიმე დღის წინ. და იქნებ შეგიძლიათ რამდენიმე საინტერესო რამ ამ ერთად. 

ასე რომ კიდევ ერთხელ, ეს არის სია რამ. D3 არ აინტერესებს. ეს არ უნდა იყოს სიმებიანი. ჩვენ შეიცვალა ჩვენი მონაცემებით. 

დავუბრუნდეთ ჩვენი ვიზუალიზაცია. ახლა, ჩვენი ვიზუალიზაცია მოელის შეყვანის იყოს ნომრები. ასე რომ, ჩვენ ვაპირებთ აქვს იმისათვის, რომ რამდენიმე ცვლილებები. ასე მაგალითად, პირველ რიგში, ალბათ, ჩვენ გვინდა, რომ ეს წრეები ერთად ხანგრძლივობა სათაურით, რაოდენობის სიმბოლოებს ამ სათაურით. 

ასე რომ ჩვენ ყველაფერს გავაკეთოთ არის ყოველ ჯერზე ჩვენი ფუნქცია ეწოდება სიმებიანი, ჩვენ იპოვით ის სიგრძის და მაშინ გაივლის, რომ მასშტაბით. ფერი, მე დაბრუნებას რომ ფოლადის ლურჯი. და იქ ჩვენ წავიდეთ. ჩვენ გვაქვს ვიზუალიზაცია of Crimson ერთად. 

სასწორი არის ცოტა off. მოდით ვივარაუდოთ, რომ ყველაზე სათაური 100 სიმბოლომდე ასე span რომ გამოდის. და ჩვენ გვაქვს ვიზუალიზაცია. ასე რომ, როგორც ჩანს, ყველაზე ერთად საკმაოდ მჭიდრო ერთად, თვალსაზრისით ხასიათი ონლაინ. მაგრამ არსებობს ერთი ნამდვილად გამოირჩევა. 

ჩვენ შეგვიძლია ავაშენოთ ზოგიერთი ინსტრუმენტები შეისწავლონ, რომ მეტი. მაგრამ, როდესაც ვმუშაობდი ამ, მე აინტერესებდა, ამ მონაცემების კომპლექტი, სათაურები მსხვილი ნაწლავის მათ იქნება აღარ. მე ვარაუდობს, რომ ისინი. 

ასე რომ, მოდით გავარკვიოთ. მოდით გამოვიყენოთ ფერი არხი, როგორც ადრე, encode ზოგიერთი იმის შესახებ, არსებობს მსხვილი ნაწლავის ან არ. ასე რომ, ჩვენ ვიყენებთ პირობითი ერთხელ. თქვენ არ უნდა იცოდეს დეტალები ამ, მაგრამ ეს როგორ ჩვენ შეამოწმოთ string ერთი კონკრეტული ხასიათის JavaScript, კიდევ ერთხელ, არ შეესაბამება. 

მაგრამ თუ ჩვენ არ მიგვაჩნია მსხვილი ნაწლავის, ჩვენ დავიბრუნოთ მწვანე. და თუ ჩვენ გავაკეთებთ, ჩვენ დავიბრუნოთ წითელი. ასე რომ კიდევ ერთხელ, ერთად რომ არ მსხვილი ნაწლავის იქნება წითელი. ეს არის ის, რაც ამ იმას ნიშნავს ლამაზი. 

გამოდის, რომ ჩემი ჰიპოთეზა შეხვდნენ. არსებობს მხოლოდ ორი. ჩვენ მხოლოდ ექვსი მონაცემების რაოდენობა და მხოლოდ ორი ჰქონდა colons. მაგრამ, როგორც ჩანს, ცოტა მეტი ქვედა ბოლოს, ფაქტობრივად. სათაურები colons, როგორც ჩანს, ზოგადად, მოკლე, მაინც ჩვენი მონაცემებით კომპლექტი საინტერესო. 

დავუბრუნდეთ, რომ ფოლადის ლურჯი და მერე ვნახოთ რა ჩვენ შეგვიძლია ერთად კი უფრო საინტერესო მონაცემები. ასე რომ კიდევ ერთხელ, მე ვთქვი, რომ მონაცემები D3 არის სია რამ. ჩვენ ვნახეთ ნომრები მრავალი სახის. ჩვენ ვნახეთ strings. მაგრამ რამ შეიძლება იყოს ობიექტები. 

ისინი შეიძლება იყოს რთული რამ რომელიც მოიცავს ბევრი რამ. ვთქვა, რომ უფრო ნათლად, უმეტეს შემთხვევაში, ჩვენ გვსურს, ავაშენოთ ყველა მონაცემები წერტილი, როგორც უფრო რთული, ვიდრე უბრალოდ ერთი მნიშვნელობა. თუ გსურთ წარმოსადგენია მონაცემთა ბაზა, სტუდენტები, შეიძლება იყოს სტუდენტი ასახელებს, სტუდენტი ID, და ბევრი რამ ასოცირდება კონკრეტულ ჩანაწერი, არა მხოლოდ სიმებიანი ან ნომერი. ასე რომ, მოდით შევხედოთ, რომ. 

ეს არის ერთ-ერთი ასეთი მონაცემები კომპლექტი. ეს მონაცემები მითითებული შესახებ მიწისძვრები. ასე რომ, ყველაფერი აქ ჩვენს სიაში და მასივი რამ შეიცავს ბევრი რამ თავად. ასე რომ, ყოველ მონაცემები წერტილი აქვს მასშტაბები და კოორდინაციას. და კოორდინაციას უწევს თავად შეიცავს ორი რამ. 

ასე რომ, ყოველდღე არის გაცილებით მეტი რთული და უფრო საინტერესო, და შეიცავს ბევრად უფრო საინტერესო ინფორმაცია. ვნახოთ, ჩვენ შეგვიძლია ავაშენოთ, რომ. დაბრუნების აქ, კიდევ ერთხელ, გამოყენებით ჩვენი ჰისტოგრამის წრე ვიზუალიზაცია ჩვენ ავაშენეთ, ვნახოთ, თუ ჩვენ შეგვიძლია ავაშენოთ ვიზუალიზაცია მასშტაბები განაწილების ჩვენი მონაცემები კომპლექტი. 

ასე რომ, აქ, ეს იგივე კონცეფცია. მაგრამ ახლა, d შეიცავს მეტი რამ. d შეიცავს ბევრ მონაცემთა ელემენტები. ასე ჩვენ მივიღებთ დ უკან. D3 გვაძლევს დ. და ჩვენ რეაგირება მოძიებაში მასშტაბები დ და შემდეგ გადადის, რომ მასშტაბით. 

და მაშინ ჩვენ უნდა შეიცვალოს ჩვენი მასშტაბით, რა თქმა უნდა. ასე სიდიდეების უბრალოდ არ წასვლა ბევრად უფრო მეტი ვიდრე 10. რეალურად, იქ არასოდეს ყოფილა 10 ბალიანი მიწისძვრა. მაგრამ ეს ერთგვარი ჩვენი ზედა ბოლოს და ბოლოს, ჩვენი ზედა სპექტრი. 

მოდით ამოცნობა. ლამაზი, ჩვენ გვაქვს ვიზუალიზაცია. ეს საინტერესოა note-- ასე არსებობს ორი მონაცემები რაოდენობა, თითქმის ზუსტად თავზე ერთმანეთს სხვა, თვალსაზრისით მასშტაბები. თქვენ ხედავთ ამ ბუნდოვანება ჩვენ გამოყენებით. 

ჩვენ გვაქვს გეოგრაფიული მონაცემები ახლა. ჩვენ გვაქვს სიგანე და განედი. იქნებ ჩვენ შეგვეძლო რაღაც კიდევ უფრო საინტერესოა, რომ. მოდით, კიდევ რამდენიმე საინტერესო გზა ვიზუალურად ეს უფრო რთული მონაცემები ჰქონდეს. 

აქტის V, Mapping-- ფუნდამენტურად, ჩვენ გვინდა, რომ ეს რუკა. ვგულისხმობ, ეს არის, სადაც ეს ხდება. ჩვენ გვინდა, encode ინფორმაცია პოზიცია ამ მიწისძვრის კითხვას, ასევე მათი მასშტაბები, იმიტომ, რომ ჩვენ რომ ახლა. ჩვენ გვესმის, როგორ მოიხმარენ უფრო რთული მონაცემები. 

პირველი, რაც ჩვენ უნდა გავაკეთოთ არის შექმნათ რუკა, ფონზე რუკაზე. მე ვაპირებ გავლა ეს ძალიან სწრაფად. ეს არის სახიფათო კოდი. ეს კიდევ ერთი იმ რეცეპტები თქვენ ნამდვილად არ უნდა გვესმოდეს, სრულად გამოიყენოთ. მაგრამ ეს კოდი. ამ კოდი უფლება აქ ქმნის რუკაზე. 

ჩვენ არ ვაპირებთ წასვლა დეტალურად. მაგრამ ზედაპირულად, თუ რას აკეთებს არის, ეს შეკითხვა ამ us.json ფაილი, რომელიც არის მონაცემთა ფაილი როგორიცაა ერთი გვქონდა ადრე. ეს უფრო რთული, რა თქმა უნდა. მაგრამ ამ შემთხვევაში, ყველაფერი, ყველა მონაცემები წერტილი არის ეს სახელმწიფო და აქვს ჩამონათვალი სიგანე და გრძედის რომ განსაზღვროს პოლიგონზე, რომ ფორმა, რომ სახელმწიფო. 

ასე რომ, რა D3 გააკეთებს მსგავსი რა გავაკეთეთ ადრე. ის მოითხოვს, და სავალდებულოა, რომ ელემენტს. და არსებობს ფუნქცია, რომელიც განვსაზღვრავთ, რომ ელემენტს, საფუძველზე latitudes და განედი. შეგიძლიათ წაიკითხოთ უფრო, რომ. და მე გირჩევთ ეს. 

არსებობს ბმულები დასასრულს ამ კოდექსის განთავსებული. და კოდი არის კომენტარი. In არსებობს კავშირების შემდგომი ამ. მე გირჩევთ ეს. მაგრამ რაც ჩვენ აინტერესებს ამ პროექტორის ფუნქცია. მინდა გავლა, რომ. 

პირველ რიგში, ნება მომეცით გაჩვენოთ თქვენ, რომ, დიახ, ჩვენ გვაქვს რუკაზე. რუკები ზემოთ. ასე რომ, მოდით შევხედოთ ამ საწარმოო ფუნქცია. 

პროექტორის არის ძალიან ისევე როგორც მასშტაბით, სასწორები ერთხელ. ასე რომ, რა წარმოების ამ პროექტორის ფუნქცია არ არის, ჩვენ შეგვიძლია გაიაროს ეს გრძედის და latitudes-- ამ შემთხვევაში, ამ ფასეულობების აქ lat-longs შენობა ჩვენ ვზივართ მარჯვენა ახლა პროექტორის. და პროექტირება იქნება კონვერტირება რომ შევიდა x და y pixel ღირებულებებს. 

ასე რომ, რა პროექტირება აკეთებს ძალიან ჰგავს ჩვენს მასშტაბით. ეს ხდება ჩვენი latitudes და განედი რომელიც წარმოადგენს მთელ მსოფლიოში და მცირდება და sizing, რომ ქვემოთ მოედანზე, რომ ჩვენ გვინდა, რომ ჩვენ მოცემული იგი. ამ შემთხვევაში, ჩვენ გავლის ამ ღირებულებებს. და ის გვაძლევს, ისე, რომ თქვენს ეკრანზე ნიშნავს 640 pixels. ეს მთელ ეკრანზე არის 700 pixels ფართო, ასე რომ გვაიძულებს აქ, და 154 pixels ქვემოთ, რომელიც მე ხარჯთაღრიცხვა არის საკმაოდ ბევრი აქ. 

ასე რომ, იმ lat-მიისწრაფვის, რომელიც წარმოადგენს რაღაც მთელი მსოფლიოს მასშტაბით და squishing და მოძრავი, რომ გარშემო მოგვცეს x და y pixel ღირებულებები, ეს არის პირველი რამ, რომ გაკეთდეს ამ რუკების კოდი. და მერე დანარჩენი კოდი მოიხმარს მონაცემები და შემდეგ რუკები იმ lat-longs გადატანა რაღაც თქვენს ეკრანზე. 

მაგრამ ჩვენ ვაპირებთ, რათა გამოიყენონ ეს პროექტირება ფუნქციები, რადგან აღმოჩნდება, ჩვენ გვაქვს lat-longs longs ასევე. ეძებს უკან ჩვენი მონაცემებით, ჩვენ გვაქვს სიგანე და გრძედის კოორდინატების ყველა დაკვირვება. მოდით გამოვიყენოთ პროექტორის. 

ისე შევხედავთ ჩვენი ექსპოზიცია, ჩვენ გვინდა, რომ ჩვენი exposition-- ჩვენ გვაქვს გრძედი და განედი. მაგრამ ჩვენ გვინდა pixel ღირებულებებს. და აღმოჩნდება, ჩვენ გვაქვს ზუსტად ის, რაც ჩვენ want-- პროექტორის. ძალიან ჰგავს ვიყავით გამოყენებით მასშტაბის სწორედ აქ, ჩვენ ახლა აპირებს გამოიყენოს პროექტირება და გაიაროს ეს კოორდინატები. ასე რომ, პირველ რიგში, ჩვენ აკეთებს ასე რომ, ჩვენ მიღების d, რომელიც არის ინდივიდუალური მონაცემები ელემენტის ინდივიდუალური მიწისძვრის კითხულობს. პირველი, რასაც ვაკეთებთ არის კოორდინატები. ყველა უფლება, ჩვენ გვაქვს კოორდინატები. 

მეორე, რასაც ვაკეთებთ არის გაიაროს, რომ პროექტორის. პროექტორის აკონვერტებს იმ კოორდინატები შევიდა pixel ღირებულებები, x და y. და მაშინ ბოლო რამ ჩვენ გსურთ გააკეთოთ უბრალოდ x, რომელიც ამ შემთხვევაში არის პირველი. ეს არის პირველი ორი რამ რომ დაბრუნდა მიერ პროექტორის. 

ჩვენ ყველაფერს გავაკეთებთ იგივე y. მაგრამ ამის ნაცვლად, ჩვენ დაბრუნდება მეორე ელემენტს, y. მისაღებად მზად ამოცნობა. Ooh, დამატებითი ხასიათი აქ კარგია, რომ ჩვენ გვაქვს მონაცემთა ორიენტირებული დოკუმენტი, რომელიც არის დამალვა ეს JSON ფაილი ობიექტების, მიღების რუკა, და შეცვლის მიაკუთვნოს იმ მონაცემები პროექტის ეს რუკა. ეს არის მართლაც ძალიან საინტერესო. ეს არის მაგარი. 

ავიღოთ up მაღალი დონის. ვგულისხმობ, ჩვენ გვაქვს ორი ცალი ინფორმაცია თითოეული მონაცემები წერტილი. ვგულისხმობ, სამი. ჩვენ გვაქვს კოორდინატები, რომელიც არის x და y. და ჩვენ გვაქვს მასშტაბები. 

ჩვენ უნდა შეიცავდეს მასშტაბები რატომღაც. ჩვენ გვაქვს უამრავი არხები. ჩვენ შეგვიძლია გამოვიყენოთ ფერი. ჩვენ შეგვიძლია გამოვიყენოთ რადიუსში. ჩვენ შეგვიძლია გამოვიყენოთ ბუნდოვანება. ჩვენ შეგვიძლია გამოვიყენოთ ბევრი რამ კოდი. ნებისმიერი ამ ატრიბუტები და მრავალი სხვა, რომლებიც არ არის ჩამოთვლილი იქ, იმიტომ, რომ ისინი სურვილისამებრ, ჩვენ შეგვიძლია გამოიყენოთ შეიცავდეს ამ მონაცემების მიხედვით, ინსულტის და ეს ყველაფერი მე აღნიშნული. 

მოდით გავაკეთოთ რადიუსში. მე ვფიქრობ, რომ რადიუსი არის ყველაზე ინტუიტიური. ასე რომ კიდევ ერთხელ, ჩვენ ყველაფერს შეცვლის, რომ მძიმე კოდირებული 40 და გარკვეული გათვლები. ჩვენ ვიყენებთ ჩვენი საყვარელი მასშტაბის ერთხელ. და ჩვენ წარსულში დ. მაგრამ არ მინდა, რადგან ჩვენ გვინდა მასშტაბები დ. d მხოლოდ მონაცემების წერტილი. ჩვენ გაივლის მასშტაბები მასშტაბით. 

მოდით ვეცადოთ, რომ კიდევ ერთხელ. Ooh, ეს არ იმუშავებს. რატომ არ მუშაობს? 

ასე მახსოვს, რა მასშტაბის აკეთებს. მოდით შევხედოთ მასშტაბის ერთხელ. მასშტაბის რუკების 1 დან 10 წლის 22 600-მდე მეტი ან ნაკლები. 600 დიდია. სწორედ ამიტომ, ჩვენ ვიღებთ ეს. 

ასე რომ, ჩვენ გვინდა, რომ შეიცვალოს ჩვენი მასშტაბის რაღაც უფრო გონივრული. ვთქვათ, ჩვენ გვინდა 0 60. 60 არის დიდი, მაგრამ 10 მიწისძვრა წარმოუდგენლად იშვიათი. ფაქტობრივად, ისინი არასდროს მომხდარა. 

ასე რომ, რა ამ ყველაფერს გააკეთებს, რომ თქვენ მიიღოს ჩვენი მასშტაბები, რომ მიდის 1 დან 10 და MAP- ის შესახებ, რომ გაფართოების გარეთ. და MAP- ის შესახებ, რომ 0 დან 60. მოდით ამოცნობა. 

ლამაზი, ჩვენ გვაქვს ვიზუალიზაცია. ეს არის დიდი. ეს არის ფაქტობრივი მონაცემები. თქვენ შეამჩნევთ, ჩემი პატარა სათამაშო მაგალითად, ყველაზე დიდი მიწისძვრა არის სწორი თავზე us. მაგრამ ეს არის ის. ჩვენ გვყავს თარიღი ორიენტირებული ვიზუალიზაცია რომ მოიხმარს მონაცემები და გვაძლევს ნამდვილად საინტერესო ინფორმაცია. ჰო, მოდით დაამატოთ ზოგიერთი interactivity მას. მე ვთქვი, რომ იყო ძლიერი ძალის D3. 

ასე რომ, აქ, ყოველ ელემენტს, ჩვენ აღწერს bunch ატრიბუტები. მაგრამ ჩვენ შეგვიძლია ასევე აღწერს, რაც ჩვენ გვინდა უნდა მოხდეს interactivity ელემენტებს. მაგალითად, ჩვენ ვერ აღწერს რა ხდება, როდესაც ჩვენ მაუსის მეტი. და ძალიან ჰგავს, რომ, რომ მიიღოს ფუნქცია, ძალიან ჰგავს ატრიბუტებს ჩვენ გვქონდა ადრე, სადაც ჩვენ გავაკეთებთ რაღაც ელემენტს, როდესაც ჩვენ hover მას. 

ასე რომ, პირველი, რაც უნდა გააკეთოთ აირჩიეთ ელემენტს, რათა იპოვოს ის, ძირითადად, ბრაუზერში. და მაშინ ჩვენ შეგვიძლია მითითებული ატრიბუტი მას. ასე, რასაც მე ვაკეთებ აქ არის, როდესაც ჩვენ hover მეტი რამე, ჩვენ კიდევ, რომ ელემენტს და შემდეგ მითითებული მისი ბუნდოვანება უკან 1, სრულიად გაუმჭვირვალე. ვნახოთ, რა, რომ ჰგავს. 

როგორც ჩანს, ჩვენ გვაქვს დამატებითი მძიმით აქ. ასე რომ, თუ ჩვენ hover მეტი აქ, იგი იღებს სრულ. მაგრამ ახლა, რა თქმა უნდა, რჩება სრული, იმიტომ, რომ ჩვენ უნდა აღწერს რა ხდება როდესაც ამოიღონ ჩვენი კურსორი. მოდით გავაკეთოთ ზუსტად რომ mouseout, როგორც ეწინააღმდეგებოდა mouseover. 

და ჩვენ აღადგინოთ იგი რა გვქონდა ადრე 0.5. და ახლა, ყოველ ჯერზე ჩვენ hover, მივიღებთ სრულ წრეზე. ის გვეხმარება, ჩვენ რა ჩვენ შერჩევით არსებითად. 

და ახლა მოდით ეს ნამდვილად დიდი. მოდით, ამ რეალური მონაცემები. მოდით ვკითხოთ შეეძლო USGS მათი მონაცემები. ასე რომ, აშშ-ს გეოლოგიური აქვს მონაცემების შესახებ მიწისძვრები. მათ აქვთ საჯარო API რომ შეუძლია მოხმარებული JSON ფორმატში. მოდით გავაკეთოთ, რომ. 

ასე რომ, ეს ცოტა კოდი რომ აკავშირებს USGS API. და იქ ცოტა დამუშავება მას. ეს არ არის შესაბამისი, მაგრამ ამარტივებს ეს რომ მარტივი მონაცემების ფორმატი მოსწონს ერთი ჩვენ გვქონდა ადრე. ასე რომ, მე მოშორება ჩვენი მოწოდება ჩვენი ყალბი data.json ფაილი. და ამის ნაცვლად, მე მოუწოდებენ USGS არსებითად. 

მოდით ამოცნობა, ლამაზი. ეს არის ფაქტობრივი, რეალურ ცხოვრებაში მონაცემები ამ კვირაში მიწისძვრა. ეს არის მართლაც ძალიან საინტერესო. ეს გასაკვირი არ არის ჩვენთვის, მაგრამ არსებობს ბევრი მიწისძვრები West Coast კალიფორნიაში. მაგრამ ვფიქრობდი, რომ ეს იყო ძალიან საინტერესო რომ იქ ამდენი მიწისძვრები Alaska, და, როგორც ჩანს, აქ Midwest. ვგულისხმობ, საინტერესო და ჩვენ კარგი. ეს არის დასკვნა. 

მაგრამ ძირეულად ეს არის ის, რაც D3 გვეხმარება. იგი გვეხმარება მიიღოს მონაცემები, სავალდებულოა მას ელემენტების DOM, და იმ ელემენტების შეცვლა როგორც ფუნქცია მონაცემები, აქვს იმ ატრიბუტები, ყველა მრავალი ატრიბუტები ელემენტები, ყველა იყოს სასარგებლო არხები გადმომეცა ინფორმაციას. 

D3 არის წარმოუდგენლად ძლიერი ბიბლიოთეკა და საოცრად კარგად აწარმოებს. ეს არის რამდენიმე ძლიერი პერსონალი. მონაცემების ვიზუალიზაცია არის წარმოუდგენლად ძლიერი ინსტრუმენტი გადმოცემის ხალხს ღრმა insights რომ იღებს მათი ძირითადი და ეხმარება მათ გაგება, ეს ღრმა და ინტუიციური გზა, რა მონაცემები მუშაობს და როგორ მონაცემთა ცვლის ჩვენს ცხოვრებაში.