ΠΡΡΡΡΠΎ ΠΎ Π³Π»Π°Π²Π½ΠΎΠΌ: Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Ρ D3.js | by Jenny V | NOP::Nuances of Programming
D3, ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎ ΠΎΡ Data-Driven Documents, β ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π΄Π°Π½Π½ΡΠ΅ ΡΠ°ΠΌΡΠΌΠΈ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ ΠΈ ΡΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠ΅ ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ DOM.
D3 Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΡΠ°Π·ΡΡΠ΄Ρ ΡΠΈΠΏΠΈΡΠ½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ. ΠΠ½Π° ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ΠΉ Π³ΠΈΠ±ΠΊΠΎΡΡΡΡ ΠΈ ΡΡΠΈΠ»Π΅Π½Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ Recharts, C3js ΠΈ Raw graphs. ΠΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ: ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΎΠ±ΡΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΠ΅ΡΠΏΠΈΡ ΡΠΈΠ°ΡΠΊΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΠ²Π»Π΅ΠΊΠ°Π΅ΡΠ΅ΡΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠΌΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°ΠΌΠΈ, D3 ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ ΡΠ²Π΅ΡΠ΅Π½Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ
Π ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠΌΡΡ Ρ D3 Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ². ΠΠ±ΡΠΈΠΉ ΠΏΡΠΎΡΠ΅ΡΡ ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΡΡΠ°ΠΏΠ°ΠΌ: Π·Π°Π³ΡΡΠ·ΠΊΠ° Π΄Π°Π½Π½ΡΡ β Π²ΡΠ±ΠΎΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² β ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° Π΄Π°Π½Π½ΡΡ β ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅/ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅/ ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠΎ ΠΏΡΠ΅ΠΆΠ΄Π΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΈΡΡΠ΅ΠΌ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΏΠΎΠΏΡΠ°ΠΊΡΠΈΠΊΡΠ΅ΠΌΡΡ Π² ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΈ ΡΠΈΠ³ΡΡ ΡΠ°Π·Π½ΡΡ ΡΠ²Π΅ΡΠΎΠ².
Π ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΡΡ ΡΠΈΠ³ΡΡ
ΠΠ°ΠΊ ΠΆΠ΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎ ΡΠΈΡΠΎΠ²Π°ΡΡ Ρ D3? ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Π΅ΠΌ HTML-ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ ΠΏΡΡΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ SVG (Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΠ° ΡΠ°ΡΡΠΈΡΡΠΎΠ²ΡΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠ·ΡΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΠΉ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ). ΠΠ»Ρ ΡΠ΅Ρ ΠΊΡΠΎ Π½Π΅ Π·Π½Π°Π΅Ρ, SVG β ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΎΡΡΠΎΡΡΠ΅Π΅ ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π³Π΅ΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΈΠ³ΡΡ, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ΅ΠΌΡ ΠΎΠ½ΠΎ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Ρ ΠΎΡΠΎΡΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠΌ. ΠΠ°ΠΊ ΡΠ°Π· Π΄Π»Ρ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΠΊΠΈΡ ΡΠΈΠ³ΡΡ ΠΈ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ D3.
Π‘Π½Π°ΡΠ°Π»Π° Π΄Π»Ρ ΠΈΠΌΠΏΠΎΡΡΠ° D3 ΡΠΎΠ·Π΄Π°Π΅ΠΌ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, Ρ ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΠΏΡΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ Π²ΡΠ΅ΠΉ ΡΡΠ°ΡΡΠΈ. Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ΅Π³Π°ΠΌΠΈ ΡΠΊΡΠΈΠΏΡΠ°.
Π ΡΡΡΠΎΠΊΠ΅ 4 ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅ΠΌ D3. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ frontend-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Ρ Node.js, ΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ NPM. Π ΡΡΡΠΎΠΊΠ΅ 7 ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ SVG, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅ΠΌ ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΈΠ³ΡΡΡ.
ΠΠ°ΠΏΠΈΡΠ΅ΠΌ ΠΏΠ΅ΡΠ²ΡΠ΅ ΡΡΡΠΎΠΊΠΈ ΠΊΠΎΠ΄Π° D3:
Π ΡΡΡΠΎΠΊΠ΅ 2 Π·Π°Π΄Π΅ΠΉΡΡΠ²ΡΠ΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄ d3.select()
. ΠΠ½ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΊΠ°ΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ CSS-ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΏΠ΅ΡΠ΅Π΄Π°Π»ΠΈ Π² ΡΡΠ½ΠΊΡΠΈΡ. Π ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ΅Π³ <svg>
, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ Π²Π΅ΡΠ½Π΅Ρ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎ ΠΈΠΌΠ΅ΡΡΠΈΠΉΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ SVG.
ΠΠΎΠ·ΠΆΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΠΌΡΡ ΠΊ Π΄ΡΡΠ³ΠΎΠΌΡ ΠΌΠ΅ΡΠΎΠ΄Ρ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ d3.selectAll()
, ΠΊΠΎΡΠΎΡΡΠΉ Π²Π΅ΡΠ½Π΅Ρ Π½Π΅ ΠΎΠ΄ΠΈΠ½, Π° Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ CSS-ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ.
Π ΡΡΡΠΎΠΊΠ΅ 4 ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ SVG Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ βcircleβ (ΠΊΡΡΠ³). ΠΠΎΠΌΠΈΠΌΠΎ Π½Π΅Π³ΠΎ Π² Π½Π°ΡΠ΅ΠΌ ΡΠ°ΡΠΏΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ Π΅ΡΡΡ Π΅ΡΠ΅ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·Π½ΡΡ
ΡΠΈΠ³ΡΡ. Π ΡΡΡΠΎΠΊΠ΅ 5 ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠ΅ΠΏΠΎΡΠΊΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² D3, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠΎΡΠ΅ΡΠ΅Π΄Π½ΠΎ Π²ΡΠ·ΡΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΈ ΠΈΠ·Π±Π°Π²Π»ΡΠ΅Ρ ΠΎΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΏΠΈΡΠ°ΡΡ svg.function(...)
Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅.
Π ΡΡΡΠΎΠΊΠ°Ρ
5, 6, 7 ΠΈ 8 ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π°ΡΡΠΈΠ±ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ d3.attr
, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΡΡΠ΅Π±ΡΡΡΡΡ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΈΠ³ΡΡΡ. cx
ΠΈ cy
β ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ x ΠΈ y ΡΠ΅Π½ΡΡΠ° ΠΊΡΡΠ³Π°; r
β ΡΠ°Π΄ΠΈΡΡ; fill
β ΡΠ²Π΅Ρ Π·Π°Π»ΠΈΠ²ΠΊΠΈ. ΠΡΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ. Π‘ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
Π³Π΅ΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠΎΡΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Π½Π° freeCopeCamp.
ΠΡΠ°ΠΊ, Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΡΠ²ΠΈΠ΄ΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΡΠΎ-ΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ, ΡΡΠΎ Π·Π΄Π΅ΡΡ Π½Π΅Ρ Π½ΠΈΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ³ΠΎ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»Ρ ΡΠ΅Π±Π΅ Π½Π΅ ΡΠΎΠ³Π»Π°ΡΠΈΡΡΡΡ. ΠΠ°ΠΆΠ΅ ΡΠ°ΠΌΡΠ΅ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΏΡΠΎΡΡΡΡ ΡΠΈΠ³ΡΡ.
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ²Π°Π΄ΡΠ°ΡΠΎΠΌ:
ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠΈΠ³ΡΡΡ rect
ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π½ΡΠΆΠ½ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ Π΄Π»Ρ Π΅Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΡΠ΅ΠΌ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌ ΠΊΠΎΠ΄ ΠΈ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
Π‘ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°ΠΌΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠΈΠ³ΡΡ ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈΡΡ, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ ΠΊ Π²ΠΎΠΏΡΠΎΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π΄Π°Π½Π½ΡΡ ΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Π½Π° ΠΈΡ ΠΎΡΠ½ΠΎΠ²Π΅.
ΠΠ°Π³ΡΡΠ·ΠΊΠ° Π΄Π°Π½Π½ΡΡ
ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π·Π½ΡΡ
ΡΠΈΠΏΠΎΠ² Π΄Π°Π½Π½ΡΡ
Π² D3 ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΡΠ½ΠΊΡΠΈΠΉ. ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΡΠ°ΠΌΡΡ
ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ
: d3.json('...')
, d3.csv('...')
ΠΈ d3.xml('...')
.
ΠΠ»Ρ Π²ΡΡΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡΠ΅Π»ΠΈ Π²ΡΠ΅ ΠΈΠ· Π½ΠΈΡ
ΠΏΡΠ΅Π΄ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Fetch
. CSV, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ JSON ΠΈ XML, Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°Π΅Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ
ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ².
Π ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΡ
ΡΠ°Π·Π΄Π΅Π»Π°Ρ
ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠ°ΠΉΠ»ΠΎΠΌ Π΄Π°Π½Π½ΡΡ
(socialnetwork.json
) ΠΈΠ· Π²ΡΠΌΡΡΠ»Π΅Π½Π½ΠΎΠΉ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΈ ΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΌΠΈ Π½ΠΈΠΆΠ΅:
Π‘Π½Π°ΡΠ°Π»Π° ΠΏΠΎΡΡΡΠΎΠΈΠΌ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Π΄Π»Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ. ΠΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΠΌ Π³ΠΎΠ΄Ρ (years), Π° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ β ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² (comments). ΠΠ»Ρ ΡΡΠΎΠΉ ΡΠ΅Π»ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ d3.axisBottom()
ΠΈ d3.axisLeft()
. Π ΠΊΠΎΠ΄Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠ° Π΄Π°Π½Π½ΡΡ
ΠΈ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ΅ΠΉ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°! ΠΠ΅Π· ΠΏΠ°Π½ΠΈΠΊΠΈ, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΆΠ΄ΡΡ ΡΡΡΠΎΠΊΡ ΠΏΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΡΡΠΈ.
Π ΡΡΡΠΎΠΊΠ΅ 3 ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ JSON. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ d3.json()
Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΠΏΡΠΎΠΌΠΈΡ, Π½Π°ΠΌ Π½Π΅ ΠΎΠ±ΠΎΠΉΡΠΈΡΡ Π±Π΅Π· .then()
ΠΈΠ»ΠΈ await
, ΡΡΠΎΠ±Ρ Π΄ΠΎΠΆΠ΄Π°ΡΡΡΡ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΡ ΠΏΡΠΎΡΠ΅Π΄ΡΡΡ. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ, Π² ΡΡΡΠΎΠΊΠ°Ρ
5 ΠΈ 10 ΠΏΡΠΈΡΡΡΠΏΠ°Π΅ΠΌ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
Π€ΡΠ½ΠΊΡΠΈΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
Π€ΡΠ½ΠΊΡΠΈΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ³ΡΠ°ΡΡ Π²Π°ΠΆΠ½ΡΡ ΡΠΎΠ»Ρ Π² ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠ΅ Π΄Π°Π½Π½ΡΡ . ΠΠΎΠΏΡΡΡΠΈΠΌ, ΠΌΡ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ Ρ 2015 ΠΏΠΎ 2020 Π³ΠΎΠ΄ ΠΏΡΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ 500 Ρ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠΈ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠ΅ Π½ΠΎΠΌΠ΅ΡΠ° Π³ΠΎΠ΄Π° Π½Π° ΠΎΡΠΈ x Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠΏΠΎΡΡΠ°Π²ΠΈΡΡ 2015β2020 Π² 0β500.
Π‘Π°ΠΌΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π΄Π»Ρ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ΄Π½Π° ΠΈΠ· Π½ΠΈΡ
, .scaleLinear()
, Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ ΠΎΠ΄ΠΈΠ½ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΡΠΈΡΠ΅Π» (domain) Π² Π΄ΡΡΠ³ΠΎΠΉ (range). Π ΡΡΡΠΎΠΊΠ΅ 7 ΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΠΌ ΡΡΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ (range)[100,800]
, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΠ°ΡΡ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΡ Ρ 100-Π³ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Ρ ΠΏΠΎ ΠΎΡΠΈ x, Π° Π·Π°ΠΊΠΎΠ½ΡΠΈΡΡ Π½Π° 800-ΠΌ.
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π²Ρ
ΠΎΠ΄Π½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ (domain), ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Π΄Π»Π΅ΠΆΠΈΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ. .domain()
ΠΎΠΆΠΈΠ΄Π°Π΅Ρ ΠΌΠ°ΡΡΠΈΠ² Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ. Π ΡΡΠ°ΡΡΡΡ, Ρ D3 Π΅ΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ d3.extent()
, d3.max()
ΠΈ d3.min()
. Π ΡΡΡΠΎΠΊΠ΅ 8 ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ minimum of years β 1
ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ maximum of years + 1
. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ ΠΎΡΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎΠ»Π±ΡΡ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ.
Π ΡΡΡΠΎΠΊΠ΅ 13 Π΄Π΅Π»Π°Π΅ΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΡΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ 0, Π° Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°ΡΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ ΡΠΈΡΠ»ΠΎΠΌ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π². ΠΠ°ΡΠ° Π·Π°Π΄Π°ΡΠ° β ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΠΎΡ 0 Π΄ΠΎ 150, Π° Π½Π΅ ΠΎΡ 50 Π΄ΠΎ 150.
d3.extent()
Π²Π΅ΡΠ½Π΅Ρ ΠΌΠ°ΡΡΠΈΠ² ΠΈΠ· ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ [max, min]
, ΠΈΠ·Π±Π°Π²Π»ΡΡ ΠΎΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π²ΡΠ·ΡΠ²Π°ΡΡ ΠΈΡ
ΠΏΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΡΡΠΈ.
ΠΡΠΈΡΡΡΠΏΠ°Π΅ΠΌ ΠΊ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΠΈ: Π² ΡΡΡΠΎΠΊΠ΅ 15 Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΎΡΡ x. Π ΡΠ΅Π»ΡΡ
ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΠΌ Π΅ΠΉ ΠΊΠ»Π°ΡΡ ΠΈ Π·Π°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ g, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΡΡ x Π²ΡΠ΅Π³Π΄Π° ΡΠΈΡΡΠ΅ΡΡΡ ΠΈΠ· Π½Π°ΡΠ°Π»Π° ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ Π² Π²Π΅ΡΡ
Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ. ΠΠΎΡΡΠΎΠΌΡ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΠΌ g
Π½Π° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»Ρ, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌ .call(d3.axisBottom(x).tickFormat(d3. format("d"))
. Π€ΡΠ½ΠΊΡΠΈΡ .axisBottom
ΡΠΈΡΡΠ΅Ρ ΠΎΡΡ. (ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π»ΠΈ Π΅ΠΉ ΡΡΠ½ΠΊΡΠΈΡ range
, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½Π° Π·Π½Π°Π΅Ρ, Π² ΠΊΠ°ΠΊΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ range/domain Π½ΡΠΆΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ). ΠΠ°ΡΠ΅ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ .tickFormat()
ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ D3, ΠΊΠ°ΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π΄Π΅Π»Π΅Π½ΠΈΡ Π½Π° ΠΎΡΠΈ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ "d"
Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΡΡΡ
ΡΠΈΡΠ΅Π» Π² ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π΅ ΠΎΡ 2014 Π΄ΠΎ 2021.
ΠΠ°Π»Π΅Π΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΌΡ Π΄Π΅Π»Π°Π΅ΠΌ Π΄Π»Ρ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ ΠΎΡΠΈ y, ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅Π½ΡΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡ transform
, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΡΡΡ ΠΎΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π΅Π»Π΅Π½ΠΈΠΉ.
ΠΠΎΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΡΠ±ΠΎΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° Π΄Π°Π½Π½ΡΡ
ΠΠ° ΡΡΠΎΠΌ ΡΡΠ°ΠΏΠ΅ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π³ΠΎΠ΄Π° Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΠ»Π° ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π². Π‘ ΡΡΠΎΠΉ ΡΠ΅Π»ΡΡ ΠΏΡΠΎΠ²Π΅Π΄Π΅ΠΌ Π²ΡΠ±ΠΎΡΠΊΡ SVG ΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΡ Π΄Π°Π½Π½ΡΡ . ΠΠΈΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
Π‘Π½Π°ΡΠ°Π»Π° Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ d3.select()
Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ SVG. (ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ
ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°Ρ
ΠΊΠΎΠ΄Π° ΠΌΡ Π΅Π΅ ΡΠΎΡ
ΡΠ°Π½ΠΈΠ»ΠΈ Π² ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ svg
). ΠΠ°ΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° CSS selector .barchartrectangle
ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΠΌ ΠΏΠΎΠΈΡΠΊ ΠΈ ΠΎΡΠ±ΠΈΡΠ°Π΅ΠΌ Π²ΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΈ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ. ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΠΏΡΠΎΡΠ΅ΡΡΠ°ΠΌΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ: Π΅ΡΠ»ΠΈ ΠΌΠ°ΡΡΠΈΠ² ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ, ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΈΠΌΠ΅ΡΡΠΈΠ΅ΡΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΈ Π΄Π»Ρ ΠΈΡ
ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²ΠΊΠΈ Π»ΠΈΠ±ΠΎ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ.
ΠΠ°Π»Π΅Π΅ Π²ΡΠ·ΡΠ²Π°Π΅ΠΌ ΡΡΠ½ΠΊΡΠΈΡ .data()
, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΎΠ΄ΠΈΠ½ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠΈΠΉ data
, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ. ΠΡΠΈ ΡΡΠΎΠΌ Π²ΡΠΎΡΠΎΠΉ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΊΠ»ΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΠΌ Π΅ΠΌΡ ΡΡΠ½ΠΊΡΠΈΡ, ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (item) ΠΈ ΠΈΠ½Π΄Π΅ΠΊΡ (index). Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΈΠ½Π΄Π΅ΠΊΡ.
ΠΠ΄Π½Π°ΠΊΠΎ, ΠΊΠ°ΠΊ ΠΌΡ ΡΠ²ΠΈΠ΄ΠΈΠΌ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ Π²ΡΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π»Π΅ΠΆΠ°Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ/ΡΠ΄Π°Π»Π΅Π½ΠΈΡ/Π²ΡΡΠ°Π²ΠΊΠ΅. ΠΡΠΈ Π½Π°Π»ΠΈΡΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° id
Π² Π΄Π°ΡΠ°ΡΠ΅ΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΡΠΎ-ΡΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ (item, index)=> item.id
.
ΠΡΠ°ΠΊ, ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°ΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΌΡ Π½Π°ΡΡΠΈΠ»ΠΈΡΡ, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ ΠΊ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠ².
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈ ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΠΎΠ³Π΄Π° ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΡΡ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΡΠ΅ΠΌ ΡΠΈΠ»ΡΡΡΠ°ΡΠΈΠΈ), D3 ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΠΌΠ°ΡΡΠΈΠ²Ρ ΠΈ ΡΠ΅ΡΠ°Π΅Ρ, ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ.
ΠΠ΄Π΅ΡΡ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠΎΠ»ΡΠΊΠΎ 2 Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ: Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ .enter()
ΠΈ ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅ .exit()
.
ΠΠΎΠ½ΡΡΡ Π»ΠΎΠ³ΠΈΠΊΡ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΠΌΠ°ΡΡΠΈΠ²Π° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π΄Π°Π½Π½ΡΡ
[1,2,3]
ΠΏΡΠΈ ΠΏΠ΅ΡΠ²ΠΎΠΌ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΠΊΠΎΠ΄Π°.
Π‘Π΅Π»Π΅ΠΊΡΠΎΡ .barchartrectangle
Π²Π΅ΡΠ½Π΅Ρ 0 ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ D3 Π² ΠΊΡΡΡΠ΅, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ ΡΠ²Π»ΡΡΡΡΡ ΡΡΠ΅ΠΌΡ Π½ΠΎΠ²ΡΠΌΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π΄Π°Π½Π½ΡΡ
. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΎΠ½Π° Π·Π°Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π½ΡΠ΅ Π½Π° ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ .enter()
. Π Π½Π΅ΠΉ ΠΌΡ ΠΏΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠ΅ΠΌ Π½ΠΎΠ²ΡΠ΅ rect
ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ Π½ΠΎΠ²ΠΎΠΌΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ Π΄Π°Π½Π½ΡΡ
ΠΈ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΠΌ ΠΈΠΌ ΠΊΠ»Π°ΡΡ barchartrectangle
. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ βΡΠ΄Π°Π»Π΅Π½ΠΈΠΉβ Π½Π΅Ρ, ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ .exit()
Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°Π½Π°.
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΌΠ°ΡΡΠΈΠ²Π° Π½Π° [1,2] ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠΌ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΠΊΠΎΠ΄Π° ΡΠ΅Π»Π΅ΠΊΡΠΎΡ .barchartrectangle
Π²Π΅ΡΠ½Π΅Ρ ΡΡΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ΄Π½Π°ΠΊΠΎ D3 ΠΎΡΠΌΠ΅ΡΠΈΡ Π½Π°Π»ΠΈΡΠΈΠ΅ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π²ΡΡ
. Π’ΠΎΠ³Π΄Π° ΠΎΠ½Π° Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠΌΠΈ Ρ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠ΅ΠΉ .exit()
, ΠΈ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ΄Π°Π»ΠΈΡ . remove()
ΡΡΠ΅ΡΠΈΠΉ ΠΈΠ· Π½ΠΈΡ
.
ΠΠ°ΠΊ D3 ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ΄Π°Π»ΡΡΡ? ΠΡΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΊΠ»ΡΡΠ° Π΄Π°Π½Π½ΡΡ
, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π½Π΅Π΅. Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΠΌ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ½Π΄Π΅ΠΊΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ ΡΠ΄Π°Π»ΠΈΡ ΡΡΠ΅ΡΠΈΠΉ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠΎ Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΠΊΠ°Π·Π°Π»ΡΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΌ id (item, index)=> item
, ΠΈ ΠΌΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈ ΠΌΠ°ΡΡΠΈΠ² Π½Π° [1,3], ΡΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠ΅ΡΡΠ΅Π³ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ΄Π°Π»Π΅Π½ Π²ΡΠΎΡΠΎΠΉ barchartrectangle
.
Π Π°Π±ΠΎΡΠ° ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΉ .enter()
ΠΈ .exit()
ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠΎΠ½ΡΡΠ½Π°, ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΠΌ ΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ.
Π ΡΡΡΠΎΠΊΠ΅ 4 ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ .enter()
ΠΈ ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡΡΠ΅ΠΌ D3, ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ Ρ Π΄Π°Π½Π½ΡΠΌΠΈ. Π ΡΡΡΠΎΠΊΠ΅ 5 Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π½ΠΎΠ²ΡΠΉ rect
ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ. ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ Π² ΡΡΡΠΎΠΊΠ°Ρ
6 ΠΈ 7, ΡΡΠ½ΠΊΡΠΈΡ .attr()
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π½ΠΎ ΠΈ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ Π΅Π³ΠΎ ΠΈΠ½Π΄Π΅ΠΊΡ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΄Π°Π½Π½ΡΡ
.
Π‘Π½Π°ΡΠ°Π»Π° Π² ΡΡΡΠΎΠΊΠ΅ 6 ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ x ΠΏΡΡΠ΅ΠΌ Π²ΡΠ·ΠΎΠ²Π° ΡΡΠ½ΠΊΡΠΈΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ x, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ°Π½Π΅Π΅ Ρ Π½ΠΎΠΌΠ΅ΡΠΎΠΌ Π³ΠΎΠ΄Π°. Π ΠΎΡΠ²Π΅Ρ Π²Π΅ΡΠ½Π΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΈΠΊΡΠ΅Π»Ρ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΄Π°Π»Π΅Π΅ ΡΠΈΡΠΈΠ½Π° Π±ΡΠ΄Π΅Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° ΠΊΠ°ΠΊ 100, ΡΠΎ ΠΌΡ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ ΡΡΠΎΠ»Π±Π΅Ρ ΠΊ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠ΅ ΡΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π²ΡΠΏΠΎΠ»Π½ΡΡ -50
. ΠΠ»Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ y ΠΏΡΠΎΡΡΠΎ Π²ΡΠ·ΡΠ²Π°Π΅ΠΌ ΡΡΠ½ΠΊΡΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π ΡΡΡΠΎΠΊΠ΅ 9 Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π²ΡΡΠΎΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌ 800- y(item.comments)
ΠΈΠ·-Π·Π° ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ°ΠΏΠΎΠΌΠ½Ρ, ΡΡΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ Π±ΡΠ» ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ ΠΊΠ°ΠΊ [800, 100]
, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠ°Π»ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π±ΠΎΠ»ΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π ΡΠ²ΡΠ·ΠΈ Ρ ΡΡΠΈΠΌ ΠΌΡ ΠΎΠ±ΡΠ°ΡΠ°Π΅ΠΌ ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ, Π²ΡΠΏΠΎΠ»Π½ΡΡ 800 β y(item.comments)
.
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π΄Π»Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π·Π°Π΄Π°Π΅ΠΌ ΡΠΈΠ½ΠΈΠΉ ΡΠ²Π΅Ρ Π·Π°Π»ΠΈΠ²ΠΊΠΈ. ΠΡΠΎΠ³ΠΎΠ²ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΡΠ»ΠΈΡΠ½ΠΎ! ΠΠ° ΠΎΡΠ½ΠΎΠ²Π΅ Π΄Π°Π½Π½ΡΡ ΠΌΡ ΠΎΡΡΠΈΡΠΎΠ²Π°Π»ΠΈ Π½Π° ΡΠΊΡΠ°Π½Π΅ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ. Π ΡΡΠΎΠΌ ΠΈ ΡΠΎΡΡΠΎΠΈΡ Π²ΡΡ ΡΡΡΡ D3. ΠΠΎ Ρ Π½Π΅Π΅ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ. ΠΠ° D3.js β Data-Driven Documents (d3js.org) Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ Π³ΡΠ°ΡΠΈΠΊΠ°ΠΌΠΈ ΠΈ ΡΠΈΠ³ΡΡΠ°ΠΌΠΈ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π’Π΅ΠΏΠ΅ΡΡ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΎΠ±ΡΠ΅Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ D3. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΈΠ³ΡΡΡ Π² SVG Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅ΠΌΡΡ Π΄Π°Π½Π½ΡΡ .
Π Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ Π΅ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ: Π³Π΅ΠΎΠΊΠ°ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ HTML, Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΠ΅ΡΠ΅Π²ΡΡ ΠΏΡΠΎΡΠ΅ΡΡΠΎΠ² ΠΈ Ρ.Π΄. D3 ΡΠ΅Π½Π½Π° ΠΏΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠΎΡΡΠΈ Π±Π΅Π·Π³ΡΠ°Π½ΠΈΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ, ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ.
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅:
- notebookJS: JavaScript ΠΈ D3 Π² Jupyter Notebook
- ΠΠΎΡΠ΅ΠΌΡ Ρ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ»ΡΠ·ΡΡΡΡ D3.js
- Π’ΠΠ-25 Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ React 2021β2022: Π½ΠΎΠ²ΡΠ΅, ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅, Π½ΠΎ ΠΌΠ°Π»ΠΎΠΈΠ·Π²Π΅ΡΡΠ½ΡΠ΅ ΠΏΠ°ΠΊΠ΅ΡΡ JavaScript
Π§ΠΈΡΠ°ΠΉΡΠ΅ Π½Π°Ρ Π² Telegram, VK ΠΈ Π―Π½Π΄Π΅ΠΊΡ.ΠΠ·Π΅Π½
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ : D3.js | DataReview.info
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ Π½Π°ΡΠΈΠ½Π°Π΅ΠΌ ΡΠ΅ΡΠΈΡ ΡΡΠ°ΡΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΡΠΊΠ°ΠΆΡΡ ΠΎ ΡΠ°ΠΌΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΡΠ΅Π΄ΡΡΠ²Π°Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ . ΠΠ΅ΡΠ²Π°Ρ Π½Π° ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° D3.js, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ°Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Π² Π»ΡΠ±ΠΎΠ΅ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΊΠ°ΠΆΠ΅ΠΌ ΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ ΠΈ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°Ρ Π΅Π΅ ΡΠ°Π±ΠΎΡΡ, ΠΎΠ±ΡΡΠ΄ΠΈΠΌ Π³Π»Π°Π²Π½ΡΠ΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ΄Π΅Π»ΡΡΡ ΡΡΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΡΡΠ΅Π΄ΠΈ Π΅ΠΌΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ .
D3.jsΒ ΠΈΒ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡΒ Data-Driven Documents
D3.js (ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ D3 β DataβDrivenDocuments) β ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠ°Ρ ΡΠΈΡΡΠΎΠ²ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΡΠΎΠΌΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΠ΅Π³ΠΎ, D3 ΠΊΠ°ΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΡΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠΌ W3C β SVG (ScalableVectorGraphics β ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠ°Ρ Π²Π΅ΠΊΡΠΎΡΠ½Π°Ρ Π³ΡΠ°ΡΠΈΠΊΠ°), JavaScript, HTML5 ΠΈ CSS3.
ΠΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, D3 β Π½Π΅ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ Π²Π΅Π±-Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ . ΠΡΠ΅Π΄ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΈΠΊΠΈ D3.js, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, IEEE ΠΈ Flare, ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π»ΠΈ Β«Π±Π΅ΡΡΠΎΠ²Π½ΡΡΒ» ΡΠ°Π±ΠΎΡΡ Π²ΡΠ΅Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΎΠ΄Π½Π°ΠΊΠΎ Π² ΡΠ³ΠΎΠ΄Ρ ΠΈΠ½ΠΊΠ°ΠΏΡΡΠ»ΡΡΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π±ΡΠ»ΠΈ ΡΠΊΡΡΡΡ ΠΎΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ° Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅. Π ΡΡΠΎΠΌ ΡΠΌΡΡΠ»Π΅ D3 ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ½Π½ΠΎΠ²Π°ΡΠΈΠΎΠ½Π½ΡΠΌ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½Π°Ρ DOM-ΠΌΠΎΠ΄Π΅Π»Ρ (DocumentObjectModel, ΠΎΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°). ΠΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅) ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΡ, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π² Π²ΠΈΠ΄Π΅ Π΄Π΅ΡΠ΅Π²Π° ΡΠ·Π»ΠΎΠ², ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ Π΄Π°Π½Π½ΡΡ β ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ, Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ. Π£Π·Π»Ρ ΡΠ²ΡΠ·Π°Π½Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ Β«ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ-ΠΏΠΎΡΠΎΠΌΠΎΠΊΒ», ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌ ΠΈ ΡΠΊΡΠΈΠΏΡΠ°ΠΌ ΠΏΠΎΠ»ΡΡΠ°ΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ Π²Π΅Π±-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΈΡ ΡΡΡΡΠΊΡΡΡΡ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅, Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅.
Β
ΠΠ°ΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡ, ΡΡΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ DOM ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΠΌ, ΡΠΎ Π΅ΡΡΡ Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ Π½ΠΈ ΠΎΡ ΡΠ·ΡΠΊΠ°, Π½ΠΈ ΠΎΡ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ. ΠΠ°Π΄ΠΎ Π»ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡΡ, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ β Π½Π΅ΡΠΎΠΌΠ½Π΅Π½Π½ΡΠΉ ΠΊΠΎΠ·ΡΡΡ Π² ΡΡΠΊΠ°Π²Π΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² D3.js? ΠΠ»Ρ Π½Π°ΡΠ΅ΠΉ Ρ Π²Π°ΠΌΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠΈ β Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π±ΠΎΠ»ΡΡΠΈΡ Π΄Π°Π½Π½ΡΡ β ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ. D3, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ, Π΄Π°Π΅Ρ ΡΠ°ΠΊΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ.
ΠΡΠΈΠ½ΡΠΈΠΏΡ ΡΠ°Π±ΠΎΡΡ
ΠΠ°ΠΊ ΡΠΆΠ΅ Π±ΡΠ»ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ, Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° D3.js ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π»ΡΠ±ΠΎΠΉ HTML-ΡΡΡΠ°Π½ΠΈΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ JavaScript. D3 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΠ·ΡΠΊΠ° Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠΎΠ·Π΄Π°Π½ΠΈΡ SVG-ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² ΠΈ ΡΡΠΈΠ»Π΅ΠΉ, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ². Π§ΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎ, Π΄Π°ΠΆΠ΅ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΠ΅ Π½Π°Π±ΠΎΡΡ Π΄Π°Π½Π½ΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½Ρ Π² SVG-ΠΎΠ±ΡΠ΅ΠΊΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΏΡΠΎΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π² Π²ΠΈΠ΄Π΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ ΡΠ°Π±Π»ΠΈΡ, ΠΊΠ°ΠΊ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ , ΡΠ°ΠΊ ΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ richtext. ΠΡΠΈ ΡΡΠΎΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π°Π½Π½ΡΠ΅ Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π»ΡΠ±ΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅; Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΡΠ»ΠΎΠ²ΠΈΠ΅ β Π²ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Ρ Π² ΠΊΠΎΠ΄Π΅.
Π Π°Π·Π±Π΅ΡΠ΅ΠΌΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°ΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ ΡΡΡΡΠΊΡΡΡΠΎΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. ΠΡΠ°ΠΊ, ΡΠ΅ΡΡΡΠ΅ ΠΎΡΠ½ΠΎΠ²ΠΎΠΏΠΎΠ»Π°Π³Π°ΡΡΠΈΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ° ΡΠ°Π±ΠΎΡΡ D3.js:
- ΠΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅.Β Π¦Π΅Π½ΡΡΠ°Π»ΡΠ½ΡΠΉ ΠΏΡΠΈΠ½ΡΠΈΠΏ D3 β Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²ΡΠ±ΠΎΡΠ° (Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ) Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° DOM-ΡΠ·Π»ΠΎΠ² (Π²ΡΠΎΠ΄Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ ΡΠ΅ΡΠ΅Π· CSS), ΡΡΠΎΠ±Ρ Π·Π°ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΈΡ Π΄Π°Π½Π½ΡΡ (ΠΊΠ°ΠΊ ΡΠ΅ΡΠ΅Π· jQuery).
- ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄.Β ΠΡΠ΅ ΠΎΠ΄Π½Π° ΡΡΠ½ΠΊΡΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌ Π΄Π»Ρ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ΠΊΠΎΠ΅Π³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ° ΠΊ Π΄ΡΡΠ³ΠΎΠΌΡ. ΠΡΠΎΡΡΠ΅ΠΉΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ β Π½Π΅ΠΊΠΈΠΉ ΡΠ΅ΠΊΡΡ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΉ ΡΠ²Π΅Ρ Ρ ΡΠΈΠ½Π΅Π³ΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΠΊΡΠ°ΡΠ½ΡΠΉ.
- ΠΡΠΈΠ²ΡΠ·ΠΊΠ°Β Π΄Π°Π½Π½ΡΡ
.Β ΠΠ»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΡ
Π·Π°Π΄Π°Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΈΡΡΠ°ΡΠΈΡ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ° Π΄Π°Π½Π½ΡΡ
ΠΏΡΠΎΠ²ΠΎΡΠΈΡΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎΠΏΡΡΡΠΈΠΌ, Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ Π½Π΅ΠΊΠΈΠΉ Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ
, Π° Π·Π°ΡΠ΅ΠΌ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΎΠ·Π΄Π°Π΅Ρ SVG-ΠΎΠ±ΡΠ΅ΠΊΡ Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ (ΡΠΎΡΠΌΠ°, ΡΠ²Π΅Ρ, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅) ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ (ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Ρ, ΡΠΎΠ±ΡΡΠΈΡ).
- ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ·Π»ΠΎΠ².Β ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π½Ρ Π²ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ, Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ DOM-ΡΠ·Π»Ρ, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈΠ»ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΆΠ΅Π»Π°Π½Π½ΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄. ΠΡΠ΅ ΡΠ°Π· ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½Π΅ΠΌ, ΡΡΠΎ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π±ΠΎΠ»ΡΡΠΈΡ Π΄Π°Π½Π½ΡΡ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Β«ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠ΅Β» ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, Π½ΠΎ ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌΠΈ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠ°ΠΌΠΈ ΡΠ°Π±ΠΎΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
Π Π΅Π·ΡΠΌΠ΅, ΠΈΠ»ΠΈ ΠΏΠΎΡΠ΅ΠΌΡ D3?
ΠΡ ΠΏΠΎΡΡΠ°ΡΠ°Π»ΠΈΡΡ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ, Π² ΡΠ΅ΠΌ ΡΠΎΡΡΠΎΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΡΠ°Π±ΠΎΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ D3 β ΠΈ Ρ ΠΎΡΠΈΠΌ Π΅ΡΠ΅ ΡΠ°Π· Π½Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ ΠΎ Π΅Π΅ Β«ΡΠΈΡΠΊΠ°Ρ Β»:
- Β«Π±Π΅ΡΡΠΎΠ²Π½Π°ΡΒ» ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΡ Ρ ΡΠ°ΠΌΡΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌΠΈ Π²ΡΠΎΠ΄Π΅ HTML5 ΠΈ CSS3;
- ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΉ, ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ DOM, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ Π»ΡΠ±ΡΠΌ ΡΠ·ΡΠΊΠΎΠΌ, Π½ΠΎ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ Π»ΡΠ±ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ (Π² ΡΠ°ΡΡΠ½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π°Π±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ ) Π² ΡΠ΄ΠΎΠ±Π½ΠΎΠΌ Π΄Π»Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠΎΡΠΌΠ°ΡΠ΅;
- ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ β ΡΡΠ½ΠΊΡΠΈΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π½Π΅ ΡΠΊΡΡΡΡ Π²Π½ΡΡΡΠΈ Π½Π΅ΠΊΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² (ΠΊΠ°ΠΊ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΠ»ΠΎ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π΅Π΅ ΠΏΡΠ΅Π΄ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΈΠΊΠ°ΠΌΠΈ), Π° ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠΈ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΊ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅;
- ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π΄Π°Π½Π½ΡΡ
β ΠΊΠ°ΠΊ Π² ΡΠ°ΠΌΠΊΠ°Ρ
ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΡΠ°ΠΊ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ° Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ.
Π ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΡΠ°ΡΡΡΡ ΠΌΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ ΡΠ°ΡΡΠΊΠ°Π· ΠΎΠ± ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ , ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ°ΠΌΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ, ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Ρ, ΠΏΡΠΈΠ·Π²Π°Π½Π½ΡΠ΅ ΠΏΠΎΠΌΠΎΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΡ ΠΏΠΎ Π±ΠΎΠ»ΡΡΠΈΠΌ Π΄Π°Π½Π½ΡΠΌ Π² ΡΠ»ΠΎΠΆΠ½ΠΎΠΉ, Π½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² d3.js Π² 10 ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² d3.js Π² 10 ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΡD3.js β ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΠΈ Π΄Π°Π½Π½ΡΡ . ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΡΡΡΠΎΠΈΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π»ΡΠ±ΠΎΠΉ ΡΠΈΠΏ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π΄Π°Π½Π½ΡΡ . Π ΡΡΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ 10 ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΈΠ»Π»ΡΡΡΡΠΈΡΡΡΡΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ d3, Π²Π΅Π΄ΡΡΠΈΠ΅ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠΉ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅ ΡΠ°ΡΡΠ΅ΡΠ½ΠΈΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΠΎΡ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΊΡΡΡ β ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠ΅ΡΡΡΡ Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° ΡΠ°Π±ΠΎΡΡ Ρ d3.js.
β ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅:
- HTML ΡΠ°ΡΡΠΈΡΡΠΎΠ²ΡΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ Π―Π·ΡΠΊ Π³ΠΈΠΏΠ΅ΡΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ . ΠΠΎ ΡΡΡΠΈ, ΡΡΠΎ ΡΠ·ΡΠΊ Π»ΡΠ±ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° . ΠΠ΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Mozilla ΠΈΠ»ΠΈ Safari, ΡΠΈΡΠ°ΡΡ ΡΠ°ΠΉΠ»Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΠΈ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΡΡ ΠΈΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
- Π ΡΠ°ΠΉΠ»Π΅ HTML ΡΠΎΠ·Π΄Π°ΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠΎΡΡΠ°Π²Π»ΡΡΡΠΈΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠ΅Π³Π°ΠΌΠΈ . ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΡΠΎΠ²Π½Ρ 1 ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ ΡΠ΅Π³ΠΎΠΌ
, Π°Π±Π·Π°Ρ Ρp ΡΠ΅Π³
, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅Π³ΠΎΠΌimg
ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. - ΠΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ d3.js Π±Π΅Π· Π±Π°Π·ΠΎΠ²ΡΡ Π·Π½Π°Π½ΠΈΠΉ html. ΠΠ° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄, ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΎΡ W3School ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ Ρ ΠΎΡΠΎΡΠ΅ΠΉ ΠΎΡΠΏΡΠ°Π²Π½ΠΎΠΉ ΡΠΎΡΠΊΠΎΠΉ.
β ΠΡΠΈΠΌΠ΅Ρ:
β ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅:
- Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΠΈ Π²ΡΡΠ°Π²ΡΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄ Π² Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΠ». ΠΠ°Π·ΠΎΠ²ΠΈΡΠ΅ Π΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
test.html
. ΠΡΠΊΡΠΎΠΉΡΠ΅ Π΅Π³ΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ²ΠΎΠΉ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ°ΠΉΡ!
β ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅:
- CSS ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΠ°ΡΠΊΠ°Π΄Π½Π°Ρ ΡΠ°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉ . ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΌ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ
ΡΠ°Π½Π΅Π΅. html - Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ html, ΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ d3.js Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π±Π΅Π· Π±Π°Π·ΠΎΠ²ΡΡ
Π·Π½Π°Π½ΠΈΠΉ ΠΏΠΎ
css
. ΠΡΠ»ΠΈ ΡΡΠΎ Π½ΠΎΠ²ΠΎΠ΅ Π΄Π»Ρ Π²Π°Ρ, ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ ΡΡΠΎΡ ΡΡΠ΅Π±Π½ΠΈΠΊ.
β ΠΡΠΈΠΌΠ΅Ρ:
β ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅:
- ΠΠ°ΠΉΡΠ΅ ΠΊΠ»Π°ΡΡ
inGreen
ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈΠ· ΠΏΡΠ½ΠΊΡΠΎΠ²p
- Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π½Π°
Π² css.
β ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅:
- SVG ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠ°Ρ Π²Π΅ΠΊΡΠΎΡΠ½Π°Ρ Π³ΡΠ°ΡΠΈΠΊΠ° . ΠΡΠΎ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠΎ ΡΡΡΠΈ, ΡΡΠΎ ΡΠ·ΡΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΈΠ³ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ΄Π°.
- ΠΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° d3.js Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π½Π°Π±ΠΎΡ ΠΈΠ·
svg
ΡΠΈΠ³ΡΡ, ΡΠΎΠ±ΡΠ°Π½Π½ΡΡ Π²ΠΌΠ΅ΡΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° ΡΠ°ΡΡΠ΅ΡΠ½ΠΈΡ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΊΡΡΠ³ΠΎΠ², ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. - ΠΡΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π³Π°Π»Π΅ΡΠ΅ΠΈ Π³ΡΠ°ΡΠΎΠ² d3 Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΎΡΠΌΡ, ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΠ΅ Svg.
β ΠΡΠΈΠΌΠ΅Ρ:
ΠΡΠΎ ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅
β ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅:
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΡ Π² Π²ΡΠ·ΠΎΠ²Π΅
svg
, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ ΠΎΠ½ΠΈ ΡΠΏΡΠ°Π²Π»ΡΡΡ. - ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΈΠ³ΡΡΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΏΠ°ΡΠ³Π°Π»ΠΊΡ Π½ΠΈΠΆΠ΅
ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°
β ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅:
- JavaScript β ΠΎΠ΄Π½Π° ΠΈΠ· ΡΡΠ΅Ρ
ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΡΠ΅ΠΌΠΈΡΠ½ΠΎΠΉ ΠΏΠ°ΡΡΠΈΠ½Ρ. ΠΠ½ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ
- D3.js β ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ . ΠΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ, Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
- Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ d3 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΠΎΠΊΡΡΠΆΠ½ΠΎΡΡΠΈ Ρ ΡΠ΅Π»ΡΡ ΠΊΠ»Π°ΡΡΠ°
ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π΅Π΅
ΡΠΈΡΠΈΠ½Ρ ΡΡΡΠΈΡ Π°
. - ΠΠΎΠΊΠ° Π½Π΅ ΠΎΡΠ΅Π½Ρ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΠ΅Ρ. ΠΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡ ΠΆΠ΅ ΠΏΡΠΎΡΠ΅ΡΡ, ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΡΠ΅Π½ ΠΊΡΡΠ³ΠΎΠ² ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΡΠ°ΡΡΠ΅ΡΠ½ΠΈΡ.
β ΠΡΠΈΠΌΠ΅Ρ:
ΠΡΠΎ ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅
β ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅:
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΠΊΡΡΠ³Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»Ρ
opacity
, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ ΠΎΡ 0 Π΄ΠΎ 1.
β ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅:
- ΠΡΠ°ΠΊ, Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΠΊΠΎΠ΄
Html
,Css
ΠΈJavascript
ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π² Π²ΠΈΠ΄Π΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. - ΠΡΠ»ΠΈ ΡΡΠΎ-ΡΠΎ Π½Π΅ ΡΠ°ΠΊ, Π²ΡΠ΄Π°ΡΡ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ .
- ΠΠ±ΡΡΠ½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠΊΡΡΡΡ ΠΊΠΎΠ½ΡΠΎΠ»Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡΡΠΈ -> ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
- ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ Π΄Π°Π½Π½ΡΠ΅ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ
Π² Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠ΄Π΅ javascript console. log("sometext") - ΠΡΠΎ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ, ΠΏΡΠΈΡΠ΅Π΄ΡΠΈΡ ΠΈΠ· Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΠΎ Π½Π΅ Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ ΠΈΠ· Π΄ΡΡΠ³ΠΈΡ ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ (Π ?). ΠΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ ΡΠΌΠ΅ΡΡ ΠΎΡΠ»Π°ΠΆΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠ΄.
β ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅:
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ d3.js Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
svg
. ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ - ΠΠ°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΡΡΠΎ Π²Π΅ΡΡ
Π½ΠΈΠΉ Π»Π΅Π²ΡΠΉ ΡΠ³ΠΎΠ» ΠΈΠΌΠ΅Π΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ
x=0
ΠΈy=0
. ΠΠΈΠΆΠ½ΠΈΠΉ Π»Π΅Π²ΡΠΉ ΡΠ³ΠΎΠ» ΠΈΠΌΠ΅Π΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡx=0
ΠΈy=height
.Ρ =ΡΠΈΡΠΈΠ½Π°
ΠΈΠ²ΡΡΠΎΡΠ°=0
β ΠΡΠΈΠΌΠ΅Ρ:
β ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅:
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΡΠ΅Ρ ΠΊΡΡΠ³ΠΎΠ², ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
β ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅:
- ΠΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°Π΅ΡΡΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ . ΠΠΎ Π²Ρ ΠΎΠ΄Π½ΠΎΠΉ Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ ΡΠ°Π²Π΅Π½ , Π° Π½Π΅ .
- Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π°ΠΌ Π½ΡΠΆΠ½Π° ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΈΡ ΡΠΈΡΠ»ΠΎΠ²Π°Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ Π² ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
. ΠΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠΊΠ°Π»Π°
- ΠΡΠ»ΠΈ ΠΌΠΎΠΈ Π΄Π°Π½Π½ΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
, Π° ΠΌΠΎΡ ΠΎΠ±Π»Π°ΡΡΡ
svg
ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. 0% β 0 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. 100% β 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. 50% β 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. - Π¨ΠΊΠ°Π»Π° Π²ΡΠ΅Π³Π΄Π° ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΎΠΌΠ΅Π½
- ΠΠ±ΡΡΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π± ΠΏΠΎ ΠΎΡΠΈ X Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ
x
. ΠΡΠ»ΠΈ Π²Ρ Π·Π°ΠΏΡΡΡΠΈΡΠ΅x(10)
, d3 Π²Π΅ΡΠ½Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² px Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
β ΠΡΠΈΠΌΠ΅Ρ:
β ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅:
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΌΠ΅Π½Π°
- ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠΊΠ°Π»Ρ Y, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΊΡΡΠ³ΠΈ Π²Π²Π΅ΡΡ ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·. ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ 0px Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠ²Π΅ΡΡ Ρ!
β ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅:
- D3 ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ½ΠΊΡΠΈΠΉ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΠΈ .
- ΠΡΠΈ ΠΎΡΠΈ Π²ΡΠ΅Π³Π΄Π° ΡΠΈΡΡΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
ΡΠΊΠ°Π»Π°
. ΠΡΠ° ΡΠΊΠ°Π»Π° ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ , Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΎΡΡ, ΠΈ ΠΊΠ°ΠΊΠΎΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ. - Π€ΡΠ½ΠΊΡΠΈΡ
axisBottom()
ΡΠΎΠ·Π΄Π°Π΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΎΡΡ Ρ Π΄Π΅Π»Π΅Π½ΠΈΡΠΌΠΈ ΠΈ ΠΌΠ΅ΡΠΊΠ°ΠΌΠΈ Π²Π½ΠΈΠ·Ρ.axisLeft()
Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅ Π΄Π»Ρ ΠΎΡΠΈ Y
β ΠΡΠΈΠΌΠ΅Ρ:
β ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅:
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ
Π΄ΠΎΠΌΠ΅Π½
ΠΈΠ΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
β ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅:
- ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠΈ ΡΠ°ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ . ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΡΡ X ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π° Π½ΠΈΠΆΠ½Π΅ΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅.
- ΠΡΠΎ ΡΡΠ°Π»ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄Ρ . ΠΠΎ ΡΡΡΠΈ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡ
.attr("transform", "translate(20,50)")
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΎΠΌ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²ΠΏΡΠ°Π²ΠΎ ΠΈ Π½Π° 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ·. - ΠΡΠ΅Π½Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½Π°Ρ ΡΡΡΠ°ΡΠ΅Π³ΠΈΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄Π° ΠΊ ΠΎΠ±ΡΠ΅ΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ
svg
, ΡΠΎΠ·Π΄Π°Π²Π°Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π²ΠΎΠΊΡΡΠ³ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, Π½Π΅ Π·Π°Π΄ΡΠΌΡΠ²Π°ΡΡΡ ΠΎΠ± ΡΡΠΎΠΌ Π² ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΊΠΎΠ΄Π°. ΠΠ°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎΡΡΠΈ Π²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ d3.js Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
β ΠΡΠΈΠΌΠ΅Ρ:
β ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅:
- ΠΠΎΠΈΠ³ΡΠ°ΠΉΡΠ΅ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΏΠΎΠ»Ρ, ΡΡΠΎΠ±Ρ Π΅ΡΠ΅ ΡΠ°Π· ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
- Π£Π΄Π°Π»ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ Π²
svg
ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ.
β ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅:
- ΠΡΠΈΠ²ΡΠ·ΠΊΠ° Π΄Π°Π½Π½ΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ svg β ΡΡΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ°Π³, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΠΌ Π½ΡΠΆΠ΅Π½ Π΄Π»Ρ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΡΠ°ΡΡΠ΅ΠΈΠ²Π°Π½ΠΈΡ. ΠΠ° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄, ΡΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΠΌΠ°Ρ ΡΠ»ΠΎΠΆΠ½Π°Ρ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΡΠ°ΡΡΡ .
- ΠΡΠ΅Π³Π΄Π° ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΈ ΡΠ΅ΠΌ ΠΆΠ΅ ΡΠ°Π³Π°ΠΌ:
-
svg
: Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠ±Π»Π°ΡΡΡ svg, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° -
.selectAll("Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ")
: Π²ΡΠ±ΡΠ°ΡΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΅ΡΠ΅ Π½Π΅ Π±ΡΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π½Ρ, Ρ Π·Π½Π°Ρ, ΡΡΠΎ ΡΡΠΎ ΡΡΡΠ°Π½Π½ΠΎ. -
.data(data)
: ΡΠΊΠ°ΠΆΠΈΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. -
.enter()
: Π·Π°ΠΏΡΡΡΠΈΡΡ ΡΠΈΠΊΠ» Π΄Π»Ρ Π΄Π°Π½Π½ΡΡ . Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ ΠΊdata[0]
,data[1]
ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. -
.append("circle")
: Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΡΠ΅ΡΠ°ΡΠΈΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΡΡΠ³. -
.attr("cx", function(d){ return x(d.x) })
: Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΡΡΠ³Π° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌx
. ΠΠ΄Π΅ΡΡd
Π±ΡΠ΄Π΅Ρdata[0]
, ΡΠΎΠ³Π΄Π°Π΄Π°Π½Π½ΡΠ΅[1]
ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ,d.x
β ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅x
, Π°x(d.x)
β ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ , Π½Π°ΠΉΠ΄Π΅Π½Π½Π°Ρ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΌΠ°ΡΡΡΠ°Π±Ρx
.
β ΠΡΠΈΠΌΠ΅Ρ:
β ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅:
ΠΠ΅ΡΠΎΡΡΠ½ΠΎ, ΡΡΠΎ ΡΠ°ΠΌΠ°Ρ ΡΠ»ΠΎΠΆΠ½Π°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ Π² d3.js. Π ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎΡΡΠΈ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π³ΡΠ°ΡΠΈΠΊΠ΅. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΡΠΎ ΡΠΈΠ»Π° d3: ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° Π΄Π°Π½Π½ΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎΠΈΡ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π½Π° ΡΡΡ ΡΠ΅ΠΌΡ. ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ d3 ΠΈ Dashing d3.js.
ΠΡΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΎΡΠ΅Π½Ρ-ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΊΠΎΠ΅ Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² d3.js. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΎΠ½ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΠΎΠ½ΡΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΏΠΎΡΡΠΈ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π³ΠΎΡΠΎΠ²Ρ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ Π³Π°Π»Π΅ΡΠ΅Ρ. ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΠ°ΡΡ.
ΠΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ | ΠΠ°Π»Π΅ΡΠ΅Ρ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² D3
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° Ρ ΠΎΠ±Π»Π°ΡΡΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3.js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΡΠ° ΠΊΠΎΠ΄.
ΠΠ²ΡΠΌΠ΅ΡΠ½Π°Ρ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°
Π‘Π³ΡΡΠΏΠΏΠΈΡΡΠΉΡΠ΅ Π΄Π²ΡΠΌΠ΅ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ Π² ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠ΅ ΡΡΠ΅ΠΉΠΊΠΈ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ
ΠΏΠ»Π°Π³ΠΈΠ½ d3-rectbin
.
ΠΠΎΠ½ΡΡΡΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ
ΠΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½ΠΎΠ² ΠΊΠΎΠ½ΡΡΡΠ°, Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΌΠ°ΡΡΠΈΡΡΡΡΠΈΡ ΠΊΠ²Π°Π΄ΡΠ°ΡΠΎΠ²
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ ΠΊΠΎΠ»ΡΡΠ΅Π²Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3.js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΡΠ° ΠΊΠΎΠ΄.
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΠΎΠΉ
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ ΡΠ΅ΠΏΠ»ΠΎΠ²Π°Ρ ΠΊΠ°ΡΡΠ°, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3.js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ ΠΊ ΡΠ΅ΠΏΠ»ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠ΅
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠΎΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΉΠΊΠΈ ΠΈ Π»ΡΠ±ΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅ΠΊΡΡ.
ΠΠΎΡΠΎΠ²Π°Ρ ΡΠ΅ΠΏΠ»ΠΎΠ²Π°Ρ ΠΊΠ°ΡΡΠ°
ΠΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½Π°Ρ ΡΠ΅ΠΏΠ»ΠΎΠ²Π°Ρ ΠΊΠ°ΡΡΠ°, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΡΡ ΠΎΡΡ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΡΠ°Π½ΡΠ°Π·ΠΈΠΈ ΡΠ²Π΅ΡΠΎΠ²Π°Ρ ΠΏΠ°Π»ΠΈΡΡΠ°, Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ°Ρ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅
ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΡΠ²Π΅ΡΠΆΠ΅Π½Π½ΡΡ
ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Π°Ρ ΡΠ΅ΠΏΠ»ΠΎΠ²Π°Ρ ΠΊΠ°ΡΡΠ° Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π² Π³ΡΡΠΏΠΏΠΎΠ²ΠΎΠΌ Π·Π°ΠΊΠ°Π·Π΅
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° Ρ ΠΎΠ±Π»Π°ΡΡΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3. js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΡΠ° ΠΊΠΎΠ΄.
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3.js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.
Π¦Π²Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Π΄Π΅ΡΠ°Π»ΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΡΠΎΡΡΠΎΠΉ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡ if-else
, ΡΡΠΎΠ±Ρ ΡΠ°ΡΠΊΡΠ°ΡΠΈΡΡ ΡΠ°ΡΡΡ
Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°.
Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΊΠ°ΠΆΠΈΡΠ΅, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π°Π½Π½ΠΎΡΠ°ΡΠΈΡ Π² Π²ΠΈΠ΄Π΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΡ.
ΠΠ²ΠΎΠΉΠ½Π°Ρ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°
ΠΠ²ΠΎΠΉΠ½Π°Ρ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΄ΠΎΠ±Π½Π° Π΄Π»Ρ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ 2 ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅.
ΠΡΠΈΡΡΠ½ΠΎ Π²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΡΠ½ΠΊΡΠΈΡ filter()
.
ΠΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΊΠΎΡΠ·ΠΈΠ½Ρ
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΊΠΎΡΠ·ΠΈΠ½Ρ. Π₯ΠΎΡΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ Π½Π°ΡΡΠΈΡΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅Ρ ΠΎΡΡ.
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ
ΠΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΏΠΎΡΠΎΠ³Π° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π°ΡΠ°. ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ»ΡΡΡΠΈΡΡ Ρ ΠΎΡΡ.
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3.js.
ΠΡΠΎΡΡΠΎ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΎΠ΄Π½Ρ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ
Π·Π° ΠΎΠ΄ΠΈΠ½ ΠΊΡΡΠ³
HTML Π²ΠΎ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ΅
Π£Π·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π½Π°ΡΡΡΠΎΠΈΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ: Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ Π½Π΅ΠΉ Π»ΡΠ±ΠΎΠΉ HTML-ΠΊΠΎΠ΄!
ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠ°Ρ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°, ΡΠ²ΡΠ·Π°Π½Π½Π°Ρ Ρ Π΄Π°Π½Π½ΡΠΌΠΈ
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ, ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠΎΡΠΊΠ° Π΄Π°Π½Π½ΡΡ
ΠΠ°ΠΊΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅
ΠΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π·Π°ΠΊΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ Π½Π° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΡΠΎΡΠ΅ΠΊ.
Π’ΠΈΠΏΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ HTML
HTML ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΈΠΏΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ: Π²ΠΎΡ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈΡ Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ.
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3. js.
ΠΠ½ ΠΏΡΠΎΡΡΠΎ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΡΠ΅Ρ
Π°ΡΡΠΈΠ±ΡΡ ΡΠΈΡΠΈΠ½Ρ div Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ d3.js, ΡΠΎΡ
ΡΠ°Π½ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΊΠΎΠ΄.
ΠΡΠΎΠΏΡΡΡΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ²
ΠΡΠΏΠΎΠ»Π½ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄ΡΡΠ³ΠΈΠΌ. ΠΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ ΠΊΠ°ΠΊ ΡΠ²Π΅Ρ ΠΈ ΡΠΈΡΠΈΠ½Π°.
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ Π»ΠΈΠ½Π΅ΠΉΠ½Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3.js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΡΠ° ΠΊΠΎΠ΄.
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π³ΡΡΠΏΠΏ
Π£Π·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π³ΡΡΠΏΠΏ Π½Π° Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΌ Π³ΡΠ°ΡΠΈΠΊΠ΅. ΠΡΠΎ ΡΡΠ΅Π±ΡΠ΅Ρ ΡΠ³ΡΡΠΏΠΏΠΈΡΡΠΉΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ d3.nest.
ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρ Π²Ρ ΠΎΠ΄Π½ΡΠΌΠΈ Π΄Π°Π½Π½ΡΠΌΠΈ
ΠΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΡΡ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡΡ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ
ΠΊ Π΄ΡΡΠ³ΠΎΠΌΡ
ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄. ΠΠΎΠ»Π΅Π·Π½ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ update()
.
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ Π»Π΅Π΄Π΅Π½ΡΠΎΠ²Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3. js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΡΠ° ΠΊΠΎΠ΄.
ΠΠΎΠ²Π΅ΡΠ½ΠΈΡΠ΅ Π΅Π³ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ
ΠΡΠ°ΡΠΈΠΊ Ρ Π»Π΅Π΄Π΅Π½ΡΠ°ΠΌΠΈ ΡΠ°ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π»ΡΡΡΠ΅ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ: ΡΡΠΎ ΠΎΠ±Π»Π΅Π³ΡΠ°Π΅Ρ Π½Π°Π½Π΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΈΠΊΠ΅ΡΠΊΠΈ ΡΠΈΡΠ°ΡΡ. ΠΠ°ΠΉΠ΄ΠΈΡΠ΅, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ!
ΠΡΡΠΏΠΏΡ Π·Π°ΠΊΠ°Π·ΠΎΠ²
Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ ΡΠ²ΠΎΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎΠΉ: ΠΏΠ΅ΡΠ΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΡΡΠ΅ Π³ΡΡΠΏΠΏΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π΅ΡΠ΅ 3 ΡΡΡΠΎΠΊΠΈ ΠΊΠΎΠ΄.
ΠΠ»ΠΈΠ²Π»Π΅Π½Π΄ ΡΠΎΡΠ΅ΡΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ
Π Π°Π·Π½ΠΎΠ²ΠΈΠ΄Π½ΠΎΡΡΡ Π»Π΅Π΄Π΅Π½ΡΠ°, Π³Π΄Π΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π΄ΠΎΡΡΡΠΏΠ½Ρ 2 ΡΡΠ΄Π° Π΄Π°Π½Π½ΡΡ Π³ΡΡΠΏΠΏΠ°.
ΠΠ°Π·ΠΎΠ²Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅
Π’ΠΎΡΠΊΠΈ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ x=0 ΠΈ Π·Π°ΡΠ΅ΠΌ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΡΠ²ΠΎΠ΅ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ΅ΡΠ΅Π²ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3.js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΡΠ° ΠΊΠΎΠ΄.
Π€ΠΎΡΠΌΠ°Ρ Π²Π²ΠΎΠ΄Π°: JSON
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° ΠΏΠ°ΡΠ°Π»Π»Π΅Π»ΡΠ½ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3. js. Π₯ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΊΠΎΠ΄.
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ ΠΊΡΡΠ³ΠΎΠ²Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3.js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊ Ρ ΡΠ΅Π±ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3.js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΡΠ° ΠΊΠΎΠ΄.
ΠΡΠ±ΠΎΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΡΡΠΎΠΊ Π΄Π»Ρ Π·Π°Π½ΡΡΠΈΠΉ ΡΠΏΠΎΡΡΠΎΠΌ
ΠΡΠ°ΡΠΈΠ²ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ Π»ΠΈΠ½ΠΈΠΈ Ρ ΡΠ΅Π±ΡΠ° ΠΠ½Π΄ΡΡ ΠΠΎΠ»Π»ΠΈΠΊΠΈ, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠ°ΡΡΠ½ΠΈΠΊΠΎΠ² Π΄Π»Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π²ΠΈΠ΄ΠΎΠ² ΡΠΏΠΎΡΡΠ° Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π½Ρ.
ΠΠΈΠ½ΠΈΡ Ρ ΡΠ΅Π±ΡΠ° ΠΈΠ»ΠΈ ΡΡΠ°ΡΡΠΎΠΊ Π Π°Π΄ΠΎΡΡΠΈ
Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΠ°ΠΉΠΊΠ° ΠΠΎΡΡΠΎΠΊΠ°.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ d3.v5. ΡΡΠΎ Π½Π°Π±Π»ΡΠ΄Π°Π΅ΠΌΡΠΉ Π½ΠΎΡΡΠ±ΡΠΊΠΈ -> Π΅ΡΠ΅ Π»ΡΡΡΠ΅.
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° Π‘Π°Π½ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3.js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΡΠ° ΠΊΠΎΠ΄.
Π€ΠΎΡΠΌΠ°Ρ Π²Ρ ΠΎΠ΄Π½ΡΡ Π΄Π°Π½Π½ΡΡ : Json
ΠΠΎΡΠΎΠΊ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π° ΡΠ½Π΅ΡΠ³ΠΈΠΈ
ΠΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΈ ΠΏΠΎΡΡΠ΅Π±Π»Π΅Π½ΠΈΠ΅ ΡΠ½Π΅ΡΠ³ΠΈΠΈ Π² ΠΠ΅Π»ΠΈΠΊΠΎΠ±ΡΠΈΡΠ°Π½ΠΈΠΈ Π² 2050 Π³. : ΠΏΠΎΡΡΠ°Π²ΠΊΠΈ ΡΠ½Π΅ΡΠ³ΠΈΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π½Π° ΡΠ»Π΅Π²Π°, Π° ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΡΠΏΡΠ°Π²Π°
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° ΡΠ°ΡΡΠ΅ΡΠ½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3.js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΡΠ° ΠΊΠΎΠ΄.
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΠ΄ΠΎΠΌ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΠΎΡΠΊΠΎΠΉ Π΄Π°Π½Π½ΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅ ΠΊΡΡΡΠΎΡΠ°
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° ΡΠ°ΡΡΠ΅ΡΠ½ΠΈΡ: ΠΊΠ°ΠΆΠ΄Π°Ρ Π³ΡΡΠΏΠΏΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉ ΡΠ²Π΅Ρ.
ΠΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ Π³ΡΡΠΏΠΏΡ
ΠΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ Π³ΡΡΠΏΠΏΡ ΡΠΎΡΠ΅ΠΊ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΅Π΅ ΡΠ»Π΅Π½ΠΎΠ²
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π·Π°ΠΏΡΡΠΊΠ΅
Π‘Π΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠΎΡΠΊΠΈ ΠΏΠΎΡΠ²Π»ΡΠ»ΠΈΡΡ ΠΎΠ΄Π½Π° Π·Π° Π΄ΡΡΠ³ΠΎΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π΄ΡΡΠ³ΡΡ Π·Π°Π΄Π΅ΡΠΆΠΊΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΡΠΉ.
ΠΠΈΡΡΡ
Π£Π·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΊΠΈΡΡΡ ΠΈ ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΎΡΠΊΠΈ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΊΠΈΡΡΠΈ
ΠΠ±Π½ΠΎΠ²ΠΈΡΡ ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΡΠΈ X
ΠΠ½ΠΎΠΏΠΊΠ° ΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π²Π΅ΡΡ Π½ΠΈΠΌ ΠΏΡΠ΅Π΄Π΅Π»ΠΎΠΌ ΠΎΡΠΈ X ΠΈ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Π΄ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ Π»ΠΈΠΌΠΈΡΠ°
ΠΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ ΡΠ°Π΄ΠΈΠΎΠ»ΠΎΠΊΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΊΠ°ΡΡΡ
ΠΠ»ΡΠ²Π°ΡΠΎ ΠΡΠ΅ΠΉΠ²Ρ Π±ΡΠ» ΠΏΠ΅ΡΠ²ΡΠΌ, ΠΊΡΠΎ ΠΏΠΎΡΡΡΠΎΠΈΠ» ΡΡΠ½ΠΊΡΠΈΡ Π΄Π»Ρ ΡΠ°Π΄Π°ΡΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°.
ΠΠ°ΠΆΠΌΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΡ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ github ΠΈ Π½Π°ΠΉΡΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
Π Π΅Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ
ΠΠ°Π΄ΠΈ ΠΡΠ΅ΠΌΠ΅Ρ ΠΏΠ΅ΡΠ΅ΡΠΌΠΎΡΡΠ΅Π»Π° ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΡΠΌ ΠΊΠΎΠ΄ ΠΈ Π΄ΡΡΠ³ΠΎΠΉ Π²ΠΈΠ΄.
Basic ΠΈΠ· Π΄Π»ΠΈΠ½Π½ΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π°
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° Ρ ΠΎΠ±Π»Π°ΡΡΡΠΌΠΈ Ρ Π½Π°ΠΊΠΎΠΏΠ»Π΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3.js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΊΠΎΠ΄.
Π€ΠΎΡΠΌΠ°Ρ Π²Π²ΠΎΠ΄Π°: Π΄Π»ΠΈΠ½Π½ΡΠΉ (Π°ΠΊΠΊΡΡΠ°ΡΠ½ΡΠΉ)
Basic from wide input
ΠΡΠ΅ ΠΎΠ΄Π½Π° Π±Π°Π·ΠΎΠ²Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° Ρ Π½Π°ΠΊΠΎΠΏΠ»Π΅Π½ΠΈΠ΅ΠΌ ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ, ΡΠΎΠ·Π΄Π°Π½Π½Π°Ρ Π² d3.js.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π·Π΄Π΅ΡΡ ΡΠΎΡΠΌΠ°Ρ Π²Π²ΠΎΠ΄Π° ΡΠΈΡΠΎΠΊΠΈΠΉ (Π½Π΅Π°ΠΊΠΊΡΡΠ°ΡΠ½ΡΠΉ): ΠΊΠ°ΠΆΠ΄Π°Ρ Π³ΡΡΠΏΠΏΠ° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° ββΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΡΡΠΎΠ»Π±ΡΠ΅.
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΠΎΡΠΎΠΊΠΎΠ²ΡΠΉ Π³ΡΠ°Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3.js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΡΠ° ΠΊΠΎΠ΄.
Π€ΠΎΡΠΌΠ°Ρ Π²Π²ΠΎΠ΄Π°: ΡΠΈΡΠΎΠΊΠΈΠΉ (Π½Π΅Π°ΠΊΠΊΡΡΠ°ΡΠ½ΡΠΉ)
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ Π΄ΡΠ΅Π²ΠΎΠ²ΠΈΠ΄Π½Π°Ρ ΠΊΠ°ΡΡΠ°, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3. js. Π’ΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΡΠΎΠ²Π΅Π½Ρ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½.
ΠΠ²ΠΎΠ΄: ΡΠΎΡΠΌΠ°Ρ csv
Π‘ΠΊΡΠΈΠΏΠΈΡΠ½Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°
ΠΠ΄Π΅ΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ Π·Π΅ΡΠΊΠ°Π»ΡΠ½ΠΎΠΉ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Π² ΡΡΠΆΠ΅Ρ Π΄Π»Ρ ΡΠΊΡΠΈΠΏΠΊΠΈ.
ΠΠ°ΡΠΈΠ°Π½Ρ: Π±Π΅Π· ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΡ
ΠΠ°ΡΠΈΠ°Π½Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ Π³ΡΠ°ΡΠΈΠΊΠ° Π±Π΅Π· ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΡ
ΠΠ°ΡΠΈΠ°ΡΠΈΡ: ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ°Π³ΠΈ
ΠΠ΄Π΅ΡΡ ΡΡΠ½ΠΊΡΠΈΡ curveStep ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠΏΠΎΠ»ΡΡΠΈΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ: ΠΎΠ½Π° ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ ΡΡΡΡΠΊΡΡΡΠ° Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ.
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊ Π΄Π»Ρ ΡΠΊΡΠΈΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π² d3.js. Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΡΠ° ΠΊΠΎΠ΄.
Π‘ΠΊΡΠΈΠΏΠΊΠ° Ρ Π΄ΡΠΎΠΆΠ°Π½ΠΈΠ΅ΠΌ
ΠΠΎΠ»ΠΎΠ²ΠΈΠ½Π° ΡΠΊΡΠΈΠΏΠΊΠΈ ΡΠ΄Π°Π»Π΅Π½Π°, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ Π½Π°Π±Π»ΡΠ΄Π΅Π½ΠΈΡ. ΠΡΠΎΠΆΠ°Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΡΠΈΡ ΡΠΎΡΠ΅ΠΊ.
ΠΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° Π΄Π»Ρ ΡΠΊΡΠΈΠΏΠΊΠΈ
ΠΡΠ°ΡΠΊΠΈΠΉ ΠΊΠΎΠ΄ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π΄Π»Ρ ΡΠΊΡΠΈΠΏΠΊΠΈ ΠΈΠ· ΡΡΠ΅Ρ ΡΠΈΠΊΡΠΈΠ²Π½ΡΡ ΠΌΠ°ΡΡΠΈΠ²ΠΎΠ².