Scopul nostru este să învățăm elementele de bază ale datelor

Veți învăța elementele de bază ale vizualizării datelor folosind D3 prin acest proiect.

captură de ecran 17.05.2016 la 5 02 41 pm

Ce este D3.js?

Pentru cei care nu sunt familiarizați cu D3, D3.js este o bibliotecă JavaScript pentru manipularea documentelor pe baza datelor. D3 vă ajută să dați viață datelor folosind HTML, SVG și CSS.

D3.js vă ajută să atașați datele dvs. la elementele DOM (Document Object Model). Apoi puteți utiliza CSS3, HTML și / sau SVG pentru a prezenta aceste date. În cele din urmă, puteți face datele interactive prin utilizarea transformărilor și tranzițiilor bazate pe date D3.js.

Explicația proiectului:

Scenariu:

Acolo este o clasă de studenți online care interacționează cu diferite subiecte ale subiectului și oferă test pe aceste subiecte.

Există 15 subiecte și, pe fiecare subiect, avem un număr de elevi care au susținut testul și au obținut punctaje în trei categorii: scăzut, mediu și înalt

De exemplu (date date):

Subiect: „1”, scăzut: 4, mijloc: 13, înalt: 18

Subiect: „2”, minim: 11, mijloc: 12, înalt: 6

Subiect: „3”, scăzut: 12, mijloc: 24, înalt: 6 și așa mai departe.

Rețineți că Subiectul 1 are4 + 13 + 8 = 35 studentul a susținut chestionarul, iar Subiectul 2 11+12+6 = 29 student și subiectul 3 are 42 de elevi și așa mai departe.

Vrem să realizăm diagrame interactive cu bare și pie. De exemplu, o deplasare a mouse-ului pe una dintre bare va schimba graficul circular în consecință și invers.

Cu o combinație interactivă de diagrame cu bare și diagrame, unde diagrama cu bare arată numărul de studenți care au interacționat cu un anumit subiect (a luat testul) și diagrama circulară care arată clasificarea performanței elevilor în categorii de „scăzut, mediu, înalt”, vizualizați datele noastre și obțineți mai multe analize de date din acestea.

Sugestii și resurse:

Instrucțiuni pas cu pas:

D3 Introducere: unde puteți afla despre Selecții, proprietăți dinamice și tranziții în D3.js.

În funcția principală javascript, scrieți o funcție pentru a gestiona histograma (diagramă cu bare) – Histograma va arăta numărul total de studenți care au susținut testul (au interacționat cu acel subiect) pentru 15 subiecte.

  • (Aici este Tutorial unde puteți afla cum să creați o diagramă cu bare utilizând biblioteca JavaScript D3. Primul tutorial ne învață cum să realizăm o versiune în format HTML, apoi o diagramă mai completă în Scalable Vector Graphics (SVG) și, în cele din urmă, tranziții animate între vizualizări.)
  • Creați SVG pentru histogramă
  • Creați funcția pentru maparea axei x și adăugați axa x la histograma SVG
  • Creați funcția pentru maparea axei y și Creați bare pentru histogramă care să conțină dreptunghiuri și etichete subiect.
  • Creați dreptunghiurile și etichetele subiectului
  • Creați funcția pentru actualizarea barelor. Aceasta va fi utilizată de diagrama circulară

Scrieți o funcție pentru a gestiona pieChart. – diagrama circulară va avea trei felii – Scăzut, Mediu și Înalt pentru a reprezenta scorurile.

  • Tutorial unde puteți afla cum să creați o diagramă circulară, apoi tranziții între vizualizări și cum să creați o legendă.
  • Creați svg pentru diagramă circulară.
  • Funcția Creați pentru a desena arcurile feliilor de plăcintă – feliile de plăcintă vor fi scăzute, medii și înalte
  • Creați o funcție pentru a calcula unghiurile feliei de plăcintă.
  • Desenați feliile de plăcintă.
  • Creați funcția pentru a actualiza diagrama circulară. Aceasta va fi utilizată de histogramă.
  • Calculați frecvența totală pe segmente pentru toate subiectele.
  • Calculați frecvența totală în funcție de stare pentru toate segmentele.

Rezultatul analizei datelor și ce putem deduce din vizualizare:

  • Diagrama inițială arată clasificarea agregată a tuturor scorurilor elevilor pe toate subiectele combinate în trei categorii „scăzut, mediu, înalt”
  • Diagrama de bare inițială care arată numărul de studenți care au interacționat pe acel subiect anume
  • Orice categorie selectată din graficul circular va actualiza graficul cu bare, arătând numărul de studenți care au interacționat pe diferite subiecte având scoruri aparținând categoriei respective.
  • Capturile de ecran de mai jos arată cursorul mouse-ului pe felia „Mid” și respectiv „High” din diagrama circulară și respectiv pentru felia respectivă, diagrame de bare tematice și numărul de studenți.
captură de ecran 17.05.2016 la 5 13 53 pm
captură de ecran 17.05.2016 la 5 14 05 pm
  • Bara oricărei diagrame selectate va actualiza diagrama circulară care arată clasificarea tuturor scorurilor elevilor pe subiectul respectiv în trei categorii Scăzut, Mediu și Înalt. Captura de ecran de mai jos arată cursorul mouse-ului pe subiectul 2 și pentru subiectul respectiv, câți elevi sunt în categoriile scăzut, mediu și înalt
captură de ecran 17.05.2016 la 5 13 26 pm