[Muusika mängib] 

DAVID Chouinard: Ma olen David Chouinard, ja see on D3. Tere. Me läheme õppida D3 täna. D3 on JavaScript raamistik hoone kõrge kvaliteediga Interaktiivne visualiseerimine veebis. Asjad, mida me näeme tagasi mind, me ei kavatse õppida tegema neid asju, millist põhitõdesid ta. Aga see saab olema lahe. Alustuseks tegemist päris pilte. Meil on rohkem demos väljavaateid saadaval. Teeme ära. 

I vaatus, DOM manipulation-- me läheme kohe alustada tehes lahedaid asju. Esiteks, vasakul on meil koodi. Paremal on meil Tänu meie koodi. Lähme läbi. 

Teeme ringi. Kuidas see kõlab? svg.append circle-- me just ringi. Sa ei usu mind, eks? See ei ole seal. 

Nii et mida me tegime siin on, SVG on skaalautuvia vektorgraafika. See on viis, kuidas me ütleme, et brauser teha vektorgraafika brauseris. Mida me lihtsalt ei kohe lisatakse ringi sirvida. 

Lubadus on, et ringi nõuab natuke põhilised oskused enne kui saame tegelikult näha. Me peame ütlema seda oma x asendis, Oma y positsiooni, tema raadiusega. Me ei ütle ükskõik mida, nii me ei näe seda kohe. Kuid olgem öelda seda kraami. 

Nii kõigepealt, sul anda meie ring nimi. Nii saab seda nimetada ringi. Meie ring on nimi nüüd. Ja andkem seda paar atribuute. Kuidas cx oleks keskele x, nii et kesklinnas x asendis. Oletame, 200 200 pikslit. 

Anname siis y 200 pikslit samuti. Ja r, raadiusega, umbes 40 pikslit. Nüüd vaatame. Ma ei saa kirjutada. 

Seal sa lähed. Meil on ringi asendis 200 pikslit, 200 pikslit, raadius 40 pikslit. Selline lahe, eks? Meil on ring. Jah. 

Nii ei ole vaja jälgida mööda. Kõik need näited, mis kõik kood teen täna antakse lõpus veebis vormis interaktiivseid näited koos kontrollpunktidest iga tegu, ja nii edasi. 

Teeme rohkem asju. See must ring on tõesti kole. Mul on kahju, et viga Sõnumite seal. Seal me läheme. 

Anname see värv. Kuidas nii? Mulle meeldib terashall. Noh, meie ring värvi muutnud. See on tore. Teeme seda poolläbipaistva too-- poolläbipaistev. 

Nii et need on atribuudid me määratlemisel ring. Esimene asi, mida me tegime, on panime ringi lehel. Ja siis me määratleda hunnik atribuute. Mõned neist on vaja, nagu CX, CY, ja Radius. Ja teised on vabatahtlik. 

Seal on palju rohkem atribuute. Seal on palju. Näiteks võiksime insult samuti, insult punane. Kuid olgem eemalda seda. Oleme tagasi ringi, sinine ring. 

Nii saab teha rohkem ringe. Kuidas nii? Teeme teise ringi. See on põnev, eks? 

Nii öelda, et ma lihtsalt Copy-kleebitud mida me juba. Kutsume seda CIRCLE2. Ja olgem teha täpselt Sama asi ja seda atribuute, kuna x positsiooni 300. Jee, meil on kaks ringi nüüd. 

Ja muidugi, me võiksime uuenda neid väärtusi. Ma võiks panna seda 400, ja nüüd ta liigub. Ja kuna see on tüütu, olgem eemaldada, nii circle2.remove. See on läinud nüüd. 

Nii, mida me teeme ja on lihtsalt väga, very-- seda on väga sarnane sellega, mida võiks teha jQuery, näiteks. Me lihtsalt manipuleerimine DOM, seda nimetatakse. Te olete kuulnud, et sõna varem. Loome asju, millega atribuudid kraami, eemaldades kraami. 

Nüüd, siin on koht, kus ta saab huvitav. Nii hiljem kood, võiksime veel viitavad algsele ringi siin. Nii saab nullida selle atribuudi cx. Oletame, selle x asendis 400. Ja ma lähen üleminek et nii see on selge. Seal me läheme. 

Nii me lisada ringi. Seame mõned atribuudid. Lisasime teise ringi, eemaldatakse see. Ja siis me muutmise originaal ringi. 

Aga siin, kus ta saab palju muud huvitavat. Mitte ainult ei saa me seame atribuute lihtsalt väärtustab võib öelda, hey, ringi, minge positsioneerida 200. Me ei saa seada ka neid funktsioone. 

Nii et selle asemel, et anda 400 siin saame teha mõned arvutused lennult, mida me tahan, et atribuut olema. Nii see on, kuidas sa väljendada seda. Me ütleme, mitte 400, las ma teile funktsiooni asemel. Ja siin sees seda funktsiooni, saame teha hull arvutamisel. 

Võiksime võtta aega ja mõningaid teine ​​asi ja dünaamiliselt otsustada Ringi milline väärtus tahame. Kuidas me lihtsalt anda see juhuslik x asendis? Nii et see, et. 

Mis siis, et ütleb, on, et iga x, kestab see funktsioon. Ja mida me teeme on arvutamise mõned asjad, juhuslik korda laius ja tagastades. Nii et iga kord, kui me joosta, et saame ringi, et läheb suvalise koha. See on selline lahe. Ma tunnen, et mul võiks vaadata selles vähe. Me oled hakanud saada midagi huvitavat siin. Teeme seda infot sõita nüüd. Ei ole andmeid siin. Muudame seda. 

Act II, Data Driven Documents-- Nii saab tagasi siit. Ja olgem lihtsalt lahti saada CIRCLE2, sest me lihtsalt lisades ja eemaldades see. Nii et me tõesti ei vaja seda. Me peame olema palju targem siin. Oletame, et meil mõned andmed mingisugune. Üks moment-- oletame, meil oli andmeid selle vormi. Meil oli massiiv, vaid hunnik numbreid. Meil on seitse numbrit, olenemata nende represent-- summa inimeste pangakontole, kuidas palju kaaluvad need, jumal teab mida. 

Need on numbrid, ja me soovite kasutada meie ringid esindada neid numbreid kuidagi. Me tahame, et siduda meie ringid need numbrid. Nii et mida me teeme. Oletame, et me tahame ringi iga number. Me võiks teha vana asi olime doing-- ringi append ja CIRCLE2 ja circle3. Aga see läheb käest ära ja seal on palju korrata loogika. 

Nii lähme targem sellega. Selle asemel, et var ringi svg.append, et me olime lihtsalt kasutades, me ei kavatse kasutada see väike plokk siin. Ma ei taha minna sügavuti sellest, mida kõik need osad teha. Ja see on selline arenenud teema. Ja ma soovin, et ma võiks. 

Aga peamine asi recognize-- ja näete on väga sageli D3-kood. See tekstilõik põhi tekitab nii palju ringe kui on andmeelementide Selles massiivi siin. Nii et see tekitab nii palju ringkondades on elemente. See saab luua meile seitse ringkondades. Ja see tõesti võti asi. Nii saab käivitada seda. Olgem eemaldada meie teisi ringi. Lihtsalt Kommenteeri osalisele välja ja käivitada uuesti. 

Seal me läheme. Nii et meie ringi siin palju tumedam, sest me on seitse ringi, üks peal muud. Me lihtsalt loodud seitse ringi, üks Iga iga andmeosiseid. Aga seal on oluline asi, mis juhtus see väljavõte siin. 

See, et andmed on seotud. Nii et iga üksik nende andmete elemente, 10, 45, 105, oli seotud konkreetse ringi. Nii et need mitte ainult luua hunnik ringid kuid seob need kaks asja kokku. 

Ja tulevikus, sest me loodud need ringid selle D3 funktsiooni kui ma annan sulle ringiga, saate anna mulle andmeid sellega seotud. Nii saame küsida D3. Hei, D3, mul on see ring. Mis on andmeid, et ring on? Ja D3 oleks meile 10 või 45 või 105. 

Need asjad on seotud. See on väga, väga oluline mõiste. Vaatame seda. 

Nii, kuidas me tahaks küsida D3-- nii see on ebaoluline, aga lihtsalt usalda mind seda. See, kuidas me küsime D3. Hei, D3, anna mulle esimene ringi, et leiad. Anna mulle esimese ringi leiad. Ja siis me võiksime küsida, D3, mis on andmeid, et niimoodi, 10. 

Nii et me lihtsalt küsida D3, leia mind Esimene ring leiad. Mis on selle andmed? 10, mis on tõepoolest meie Esimesed andmed element. Võiksime küsida seda, hei, D3, meid leida meie kolmanda ringi. 105. Miks on see tõesti oluline? 

Nii siin mainisin et me võiks kasutada funktsioone. Ja ma mainisin, et oli väga võimas asi. Nii et mitte ainult ei saa meie funktsioonid asju nagu teha mõned arvutamine, näiteks tagastab juhusliku arvu, võib see Samuti teha asju, mis põhineb andmetel. See on see, mida andmed sõidetakse dokumentidel tähendavad. Seda D3 seisab. 

Nii et see x postition-- asemel lihtsalt öeldes, kõik ringid, saada x asendis 200, meil võiks see funktsioon. Ja siin saame teha mõned arvutused. ja d siin seisab koht andmeid. Nii et iga kord, kui me ei ringi, põhiliselt D3 loob need seitse ringkondades. Ja seejärel iga 

ringi, siis läheb käima, hei, RING1 mis su x asendis. Varem olime alati vastates 200. Aga nüüd, iga kord D3 küsib meile, mida su x asendis, see saab anda us-- meil et ringi, nii et meil on andmed. See läheb meile andmed ja öelda, mida sa tahad ekspositsioon olla, andmete põhjal. 

Olgem lihtsalt tagasi tegelikud andmed. Nii et kui võtame seda, et see annab meil andmed sõidetakse dokumente. Need ringid on aluseks seoses position-- nad alused funktsioonina andmeid. 

Nii esimese ringi D3 paneb ringi. Ja siis D3 küsib meilt, mida teha soovite ekspositsioon olla. Ja me lihtsalt öelda, mida iganes andmed. Tee ekspositsioon 10. 

Siis ta küsib, mida sa tahad ekspositsioon olla teise ringi. Ja me vastame, 45. Ja meil on loomulikult võimalik teha mõned arvutamise siin. Ma leian, et need ringid on selline squished üles. 

Nii korrutada see 3 korrutada andmete 3. Meie ringi just laiendatud välja. Meie väärtus kolmekordistus. 

Ring on tõesti äärel, nii et vaatame äkki mingi selle maha. Oletame, 20. Siin minna. 

See on andmete visualiseerimine. See on väga lihtne, aga see annab meile aimu meie andmeid. See ütleb meile, et me näiteks on vähe klastri elemente. Ja meil on suur võõrväärtusena siin. See annab meile infot umbes jaotus. 

Kui me näiteks muuta andmed 150 siin ja värskendada, Meie visualiseerimine on muutunud. See dokument on andmeid sõida. 

Nii et loomulikult, kõik need elemendid, kõik need omadused siin saame kasutada funktsiooni, ei lihtsalt numbrid, mitte ainult x ja y seisukohti. Nii saame kasutada funktsiooni värvi. Nii et me teeme sama. Me anname selle funktsiooni. 

Ja oletame, et me võiksime olla conditionals meie funktsiooni. See funktsioon võib olla sada rida pikk. Seda saab teha väga keerulisi asju. 

Nii paneme kui avaldus siin. Ütleme, kui meie andmed on väiksem kui 50, see on mõnede läve et me oleme huvitatud aastal mingil põhjusel. Teeme seda roheliselt. Vastasel korral teeme seda punaselt. Kuidas nii? Nice. 

Nii et meie andmete visualiseerimise hakkab edasi rohkem huvitavat teavet on palju kanaleid. Nüüd me teame natuke umbes jaotus. Ja me teame, et seal on mingi katkestas 50, et me oleme huvitatud. Me teame, et on olemas kaks andmepunkti alla selle künnise ja enamik neist eespool. 

Nii lõppastmes, neid andmeid siin, see on väga haruldane, et näha seda niimoodi. Võtame liigutada välja muutuja sest see on puhtam, niimoodi. Ja siis me kasutame, et muutuja siin. See on täpselt sama asi. See on lihtsalt natuke puhtamaks. 

Next up, III seadus, Scales-- Nii et üks probleem õigus siin on, kui me muudame oma andmed selles 200 value-- Kui me muudame seda 400 või midagi ja värskendada, see väärtus lihtsalt läks offscreen. Nii et meie loogika siin kuidas me teeme korda 3 ja 20, mis laotatakse ning seejärel kompenseerida seda natuke on tõesti kohmakad. 

Mida need numbrid tähendavad? Nad lihtsalt kõva kodeeritud seal. Ja nad väga palju seotud andmed. Me tahame andmeid sõidetakse dokument. Tahame väga paindlik dokument, et antud andmed, kohaneb see ja seda kujutab. 

Mida me põhimõtteliselt vaja on, me on see vahemikus numbrid 10. 45, 105. Ja me tahame kaarti, et läbi koridori laius, kogu laiust siin. Nii et meil on valikut numbrid lähevad 0-100. Ja meil on see campus I läheb 20-700, antud juhul. 

Meil sellist soovi kaarti, et edasi. Me tahame, et skaala, et üles ja siis selle maha natuke. Selgub, et D3 on need. Seda nimetatakse skaalal. Nii saab seda kasutada. 

Nii, et works-- ma lähen kirjuta see üles ja siis seda seletada. See on skaala. Mida ta teeb on see kaardistada väärtusi 1-200 edasi 20-600. Saame näha, et. Me näeme, et siin. 

Nii et kui ma söödan 1-- üks hetk. Anna mulle üks sekund. Ma pean on valesti seda. Seal sa lähed. Mul on kahju sellest. 

Mis skaalal teeme on, et see võtab raha ja seejärel teisendada, et laiendada läbi, nii et see täidab kõiki sa küsivad. Nii sel juhul, kui me anname talle ühe, see saab kaardistada, et läbi koridori 20. Ja kui me anname seda 200, see on läheb kaarti, et 600. Ja kusagil vahepeal, kui saame 100, see on saab olema kuskil vahel 20 ja 600. 

Ja muidugi, nüüd on see, mida Meil on vaja kõrvaldada need kõva kodeeritud asjad on meil seal. Nii et me tahame teha, on võtta andmeid, et me oleme arvestades, et üksikud andmed element, ja andke seda mõõtkavas esimene. Nii skaala mõõtkavas see üles. 

Well-- Oh, meil on väike viga siin. Me puuduvad andmed. Seal sa lähed. Ja mis laiendab seda. 

See annab meile sama Tulemuseks oli enne, kuid selle asemel neid kõva kodeeritud piirangud. Ja kui suurus meie presendist muutusi, näiteks Kui me tahame seda üle 400 pikslit ja see squishes välja meil on see over-- me seda laiendada või me saab vähendada seda vasakule marginaali midagi vähem või rohkem kui 20. Need numbrid on need kõva kodeeritud numbrid nüüd mõtet meile. 

Ja me võiksime teha palju rohkem huvitavaid asju ka. Nii et selle asemel, millel on lineaarne Skaala tahetakse sisse skaalal. Ja see annab meile logaritmilist skaalat. 

Nüüd meie skaala asemel lihtsalt laienemas, et range, ta teeb keerulisemaid asju. Selle asemel, et seda valikut raske kodeeritud, ja selle asemel, et 600, tahetakse lihtsalt kasutada laius, nii 20 laiusele -40 2 korda marginaal teisel pool. Ja see teeb palju mõttekam keegi, kes võiks vaadata koodi. 

Huvitav, kaalud saada väga, väga võimekas samuti. Nad teevad palju huvitavaid asju. Nii kaalud ei pea tegutseda ainult numbrid. Teeme värvigammat. 

Nii et meie valikut võiks olema-- Meie domeen on 1-200. See on sisend asi. Aga me võime soovida kaarti rohelisest punaseks, näiteks. Ja nüüd, kui võtame seda 1 me ei kavatse saada roheline. Kui me anname seda 200, me võtame punane. Ja kui võtame seda tõde kusagil vahepeal see saab olema mingi segu, et kusagil gradient vahel roheline ja punane. 

Ja selle asemel, selline kohmakad loogika meil siin tingimisi seal, meil oleks midagi-- lineaarskaalale nende vahel. Nii et me tahaks kasutada skaalal me lihtsalt loodud, milles kutsusime värvi. Ja me tahaks anda see d, mis Meie andmete element. Ja seal me läheme. Meil on värvigammat. 

Nii et see on kaardistada. Nii kaugele jäänud on täiesti rohelised. Paremäärmuslased on täiesti punane. Ja kõik vahel on funktsioon d. Meil on huvitav visualiseerimine siin. Aga meie andmeid oli selline igav. Vaatame, mida me võiksime teha, kui meil oli rohkem huvitavaid andmeid. 

Seaduse IV, Töö Data-- esimene asi me tahame teha, et meie visualiseerimine huvitavamaks on liigutada andmeid kusagil mujal. See on väga kohmakad olema andmed kõva kodeeritud siin. Ja üldiselt, saadame paludes kellegi teise jaoks andmeid. Uurime äkki küsib valitsus, Census Bureau, mis su andmed ja siis joonestamist, et ega küsib mõne kolmanda osapoole üksus mõningaid andmeid ja siis hoone visualiseerimine selle kohta. 

Nii et esimene asi, mida me tahame teha liigutada, et kusagil mujal. Ma lähen, et luua fail siit nimetatakse data.json. JSON on andmete esitusviis. Sa ei pea teadma, palju sellest. Ja me ei kavatse kopeerida vähe andmeid on meil olemas, kleepige see on sõna-sõnalt, minna tagasi meie visualiseerimine koodi siin, ja kasutada seda funktsiooni siin. Sul ei ole teada üksikasju. Aga mida see teha on, see leiavad, et fail, tõmmata, ja tagastab selle meile. Nii et mida see teeb, on, et see läheb ja saada data.json faili. Ja siis kõik kood, mis on liigestatud inside-- sisuliselt kõik koodi meil there-- hakkab käivitada ainult siis, kui saame andmed tagasi. Ja siis see saab joosta, et kood andmed meil. Hea, et meil on visualiseerimine, et päringuid mõned koodi kuskil muud, mis on tavaliselt kus see päringud mõned andmed kusagil mujal, mis on tavaliselt kuidas visualiseerimine tööta. 

Aga ma tahan minna tagasi andmetega. Nii andmete põhimõtteliselt sisse D3-- D3 tarbib andmeid, mis on nimekiri asjadest. D3 ootab andmed lihtsalt nimekirja asju, hulga asju. See ei ole tähtis, mis asjad need on, nii kaua kui see on massiivi neist. 

Nii et siin, näiteks võiksime kohta Muidugi on ujuva väärtused. Meil võiks olla negatiivsed. D3 ei hooli, nii kaua, kui see on nimekiri asjadest. 

Nagu huvitavaid asju, mida me võib olla, me võiks ka on stringide nimekirja niimoodi. Nii et need on Crimson pealkirju Võtsin paar päeva tagasi. Ja võib-olla leiad mõned huvitavad asju nende pealkirjad. 

Nii jälle, see on nimekiri asjadest. D3 ei hooli. Need juhtuvad olema string. Muutsime meie andmeid. 

Lähme tagasi meie visualiseerimine. Nüüd on meie visualiseerimine eeldab input olema numbrid. Nii et me lähed on teha mõned muudatused. Nii näiteks, esiteks, võibolla tahame panna need ringid mööda pikkusena pealkiri, tähemärkide arv pealkiri. 

Mida me teeme on-- iga kord, kui meie funktsiooni nimetatakse koos haaknõela, me leiame see on pikk ja siis liigu, et skaala. Värvi, ma tagasi et terashall. Ja seal me läheme. Meil on visualiseerimine of Crimson pealkirju. 

Meie skaala on natuke välja. Oletame, et pikim pealkiri on 100 tähemärki, nii span et välja natuke. Ja meil on visualiseerimine. Seega tundub, et kõige pealkirju on üsna lähestikku, nii iseloomu joon. Aga üks on tõesti paistab. 

Võiksime ehitada mõned tööriistad uurida, et rohkem. Aga kui ma töötasin selle, olin uudishimulik, kas see andmekogum, pealkirju koolon neid oleks pikem. Ma eeldab, et ta oleks. 

Nii saab teada. Kasutame värvi kanal nagu me tegime enne, kodeerida mõned umbes kas seal on jämesoole või ei. Nii me kasutame tingimisi uuesti. Sa ei pea teadma üksikasjad käesoleva, kuid see, kuidas me vaadata string teatava omaduse JavaScript jällegi ei ole asjakohane. 

Aga kui me ei leia käärsoole-, me naasta roheline. Ja kui me seda teeme, siis me tagasi punane. Nii jälle pealkirjadest on koolon on punased. See on see, mida see means-- kena. 

Seega tundub, et minu Hüpoteesi lõin. Seal on ainult kaks. Meil on ainult kuus andmepunkti Vaid kahel kooloniga. Kuid tundub natuke rohkem madala hinnaga, tegelikult. Pealkirjad koolonite tunduda üldiselt lühemad, vähemalt meie andmeid set-- huvitav. 

Pöördugem tagasi, et terashall ja siis vaata mida me saame teha veelgi rohkem huvitavaid andmeid. Nii jälle, ma mainisin, et andmed D3 on nimekiri asjadest. Me oleme näinud numbreid mitut liiki. Me oleme näinud stringe. Aga asjad võivad olla ka objekte. 

Nad võivad olla keerulised asjad mis sisaldavad palju asju. Öelda, et selgemalt, Enamasti me tahad ehitada iga andmepunkti keerulisem kui lihtsalt üks väärtus. Kui soovite ette kujutada Andmebaasi umbes üliõpilased, seal võib olla üliõpilane Nime, üliõpilane ID, ja palju asju, mis on seotud pöörates erilist rekord, mitte ainult string või number. Vaatame seda. 

See on üks selline andmekogum. See on andmekogum umbes maavärinad. Nii et kõik siin meie nimekirjas või massiivi asju on palju asju ise. Nii et iga andmepunkti on ulatust ja koordineerida. Ja koordinaadid ise sisaldab kahte asja. 

Nii et iga päev on nüüd palju rohkem keeruline ja palju muud huvitavat ja sisaldab palju huvitavat teavet. Vaatame, me võiks ehitada välja, et. Tagasiteel siin jällegi kasutades Meie histogrammi ringi visualiseerimine oleme loonud, vaatame, kas me saame ehitada visualiseerimine heledusjaotus Meie andmete kogum. 

Nii et siin, see on sama mõiste. Aga nüüd, d sisaldab rohkem asju. d sisaldab palju andmeid elemente. Nii saame päeva tagasi. D3 annab meile d. Ja me vastame leides suurusjärku d ja siis möödaminnes, et skaala. 

Ja siis me peame muutma Meie skaalal muidugi. Nii suuruste lihtsalt ei minna palju rohkem kui 10. Tegelikult on pole kunagi olnud 10 suurusjärgu maavärin. Aga see on omamoodi meie ülemine Lõpuks meie ülemine spektrit. 

Olgem värskendada. Nice, on meil visualiseerimine. On huvitav note-- nii on kahed andmed, et on peaaegu täpselt üksteise muu, mahu. Sa näed seda läbipaistmatus me kasutame. 

Meil on geograafilised andmed nüüd. Meil on laiuskraadidel ja pikkusega. Võib-olla võiks teha midagi palju muud huvitavat sellega. Vaatame mõned rohkem Huvitav, kuidas visualiseerida Käesoleva keerulisem andmete meil on juurdepääs. 

Seaduse V, Mapping-- põhjalikult, tahame panna need kaardil. Ma mõtlen, et see on koht, kus see läheb. Me tahame, et kodeerida teavet positsiooni nende maavärin näidud, samuti nende intensiivsus, sest meil on seda nüüd. Me mõistame, kuidas tarbida keerulisem andmeid. 

Esimene asi, mida me teeme on Looge kaart, tausta kaart. Ma lähen läbi see väga kiiresti. See on keeruline koodi. See on veel üks neist retsepte sa tõesti ei on täielikult mõista teid kasutada. Aga see on kood. See kood siinsamas loob kaardil. 

Me ei kavatse minna üksikasjalikult. Aga pealiskaudselt, mida ta teeb, on, samas kahtlusi selle us.json faili, mis on andmefaili nagu oli meil varem. See on keerulisem, muidugi. Aga sel juhul, kõike, Iga andmepunkti on see seisund ja on nimekiri laius- ja pikkuskraad mis määratlevad polügooni, sellisel kujul, et riik. 

Mis D3 teeme on sarnane mida me varem. See taotleda ja seonduda et element. Ja seal on funktsioon, mis kaardistab et element läbi, põhineb laiuskraadidel ja pikkusega. Te saate lugeda rohkem sellest. Ja ma soovitan seda. 

On linke lõpuks see kood postitatud. Ja koodi kommenteerinud. Seal on lingid edasiseks selle kohta. Ma soovitan teil otsida see üles. Aga mida me hoolime on Prognoos funktsiooni. Ma tahan minna läbi selle. 

Esiteks, las ma näitan sa, et jah, meil on kaardil. Kaardid on lahedad. Nii vaatame seda tootmisfunktsioon. 

Projektsioon on väga palju nagu skaala, kaalud uuesti. Mis tootmine Prognoos funktsiooni ei ei, me ei liigu see pool ja latitudes-- sel juhul, need väärtused siin on lat-igatseb hoone istume õiges now-- projektsioon. Ja projektsioon konverteerib That Into x ja y piksliväärtuse. 

Mis siis projektsioon teeb on väga sarnane meie skaalal. See võtab meie laiuskraadidel ja pikkuskraad mis esindab kogu maailmas ja kahanemine ja suurus, et alla väljakule et me tahame, et me juba rääkisime sellest. Sel juhul me kulgeb neid väärtusi. Ja see annab meile, noh, et ekraanil tähendab 640 pikslit. Kogu see ekraan on 700 pikslit lai, et teeb meile siin, ja 154 pikslit alla, mida ma ei hinnang on päris palju siin. 

Nii võttes neid lat-igatseb, mis midagi kujutada kogu maailmast ja squishing ja liigub, et umbes anda meile x ja y piksliväärtuse, see on esimene asi, mis on teha seda kaardistamine koodi. Ja siis ülejäänud kood tarbib andmeid ja siis kaardistab need lat-longs peale midagi ekraanile. 

Aga me ei kavatse kasutada seda projektsioon funktsioone, sest selgub, meil lat-igatseb igatseb samuti. Vaadates tagasi meie andmetel oleme pikkus- ja laiuskraadid iga tähelepanek. Nii saab kasutada projektsioon. 

Nii vaadates meie ekspositsiooni Me tahame, et meie exposition-- meil laius- ja pikkuskraadid. Aga me tahame piksliväärtuse. Ja selgub, meil on täpselt mida me want-- projektsioon. Väga palju nagu me olime kasutades skaalal siinsamas, me nüüd kasutada projektsioon ja andke seda koordineerib. Nii et esimene asi me doing-- nii et me oleme saada d, mis on üksikute andmete element individuaalne maavärin lugemist. Esimene asi, mida me teeme on saada koordinaadid. Hea küll, me peame koordinaadid. 

Teine asi, mida me teeme on selle edasi projektsioon. Projektsioon teisendab need koordinaadid arvesse piksliväärtuse, x ja y. Ja siis viimane asi, mida me tahan teha, on lihtsalt saada x, mis antud juhul on esimene. See on esimene kahe asju mis on tagastatud projektsiooni abil. 

Me teeme sama y. Kuid selle asemel, me naasta Teine element, y. Ole valmis, et värskendada. Ooh, extra iseloomu siin-- kena, meil on Data Driven dokument, mis on varjates seda JSON faili objektid, tegemisel kaardil ja muutuvad atribuut seoses andmete projekti seda kaardil. See on tõesti huvitav. See on lahe. 

Võtame selle põhja. Ma mõtlen, et meil on kaks tükki teave iga andmepunkti. Ma mõtlen, et kolm. Meil on koordinaadid, mis on x ja y. Ja meil on suurusjärgus. 

Meil on vaja kodeerida suurusjärku kuidagi. Meil on palju kanaleid. Me saame kasutada värvi. Me saame kasutada raadiuses. Me võiksime kasutada läbipaistmatus. Me võiksime kasutada palju asju kood. Mõni neist atribuudid ja paljud seda enam, et ei ole seal loetletud, sest nad on vabatahtlik, võiksime kasutada kodeerida käesoleva andmeid, insuldi ja kõik need asjad, mida ma olen mainitud. 

Teeme raadiuses. Ma arvan, et raadius on kõige intuitiivne. Nii jälle, me asendada see kodeeritud 40 ja teha mõned arvutused. Me kasutame oma lemmik skaalal uuesti. Ja me oleme varem d. Aga mitte päeva, sest me tahame suurusjärku d. d on lihtsalt andmepunkti. Me läbida suurusjärgu skaalal. 

Proovime seda uuesti. Ooh, see ei tööta. Miks see ei tööta? 

Seega pidage meeles, millise suurusega teeb. Vaatame skaalal uuesti. Scale kaardid 1-10 kohta kuni 22-600, vähem või rohkem. 600 on tohutu. See on põhjus, miks me saada see. 

Nii me tahame muuta meie skaalal midagi muud mõistlikku. Oletame, et tahame 0-60. 60 on suur, kuid 10 maavärinad on uskumatult harva. Tegelikult nad pole kunagi juhtunud. 

Nii et mida see teha on, siis võtan Meie suur, et läheb 1-10 ja kaardistada seda laiendada seda. Ja map seda kellelegi 0-60. Olgem värskendada. 

Nice, on meil visualiseerimine. See on suurepärane. See on tegelikud andmed. Märkad, minu väike mänguasi Näiteks suurim maavärin on õige peal meid. Aga see on kõik. Meil on kuupäev sõidetakse visualiseerimine mis tarbib andmeid ja annab meile tõesti huvitavat teavet. Jah, lisame mõned interaktiivsust ta. Mainisin, et oli tugev jõud D3. 

Nii et siin, iga element, me oleme kirjeldades kamp atribuute. Aga me ei saa ka kirjeldada seda, mida me tahame juhtuda interaktiivsust elemente. Näiteks me võiks kirjeldada Mis juhtub, kui me hiirega üle. Ja väga sarnased, et et võtan funktsiooni väga sarnane atribuudid meil oli enne, kus me midagi teha element kui me tiirutama üle. 

Nii et esimene asi, mida me peame tegema, on valida, et element, seda leida põhiliselt brauseris. ja siis me võiks seada atribuut ta. Mida ma teen siin, kui me tiirutama üle midagi, me võtame selle elemendi ja siis pane oma läbipaistmatuse tagasi 1, täiesti läbipaistmatu. Vaatame, mis see välja näeb. 

Tundub, et meil on Täiendava semikooloniga siin. Nii et kui me hover üle siin, see saab täis. Kuid nüüd, muidugi, see jääb täis, sest me kirjeldama, mis juhtub kui eemaldada meie kursor. Nii teeme täpselt, et mouseout, mitte mouse. 

Ja me lähtestada see mis meil oli before-- 0.5. Ja nüüd, iga kord kui me hover, saame ring täis. See aitab meil näha, mida me me valides sisuliselt. 

Ja nüüd teeme seda tõesti suur. Olgem ühendada see tegelikke andmeid. Nii saab küsida võiks USGS oma andmed. Nii US Geological Survey on andmeid maavärinad. Nad on avaliku API, mis on võimeline tuleb tarbida JSON formaadis. Nii teemegi. 

Nii et see on natuke koodi ühendub USGS API. Ja seal on natuke töötlemine ta. See ei ole oluline, kuid lihtsustab lihtsa andmete formaati nagu üks meil oli enne. Nii et ma vabaneda oma kõne Meie võlts data.json faili. Ja selle asemel, ma helistan USGS sisuliselt. 

Olgem värskendada, kena. See on tegelik, reaalse elu andmeid alates sel nädalal maavärina. See on tõesti huvitav. See ei ole üllatav Meie jaoks, kuid on olemas palju maavärinate West Coast Californias. Aga ma arvasin, et see oli väga huvitav et seal oli nii palju maavärinaid Alaska ja ilmselt siin Midwest. Ma mõtlen, et huvitav, ja me oleme head. See järeldus. 

Aga põhimõtteliselt on see on see, mida D3 aitab meil teha. See aitab meil võtta andmeid, seovad seda elementi DOM, ja on neid elemente muuta funktsioonina andmete on need tunnused, mis on kõik palju atribuute elementide, kõik kasulikud kanalid edastada teavet. 

D3 on uskumatult võimas raamatukogu ja hämmastavalt hästi juhitud. See on mõned võimsad kraami. Andmete visualiseerimine on uskumatult võimas vahend edasitoimetamiseks inimestele sügavale teadmisi, mis jõuab oma põhitegevusele ning aitab neil mõista, in see sügav ja intuitiivne viisil, kuidas andmeid toimib ja kuidas andmed muudab meie elu.