[REPRODUCCIÓ DE MÚSICA] 

DAVID Chouinard: Sóc David Chouinard, i això és D3. Benvingut. Anem a aprendre sobre D3 avui. D3 és un marc de JavaScript per a la construcció d'una alta qualitat visualitzacions interactives per a la web. Coses com el que som veure darrere meu, anem a aprendre a fer els coses, classe dels fonaments de la mateixa. Però serà genial. Anem a començar fer fotos boniques. Tenim més donem de perspectives disponibles. Anem a fer-ho. 

Acte I, DOM manipulation-- Anem per començar immediatament fent coses interessants. En primer lloc, a l'esquerra, tenim codi. A la dreta, tenim el resultat del nostre codi. Anem a anar a través d'ell. 

Anem a fer un cercle. Què et sembla? svg.append circle-- que acaba de fer un cercle. No em creu, oi? No hi és. 

Així que el que vam fer aquí és, SVG és gràfics vectorials escalables. Aquesta és la manera en què diem que el navegador fer gràfics vectorials del navegador. El que acabem de fer en aquest moment s'afegeix un cercle per navegar. 

La promesa és que el cercle requereix una mica d'atributs bàsics abans que realment podem veure-ho. Hem de dir-li que la seva posició x, la seva posició i, el seu radi. No li vam dir que res d'això, pel que no estem veient ara mateix. Però anem a dir-li que això. 

Així que en primer lloc, vostè ha per donar al nostre cercle un nom. Així que anem a cridar cercle. El nostre cercle té un nom ara. I anem a donar-li un parell d'atributs. Què hi ha de cx es centraria x, de manera que el centre de la posició x. Diguem, de 200 per 200 píxels. 

Anem a donar-li un any de 200 píxels també. I un r, un radi, d'uns 40 píxels. Ara anem a veure. Jo no puc escriure. 

Cal anar. Comptem amb un cercle a la posició 200 píxels, 200 píxels, radi de 40 píxels. Una mena de fresc, no? Tenim un cercle. Sí. 

Així que no hi ha necessitat de seguir al llarg. Tots aquests exemples, totes el codi que estic fent avui serà proporcionat en línia a l'extrem en forma d'exemples interactius amb llocs de control a cada acte, i així successivament. 

Anem a fer més coses. Aquest cercle negre és realment lleig. Ho sento per aquest error missatges allà mateix. Cal anar. 

Anem a donar-li un color. Com és això? M'agrada blau acer. Bé, el nostre cercle canviar de color. Això és genial. Farem que semitransparent també-- semitransparent. 

Així que aquests són atributs estem definint en el cercle. El primer que vam fer és posem un cercle a la pàgina. I després estem definint un grup d'atributs. Alguns d'aquests estan obligats, com CX, CY, i Ràdio. I altres són opcionals. 

Hi ha molts més atributs. Hi ha un munt d'ells. Per exemple, podríem tenir un accident cerebrovascular, així, un cop de vermell. Però anem a treure això. Estem de tornada a un cercle, un cercle blau. 

Així que farem més cercles. Com és això? Anem a fer un altre cercle. Això és emocionant, no? 

Així que dir que m'acaba d'enganxar-Copy el que ja teníem. Diguem circle2. I farem l'exacta el mateix i donar-li atributs, donada una posició x del 300. Yay, tenim dos cercles ara. 

I, per descomptat, podríem actualitzar aquests valors. Jo podria posar a 400, i ara es mou. I ja que és molest, anem a i eliminar, per circle2.remove. Ara s'ha anat. 

Així que el que estem fent i és molt, very-- aquest és molt similar al que podria fer en jQuery, per exemple. Només estem manipulant DOM, es diu. Vostè pot haver sentit aquesta paraula abans. Estem creant coses, l'establiment de atributs en coses, l'eliminació de la matèria. 

Ara, aquí és on es posa interessant. Així que més endavant en el codi, que encara podia consulteu el cercle original aquí. Així que anem a restablir la seva atribut de cx. Diguem, la seva posició x 400. I jo vaig a la transició que, pel que és obvi. Cal anar. 

Així que afegim un cercle. Vam establir alguns atributs. Afegim un altre cercle, l'eliminem. I després estem modificant el cercle original. 

Però aquí és on es posa molt més interessant. No només podem establir atributs com s'acaba de valors, podem dir, bo, cercle, anar a la posició 200. També podem establir com a funcions. 

Així que en lloc de donar 400 aquí, podem fer una mica de càlcul sobre la marxa de manera que Vull aquest atribut sigui. Així que aquesta és la forma en què t'expresses això. Diem, en lloc de 400, em va deixar donar-li una funció en lloc. I aquí, a l'interior d'aquesta funció, podem fer qualsevol càlcul boig. 

Podríem prendre el temps i mirar a una altra cosa i decidir dinàmicament per el cercle que valor que volem. Què tal si només donem una posició aleatòria x? Així que això és tot. 

Així que el que diu és, per cada x, executen aquesta funció. I el que estem fent és calcular algunes coses, unes vegades a l'atzar l'ample i tornar això. Així que cada vegada que ens trobem, tenim una cercle que va a un lloc a l'atzar. És una mena de fresc. Em sento com si pogués mirar en això per una mica. Estem començant a arribar a alguna cosa interessant aquí. Farem aquestes dades impulsada ara. No hi ha dades aquí. Anem a canviar això. 

Documents-- acte II, Data Driven Així que anem a tornar a aquí. I anem a desfer-nos de circle2, perquè només estem afegint i traient ella. Així que realment no ho necessitem. Hem de ser molt més intel·ligent aquí. Diguem, tenim algunes dades d'algun tipus. Un moment-- diguem, teníem les dades d'aquest formulari. Vam tenir una matriu, només un munt de nombres. Tenim set nombres aquí, qualssevol que aquestes quantitat represent-- en el compte bancari de la gent, com molt que pesen, déu sap què. 

Aquests són els números, i ens que desitgi utilitzar els nostres cercles per representar els nombres d'alguna manera. Volem vincular la nostra cercles a aquests nombres. Així que el que fem. Diguem, volem un cercle per a cada número. Podríem fer el vell cosa que ens doing-- append cercle i circle2 i circle3. Però això va de les mans, i hi ha un munt de repetir la lògica. 

Així que anem més intel·ligent amb això. En lloc d'utilitzar el cercle var svg.append que estàvem fent servir, utilitzarem aquest petit bloc d'aquí. Jo no vull anar a fons en el que fan totes aquestes parts. I és una cosa d'un tema avançat. I m'agradaria poder fer-ho. 

Però la clau per recognize-- i veuràs que és molt sovint en codi D3. Aquest bloc de text bàsic crea tants cercles ja que hi ha elements de dades en aquesta sèrie aquí. Així com això crea molts cercles, ja que hi ha elements. Es crearà nosaltres set cercles. I ho fa d'una cosa molt, molt clau. Així que anem a córrer això. Anem a treure el nostre altre cercle. Anem a comentar aquest separar-se i córrer de nou. 

Cal anar. Així que el nostre cercle que aquí hi ha una molt més fosc, perquè tenen 7 cercles, un a la part superior de l'altra. Acabem de crear set cercles, un cada un per a cada un d'aquests elements de dades. Però hi ha una cosa clau que va succeir amb aquest fragment aquí. 

És que les dades van ser obligats. Així que cada un aquests elements de dades, 10, 45, 105, estava obligat a un cercle particular. Així que aquests no només van crear un munt de cercles però corbates aquestes dues coses juntes. 

I en el futur, perquè hem creat aquests cercles amb aquesta funció D3, si et dono un cercle, es pot dóna'm les dades associades amb ell. Així que podem demanar D3. Ei, D3, tinc aquest cercle. Quina és la informació que el cercle té? I D3 ens diria a 10 o 45 o 105. 

Aquestes coses estan limitades. Aquest és un concepte molt, molt fonamental. Fem una ullada a això. 

Així que la forma en què li preguntaria D3-- així això és irrellevant per això, però només confia en mi en ell. Així és com ens preguntem D3. Ei, D3, dóna'm la primera cercle que es pot trobar. Dóna'm el primer cercle que pots trobar. I llavors podríem preguntar D3, el que és les dades que, d'aquesta manera, 10. 

Així que només demanem D3, trobar el primer cercle que pots trobar. Què és les seves dades? 10, que és de fet la nostra primer element de dades. Podríem demanar-li que, hey, D3, nosaltres trobar el nostre tercer cercle. 105. Per què és realment important? 

Així que aquí, he esmentat que podíem utilitzar les funcions. I vaig esmentar que era una cosa molt poderosa. Així que no només poden fer les nostres funcions coses com fer algun càlcul, per exemple, retornar un nombre aleatori, pot també fer coses basades en les dades. Això és el que signifiquen els documents de dades impulsades. Això és el D3 representa. 

Així que aquesta vegada x postition-- de simplement dir, tots els cercles, obtenir la posició x 200, podria donar-li una funció. I aquí, podem fer alguns càlculs. i d aquí es troba en el seu lloc per a les dades. Així que cada vegada que tenim un cercle, en el fons, D3 crearà aquests set cercles. I a continuació, per a cada 

cercle, es va a anar, hey, circle1 quin és la teva posició x. Anteriorment, estàvem sempre contestant 200. Però ara, cada vegada que demana D3 nosaltres quina és la teva posició x, que donarà a nosaltres-- tenim aquest cercle, el que tenim les dades. Es va a donar-nos les dades i dir: Què vols que l'exposició sigui, sobre la base d'aquestes dades. 

Anem a tornar a les dades reals. Així que si correm això, això dóna dades ens impulsats documents. Aquests cercles es basen en relació Position-- són bases com una funció de les dades. 

Així que per al primer cercle, D3 posa un cercle. I llavors D3 ens pregunta, què fer desitja que l'exposició sigui. I acabem de dir, el que serà la informació. Feu l'exposició 10. 

Llavors es pregunta, què és el que desitja que el exposició sigui per al segon cercle. I nosaltres responem: 45. I, per descomptat, pot fer algun càlcul aquí. Em sembla que aquests cercles són una mica aixafat cap amunt. 

Així es multiplica per 3, multiplicar per 3 les dades. El nostre cercle acaba d'ampliar a terme. El nostre valor es va triplicar. 

El cercle és realment a la vora, així que anem a aquest tipus de compensar-ho. Diguem, per 20. Aquí tens. 

Aquesta és una visualització de dades. És una pregunta molt bàsica, però això ens dóna una idea de les nostres dades. Ens diu que, per exemple, que tenir un petit grup d'elements. I tenim un gran valor atípic aquí. Això ens dóna una mica d'informació sobre la distribució. 

Si haguéssim de, per exemple, per canviar les dades a 150 aquí i actualització, es canvia la nostra visualització. En aquest document es fa servir la informació. 

Així que per descomptat, tots aquests elements, tots aquests atributs aquí, podem utilitzar una funció, no només els números, no només les posicions x i y. Així que podem utilitzar una funció per al color. Així que anem a fer el mateix. Anem a donar-li una funció. 

I diguem, podríem tenir condicionals en la nostra funció. Aquesta funció pot ser centenars de línies llargues. Es pot fer coses molt, molt complicats. 

Així que anem a posar una sentència if aquí. Diguem, si els nostres dades són menys de 50, això és cert llindar que ens interessa en per alguna raó. Fem-ho verd. En cas contrari, farem que el vermell. Com és això? Niça. 

Així que la nostra visualització de dades està començant per transmetre la informació més interessant en molts canals. Així que ara sabem una mica sobre la distribució. I sabem que hi ha algun tipus de tallat a 50 que ens interessa. Sabem que hi ha dos punts de dades per sota d'aquest llindar i la majoria d'ells anteriorment. 

Així com un pas final, aquestes dades aquí, és molt rar veure aquest així. Així que anem a moure a una variable perquè això és més net, com aquest. I després fem servir aquesta variable aquí. És exactament el mateix. És només una mica més neta. 

El següent, acte III, Scales-- Així que un problema de dret aquí és, si canviem la nostra dades en aquesta 200 value-- si canviem a 400 o alguna cosa i actualització, llavors aquest valor només es va anar fora de la pantalla. Així que la nostra lògica aquí de la forma en què fem les vegades 3 i 20, per estendre-cap a fora i després compensar una mica és molt maldestre. 

Què signifiquen aquests números? Només estan codificat allà. I estan molt lligats a les dades. Volem un document de dades impulsada. Volem un document molt flexible, que les dades donades, s'adapta a ella i el representa. 

El que bàsicament necessitem és que tenir aquest rang de nombres 10. 45, 105. I volem mapejar de sortir a l'ample, l'amplada complet aquí. Així que tenim la gamma de nombres que van de 0 a 100. I nosaltres tenim aquest campus que va 20-700, en aquest cas. 

És com que volem mapejar que a. Volem que escalar i després compensar una mica. Resulta que D3 té aquests. Es diu una escala. Així que anem a utilitzar-lo. 

La forma en què works-- vaig a escriure això i després explicar-ho. Aquesta és una escala. El que farà és, serà traçar els valors d'1 a 200 sobre a 20-600. Podem comprovar que. Podem veure que aquí. 

Així que si em aliment que 1-- un moment. Dóna'm un segon. He haver escrit malament ella. Cal anar. Ho sento per això. 

Llavors, què va a fer una escala és, prendrà un valor i després convertir aquest, ampliar això, pel que omple tota la gamma que està demanant. Així que en aquest cas, si li fem una, que va a assignar que fos sobre 20. I si li donem 200, és va a assignar que a 600. I en algun lloc en el medi, si aconseguim 100, és estarà en algun lloc entre 20 i 600. 

I, per descomptat, ara això és el que hem d'eliminar aquests xifrats durs coses que tenen allà. Així que el que volem fer és prendre les dades que estem donat, que les dades individu element, i passar-lo a escala primer. Així balança ampliar-lo. 

Bueno-- Oh, tenim un petit error aquí. Ens falten dades. Cal anar. I que s'expandeix cap a fora. 

Això ens dóna la mateixa resultat que teníem abans, però en lloc de tenir les codificat limitacions. I si la mida de la nostra canvis de lona, ​​per exemple, si volem tenir això sobre 400 píxels i que aixafa a terme, podem tenir over-- podem ampliar, o fem pot reduir aquest marge esquerra a una mica menys o més de 20. Aquests números, aquests codificats números ara tenen sentit per a nosaltres. 

I podríem fer molt més coses interessants també. Així que en lloc de tenir un lineal escala, que pot ser que desitgi registrar una escala. I això ens donarà una escala logarítmica. 

Així que ara la nostra escala, en lloc de només l'expansió fora d'aquest rang, que està fent les coses més sofisticades. En lloc de tenir aquest rang dur codificada, i en lloc d'haver de 600, el que es vol només ha d'utilitzar l'ample, per la qual cosa des del 20 a l'amplada de menys de 40 anys, 2 vegades el marge a l'altra banda. I això té molt més sentit algú que pugui mirar el codi. 

Curiosament, les escales queden molt, molt sofisticat també. Ells fan un munt de coses interessants. Així escales no tenen necessàriament per operar només amb números. Anem a fer una escala de colors. 

Així que la nostra gamma podria ser: nostre domini és d'1 a 200. Aquesta és la cosa entrada. Però el que es vol mapejar des verd a vermell, per exemple. I ara, si ens passem 1, aconseguirem verd. Si li donem 200, ens posarem vermell. I si li passem alguna cosa intermedi, que serà una mica de barreja d'això, en algun lloc en el gradient entre verd i vermell. 

I en lloc de tenir aquest tipus de lògica maldestre tenim aquí amb la condicional allà mateix, podríem tenir un alguna cosa-- escala lineal entre aquells. Així que usaríem l'escala que acabem de creat, el que anomenem color. I ens agradaria donar-li D, que és el nostre element de dades. I aquí anem. Comptem amb una escala de colors. 

Així que aquesta és la cartografia. Així que el 'esquerra és completament verd. L'extrema dreta és completament vermell. I tota la resta és una funció de d. Tenim una interessant visualitzacions aquí. Però els nostres dades va ser una mica avorrit. Anem a veure el que podem fer si teníem les dades més interessants. 

Acte IV, que treballa amb el Data-- el primer voldrem fer perquè la nostra visualització més interessant és per moure les dades a un altre lloc. És molt maldestre per tenir les dades no modificables aquí. I, en general, estarem demanant algú més per a les dades. Estarem potser demanant al govern, l'Oficina del Cens, quin és el teu dades i després el traçat que o demanant una entitat de tercers per algunes dades i després la construcció d'una visualització en això. 

Així que el primer que volem fer és traslladar això a un altre lloc. Així que vaig a crear un presentar aquí anomenat data.json. JSON és el format de dades. No ha de saber molt sobre això. I anem a copiar el poques dades que tenim allà, enganxar-hi textualment, aneu de nou al nostre codi de visualització aquí, i utilitzar aquesta funció aquí. No ha de saber els detalls. Però el que això va a fer és, trobarà aquest arxiu, portar el menjar, i tornar-lo a nosaltres. Així que el que fa és, va i descarregar el fitxer data.json. I llavors tot el codi que és sagnia dins-- essencialment, tot el codi de tenir allà-- voluntat executi només quan aconseguim les dades de nou. I llavors funcionarà que codi amb les dades que tenim. Gran, tenim una visualització que consulta per algun codi en algun lloc una altra cosa, que és generalment on algunes dades de consulta en un altre lloc, que és generalment com funcionen les visualitzacions. 

Però vull tornar a les dades. Així que les dades fonamentalment en D3-- D3 consumeix dades que hi ha una llista de les coses. D3 espera que les dades que acaba de ser una llista de les coses, una sèrie de coses. No importa quines són aquestes coses són, en tant que és un conjunt d'ells. 

Així que aquí, per exemple, podríem de Per suposat haver valors de punt flotant. Podríem tenir els negatius. D3 no li importa, sempre i ja que és una llista de les coses. 

Com les coses interessants que podria tenir, també podria tenir una llista de cadenes com aquestes. Així que aquests són els titulars de Crimson Vaig agafar fa uns dies. I potser vostè pot trobar alguns interessants coses d'aquests als titulars. 

Així que de nou, aquesta és una llista de les coses. D3 no li importa. Aquests resulten ser una cadena. Hem canviat els nostres dades. 

Tornem a la nostra visualització. Ara, el nostre visualització espera l'entrada a ser nombres. Així que tindrem fer alguns canvis. Així, per exemple, en primer lloc, potser volem posar aquests cercles al llarg per la longitud de la titular, la nombre de caràcters en el títol. 

Llavors, què farem és-- cada vegada que el nostre funció és cridada amb una cadena, trobarem és la longitud I després passa que a escala. El color, vaig a tornar que a blau acer. I aquí anem. Tenim una visualització titulars de carmesí. 

La nostra escala és una mica apagat. Anem a suposar que el més llarg títol és de 100 caràcters, pel que abasten una mica. I tenim una visualització. Així que sembla que la majoria dels titulars són força propers entre si, en termes de línia de caràcter. Però un que realment es destaca. 

Podríem construir algunes eines explorar que més. Però quan jo estava treballant en això, jo estava curiositat per saber si, en aquest conjunt de dades, titulars amb dos punts en ells seria més llarg. I assumeix que ho farien. 

Així que anem a esbrinar. Anem a utilitzar el color canal com ho vam fer abans, per codificar alguna sobre si hi ha dos punts o no. Així que anem a utilitzar un condicional de nou. No ha de saber els detalls d'aquesta, però així és com vam comprovar 01:00 cadena per a un personatge en particular en JavaScript, de nou, no és rellevant. 

Però si no trobem un còlon, tornarem verd. I si ho fem, anem a tornar vermell. Així que de nou, titulars que haver dos punts serà de color vermell. Això és el que aquest significa: agradable. 

Així que sembla que la meva hipòtesi és colpejat. Només hi ha dos. Només tenim sis punts de dades i només dos tenien dos punts. Però sembla una mica més al capdavall, de fet. Titulars amb dos punts semblen generalment a ser més curt, almenys en els nostres dades definido-- interessant. 

Tornem a què blau acer i després veure el que podem fer amb encara les dades més interessants. Així que de nou, he esmentat que dades en D3 és una llista de les coses. Hem vist els números de molts tipus. Hem vist cordes. Però les coses també poden ser objectes. 

Poden ser coses complicades que inclouen un munt de coses. Dir que amb més claredat, en la majoria dels casos, vol construir cada punt de dades com més complicat que un sol valor. Si vostè s'imagina un base de dades sobre els estudiants, podria ser un estudiant nom, una identificació d'estudiant, i un munt de coses associada amb un registre en particular, no només una cadena o un nombre. Així que donem una ullada a això. 

Es tracta d'un conjunt d'aquestes dades. Es tracta d'un conjunt de dades sobre els terratrèmols. Així que tot el que aquí a la nostra llista o matriu de les coses en si conté moltes coses. Així que cada punt de dades té una magnitud i una coordenada. I coordina a si mateixos contenir dues coses. 

Així que cada dia és ara molt més complicat i molt més interessant i conté molt més informació interessant. Anem a veure que podíem construir fora d'això. Tornant de nou a aquí, de nou, usant la nostra visualització cercle histograma hem construït, anem a veure si podem construir un la visualització de la distribució de magnitud en el nostre conjunt de dades. 

Així que aquí, és el mateix concepte. Però ara, d conté més coses. d conté molts elements de dades. Així que vesteixen D esquena. D3 ens dóna d. I nosaltres responem en trobar la magnitud de d i després pas, que a escala. 

I llavors hem de canviar la nostra escala, és clar. Així magnituds simplement no ho fan anar molt més de 10. En realitat, no hi ha hagut un terratrèmol de magnitud 10. Però això és una cosa de la nostra part superior final, el nostre espectre superior. 

Anem a refrescar. Niça, tenim una visualització. És interessant el note-- hi ha dos punts de dades que són gairebé exactament a la part superior de cada un altre, en termes de magnitud. Això es veu per l'opacitat que estem usant. 

Tenim dades geogràfiques ara. Tenim latituds i longitud. Potser podríem fer alguna cosa una molt més interessant amb això. Anem a veure una mica més interessant forma de visualitzar aquesta més complicat dades que tenim accés. 

Acte V, Mapping-- fonamentalment, volem posar aquests en un mapa. Vull dir, aquí és on va això. Volem per codificar informació sobre el posició d'aquestes lectures del terratrèmol, així com la seva magnitud, perquè hem de ara. Entenem com consumir dades més complicats. 

El primer que farem és crear un mapa, un mapa de fons. Vaig a anar a través de això molt ràpidament. Aquest és el codi complicat. És un altre d'aquests receptes que realment no ha d'entendre completament perquè utilitzeu. Però això és codi. Aquest codi aquí crea un mapa. 

No entrarem en detall. Però per sobre, el que fa és, es consulta aquest arxiu us.json, que és un arxiu de dades com la que teníem abans. És més complex, és clar. Però en aquest cas, tot, cada punt de dades és aquest estat i té una llista de latituds i longitud que defineixen el polígon, aquesta forma, aquest estat. 

Llavors, què va a fer D3 és similar al que vam fer abans. Es sol·licitarà que i obligar que a un element. I hi ha una funció que traçarà un mapa d'aquest element fora, basat en les latituds i longitud. Pots llegir més sobre això. I ho recomano. 

Hi ha enllaços a la part final d'aquest codi publicarà. I es comenta el codi. En hi ha enllaços per a més endavant això. Et recomano que miris cap amunt. Però el que ens importa és aquesta funció de projecció. Vull passar per això. 

En primer lloc, deixa mostrar que, sí, tenim un mapa. Els mapes són cool. Així que donem una ullada a aquesta funció de producció. 

La projecció és molt com una balança, escales de nou. Així que el que la producció de aquesta funció de projecció fa és, podríem passar-ho longitud i latitudes-- en aquest cas, aquests valors aquí són la lat-llargs de l'edifici estem asseguts a la dreta ara-- a la projecció. I la projecció convertirà que en els valors de x i y de píxels. 

Llavors, què està fent la projecció és molt similar a la nostra escala. Es tracta de prendre les nostres latituds i la longitud que representa tot un globus i la reducció i dimensionament que a la plaça que volem, que li hem donat. En aquest cas, estem passant aquests valors. I ens està donant, així, que a la pantalla significa 640 píxels. Tota aquesta pantalla és 700 píxels d'ample, de manera que ens fa per aquí, i 154 píxels cap avall, que jo estimació és més o menys aquí. 

Així que tenint aquests lat-llargs, que representar alguna cosa en tot el món i aixafant i que es mou i tot ens valors X i Y de píxels donar, aquesta és la primera cosa que és fet en aquest codi de correspondència. I després la resta de la codi consumeix les dades i després aquests mapes lat-llargs amb alguna cosa a la pantalla. 

Però utilitzarem aquesta projecció funcions, perquè resulta que tenim lat-llargs llargs també. Mirant cap enrere en els nostres dades, tenim latituds i coordenades de longitud per a cada observació. Així que anem a utilitzar la projecció. 

Així que buscant en la nostra exposició, volem que el nostre exposition-- tenim una latitud i una longitud. Però volem que els valors de píxels. I resulta que, tenim exactament el que want-- projecció. Molt semblant estàvem utilitzant l'escala d'aquí, ara utilitzarem projecció i passar-ho coordina. Així que el primer estem doing-- així que estem aconseguir d, que és una de dades individual element d'un terratrèmol individu la lectura. El primer que fem és aconseguir les coordenades. Molt bé, tenim les coordenades. 

La segona cosa que fem és va succeir que a la projecció. Projecció converteix aquestes coordenades en valors de píxel, x i y. I després l'última cosa que vull fer és obtenir la x, que aquest cas és el primer. És la primera de les dues coses que són retornats per projecció. 

Nosaltres farem el mateix per i. Però en canvi, anem a tornar el segon element, la i. Prepara't per refrescar. Ooh, personatge extra aquí-- agradable, tenim un document impulsat dades que és ocultar aquest arxiu JSON dels objectes, fer un mapa, i canviant la atribut en relació a les dades projectar-la en un mapa. Això és realment interessant. Això és genial. 

Prenguem a un nivell superior. Vull dir, tenim dues peces de informació amb cada punt de dades. Vull dir, tres. Tenim les coordenades, que és un x i y. I tenim la magnitud. 

Necessitem codificar magnitud d'alguna manera. Tenim una gran quantitat de canals. Podem utilitzar el color. Podem utilitzar el radi. Podríem utilitzar l'opacitat. Podríem utilitzar moltes coses en el codi. Qualsevol d'aquests atributs i molts més que no són a la llista, , Perquè són opcionals, podríem utilitzar per codificar aquestes dades, l'accident cerebrovascular i totes aquestes coses que he esmentat. 

Anem a fer ràdio. Crec ràdio és el més intuïtiu. Així que de nou, l'hi canviarem que codificamos- 40 i fer alguns càlculs. Farem servir la nostra escala favorit. I estem més enllà d. Però no d perquè volem que la magnitud de d. d és només el punt de dades. Passarem la magnitud a escala. 

Anem a intentar-ho de nou. Ooh, que no funciona. Per què no funciona? 

Així que recorda el que fa escala. Fem una ullada a l'escala de nou. Mapes a escala d'1 a 10 sobre al 22 de 600, més o menys. 600 és enorme. És per això que estem rebent aquest. 

Així que volem canviar la nostra escala a una mica més raonable. Diguem, volem 0-60. 60 és gran, però 10 terratrèmols són increïblement estrany. De fet, mai han succeït. 

Així que el que això va a fer és, que prendrà la nostra magnitud que va d'1 a 10 i assignar-la a expandir a terme. I assignar-la a 0 a 60. Anem a refrescar. 

Niça, tenim una visualització. Això és molt bo. Es tracta de dades reals. Es donarà compte, en el meu petit joguina exemple, el terratrèmol més gran és just a sobre de nosaltres. Però això és tot. Tenim una visualització data impulsada que consumeix les dades i ens dóna realment informació interessant. Sí, anem a afegir una mica interactivitat a ella. Esmentar que era la força forta de D3. 

Així que aquí, per a cada element, estem que descriu un grup d'atributs. Però també podem descriure el que volem passarà amb elements d'interactivitat. Per exemple, podríem descriure el que passa quan el cursor sobre. I molt similar que, Això prendrà una funció, molt similar a la atributs que teníem abans, on fem alguna cosa al element quan passa sobre ella. 

Així que el primer que hem de fer és seleccionar aquest element, per trobar-lo, bàsicament, al navegador. i llavors podríem establir un atribut a la mateixa. Així que el que estic fent aquí és, quan passem per per alguna cosa, ens posarem aquest element a continuació, estableixi la seva opacitat esquena a 1, fins completament opaca. Anem a veure el que sembla. 

Sembla que tenim una punt i coma addicional aquí. Així que si passem per aquí, que s'omple. Però ara, per descomptat, pensió completa, ja que ha de descriure el que succeeix Quan s'extreu la nostra cursor. Així que farem exactament això en mouseout, a diferència de mouseover. 

I anem a restablir a el que teníem abans-- 0.5. I ara, cada vegada que vol estacionari, obtenim un cercle complet. Ens ajuda a veure el que estem seleccionant essencialment. 

I ara farem això realment genial. Anem a connectar aquest a dades reals. Preguntem llavors podria USGS sobre les seves dades. Així que el Servei Geològic dels EUA té dades sobre terratrèmols. Tenen una API pública que és capaç per ser consumit en format JSON. Així que farem això. 

Així que això és una mica de codi que es connecta a l'API de USGS. I hi ha una mica de processament en ell. Això no és rellevant, però ho simplifica a un format de dades simple com la que es que teníem abans. Així que em desfaig del nostre cridat a la nostra data.json fals a l'arxiu. I en canvi, estic trucant l'USGS essencialment. 

Anem a refrescar, agradable. És a dir, les dades reals de la vida real d'aquesta setmana per als terratrèmols. Això és realment interessant. Això no és sorprenent per a nosaltres, però hi ha una gran quantitat de terratrèmols al Costa Oest a Califòrnia. Però vaig pensar que era molt interessant que hi havia tants terratrèmols a Alaska, i pel que sembla, aquí al Mig Oest. Vull dir, interessant, i estem bé. Aquesta és la conclusió. 

Però fonamentalment, aquesta és el que ens ajuda a fer D3. Ens ajuda a donar les dades, s'uneixen a elements en el DOM, i tenen els elements canvien com una funció de les dades, tenir aquests atributs, tots els molts atributs dels elements, tot ésser útil per a canals per transmetre informació. 

D3 és un increïblement poderós biblioteca i increïblement ben dirigit. Això és una mica de matèria de gran abast. La visualització de dades és un eina increïblement poderosa per transportar les persones profundes idees que arriba al seu nucli i els ajuda a entendre, en d'aquesta manera profunda i intuïtiva, com les dades de les obres i com dades canvia la nostra vida.