ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² D3 / ΠΠ°Π±ΠΎΡΠ°ΡΠΎΡΠΈΡ Π΄Π°Π½Π½ΡΡ corporate blog / Habr
D3.js (ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ D3) ΡΡΠΎ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ . ΠΠ½Π° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ΄ΠΎΠ±Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈΡΡ Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΌΠ°ΡΡΠΈΠ²ΠΎΠ² Π΄Π°Π½Π½ΡΡ ΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ DOM-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠ° Π·Π°ΠΌΠ΅ΡΠΊΠ° ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, ΠΎΠ½Π° ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡΡ Π΄Π»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΠ² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ ΠΏΠΎΠ³ΡΡΠΆΠ΅Π½ΠΈΡ Π² Π΅Ρ Π»ΠΎΠ³ΠΈΠΊΡ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ.ΠΠ»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΡΡΠ°ΡΡΠΈ ΠΏΡΠΈΠ³ΠΎΠ΄ΡΡΡΡ Π·Π½Π°Π½ΠΈΡ JS, HTML ΠΈ CSS.
Π’Π΅ΠΊΡΡΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ (fluent interface)
D3 ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠΉ fluent interface. ΠΡΠΈ ΡΡΠ΅Π½ΠΈΠΈ ΠΊΠΎΠ΄Π° ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ ΡΠ΅ΠΏΠΎΡΠΊΠ° ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ². ΠΠ°ΠΆΠ΄ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΠΎΠ±ΡΠ΅ΠΊΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π²Π΅ΡΠ½ΡΠ» ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ ΠΌΠ΅ΡΠΎΠ΄. Π§ΡΠΎΠ±Ρ ΠΊΠΎΠ΄ Π±ΡΠ»ΠΎ ΡΠ΄ΠΎΠ±Π½ΠΎ ΡΠΈΡΠ°ΡΡ, ΠΊΠ°ΠΆΠ΄ΡΠΉ Π²ΡΠ·ΠΎΠ² ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ ΡΡΡΠΎΡΠΊΠ΅:
d3.select('body') // Π²ΡΠ±ΠΎΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ body
.append('svg') // Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π² body svg-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°
.append('text') // Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π² svg-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° text
.text('Click somewhere, please...') // ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ text
.attr('x', 50) // Π·Π°Π΄Π°Π½ΠΈΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° text
.attr('y', 50)
.style("fill","firebrick") // Π·Π°Π»ΠΈΠ²ΠΊΠ° ΡΠ΅ΠΊΡΡΠ° ΡΠ²Π΅ΡΠΎΠΌ
ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π° jsfiddle.net
ΠΡΠ±ΠΎΡΠΊΠ°
Π D3, ΠΊΠ°ΠΊ ΠΈ Π² Π΄ΡΡΠ³ΠΈΡ JS-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°Ρ , ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΡ Ρ DOM-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΈΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΡΠ±ΠΎΡΠΊΠΈ β ΠΎΠ±ΡΡΡΠΊΠΈ Π½Π°Π±ΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ½Π° Π΄Π°ΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄Π»Ρ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π²ΡΠ±ΡΠ°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΠ±ΠΎΡΠΊΠ° (selection) Π² D3 ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² d3.select() ΠΈ d3.selectAll(). ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΡΠ±ΠΎΡΠΊΠΈ D3 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ querySelector/querySelectorAll ΠΈΠ»ΠΈ Sizzle, Π΅ΡΠ»ΠΈ ΠΎΠ½ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΡΠ½ ΠΊ ΡΡΡΠ°Π½ΠΈΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ jQuery).
d3.select('span') // Π²ΡΠ±ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ span Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅
d3.selectAll('span') // Π²ΡΠ±ΠΎΡ Π²ΡΠ΅Ρ
span Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅
ΠΠΎΠ»ΡΡΠ΅Π½Π½ΡΡ Π²ΡΠ±ΠΎΡΠΊΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΡΠ±ΠΎΡΠΊΠΈ ΠΈΠ· ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² (subselection).
<span>Π±ΡΠ΄Π΅Ρ Π·Π΅Π»Π΅Π½ΡΠΌ</span>
<p>
<span>Π±ΡΠ΄Π΅Ρ ΠΊΡΠ°ΡΠ½ΡΠΌ</span>
<span>ΡΡΠΈ</span>
<span>Π±ΡΠ΄ΡΡ</span>
<span>ΠΆΡΠ»ΡΡΠΌΠΈ</span>
</p>
<p>ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΡΡΡΠ½ΡΠΌ</p>
d3.select('span') // Π²ΡΠ±ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ span Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ .style('color', 'darkgreen') // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ²Π΅ΡΠ° d3.selectAll('p') // Π²ΡΠ±ΠΎΡ Π²ΡΠ΅Ρ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠΎΠ² .selectAll('span') // Π²ΡΠ±ΠΎΡ Π²ΡΠ΅Ρ span Π² ΡΡΠΈΡ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠ°Ρ . .style('color', 'goldenrod') // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ²Π΅ΡΠ° d3.select('p') // Π²ΡΠ±ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠ° Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ .select('span') // Π²ΡΠ±ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ span Π² ΡΡΠΎΠΌ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠ΅ .style('color', 'firebrick') // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ²Π΅ΡΠ°
ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π° jsfiddle.net
ΠΡΠ΅Π³Π΄Π° ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, Ρ ΠΊΠ°ΠΊΠΎΠΉ Π²ΡΠ±ΠΎΡΠΊΠΎΠΉ Π²Ρ ΡΠ΅ΠΉΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅. Π Π°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ½Π½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ D3: Π²ΡΠ·ΠΎΠ² Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅-ΠΏΠΎΡΠΎΠΌΠΊΠ΅ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΈ ΠΏΠΎΠΏΡΡΠΊΠ° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² Π½Π΅ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ (ΡΠ΄Π°Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π΅ΡΡ Π½Π΅ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ) ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ Π½Π°Π΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ (selection.style(name[, value])), Π΄Π°Π»ΡΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ.
ΠΡΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈ ΡΡΠ½ΠΊΡΠΎΡΡ
ΠΠ»Ρ ΡΠ°Π±ΠΎΡΡ Ρ DOM D3 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡ ΠΎΠΆΠΈΠΉ API Π΄Π»Ρ Π²ΡΠ΅Ρ Π²ΡΠ·ΠΎΠ²ΠΎΠ². ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±Π΅ΡΡΠΌ Π΅Π³ΠΎ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ: Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠ° Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ Π²ΡΠ±ΠΎΡΠΎΠΊ:
- selection.classed(name, value) Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΈΠ»ΠΈ ΡΠ΄Π°Π»ΡΠ΅Ρ ΠΊΠ»Π°ΡΡ name Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π±ΡΠ»Π΅Π²ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ value.
- selection.on(event, callback) ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠΈΡ event (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Β«clickΒ») ΠΈ ΡΡΠ½ΠΊΡΠΈΡ-ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ callback. Π€ΡΠ½ΠΊΡΠΈΠΈ-ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ Ρ ΡΠ΅ΠΊΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π² this, Π° ΡΠ°ΠΊΠΆΠ΅ data ΠΈ index Π² Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ°Ρ . Π‘ΠΎΠ±ΡΡΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π² ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ d3.event. ΠΠΎΠ²ΡΠΎΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π·Π°ΠΌΠ΅Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ.
var pressed = false
var button = d3.select('button') // Π²ΡΠ±ΠΎΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ
.on('click', function (data, index) { // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π½Π°ΠΆΠ°ΡΠΈΡ ΠΌΡΡΠΈ
button.classed('pressed', pressed = !pressed) // Π² ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ΅ ΠΌΠ΅Π½ΡΠ΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΠΈ Π²ΡΡΠΈΡΠ»ΡΠ΅ΠΌ ΠΊΠ»Π°ΡΡ
})
ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π° jsfiddle.net
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΌΡ ΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΡΠΎΡ ΡΠ°Π½ΡΠ½Π½ΠΎΠΉ Π² ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ button Π²ΡΠ±ΠΎΡΠΊΠΎΠΉ: Π²ΡΠ·ΠΎΠ²Ρ on (Π° ΡΠ°ΠΊ ΠΆΠ΅ classed, attr, style, property, html, text) Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ Π²ΡΠ±ΠΎΡΠΊΡ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΎΠ½ΠΈ Π²ΡΠ·Π²Π°Π½Ρ, ΡΡΠΎ ΡΠΈΠΏΠΈΡΠ½ΠΎ Π΄Π»Ρ Β«ΡΠ΅ΠΊΡΡΠΈΡ Β» ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ².
D3 ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΠΏΠ΅ΡΠ΅Π΄Π°Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡ
ΠΎΠΆΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΡΠ»ΠΈ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ [value], ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ ΡΠ΅ΡΡ ΠΈΠ΄ΡΡ ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ:
- ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠ΄Π°Π΄ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠ²Π»ΡΡΡΠ΅Π΅ΡΡ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ, ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ·Π²Π°Π½ΠΎ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ data, index (ΡΠΌ. Π½ΠΈΠΆΠ΅), Π° ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠΎΠΌ (ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠΌ this) Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, DOM-ΡΠ·Π΅Π».
- ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠ΄Π°Π΄ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π½Π΅ ΡΠ²Π»ΡΡΡΠ΅Π΅ΡΡ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ, ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΡΠ½ΡΡΠΎ Π² Β«ΡΡΠ½ΠΊΡΠΎΡΒ» (ΡΡΠ½ΠΊΡΠΈΡ, Π²ΡΠ΅Π³Π΄Π° Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅)
- ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ ΠΏΠΎΠ΄Π°Π΄ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΡΠ½ΠΊΡΠΈΡ ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠ°ΠΊ getter ΠΈ Π²Π΅ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΈΠ΄ΡΡ ΡΠ΅ΡΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, selection.style(βcolorβ) Π²Π΅ΡΠ½ΡΡ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ°, Π΅ΡΠ»ΠΈ ΠΎΠ½ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°).
Π ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ Π½ΡΠ°Π½ΡΠ΅ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΡΡΠΎΠΈΡΠ΅ ΡΠ΅ΠΏΠΎΡΠΊΡ Π²ΡΠ·ΠΎΠ²ΠΎΠ² (ΡΠ°ΠΊΠΎΠΉ getter ΠΎΠ±ΡΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΠ΅ΠΏΠΎΡΠΊΠΈ).
ΠΠ°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² Π²ΡΠ±ΠΎΡΠΊΠ΅, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ D3 ΠΎ Π½ΠΈΡ Β«Π·Π°Π±ΡΠ²Π°Π΅ΡΒ». ΠΠ½ΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² Π½Π°Π±ΠΎΡΠ΅ Π΄Π°Π½Π½ΡΡ ΠΈΠ»ΠΈ ΡΠΎΠ±ΡΡΠΈΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ Π½Π΅ Π·Π°ΡΡΠ°Π²ΡΡ D3 Β«ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ Π²ΡΡΠΈΡΠ»ΠΈΡΡΒ» Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½ΡΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ Π²ΡΡΠ΅ ΡΠ΄Π΅Π»Π°Π»ΠΈ Ρ classed.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π°ΡΠ³ΡΠΌΠ΅Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ (data ΠΈ index). ΠΠ½ΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: index β Π½ΠΎΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² Π²ΡΠ±ΠΎΡΠΊΠ΅, Π° data β Π·Π°Π΄Π°Π½Π½ΡΠΉ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π°Π½Π½ΡΡ . ΠΡΠΈΡΡΡΡΡΠ²ΠΈΠ΅ ΡΡΠΈΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ, Π²ΡΠ·ΡΠ²Π°Π΅ΠΌΠΎΠΉ Π½Π° Π²ΡΠ±ΠΎΡΠΊΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡΠΈΡ ΠΊΠΎΠ½ΡΡΠ°ΠΊΡΠΎΠ² Π² D3. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΈΡΠ°ΡΡ Π»Π°ΠΊΠΎΠ½ΠΈΡΠ½ΡΠΉ ΠΊΠΎΠ΄, Π²ΡΡΠΈΡΠ»ΡΡΡΠΈΠΉ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΄Π°Π½Π½ΡΡ .
Π’ΠΈΠΏΠΈΡΠ½Π°Ρ ΡΠ°Π±ΠΎΡΠ° Ρ Π²ΡΠ±ΠΎΡΠΊΠΎΠΉ
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡΠ΅ΠΌ ΡΠ°Π±ΠΎΡΡ Ρ DOM-ΡΠ·Π»Π°ΠΌΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΡΠ΅ΡΠ΅Π· Π²ΡΠ±ΠΎΡΠΊΡ:
var svg = d3.select('body').append('svg') svg .append('text') .text('click somewhere') .attr('x', 50) .attr('y', 50) var events = [] svg.on('click', function () { events.push(d3.event) if (events.length > 5) events.shift() var circles = svg.selectAll('circle') .data(events, function (e) { return e.timeStamp }) .attr('fill', 'gray') circles .enter() .append('circle') .attr('cx', function (d) { return d.x || d.pageX }) .attr('cy', function (d) { return d.y || d.pageY }) .attr('fill', 'red') .attr('r', 10) circles .exit() .remove() })
ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π° jsfiddle.net
- ΠΠ΅ΡΠΎΠ΄Ρ selection.html() ΠΈ selection.text() Π·Π°Π΄Π°ΡΡ ΠΈΠ»ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π²ΠΈΠ΄Π΅ HTML ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡΠ°.
- ΠΠ΅ΡΠΎΠ΄Ρ selection.style(), selection.attr() ΠΈ selection.property() Π·Π°Π΄Π°ΡΡ ΠΈΠ»ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΅Π³ΠΎ Π°ΡΡΡΠΈΠ±ΡΡΡ ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°. Π§Π°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ style ΠΈ attr, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΡΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ² Π½ΠΎΠ²ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
- ΠΠ΅ΡΠΎΠ΄ selection.remove() ΡΠ΄Π°Π»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅ΠΊΡΡΠ΅ΠΉ Π²ΡΠ±ΠΎΡΠΊΠΈ.
- selection.append() Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΏΠΎΡΠΎΠΌΠΊΠ° ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅ΠΊΡΡΠ΅ΠΉ Π²ΡΠ±ΠΎΡΠΊΠΈ.
- ΠΠ΅ΡΠ΅Π΄Π°Π½Π½ΡΠ΅ Π² selection.data() Π΄Π°Π½Π½ΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΡΡΡΡΡ Π² ΠΏΠΎΠ»Π΅ __data__ DOM-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΡΠΈ Π²ΡΠ·ΠΎΠ²Π΅ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Π½Π° Π²ΡΠ±ΠΎΡΠΊΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΈΡ ΠΈΠ·Π²Π»Π΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- ΠΠΎΠ»ΡΡΠΈΡΡ ΠΈΠ»ΠΈ Π·Π°ΠΏΠΈΡΠ°ΡΡ Π΄Π°Π½Π½ΡΠ΅ Π² ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ selection.datum().
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π°
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΎΡΠΎΠ±ΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΡΠΎΠΈΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π½Π° ΠΌΠ΅ΡΠΎΠ΄ data(). Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΠΎΠ½ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΠ±ΠΎΡΠΊΡ, Ρ ΡΠ°Π½ΡΡΡΡ ΠΏΠΎΠΌΠΈΠΌΠΎ ΡΠΏΠΈΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ Π΄Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ. Π ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄Π΅ ΡΡΠ°ΡΡΠΈ Thinking with Joins ΠΌΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π°Ρ enter() ΠΈ exit() ΠΊΠΎΡΠΎΡΡΠ΅ Π΅ΡΡΡ Ρ ΡΠ°ΠΊΠΎΠΉ Π²ΡΠ±ΠΎΡΠΊΠΈ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ½ΠΈ Π΄Π°ΡΡ.
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² D3 Π»Π΅Π³ΠΊΠΎ, Π½ΡΠΆΠ½ΠΎ Π²ΡΠ·Π²Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄ selection.transition(). ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π²ΡΠ±ΠΎΡΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ΅ΠΊΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π° Π½ΠΎΠ²ΡΠ΅, ΡΠΎΠ·Π΄Π°Π²Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΠ»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π·Π°Π΄Π°ΡΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ transition.duration().
var svg = d3.select('body').append('svg') svg .append('text') .text('click here') .attr('x', 50) .attr('y', 50) var events = [] svg.on('click', function () { events.push(d3.event) if (events.length > 5) events.shift() var circles = svg.selectAll('circle') .data(events, function (e) { return e.timeStamp }) .attr('fill', 'gray') circles .enter() .append('circle') .attr('cx', function (d) { return d.x || d.pageX }) .attr('cy', function (d) { return d.y || d.pageY }) .attr('fill', 'red') .attr('r', 0) // ΠΠ°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ .transition() .duration(1000) // ΠΠ»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΎΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌΡ .attr('r', 10) // ΠΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ circles .exit() .transition() .attr('r', 0) .remove() })
ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π° jsfiddle.net
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΡΠ°ΡΡΠΊΠ°Π·Π°Π» ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ D3 ΠΏΠΎ ΡΠ°Π±ΠΎΡΠ΅ Ρ Π²ΡΠ±ΠΎΡΠΊΠ°ΠΌΠΈ. Π‘Π»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π°ΠΌΠ΅ΡΠΊΠΈ ΠΏΠ»Π°Π½ΠΈΡΡΡ ΠΏΠΎΡΠ²ΡΡΠΈΡΡ ΡΡΠΈΠ»ΠΈΡΠ°ΠΌ Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π΄Π°Π½Π½ΡΡ , ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π°Π±ΠΎΡΠΎΠ² SVG-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ.Π― ΠΏΡΠ΅ΠΏΠΎΠ΄Π°Ρ D3 Π½Π° ΠΊΡΡΡΠ΅ Β«ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π΄Π°Π½Π½ΡΡ Β». ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΠ²ΠΎΠΈΡΡ ΡΡΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΠΈ Π½Π°ΡΠ°ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π΅Π³ΠΎ Π² ΡΠ²ΠΎΠ΅ΠΉ ΡΠ°Π±ΠΎΡΠ΅, ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΠ΅ ΠΊ Π½Π°ΠΌ. ΠΠ»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΠΊΡΡΡ ΠΏΡΠΎΠΉΠ΄ΡΡ Π² ΠΠΎΡΠΊΠ²Π΅ Π² ΡΡΠΈ Π²ΡΡ ΠΎΠ΄Π½ΡΠ΅, Π·Π°ΠΏΠΈΡΡ ΠΈ ΠΎΡΠ·ΡΠ²Ρ ΡΡΠ°ΡΡΠ½ΠΈΠΊΠΎΠ² ΡΠ½Π²Π°ΡΡΠΊΠΎΠ³ΠΎ ΠΊΡΡΡΠ°: http://brainwashing.pro/dataviz.
habr.com
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° D3JS. ΠΠ΅Π»Π°Π΅ΠΌ ΠΊΡΡΡΡΠ΅ 3D ΠΈ 2D ΠΎΠ±ΡΠ΅ΠΊΡΡ.
ΠΡ Π·Π΄Π΅ΡΡ: ΠΠ»Π°Π²Π½Π°Ρ β JavaScript β JavaScript Π‘ΠΊΡΠΈΠΏΡΡ β ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° D3JS. ΠΠ΅Π»Π°Π΅ΠΌ ΠΊΡΡΡΡΠ΅ 3D ΠΈ 2D ΠΎΠ±ΡΠ΅ΠΊΡΡ.
ΠΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ! Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΡΠ΅Π½Ρ ΠΌΠΎΡΠ½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²Π°ΠΌ Π΄Π΅Π»Π°ΡΡ ΠΎΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ 3D ΠΈ 2D ΠΌΠΎΠ΄Π΅Π»ΠΈ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π°, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΡ.
ΠΡΡΠΌΠΎ ΡΡΠ°Π·Ρ ΠΆΠ΅ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Β«ΡΠΎΡΒ», ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ, ΡΡΠΎ Π±ΡΠ»ΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ Π»ΡΠ΄ΡΠΌΠΈ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ Π΄Π°Π½Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ.
Π§ΡΠΎΠ±Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ΅Π½ΠΈΡΡ Π΅Π΅, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΠΏΡΠΈΠΌΠ΅ΡΡ. ΠΡΠΌΠ°Ρ, Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΠΏΡΠΈΡΡΠ½ΠΎ ΡΠ΄ΠΈΠ²Π»Π΅Π½Ρ, ΡΠ²ΠΈΠ΄Π΅Π², ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄Π°Π½Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ.
ΠΡΠ»ΠΈ Π²Ρ ΡΠ΅ΡΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π΅ Π² ΡΠ²ΠΎΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ , ΡΠΎ Π΄Π°Π²Π°ΠΉΡΠ΅ Π΅Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ. ΠΡΠΎ Π½Π΅ΡΠ»ΠΎΠΆΠ½ΠΎ.
ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΡΡΠ΄Π° ΠΈ ΡΠΊΠ°ΡΠ°ΠΉΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π²Π΅ΡΡΠΈΡ Π΄Π°Π½Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ.
ΠΠ°Π»ΡΡΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΠ΅ Π΅Π΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π΅Π΅ ΠΊΠ°ΠΊ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ, ΡΠ°ΠΊ ΠΈ ΡΠΊΠ°Π·Π°Π² ΡΡΡΠ»ΠΊΡ Π½Π° ΠΏΡΡΠΌΠΎΠΉ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ.
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
ΠΡΠ΅, Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π° ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
Π Π°ΡΡΠΏΠΈΡΡΠ²Π°ΡΡ Π²ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Ρ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Π½Π΅ Π±ΡΠ΄Ρ. ΠΠ½Π° Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ°Ρ, Π½ΠΎ, Ρ Π΄ΡΠΌΠ°Ρ, Π΅Π΅ ΡΡΠΎΠΈΡ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ, Π²Ρ Π²Π΅Π΄Ρ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΊΠ°ΠΊΠΈΠ΅ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π²Π΅ΡΠΈ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ Π½Π΅Π΅, ΠΏΡΠ°Π²Π΄Π°?
Π ΡΠΎΠΌΡ ΠΆΠ΅, ΡΡΡ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ ΠΈ ΡΡΡΡΠΊΡΡ Π²Π΅ΡΡΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π² ΠΏΡΠ½ΠΊΡΠ΅ Translations(Unofficial).
ΠΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Π½Π΅ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½Π°Ρ, Π½ΠΎ Ρ ΠΎΡΠΎΡΠ°Ρ ΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½Π°Ρ.
Π’Π°ΠΊ ΡΡΠΎ, ΠΈΠ·ΡΡΠ°ΠΉΡΠ΅ ΠΈ Π΄Π΅ΠΉΡΡΠ²ΡΠΉΡΠ΅ ΠΈ, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ, ΠΈΠΌΠ΅Π½Π½ΠΎ Π²Π°ΡΠ΅ ΡΠ²ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΏΠ°Π΄Π΅Ρ Π½Π° Π³Π»Π°Π²Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ° ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ.
Π Ρ ΠΌΠ΅Π½Ρ Π½Π° ΡΡΠΎΠΌ Π²ΡΠ΅, ΡΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΈ ΡΠ΄Π°ΡΠΈ!
- Π‘ΠΎΠ·Π΄Π°Π½ΠΎ 13.09.2014 20:48:13
- ΠΠΈΡ Π°ΠΈΠ» Π ΡΡΠ°ΠΊΠΎΠ²
ΠΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΡΠ°Π·ΡΠ΅ΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Π°Π²ΡΠΎΡΠ° (ΠΠΈΡ Π°ΠΈΠ» Π ΡΡΠ°ΠΊΠΎΠ²) ΠΈ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΡΠ΅ΠΌΠΎΠΉ ΠΏΡΡΠΌΠΎΠΉ ΡΡΡΠ»ΠΊΠΎΠΉ Π½Π° ΡΠ°ΠΉΡ (http://myrusakov.ru)!
ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ΡΡ ΠΊΠΎ ΠΌΠ½Π΅ Π² Π΄ΡΡΠ·ΡΡ ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅: http://vk.com/myrusakov.
ΠΡΠ»ΠΈ ΠΡ Ρ
ΠΎΡΠΈΡΠ΅ Π΄Π°ΡΡ ΠΎΡΠ΅Π½ΠΊΡ ΠΌΠ½Π΅ ΠΈ ΠΌΠΎΠ΅ΠΉ ΡΠ°Π±ΠΎΡΠ΅, ΡΠΎ Π½Π°ΠΏΠΈΡΠΈΡΠ΅ Π΅Ρ Π² ΠΌΠΎΠ΅ΠΉ Π³ΡΡΠΏΠΏΠ΅: http://vk.com/rusakovmy.
ΠΡΠ»ΠΈ ΠΡ Π½Π΅ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ Π½Π° ΡΠ°ΠΉΡΠ΅,
ΡΠΎ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ: ΠΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Ρ ΠΠ°Ρ ΠΎΡΡΠ°Π»ΠΈΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡΡ, Π»ΠΈΠ±ΠΎ Ρ ΠΠ°Ρ Π΅ΡΡΡ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ Π²ΡΡΠΊΠ°Π·Π°ΡΡΡΡ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, ΡΠΎ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ Π²Π½ΠΈΠ·Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΎΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠΉΡΠ΅ ΡΡΡ ΡΡΠ°ΡΡΡ Π΄ΡΡΠ·ΡΡΠΌ:
ΠΡΠ»ΠΈ ΠΠ°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΡΡ ΡΠ°ΠΉΡ, ΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΡΡΠ»ΠΊΡ Π½Π° Π½Π΅Π³ΠΎ (Ρ ΡΠ΅Π±Ρ Π½Π° ΡΠ°ΠΉΡΠ΅, Π½Π° ΡΠΎΡΡΠΌΠ΅, Π² ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ΅):
-
ΠΠ½ΠΎΠΏΠΊΠ°:
<a href=Β»https://myrusakov.ruΒ» target=Β»_blankΒ»><img src=Β»https://myrusakov.ru//images/button.gifΒ» alt=Β»ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡΒ» /></a>ΠΠ½Π° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΠΎΡ ΡΠ°ΠΊ:
-
Π’Π΅ΠΊΡΡΠΎΠ²Π°Ρ ΡΡΡΠ»ΠΊΠ°:
<a href=Β»https://myrusakov.ruΒ» target=Β»_blankΒ»>ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ</a>ΠΠ½Π° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΠΎΡ ΡΠ°ΠΊ: ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ
- BB-ΠΊΠΎΠ΄ ΡΡΡΠ»ΠΊΠΈ Π΄Π»Ρ ΡΠΎΡΡΠΌΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π΅Ρ Π² ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ):
[URL=Β»https://myrusakov.ruΒ»]ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ[/URL]
myrusakov.ru
ΠΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ ΠΏΠΎ D3js β ΠΠ»ΠΎΠ³ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ°
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΠΎΡΡΠ΅ ΡΠΎΠ±ΡΠ°Π½Ρ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ ΠΏΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ D3, Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΠ΅ Π½Π° Π΄Π°ΡΡ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ. Π‘ΠΏΠΈΡΠΎΠΊ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΊΠ°ΠΊ Π½Π° ΡΡΡΡΠΊΠΎΠΌ, ΡΠ°ΠΊ ΠΈ Π½Π° Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠΌ ΡΠ·ΡΠΊΠ°Ρ .
ΠΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ Π½Π° ΡΡΡΡΠΊΠΎΠΌ ΡΠ·ΡΠΊΠ΅
ΠΠ° ΡΡΡΡΠΊΠΎΠΌ ΡΠ·ΡΠΊΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΏΠΎ javascript Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ D3 ΠΊΡΠ°ΠΉΠ½Π΅ ΠΌΠ°Π»ΠΎ. Π ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΈ ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π½Π΅Ρ Π²ΠΎΠΎΠ±ΡΠ΅. Π, ΡΠ΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΡΡΠΈΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π΄Π°ΡΡ ΡΠ°ΠΌΡΠΉ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ. Π’Π°ΠΊΠΆΠ΅, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΎΡΠΎ ΠΏΠΎΡΡΡΡΡΡ, ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΡΠΊΠ°ΡΡ ΠΏΠ°ΡΡ-ΡΡΠΎΠΉΠΊΡ ΡΡΠ°ΡΠ΅ΠΉ-Π²Π²Π΅Π΄Π΅Π½ΠΈΠΉ Π² D3. ΠΠ° ΡΡΠΎΠΌ, ΠΏΠΎΠΆΠ°Π»ΡΠΉ, ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΏΠΎ D3 Π΄Π»Ρ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠ°, ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΡΡΡΡΠΊΠΈΠΉ ΡΠ·ΡΠΊ, Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ.
ΠΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ Π½Π° Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠΌ ΡΠ·ΡΠΊΠ΅
ΠΡ Π°Π²ΡΠΎΡΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ
ΠΠ»Ρ Π»ΡΠ΄Π΅ΠΉ, ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡΠΈΡ
Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΈΠΉ ΡΠ·ΡΠΊ, ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Π΅Π½ΠΈΡ ΠΊΡΠ΄Π° Π±ΠΎΠ»ΡΡΠ΅.
ΠΠ΅Π·ΡΡΠ»ΠΎΠ²Π½ΠΎ, Π»ΡΡΡΠΈΠΌ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΏΠΎ Π»ΡΠ±ΠΎΠΌΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈΠ»ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½Π°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ. D3, Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π½Π΅ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅. ΠΡΠΈΡΠΈΠ°Π»ΡΠ½Π°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π½Π° Π·Π΄Π΅ΡΡ.
Π’Π°ΠΊΠΆΠ΅ Π°Π²ΡΠΎΡ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄Π΅Π»ΠΈΡΡΡ ΡΠΎΠ½ΠΊΠΎΡΡΡΠΌΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ D3 Π² ΡΠ²ΠΎΠ΅ΠΌ Π±Π»ΠΎΠ³Π΅.
ΠΠ° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΡΠΎΠ±ΡΠ°Π½ΠΎ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π° Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΉ. ΠΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ ΠΊ Π½ΠΈΠΌ ΠΏΡΠΈΠ»Π°Π³Π°Π΅ΡΡΡ. ΠΡΠ΅Π½Ρ ΠΏΠΎΠ·Π½Π°Π²Π°ΡΠ΅Π»ΡΠ½ΠΎ.
Π‘ΡΠΎΡΠΎΠ½Π½ΠΈΠ΅ ΡΠ°ΠΉΡΡ ΠΈ Π±Π»ΠΎΠ³ΠΈ
http://www.d3noob.org β ΡΠ°ΠΉΡ-Π½Π°Π±ΠΎΡ ΡΡΠ°ΡΠ΅ΠΉ ΠΏΠΎ D3js. ΠΡΠ°ΠΊΠΈΠΉ ΡΠ±ΠΎΡΠ½ΠΈΠΊ ΡΠ΅ΡΠ΅ΠΏΡΠΎΠ²(ΡΠΎΠ²Π΅ΡΡ ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ) ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ;
http://alignedleft.com/tutorials/d3 β ΠΡΠ°ΡΠΊΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ-Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅. ΠΠ·ΡΡΠΈΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΠΎΠ². ΠΠΎ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΠΈ ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π·Π½Π°Π½ΠΈΠΉ, ΡΡΠΎΠ±Ρ ΡΠ°ΠΌΠΎΠΌΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ. ΠΠ²ΡΠΎΡ Π‘ΠΊΠΎΡΡ ΠΡΡΡΠ΅ΠΉ;
https://www.dashingd3js.com/table-of-contents β ΠΠΎΠ»Π΅Π΅ ΠΎΠ±ΡΠ΅ΠΌΠ»ΡΡΠ΅Π΅ ΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ-Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅;
http://courses.cs.washington.edu/courses/cse512/14wi/d3-tutorial/fundamental.html#/ β ΠΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΡΡΠ²ΠΎ-Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π²Π΅Π΄ΡΡΠΈΡ
ΡΠ½ΠΈΠ²Π΅ΡΡΠΈΡΠ΅ΡΠΎΠ² Π‘Π¨Π.
ΠΠ±ΡΡΠ°ΡΡΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ
http://www.youtube.com/playlist?list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p http://www.youtube.com/playlist?list=PLHfLBrRzKS4q4cU4ewZ2Q1pnJZ2WiKAPq https://egghead.io/technologies/d3?page=1
ΠΠ½ΠΈΠ³ΠΈ
Interactive Data Visualization for the Web. ΠΠ²ΡΠΎΡ Π‘ΠΊΠΎΡΡ ΠΡΡΡΠ΅ΠΉ. ΠΠ³ΠΎ ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ-Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π²ΡΠΆΠΈΠΌΠΊΡ ΠΈΠ· ΡΡΠΎΠΉ ΠΊΠ½ΠΈΠ³ΠΈ.
D3 Tips and Tricks. ΠΠ²ΡΠΎΡ ΠΠ°Π»ΠΊΠΎΠ»ΡΠΌ ΠΠ°ΠΊΠ»ΠΈΠ½. ΠΠΏΡΡΡ ΡΠ°ΠΊΠΈ ΡΠ±ΠΎΡΠ½ΠΈΠΊ ΡΠ΅ΡΠ΅ΠΏΡΠΎΠ², ΡΠΎΠ²Π΅ΡΠΎΠ² ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΉ, Π½ΠΎ ΡΠΆΠ΅ Π² ΠΊΠ½ΠΈΠΆΠ½ΠΎΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ΅.
Data Visualization with D3.js Cookbook. ΠΠ²ΡΠΎΡ Nick Qi Zhu. ΠΠ½ΠΈΠ³Π° ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠΌ ΠΈΠ· Π²ΡΠ΅Ρ
ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΡ
Π·Π΄Π΅ΡΡ(ΠΏΠΎ ΠΌΠ½Π΅Π½ΠΈΡ Π°Π²ΡΠΎΡΠ° ΡΡΠ°ΡΡΠΈ).
ΠΡΠΌΠ΅ΡΡ ΡΠ°ΠΊΠΆΠ΅, ΡΡΠΎ Π²ΡΠ΅ ΠΊΠ½ΠΈΠ³ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π΄Π΅ΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ, Π΄ΠΎΡΡΡΠΏΠ½Ρ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ Π² pdf ΡΠΎΡΠΌΠ°ΡΠ΅, ΠΎΠ΄Π½Π°ΠΊΠΎ, ΠΈΡ
ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΏΠΎΠΈΡΠΊΠ°ΡΡ.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ Π½Π° ΡΠ²ΠΎΠΈ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΏΠΈΡΠΈΡΠ΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ .
serganbus.github.io
Crossfilter.js, dc.js ΠΈ D3.js Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΠ°Π½Π½ΡΡ / Habr
ΠΡΠΈΠ²Π΅ΡΡΡΠ²ΡΡ ΡΠ΅Π½ΠΈΡΠ΅Π»Π΅ΠΉ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠΉ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠΉ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ ! ΠΡΠ΅Π΄Π»Π°Π³Π°Ρ Π²Π°ΡΠ΅ΠΌΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΠ±Π·ΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ JavaScript Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΠΊΡΠΏΠ΅ Ρ D3.js ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΌΠ½ΠΎΠ³ΠΎΠΌΠ΅ΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΈΠ»ΡΡΡΠ°ΡΠΈΠΈ Β«Π½Π° Π»Π΅ΡΡΒ».
ΠΠ°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π»ΠΈΡΡ, ΡΠΎΠ³Π΄Π° Π΄ΠΎΠ±ΡΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ΄ ΠΊΠ°Ρ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠ°Π½Π½Π°Ρ ΡΡΠ°ΡΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π² Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠ΅ΠΉ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΡΠ°ΡΠ΅ΠΉ ΠΈΠ· Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠ³Π° www.d3noob.org, ΠΏΠ΅ΡΠ΅ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΡ
ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½Π½ΡΡ
Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΌΠΎΠΈΠΌ Π²ΠΈΠ΄Π΅Π½ΠΈΠ΅ΠΌ Π·Π°Π΄Π°ΡΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ
.
ΠΡΡΠΎΡΠ½ΠΈΠΊ Π²Π΄ΠΎΡ
Π½ΠΎΠ²Π΅Π½ΠΈΡ:
ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π΄Π°Π½Π½ΡΡ ΠΈ Π°Π½Π°Π»ΠΈΡΠΈΠΊΠ°
Π£ Π½Π°Ρ Π² ΡΡΡΠ°Π½Π΅ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ° Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π°ΡΡΠΎΡΠΈΠΈΡΡΠ΅ΡΡΡ Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°ΠΌΠΈ (ΠΈΠ½ΠΎΠ³Π΄Π° Π²Π΅ΡΡΠΌΠ° Π½Π΅Π΄ΡΡΠ½ΠΎ), Ρ ΠΎΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΡΠ°Π»ΠΎ Π°ΠΊΡΠΈΠ²Π½Π΅Π΅ ΡΠ°Π·Π²ΠΈΠ²Π°ΡΡΡΡ Π΅ΡΡ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ. ΠΡΠΎ Π»ΠΈΡΡ Π²Π΅ΡΡΠΈΠ½Π° Π°ΠΉΡΠ±Π΅ΡΠ³Π°, ΠΊΠΎΡΠΎΡΡΡ ΠΎΠΊΠΊΡΠΏΠΈΡΠΎΠ²Π°Π»ΠΈ ΠΌΠ°ΡΠΊΠ΅ΡΠΎΠ»ΠΎΠ³ΠΈ, ΠΈΡΡΠΈΠ½Π½Π°Ρ ΠΆΠ΅ ΠΌΠΎΡΡ Π΄ΠΎΡΡΡΠΏΠ½Π° Π»ΠΈΡΡ
Crossfilter.js
Crossfilter ΡΡΠΎ JavaScript Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΠΌΠ½ΠΎΠ³ΠΎΠΌΠ΅ΡΠ½ΡΠΌΠΈ Π΄Π°Π½Π½ΡΠΌΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. Crossfilter ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠΊΡΡΡΠ΅ΠΌΠ°Π»ΡΠ½ΠΎ Π±ΡΡΡΡΠΎΠ΅ Π²Π·Π°ΠΈΠΌΠΎΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ (ΠΌΠ΅Π½Π΅Π΅ 30ΠΌΡ) ΡΠ²ΡΠ·Π°Π½Π½ΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠΉ Π΄Π°Π½Π½ΡΡ (ΡΡΠ΅Π·ΠΎΠ² ΠΌΠ½ΠΎΠ³ΠΎΠΌΠ΅ΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ ) Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π²Ρ ΠΎΠ΄Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Π° ΡΡΡΠΎΠΊ. ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΠΎΠ·Π΄Π°Π½Π° Π»ΡΠ΄ΡΠΌΠΈ, ΠΈΠΌΠ΅ΡΡΠΈΠΌΠΈ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΊ d3.js, ΡΡΠΎ Mike Bostock ΠΈ Jason Davies.
Π ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ°Π±ΠΎΡΡ Ρ Π΄Π°Π½Π½ΡΠΌΠΈ Π»Π΅ΠΆΠ°Ρ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΠΌΠΎΠ΄Π½ΠΎΠ³ΠΎ Π½ΡΠ½ΡΠ΅ Map-Reduce. ΠΠ»Ρ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΡΡΠΈΠΌ ΠΏΡΠ΅ΠΆΠ΄Π΅ Π½Π΅ ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π»ΡΡ Π²ΡΡ ΡΡΠΎ Π·Π²ΡΡΠΈΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΈ Π·Π°ΠΏΡΡΠ°Π½Π½ΠΎ, ΡΠ°ΠΊ ΡΡΠΎ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ. ΠΡΠ°ΠΊ ΡΡΠΎ ΠΎΠ±ΡΡΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ Ρ ΠΌΠ½ΠΎΠ³ΠΎΠΌΠ΅ΡΠ½ΡΠΌΠΈ Π΄Π°Π½Π½ΡΠΌΠΈ (Π²ΡΠΏΠΎΠΌΠΈΠ½Π°Π΅ΠΌ ΡΠ²ΠΎΠ΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΠΈΠ· Excel)? ΠΡ
ΠΎΠ±ΡΡΠ½ΠΎ Π³ΡΡΠΏΠΏΠΈΡΡΡΡ Π²ΡΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ, ΡΡΠΌΠΌΠΈΡΡΡΡ, ΡΠΎΡΡΠΈΡΡΡΡ, ΠΏΠΎΠ΄ΡΡΠΈΡΡΠ²Π°ΡΡ ΡΠ°ΡΡΠΎΡΡ Π²Ρ
ΠΎΠΆΠ΄Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈ Ρ. Π΄. ΠΠ° ΡΡΠΎ ΠΈ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Reduce, Π° Map ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΠ°ΡΠ°Π»Π»Π΅Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ Π²ΡΠ΅Ρ
ΡΡΠΈΡ
ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΉ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΠΈ Π²ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½Π΅ΠΉ, Π½ΠΎ, Π΄ΡΠΌΠ°Ρ, Π΄Π»Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΡ ΡΠΎΠΉΠ΄ΡΡ.
Π’Π°ΠΊ ΡΡΠΎ ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ crossfilter
ΠΠ°ΠΊ Π³ΠΎΠ²ΠΎΡΠΈΡΡΡ, Π»ΡΡΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· ΡΠ²ΠΈΠ΄Π΅ΡΡ, Π° ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π° Github ΡΡΡΠ°Π½ΠΈΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ.

ΠΠ΅ΡΠ΅Π΄ Π½Π°ΠΌΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ 231,083
ΠΏΠΎΠ»ΡΡΠ°Ρ
Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ°Π·ΡΠ΅Π·Π°Ρ
. ΠΠ΄Π΅ΡΡ ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ ΠΏΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠΉ Π΄Π°Π½Π½ΡΡ
: ΡΠ΅ΡΡΡΠ΅ ΡΡΠΎΠ»Π±ΡΠ°ΡΡΡ
Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ ΠΎΠ΄Π½Π° ΡΠ°Π±Π»ΠΈΡΠ°. ΠΠ° Π³ΡΠ°ΡΠΈΠΊΠ΅ Time of Day
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΎ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΡΠΎΠ² Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°ΡΠ°. Arrival delay
ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° Π·Π°Π΄Π΅ΡΠΆΠ΅ΠΊ ΡΠ΅ΠΉΡΠΎΠ², ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π² 10-ΡΠΈ ΠΌΠΈΠ½ΡΡΠ½ΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Ρ. Distance
ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΉΡΠΎΠ² ΠΏΠΎ Π΄Π°Π»ΡΠ½ΠΎΡΡΠΈ ΠΏΠΎΠ»ΡΡΠ° (ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» 50 ΠΌΠΈΠ»Ρ). Date
β ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ΅ΠΉΡΠΎΠ² Π² Π΄Π΅Π½Ρ. Π Π²ΡΡ ΡΡΠΎ Π±ΡΠ»ΠΎ ΠΎΡΡΠ΅Π½Π΄Π΅ΡΠ΅Π½ΠΎ Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΠΊΠ»ΠΈΠ΅Π½ΡΠ°, ΡΠΎ Π΅ΡΡΡ Ρ Π½Π°Ρ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΡΠΎΠ³Π»Π°ΡΠΈΡΠ΅ΡΡ, Π½Π΅ΠΏΠ»ΠΎΡ
ΠΎ Π΄Π»Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° Π΄Π°Π½Π½ΡΡ
.
Π ΡΠ΅Π½ΡΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠ° Date
Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΎΠΊΠ½ΠΎ, ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡΠ΅Π΅ ΡΠ°Π±ΠΎΡΠΈΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½, Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠ΅ ΠΎΠΊΠ½Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π΄Π°ΡΡ ΠΌΡΡΠΊΠΎΠΉ ΠΈ Π½Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΡ
Π³ΡΠ°ΡΠΈΠΊΠ°Ρ
, ΠΏΡΠΈ ΡΡΠΎΠΌ Π²ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ Π±ΡΠ΄ΡΡ ΡΠΊΠΎΠΎΡΠ΄ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½Π°Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ ΡΠΈΠ»ΡΡΡΠ°ΠΌΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π°ΠΌ ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ ΡΠΈΡΠΎΠΊΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π»Ρ Π°Π½Π°Π»ΠΈΠ·Π° Π΄Π°Π½Π½ΡΡ
Β«Π½Π° Π»Π΅ΡΡΒ».
Π ΡΠ°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅, Π²ΡΡ ΡΡΠΎ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠΈΠ΅ Β«Released under the Apache License 2.0Β».
DC.js ΡΠΏΠ΅ΡΠΈΡ Π½Π° ΠΏΠΎΠΌΠΎΡΡ
ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΊΠΎΠ΄ Π΄Π΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅ΡΠ° Π΄Π»Ρ crossfilter, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΎΠ½ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ 500 ΡΡΡΠΎΠΊ. ΠΡΡ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ crossfilter ΡΠΎΠ·Π΄Π°Π²Π°Π»ΡΡ Π½Π΅ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ , Π° Π΄Π»Ρ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΈ ΠΈΠΌΠΈ. D3.js ΠΆΠ΅, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΡΠΎΠ·Π΄Π°Π²Π°Π»ΡΡ ΠΊΠ°ΠΊ ΡΠ°Π· Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ . Π’ΡΡ Π½Π°ΠΌ Π½Π° Π²ΡΡΡΡΠΊΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° dc.js Π·Π° Π°Π²ΡΠΎΡΡΡΠ²ΠΎΠΌ Nick Qi Zhu, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ²ΡΠ·ΡΠ²Π°Π΅Ρ Π΄Π²Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠΈΠ΅ Π½Π°Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π² ΠΎΠ΄ΠΈΠ½ ΠΌΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ. Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π²ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΠΎΠ±ΡΠ°Π·ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² D3.js Π½Π°ΠΌ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ, Π½ΠΎ ΡΠ΅Ρ ΡΡΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ Π² dc.js Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΡΠ»ΡΡΠ°Π΅Π². DC.js ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠΈΠΏΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ²:
- Bar Chart
- Pie Chart
- Row Chart
- Line Chart
- Bubble Chart
- Geo Choropleth Chart
- Data Table
ΠΡΠΈΠΌΠ΅ΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° Github ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΠΎΠΆΠ΅ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π° ΠΏΠΎΠ΄ Π»ΠΈΡΠ΅Π½Π·ΠΈΠ΅ΠΉ Β«Apache License 2.0Β».
ΠΠΎΠ»ΡΡΠ΅ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠΉ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠΉ
ΠΡ Π²ΠΎΡ, ΡΠ΅ΠΏΠ΅ΡΡ Π²Ρ Π·Π½Π°Π΅ΡΠ΅ Π΅ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ ΠΈ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ Ρ ΡΠΈΠ»ΡΡΡΠ°ΡΠΈΠ΅ΠΉ Β«Π½Π° Π»Π΅ΡΡΒ». Π£ΡΠΏΠ΅Ρ ΠΎΠ² Π²Π°ΠΌ Π² ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π²Π°ΡΠΈΡ Π·Π°ΠΌΡΡΠ»ΠΎΠ².
Π₯Π°Π±, ΠΏΠΎΡΠ²ΡΡΡΠ½Π½ΡΠΉ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ
ΠΠΎΡΠΎΠ³ΠΈΠ΅ Ρ Π°Π±ΡΠΎΠ²ΡΠ°Π½Π΅, ΠΊΠ°ΠΊ Π²Ρ ΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ Π°Π±Π° Data visualization ΠΈΠ»ΠΈ ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π΄Π°Π½Π½ΡΡ ? ΠΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ΅ΠΉΡΠ°Ρ ΠΈΠ· Π±Π»ΠΈΠ·ΠΊΠΈΡ ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ Ρ Π°Π±ΠΎΠ² ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Ρ Π°Π± ΠΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°, Π½ΠΎ ΠΎΠ½ ΠΏΠΎΡΠ²ΡΡΡΠ½ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ΅ (ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌ), Π° Π½Π΅ ΠΏΡΠΎΡΠ΅ΡΡΡ Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΠΈΡ Π΄Π²ΡΡ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π² Π²ΠΈΠΊΠΈΠΏΠ΅Π΄ΠΈΠΈ: Infographic, Data visualization.
Π’Π°ΠΊ ΡΡΠΎ Π²ΡΠ΅Ρ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΡΠΎΡΡ Π²ΡΡΠ°Π·ΠΈΡΡ ΡΠ²ΠΎΡ ΠΌΠ½Π΅Π½ΠΈΠ΅ ΠΏΠΎ Π΄Π°Π½Π½ΠΎΠΌΡ Π²ΠΎΠΏΡΠΎΡΡ.
habr.com
11 JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ , ΠΎ ΠΊΠΎΡΠΎΡΡΡ ΡΡΠΎΠΈΡ Π·Π½Π°ΡΡ Π² 2018 Π³ΠΎΠ΄Ρ
ΠΡ ΠΆΠΈΠ²ΡΠΌ Π²ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π° Π²Π·ΡΡΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠ° ΠΎΠ±ΡΡΠΌΠΎΠ² Π΄Π°Π½Π½ΡΡ , Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅ΠΌΡΡ ΠΈ ΠΏΠΎΡΡΠ΅Π±Π»ΡΠ΅ΠΌΡΡ ΡΠ΅Π»ΠΎΠ²Π΅ΡΠ΅ΡΡΠ²ΠΎΠΌ. ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΠΌΡΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π΄Π°Π½Π½ΡΠ΅ Π»ΠΈΠ±ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π³Π΄Π΅-ΡΠΎ Π²Π½ΡΡΡΠΈ Π½ΠΈΡ , Π»ΠΈΠ±ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΡΡΡΡ. ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π΄Π°Π½Π½ΡΠ΅, ΡΡΡΠ΅ΠΌΡΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°Π±ΠΎΡΡ Ρ ΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΊΠΎΠΌΡΠΎΡΡΠ½ΠΎΠΉ.ΠΠ½ΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΡΡΠΈΡΡΡΡ ΡΠ°ΠΊ, ΡΡΠΎ ΡΠ°ΠΌΠΎΠ΅ ΡΠ΅Π½Π½ΠΎΠ΅ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π΄Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ β ΡΡΠΎ Π½Π΅ΠΊΠΈΠ΅ Π΄Π°Π½Π½ΡΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ Π΅ΡΠ»ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΠΈΡ Π² Π²ΠΈΠ΄Π΅ ΡΠ΅Π³ΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ ΡΠΏΠΈΡΠΊΠ° ΠΈΠ»ΠΈ ΡΠ°Π±Π»ΠΈΡΡ, ΡΠ°Π±ΠΎΡΠ° Ρ ΡΠ°ΠΊΠΈΠΌΠΈ Π΄Π°Π½Π½ΡΠΌΠΈ, ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ ΡΡΠΎΠΌΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ Π΄Π°Π½Π½ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ, Π²ΠΈΠ΄Ρ Π»ΠΈΡΡ ΠΈΡ ΡΠ°ΠΌΠΎΠ΅ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΡΠΎΠ»ΠΊΠ½ΡΡΡΡ ΡΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ, ΠΊΠ°ΡΠ°ΡΡΠΈΠΌΠΈΡΡ ΠΈΡ Π°Π½Π°Π»ΠΈΠ·Π° ΠΈ ΠΏΡΠΈΠ½ΡΡΠΈΡ Π½Π° ΠΈΡ ΠΎΡΠ½ΠΎΠ²Π΅ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ.
ΠΠ°Π½Π½ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΠ΅Π½Π½ΠΎΡΡΡ ΡΠ°ΠΌΠΈ ΠΏΠΎ ΡΠ΅Π±Π΅. ΠΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Ρ Π½ΠΈΠΌΠΈ Π±ΡΠ»ΠΎ Π±ΡΡΡΡΠΎ, ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΈ ΠΏΡΠΈΡΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π²Π°ΡΠ΅ΠΌΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Ρ ΠΎΠΏΠ΅Π½ΡΠΎΡΡΠ½ΡΠ΅ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ
.
1. D3

ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° D3
ΠΠΎΠΆΠ°Π»ΡΠΉ, ΠΎΠΏΠ΅Π½ΡΠΎΡΡΠ½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ D3 (Π΅Ρ Π΅ΡΡ Π½Π°Π·ΡΠ²Π°ΡΡ D3.js) ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°ΡΡ ΡΠ°ΠΌΠΎΠΉ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠΉ ΠΈΠ· ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΡ JS-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ . ΠΡΠΎΡ ΠΏΡΠΎΠ΅ΠΊΡ, Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΡΠΎΠ±ΡΠ°Π» ΠΏΠΎΡΡΠΈ 80 ΡΡΡΡΡ Π·Π²ΡΠ·Π΄ Π½Π° GitHub. ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΠΎΠ·Π΄Π°Π½Π° Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ°ΠΊΠΈΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΠΊΠ°ΠΊ HTML, SVG ΠΈ CSS.
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΊ Π²Π΅Π±-ΡΡΠ°Π½Π΄Π°ΡΡΠ°ΠΌ, D3 Π΄Π°ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΠ΅Π»ΠΎΡΡΠ½ΡΡ, ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΡΡΠ΅Π΄Ρ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ , ΠΈΠ·Π±Π°Π²Π»ΡΡΡΡΡ ΠΈΡ ΠΎΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΏΠΎΠΈΡΠΊΠ° Π½Π΅ΠΊΠΈΡ ΠΏΠ»Π°ΡΠ½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ. ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° D3 ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ Π² ΡΠ΅Π±Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ ΠΈ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΡΠ°Π±ΠΎΡΠ΅ Ρ DOM, Π² ΠΎΡΠ½ΠΎΠ²Π΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π»Π΅ΠΆΠ°Ρ, ΠΎΠΏΡΡΡ ΠΆΠ΅, Π΄Π°Π½Π½ΡΠ΅. D3 ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ Π² DOM ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠ΅ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ. ΠΠΎΡ ΠΎΡΠ»ΠΈΡΠ½Π°Ρ Π³Π°Π»Π΅ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ.
ΠΡΡΠ°ΡΠΈ, ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ Π΅ΡΡΡ ΠΌΠ½Π΅Π½ΠΈΠ΅, Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΊΠΎΡΠΎΡΡΠΌ D3 β ΡΡΠΎ Π²ΠΎΠ²ΡΠ΅ Π½Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ . ΠΠΎΠ»Π°Π³Π°Π΅ΠΌ, Π²Ρ ΡΠ°ΠΌΠΈ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅ΡΠΈΡΡ, ΡΠ΅ΠΌ Π΅Ρ ΡΡΠΈΡΠ°ΡΡ, ΠΈ ΡΡΠΎΠΈΡ Π»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΅ΠΉ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅.
2. Chart.js
Chart.js
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Chart.js, ΡΠΎΠ±ΡΠ°Π²ΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ 40 ΡΡΡΡΡ Π·Π²ΡΠ·Π΄ Π½Π° GitHub, ΡΠ²Π»ΡΠ΅ΡΡΡ Π²Π΅ΡΡΠΌΠ° ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ HTML5-Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΡ
Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ <canvas>
, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΡ
Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ
Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠΠΊΡΡΠ°Π»ΡΠ½Π°Ρ Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π²ΡΠΎΡΠ°Ρ Π²Π΅ΡΡΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠΈΠΏΠΎΠ² (ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ 8 Π±Π°Π·ΠΎΠ²ΡΡ
ΡΠΈΠΏΠΎΠ² Π³ΡΠ°ΡΠΈΠΊΠΎΠ²), ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ. Chart.js ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ moment.js. ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ, ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Ρ cdnjs.
3. Three.js

Three.js
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Three.js ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π²Π΅ΡΡΠΌΠ° ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ (ΠΎΠΊΠΎΠ»ΠΎ 45 ΡΡΡΡΡ Π·Π²ΡΠ·Π΄ Π½Π° GitHub; Π²ΠΊΠ»Π°Π΄ Π² ΠΏΡΠΎΠ΅ΠΊΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ Π±ΠΎΠ»Π΅Π΅ 1000 ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ) Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ 3D-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ WebGL. ΠΠΈΠ±ΠΊΠΎΡΡΡ ΠΈ Π°Π±ΡΡΡΠ°ΠΊΡΠ½ΠΎΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΎΠ·Π½Π°ΡΠ°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Three.js Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Π² 2-Ρ ΠΈ 3-Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡΡ . ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΠΎΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ Three.js, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠΉ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΡ ΠΌΠ΅ΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ². ΠΠΎΡ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ° Π΄Π»Ρ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ . ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠ΄ΡΠΌΡΠ²Π°Π΅ΡΠ΅ ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ WebGL β ΡΠ²Π΅ΡΠ΅Π½Ρ, Π²Π°ΠΌ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° Three.js.
4. ECharts ΠΈ Highcharts JS

ΠΡΠΈΠΌΠ΅Ρ ΡΠ°Π±ΠΎΡΡ Ρ ECharts (ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π·ΡΡΠΎ ΠΎΡΡΡΠ΄Π°)
ECharts β ΠΏΡΠΎΠ΅ΠΊΡ Baidu, ΡΠΎΠ±ΡΠ°Π²ΡΠΈΠΉ ΠΎΠΊΠΎΠ»ΠΎ 30 ΡΡΡΡΡ Π·Π²ΡΠ·Π΄ Π½Π° GitHub, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ
ΠΈ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΠ½Π° Π½Π°ΠΏΠΈΡΠ°Π½Π° Π½Π° ΡΠΈΡΡΠΎΠΌ JavaScript Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ zrender, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΠΎΠΉ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ <canvas>
.
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ²ΠΎΠ΄ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ <canvas>
, SVG (4.0+) ΠΈ VML. ECharts ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡ, ΡΠ°ΡΡΡΠΈΡΠ°Π½Π½ΡΡ
Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΠΈΠ»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, Π½ΠΎ ΠΈ Π΄Π»Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ²Π΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°. ΠΠΎΡ Π³Π°Π»Π΅ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Π² ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΡΠ΅Π΄Π΅.

Highcharts JS
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Highcharts JS Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠΈΡΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΠΎΠ½Π° ΡΠΎΠ±ΡΠ°Π»Π° ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ 8 ΡΡΡΡΡ Π·Π²ΡΠ·Π΄ Π½Π° GitHub. ΠΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠΌ Π΅ΠΉ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌΠΎΠΌ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ
ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡ SVG, Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° Π½Π° VML ΠΈ Π½Π° <canvas>
Π΄Π»Ρ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΡ
Π²Π΅ΡΡΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². ΠΠ°ΡΠ²Π»Π΅Π½ΠΎ, ΡΡΠΎ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ 72 ΠΈΠ· 100 ΠΊΡΡΠΏΠ½Π΅ΠΉΡΠΈΡ
ΠΌΠΈΡΠΎΠ²ΡΡ
ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ, ΡΡΠΎ, Π΅ΡΠ»ΠΈ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΠΊ, Π΄Π΅Π»Π°Π΅Ρ ΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΡΠ°ΠΌΡΠΌ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΡΡΠ΅Π΄ΠΈ ΠΊΡΡΠΏΠ½ΡΡ
ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ, ΡΠ°ΠΊΠΈΡ
, ΠΊΠ°ΠΊ Facebook ΠΈ Twitter.
5. MetricsGraphics.js

MetricsGraphics.js
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° MetricsGraphics.js (ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ 7 ΡΡΡΡΡ Π·Π²ΡΠ·Π΄ Π½Π° GitHub) ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π² ΡΠ°ΡΡΡΡΠ΅ Π½Π° Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΡΠ΄ΠΎΠ². ΠΠ½Π° ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΡΡΠ°Π²Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ (80 ΠΠ± Π² ΠΌΠΈΠ½ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅) ΠΈ Π΄Π°ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ, Π½ΠΎ ΠΏΡΠΎΠ΄ΡΠΌΠ°Π½Π½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΠ·ΠΊΠΎΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΡΡΠ΅Π΄ΠΈ ΠΊΠΎΡΠΎΡΡΡ β ΡΡΠ΅Π΄ΡΡΠ²Π° Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΡΠ°ΡΡΠ΅ΡΠ½ΠΈΡ, Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌ, ΡΡΠΎΠ»Π±ΡΠ°ΡΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΡΠ°Π±Π»ΠΈΡ Ρ Π΄Π°Π½Π½ΡΠΌΠΈ. ΠΠΎΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Π°Ρ Π³Π°Π»Π΅ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΡΠ°Π±ΠΎΡΡ Ρ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ.
6. Recharts


Recharts
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Recharts, Π½Π°Π±ΡΠ°Π²ΡΠ°Ρ ΠΏΠΎΡΡΠΈ 10000 Π·Π²ΡΠ·Π΄ Π½Π° GitHub β ΡΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½Π° React ΠΈ D3, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ° Ρ Π΄Π΅ΠΊΠ»Π°ΡΠ°ΡΠΈΠ²Π½ΡΠΌΠΈ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ. ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π°ΡΡ Π² ΡΠ°ΡΠΏΠΎΡΡΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ SVG. ΠΡ Π»Π΅Π³ΠΊΠΎΠ²Π΅ΡΠ½ΠΎΠ΅ Π΄Π΅ΡΠ΅Π²ΠΎ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ (ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½Π° ΠΏΠΎΠ΄ΠΌΠΎΠ΄ΡΠ»ΡΡ D3) ΠΏΠΎΠ΄Π΄Π°ΡΡΡΡ ΡΠΎΠ½ΠΊΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΡΠ΅ΡΠ΅Π· ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΠ΄Π΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
7. RaphaΓ«l


RaphaΓ«l
Β«ΠΠ΅ΠΊΡΠΎΡΠ½Π°ΡΒ» Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° RaphaΓ«l (ΠΎΠΊΠΎΠ»ΠΎ 10 ΡΡΡΡΡ Π·Π²ΡΠ·Π΄ Π½Π° GitHub) ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ Π² Π²Π΅Π±-ΡΡΠ΅Π΄Π΅. ΠΠ½Π°, Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π±Π°Π·ΠΎΠ²ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ SVG ΠΈ VML. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ ΡΠ²Π»ΡΡΡΡΡ Π΅ΡΡ ΠΈ DOM-ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌΠΈ, ΠΊ ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ, ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ JavaScript, ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ. Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ°ΠΊΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΠΊΠ°ΠΊ Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ ΠΈ Internet Explorer 6.0+.
7. C3

ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ C3
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° C3 (ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ 8 ΡΡΡΡΡ Π·Π²ΡΠ·Π΄ Π½Π° GitHub) ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° D3, ΠΎΠ½Π° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ²ΠΎΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ D3. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΠ½Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ API ΠΈ ΠΊΠΎΠ»Π»Π±ΡΠΊΠΈ Π΄Π»Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ Π³ΡΠ°ΡΠΈΠΊΠ°ΠΌΠΈ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΈΡ , ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ Π΄Π°ΠΆΠ΅ ΠΏΠΎΡΠ»Π΅ ΠΈΡ Π²ΡΠ²ΠΎΠ΄Π° Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ.
8. React-Vis, React Virtualized, Victory
ΠΠ°Π±ΠΎΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² React-Vis
ΠΠ°Π±ΠΎΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² React-Vis (ΠΎΠΊΠΎΠ»ΠΎ 4 ΡΡΡΡΡ Π·Π²ΡΠ·Π΄ Π½Π° GitHub) ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠ΅ΠΉ Uber ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±ΡΠ°Π·Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Π² React-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ . ΠΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΡΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²ΠΈΠ΄Π°Ρ , Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, Π² Π²ΠΈΠ΄Π΅ ΡΠ΅ΠΏΠ»ΠΎΠ²ΡΡ ΠΊΠ°ΡΡ ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΡΠ°ΡΡΠ΅ΡΠ½ΠΈΡ. ΠΠ»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡΡΠ²ΠΎ, ΡΠΊΠ°ΠΆΠ΅ΠΌ, Ρ ΡΠ΅ΠΌ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ D3. ΠΠ½Π° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ Π½ΠΈΠ·ΠΊΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΠ΅ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΡΠ΅ ΡΡΡΠΎΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Π²ΡΠΎΠ΄Π΅ ΠΎΡΠ΅ΠΉ X/Y.

ΠΠ°Π±ΠΎΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² React virtualized
ΠΠ°Π±ΠΎΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² React virtualized (ΠΎΠΊΠΎΠ»ΠΎ 12 ΡΡΡΡΡ Π·Π²ΡΠ·Π΄ Π½Π° GitHub) ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° Π±ΠΎΠ»ΡΡΠΈΡ Π½Π°Π±ΠΎΡΠΎΠ² ΡΠ°Π±Π»ΠΈΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ . ΠΠΎΡΡΡΠΏΠ½Ρ ES6, CommonJS ΠΈ UMD-ΡΠ±ΠΎΡΠΊΠΈ React virtualized, ΠΏΡΠΎΠ΅ΠΊΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Webpack 4. ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΡΠΈΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠ°Π·Π΄Π΅Π» Dependencies Π² Π΅Π³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ.

ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Victory
Victory β ΡΡΠΎ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΡ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ. ΠΡΠΎΠ΅ΠΊΡ ΡΠΎΠ·Π΄Π°Π½ ΡΠΈΠ»Π°ΠΌΠΈ Formidable Labs, ΠΎΠ½ ΡΠΎΠ±ΡΠ°Π» ΠΎΠΊΠΎΠ»ΠΎ 6 ΡΡΡΡΡ Π·Π²ΡΠ·Π΄ Π½Π° GitHub. Victory ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠ΅ API ΠΈ Π΄Π»Ρ ΠΎΠ±ΡΡΠ½ΡΡ React-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΈ Π΄Π»Ρ ΡΡΠ΅Π΄Ρ React Native, ΡΡΠΎ ΠΎΠ±Π»Π΅Π³ΡΠ°Π΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ ΠΊΡΠΎΡΡ-ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅Π½Π½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ. Victory ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΠΈ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ .
9. CartoDB

Π‘Π΅ΡΠ²ΠΈΡ CartoDB
ΠΠ»Π°ΡΡΠΎΡΠΌΠ° Carto (ΠΎΠΊΠΎΠ»ΠΎ 2 ΡΡΡΡΡ Π·Π²ΡΠ·Π΄ Π½Π° GitHub), ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈ Π°Π½Π°Π»ΠΈΠ·Π° Π³Π΅ΠΎΠ΄Π°Π½Π½ΡΡ . ΠΠ° ΡΡΡ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π³Π΅ΠΎΠ΄Π°Π½Π½ΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠΎΡΠΌΠ°ΡΠ°Ρ Shapefiles ΠΈΠ»ΠΈ GeoJSON), Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ , Π½Π°Π»ΠΎΠΆΠΈΡΡ Π½Π° ΠΊΠ°ΡΡΡ, ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ CartoCSS, ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΡΡ ΠΏΠΎΠΈΡΠΊ ΠΏΠΎ Π½ΠΈΠΌ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ SQL. ΠΠ΄Π΅ΡΡ ΠΈΠΌΠ΅ΡΡΡΡ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π° ΠΏΠΎ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΡΠΎΠΉ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠΎΠΉ.
10. RAWGraphs


RAWGraphs
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° RAWGraphs Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ 5 ΡΡΡΡΡΠ°ΠΌΠΈ Π·Π²ΡΠ·Π΄ Π½Π° GitHub, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΡΠ΅Π΄ΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ²ΡΠ·ΡΠ²Π°ΡΡ ΡΠ°Π±Π»ΠΈΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ Π΄Π°Π½Π½ΡΠ΅, ΡΠΎ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ. RAWGraphs ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° D3, ΠΎΠ½Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ . ΠΠ½Π° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΡΠ°Π±Π»ΠΈΡΠ½ΡΠΌΠΈ Π΄Π°Π½Π½ΡΠΌΠΈ Π² ΡΠ°Π·Π½ΡΡ ΡΠΎΡΠΌΠ°ΡΠ°Ρ , ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΈ Π΄Π°Π½Π½ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ· Π΄ΡΡΠ³ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π Π΅Π·ΡΠ»ΡΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ RAWGraphs ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG, ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π»ΠΈΠ±ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°Ρ Π² Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ.
11. Metabase

Metabase
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Metabase, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ±ΡΠ°Π»Π° Π±ΠΎΠ»Π΅Π΅ 11 ΡΡΡΡΡ Π·Π²ΡΠ·Π΄ Π½Π° GitHub, ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π±ΡΡΡΡΡΠΉ ΠΈ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠ°Π½Π΅Π»Π΅ΠΉ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅, Π½Π΅ ΡΡΠ΅Π±ΡΡΡΠΈΠΉ Π·Π½Π°Π½ΠΈΡ SQL. ΠΡΠΈ ΡΡΠΎΠΌ Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΅ΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ SQL-ΡΠ΅ΠΆΠΈΠΌ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠΉ Π΄Π»Ρ Π°Π½Π°Π»ΠΈΡΠΈΠΊΠΎΠ² ΠΈ Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ, ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ Π·Π°Π½ΠΈΠΌΠ°ΡΡΠΈΡ ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΎΠΉ Π΄Π°Π½Π½ΡΡ . Metabase ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ΅Π³ΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Π΄Π°Π½Π½ΡΠ΅, ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΡΠΈΠ»ΡΡΡΡ ΠΈΠ»ΠΈ Π½Π°Π±ΠΎΡΡ ΡΠΈΠ»ΡΡΡΠΎΠ², Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΌΠ΅ΡΡΠΈΠΊ β Π²ΡΡΠΈΡΠ»ΡΠ΅ΠΌΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»Π΅ΠΉ, ΠΊ ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ°ΡΡΠΎ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ. Π‘ΡΠ΅Π΄ΠΈ Π΄ΡΡΠ³ΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Metabase ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π΄Π°Π½Π½ΡΡ Π² Slack ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ°Π±ΠΎΡΡ Ρ Π½ΠΈΠΌΠΈ Π² ΡΡΠΎΠΉ ΡΡΠ΅Π΄Π΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ MetaBot. ΠΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ, ΠΏΠΎΠΆΠ°Π»ΡΠΉ, ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΡΠ°ΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ, Ρ ΠΎΡΡ Π½Π°Π΄ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π΅Ρ ΠΎΡΠ²ΠΎΠΈΡΡ, ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠΈΠ»ΠΈΡ.
ΠΠΎΠ½ΡΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°: Taucharts

Taucharts
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Taucharts (ΠΎΠΊΠΎΠ»ΠΎ 2 ΡΡΡΡΡ Π·Π²ΡΠ·Π΄ Π½Π° GitHub) ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ D3. ΠΠ½Π° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ Π΄Π΅ΠΊΠ»Π°ΡΠ°ΡΠΈΠ²Π½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠΉ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ²ΡΠ·ΠΈ ΠΏΠΎΠ»Π΅ΠΉ Π΄Π°Π½Π½ΡΡ Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ. ΠΡ Π°ΡΡ ΠΈΡΠ΅ΠΊΡΡΡΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π³ΡΡΠΏΠΏΠΈΡΡΡΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ X ΠΈ Y (facet charts). Taucharts ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°ΡΡΠΈΡΡΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌ, ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΌ Π΄Π»Ρ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΡΠΎΠ³ΠΈ
ΠΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π£ΡΠΈΡΡΠ²Π°Ρ ΡΠΎ, ΡΡΠΎ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ ΠΎ ΡΠΎΠ»ΠΈ Π΄Π°Π½Π½ΡΡ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌ ΠΌΠΈΡΠ΅, Π½Π΅ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎ, ΡΡΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ . ΠΠΎΡΡΠΎΠΌΡ Π²ΠΎΡ Π΅ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ (ΠΈΠ·ΡΡΠ°Ρ ΠΈΡ , ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ Π΄Π°Π²Π½ΠΎ Π½Π΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ»ΠΈΡΡ):
Π£Π²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ! ΠΠ°ΠΊΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Π² ΡΠ²ΠΎΠΈΡ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ ?
habr.com
Β«ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ. ΠΡΠ½ΠΎΠ²ΡΒ»: Π§Π°ΡΡΡ 2. ΠΡΠ½ΠΎΠ²Ρ D3.js
ΠΡΠΎΡΠ°Ρ ΡΠ°ΡΡΡ ΠΊΡΡΡΠ° (ΡΠΌΠΎΡΡΠ΅ΡΡ ΠΏΠ΅ΡΠ²ΡΡ ΡΠ°ΡΡΡ) ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π° Π·Π½Π°ΠΊΠΎΠΌΡΡΠ²Ρ Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ D3.js. ΠΡ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΡΠ΅Π½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠΈΠ΅ SVG-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΡΠ΅ Β«ΡΠ΅ΠΊΡΡΠΈΠΉΒ» ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ D3, ΡΠΎΠ·Π΄Π°Π΄ΠΈΡΠ΅ Π³ΡΠ°ΡΠΈΠΊ ΠΈ Ρ
ΠΈΡΠΌΠ°ΠΏ (ΡΠ΅ΠΏΠ»ΠΎΠΊΠ°ΡΡΡ) Π½Π° ΡΠ΅Π°Π»ΡΠ½ΡΡ
Π΄Π°Π½Π½ΡΡ
.
ΠΠ΅ΠΊΡΠΈΡ 4. ΠΡΠ½ΠΎΠ²Ρ SVG ΠΈ D3
Π‘Π»Π°ΠΉΠ΄Ρ, Π€ΠΈΠ΄Π΄Π»
ΠΠ΅ΠΊΡΠΈΡ 5. ΠΡΠ°ΡΠΈΠΊ Π½Π° D3
Π€ΠΈΠ΄Π΄Π»
ΠΠ΅ΠΊΡΠΈΡ 6. Π₯ΠΈΡΠΌΠ°ΠΏ (ΡΠ΅ΠΏΠ»ΠΎΠΊΠ°ΡΡΠ°) Π½Π° D3
Π€ΠΈΠ΄Π΄Π»
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅
1. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠΈΠ΄Π΄Π», ΠΏΠΎΡΡΠ΅Π½ΠΈΡΡΠΉΡΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈ ΡΠ΄Π°Π»ΡΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΡΠ΅Π²ΡΠ°ΡΠΈΡΠ΅ ΠΊΡΡΠ³ΠΈ Π² ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΈ, ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΡΡΡ
Π²Π΄Π²ΠΎΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΡΠΎΡΡ, ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²Π΅Ρ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠ² Ρ ΡΡΡΠ½ΠΎΠ³ΠΎ Π½Π° Π·Π΅Π»ΡΠ½ΡΠΉ Ρ ΡΡΡΠ½ΠΎΠΉ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΎΠΉ.
2. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²ΡΠΎΡΠΎΠΉ ΡΠΈΠ΄Π΄Π» ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠΉ ΡΠ΅Ρ Π΄Π°Π½Π½ΡΡ
, ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π³ΡΠ°ΡΠΈΠΊ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΆΠΈΠ·Π½ΠΈ ΠΎΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° Π΄Π΅ΡΠ΅ΠΉ Π² ΡΠ΅ΠΌΡΠ΅. Π Π°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΊΡΡΠΆΠΊΠ° ΠΏΠΎΠΊΠ°ΠΆΠΈΡΠ΅ Π½Π°ΡΠ΅Π»Π΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½Ρ.
3. Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΎΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ β ΠΎΡΡΡΡΠ° Π΄Π»Ρ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π° ΠΈΠ»ΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΏΠΎΠΊΡΠΏΠ°ΡΠ΅Π»Ρ Π½Π° Π²ΡΠ±ΠΎΡ. ΠΠ°Π½Π½ΡΠ΅: mirgorod-sales.csv.
ΠΠ΅Π΄Π»Π°ΠΉΠ½ ΠΏΠΎ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ D3.js β 16 Π½ΠΎΡΠ±ΡΡ. Π ΠΏΠΎΠ½Π΅Π΄Π΅Π»ΡΠ½ΠΈΠΊ Π±ΡΠ΄ΡΡ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ.
ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ
- Π§Π΅ΡΡΡΠ΅ ΠΊΠ½ΠΈΠ³ΠΈ ΠΈ ΡΠ°ΠΉΡ ΠΠ΄Π²Π°ΡΠ΄Π° Π’Π°ΡΡΠΈ
- ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° D3.js
- ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΠ°ΠΉΠΊΠ° ΠΠΎΡΡΠΎΠΊΠ°
- ΠΠ»ΠΎΠ³ Flowing Data ΠΈ ΠΊΠ½ΠΈΠ³ΠΈ ΠΠ°ΡΠ°Π½Π° Π―Ρ
- ΠΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Π°Ρ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ° Β«ΠΡΡβΠΠΎΡΠΊ ΡΠ°ΠΉΠΌΡΒ» Π² ΡΠ²ΠΈΡΡΠ΅ΡΠ΅
- Π‘ΠΎΠ²Π΅ΡΡ ΠΏΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ ΠΈ ΡΡΠ±ΡΠΈΠΊΠ° Π²ΠΎΠΏΡΠΎΡβΠΎΡΠ²Π΅Ρ Π’Π°Π½ΠΈ ΠΠΈΠ±ΠΈΠΊΠΎΠ²ΠΎΠΉ
- ΠΠ°Π±ΠΎΡΠ°ΡΠΎΡΠΈΡ Π΄Π°Π½Π½ΡΡ
- ΠΡΠ±ΠΈΠΌΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Π»Π°Π±ΠΎΡΠ°Π½ΡΠΎΠ² Π½Π° ΠΏΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅
- Π’ΠΠ 10 ΠΊΠ½ΠΈΠ³ ΠΏΠΎ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ΅ ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ
Π‘ΡΠ°ΡΡΠΈ ΠΏΠΎ ΡΠ΅ΠΌΠ΅
ΠΠ½Π΄ΡΠ΅ΠΉ Π‘ΠΊΠ²ΠΎΡΡΠΎΠ²: Β«Π£Π²ΠΈΠ΄Π΅Π» ΠΈ ΠΏΠΎΠ½ΡΠ»Β»
ΠΡΠ²ΠΈΠ΄ ΠΠ°ΠΊΠΡΠ½Π΄Π»Π΅Ρ Π½Π° ΠΊΠΎΠ½ΡΠ΅ΡΠ΅Π½ΡΠΈΠΈ TED
Π£ΡΠΎΠΊΠΈ, Π»Π΅ΠΊΡΠΈΠΈ ΠΈ ΠΌΠ°ΡΡΠ΅Ρ-ΠΊΠ»Π°ΡΡΡ ΠΏΠΎ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ΅
ΠΡΡΠ½Π°Π» ΠΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ° β ΠΠ°ΠΊ Π΄Π΅Π»Π°ΡΡ Ρ
ΠΎΡΠΎΡΡΡ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΡ
infogra.ru
8 JavaScript Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Π² Π²ΠΈΠ΄Π΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΊΠ°ΡΡ / Habr
ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π΄Π°Π½Π½ΡΡ ΡΡΠ°Π»Π° Π½Π΅ΠΎΡΡΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ ΡΠ°ΡΡΡΡ ΠΆΠΈΠ·Π½ΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°. ΠΡΠ»ΠΈ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΠΊΠ°ΡΡ ΠΈ Π΄Π°ΡΠ±ΠΎΡΠ΄ΠΎΠ² Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡΠ»ΠΈ Π²Π°ΡΠ΅ΠΉ Π³ΠΎΠ»ΠΎΠ²Π½ΠΎΠΉ Π±ΠΎΠ»ΡΡ, ΠΏΡΠΎΡΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡΠ΅: Π½Π°Π²Π΅ΡΠ½ΡΠΊΠ° ΠΈ Π²Ρ ΡΠΊΠΎΡΠΎ Π²ΡΡΡΠΏΠΈΡΠ΅ Π² Π½Π°Ρ Β«ΠΊΠ»ΡΠ±Β».ΠΠ°Π½Π½Π°Ρ ΡΡΠ°ΡΡΡ Π΄Π°Π΅Ρ ΠΎΠ±ΡΠ΅Π΅, Π½ΠΎ Π²ΠΎΠ²Π»Π΅ΡΠ΅Π½Π½ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ Π²ΠΎΡΡΠΌΠΈ ΡΠ°ΠΌΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ , Π½Π° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄, JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°Ρ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π³Π΅ΠΎΠ²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΉ. Π ΡΠ΅Π»ΠΎΠΌ, ΡΠ°ΠΊΠΈΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΡΠ΅ΠΉΡΠ°Ρ ΠΌΠ½ΠΎΠ³ΠΎ, ΠΈ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ΄ ΡΠΎΡ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ β Π·Π°Π΄Π°ΡΠ° ΠΏΠΎΡΠΎΠΉ Π½Π΅ΠΏΡΠΎΡΡΠ°Ρ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ ΠΏΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΡΠΎΠΉ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ Ρ ΠΏΠΎΠΏΡΡΠ°ΡΡΡ Ρ ΠΎΡΡ Π±Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΏΡΠΎΡΡΠΈΡΡ ΠΆΠΈΠ·Π½Ρ ΡΠ΅ΠΌ, ΠΊΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΠ΅ΠΌΠ΅. ΠΡΡΠ°ΡΠΈ, ΡΡΠΎ ΡΠ»Π΅Π³ΠΊΠ° ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΠΌΠΎΠ΅ΠΉ Π½Π΅Π΄Π°Π²Π½Π΅ΠΉ ΡΡΠ°ΡΡΠΈ Π½Π° Onextrapixel (ΠΎΡΠΈΠ³ΠΈΠ½Π°Π» Π½Π° Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠΌ).
ΠΠ° Π²ΡΡΠΊΠΈΠΉ ΡΠ»ΡΡΠ°ΠΉ ΡΡΠ°Π·Ρ ΡΡΠΎΡΠ½Ρ: Π²ΠΎΠΎΠ±ΡΠ΅, JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ°ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π½Π° Π΄Π²Π° ΡΠΈΠΏΠ°. ΠΠ΄Π½ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π³Π΅ΠΎΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ². ΠΠ»Ρ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΡΡΡ ΡΠΈΠΏΠ° Google Maps ΠΈΠ»ΠΈ OpenStreetMaps Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°. Π ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅, ΡΠ°ΠΊΠΈΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΈΡ ΡΠ°Π±ΠΎΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠ²:
ΠΡΡΠ³ΠΎΠΉ ΡΠΈΠΏ β ΠΈ ΠΎ Π½Π΅ΠΌ Ρ Ρ ΠΎΡΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΡΡ β JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π΄Π°Π½Π½ΡΡ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΊΠ°ΡΡ. ΠΠ½ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ Π»ΠΈΠ±ΠΎ ΡΠ²ΡΠ·ΠΈ ΠΌΠ΅ΠΆΠ΄Ρ Π²Π΅Π»ΠΈΡΠΈΠ½Π°ΠΌΠΈ Π² ΡΠ°Π·Π½ΡΡ Π³Π΅ΠΎΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ΅Π³ΠΈΠΎΠ½Π°Ρ , Π»ΠΈΠ±ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΈ Ρ.ΠΏ. β Π²ΡΡ ΡΠΎ, ΡΡΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ Π²Π°ΠΆΠ½ΠΎ Π² ΠΏΠ»Π°Π½Π΅ Π°Π½Π°Π»ΠΈΠ·Π° Π΄Π°Π½Π½ΡΡ ΠΈ business intelligence.
JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΊΠ°ΡΡ-Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΉ
amMap (ΠΎΡ amCharts)

amMap β ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½Π°Ρ JavaScript (HTML5) Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ ΠΊΠ°ΡΡ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½Π°Ρ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ amCharts. ΠΠ½Π° Π½Π΅ Π½ΡΠΆΠ΄Π°Π΅ΡΡΡ Π² ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ Π²Π½Π΅ΡΠ½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡΡ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ Π΄Π΅Π»Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ choropleth, bubble, dot (point), connector ΠΈ flow ΠΊΠ°ΡΡΡ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠΈΡ.
Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, amMap Π΄Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π»Π΅Π³ΠΊΠΎ Β«ΠΏΠΎΠ³ΡΡΠΆΠ°ΡΡΡΡΒ» Π² ΡΠΎΡ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ ΡΡΠ°ΡΡΠΎΠΊ ΠΊΠ°ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ drill down ΠΈΠ»ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΌΠ°ΡΠΊΠ΅ΡΠΎΠ² β Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π»ΡΠ±ΠΎΠΏΡΡΠ½Π°Ρ Π²Π΅ΡΡ.
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΡΠ°Π±ΠΎΡΡ Ρ amMap Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°ΡΠ°ΡΡ ZIP-ΡΠ°ΠΉΠ» Ρ Π±ΠΈΠ½Π°ΡΠ½ΠΈΠΊΠ°ΠΌΠΈ. ΠΡΡΠ°ΡΠΈ, Π² Π½Π΅ΠΌ ΡΠΆΠ΅ Π»Π΅ΠΆΠΈΡ ΠΏΠΎ 455 ΠΊΠ°ΡΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ² (JavaScript/SVG). ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Ρ amMap Π½Π΅ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠ°Ρ ΠΈ ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ ΠΊ Π½Π°Π±ΠΎΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠ² ΠΈ ΠΎΡΠ²Π΅ΡΠΎΠ².
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ API: Π΅ΡΡΡ.
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: Π½Π΅Ρ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ (Π±ΡΠ΅Π½Π΄ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ°ΡΡΡ) ΠΈΠ»ΠΈ ΠΏΠ»Π°ΡΠ½ΠΎ (ΠΎΡ $140).
AnyMap (ΠΎΡ AnyChart)

AnyMap β ΠΎΠ΄Π½Π° ΠΈΠ· ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ JavaScript (HTML5) Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ , ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠ΅ΠΉ AnyChart. ΠΠ°ΠΊ ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ Ρ amMap, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ°ΡΡΡ Ρ Π΅Π΅ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΈΡ ΡΡΠΈΠ»ΠΈΠΉ, ΡΠ°Π²Π½ΠΎ ΠΊΠ°ΠΊ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ Π²Π½Π΅ΡΠ½ΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΈΠ»ΠΈ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ (jQuery ΠΈ Ρ.Π΄.). AnyMap ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΡΠΈΠΏΡ ΡΠ΅ΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ: choropleth, bubble, dot, connector, flow.
Π ΡΠΈΡΠ»ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠΈΡ AnyMap Π²Ρ ΠΎΠ΄ΡΡ drill down Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ°ΠΉΠΎΠ½ΠΎΠ², ΡΠΎΠ±ΡΡΠΈΠΉΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ (ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ), ΡΠ²Π΅ΡΠΎΠ²Π°Ρ ΡΠΊΠ°Π»Π° Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°ΡΠΊΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΊΠ°ΡΡΡ ΠΏΠΎ Π·Π°Π΄Π°Π½Π½ΡΠΌ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°ΠΌ.
ΠΠ°Π±Π΅Π³Π°Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²ΠΏΠ΅ΡΠ΅Π΄, ΡΠΊΠ°ΠΆΡ, ΡΡΠΎ, Π½Π° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄, AnyMap Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΎΡ ΠΎΠΆΠ° Π½Π° D3, Π½Π΅ΠΆΠ΅Π»ΠΈ Π½Π° amMap ΠΈΠ»ΠΈ Highmaps. ΠΠ½Π° ΠΊΠ°ΠΊ Π±Ρ ΡΠΎΡΠ΅ΡΠ°Π΅Ρ Π² ΡΠ΅Π±Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Β«ΠΊΠΎΡΠΎΠ±ΠΎΡΠ½ΡΡ Β» ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΈ Π² ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°ΡΡΠΈΡΡΠ΅ΠΌΠΎΠΉ ΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠ΅ΠΌΠΎΠΉ ΡΠΎ ΡΡΠΎΡΠΎΠ½Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π²ΠΈΠ·Π°ΡΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΊΠ°ΡΡΡ.
ΠΠΈΠ½Π°ΡΠ½ΠΈΠΊΠΈ AnyMap Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ZIP-ΡΠ°ΠΉΠ»Π΅ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², Π° Π½Π° CDN Ρ AnyChart Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΠΎΡΠ½ΠΈ ΠΊΠ°ΡΡ Π² ΡΠ°ΠΌΡΡ ΡΠ°Π·Π½ΡΡ ΡΠΎΡΠΌΠ°ΡΠ°Ρ : GeoJSON, TopoJSON, SHP, SVG. Π’Π°ΠΊΠΆΠ΅ ΡΡΠΎΠΈΡ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Ρ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π±ΠΎΠ³Π°ΡΠ°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΈ ΠΎΠ±ΡΠΈΡΠ½ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ API, ΠΊΡΡΠ°ΡΠΈ, Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π»Π΅Π³ΠΊΠΎΠ΅ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΈ β ΠΎΠΏΡΡΡ ΠΆΠ΅ β Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΡΡΠΌΠΏΠ»ΠΎΠ².
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ API: Π΅ΡΡΡ.
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: Π½Π΅Ρ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ (Π±ΡΠ΅Π½Π΄ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ°ΡΡΡ) ΠΈΠ»ΠΈ ΠΏΠ»Π°ΡΠ½ΠΎ (ΠΎΡ $79).
D3.js (ΠΎΡ Mike Bostock)

D3.js β ΠΌΠΎΡΠ½Π°Ρ Π² ΠΏΠ»Π°Π½Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ. Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ ΡΠΏΠΎΠΌΡΠ½ΡΡΡΡ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ, D3 β ΡΡΠΎ, ΡΠΊΠΎΡΠ΅Π΅, ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π°Π΅Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Ρ ΡΠ²ΠΎΡΡΠ΅ΡΡΠ²Π°. Π₯ΠΎΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΊΠ°ΡΡ Π·Π΄Π΅ΡΡ Π½Π΅ ΡΠ°ΠΊ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΠΊΠ°ΠΊ, ΡΠΊΠ°ΠΆΠ΅ΠΌ, Π² ΡΠ΅ΡΠ΅Π½ΠΈΡΡ ΠΎΡ amCharts, AnyChart ΠΈΠ»ΠΈ Highcharts.
Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊΡΡ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΊΠ°ΡΡΡ, ΠΊΠ°ΠΊ Π½Π° ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ, ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΈΠ·ΡΡΠΈΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ². Π₯ΠΎΡΡ, Π½Π°Π΄ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΡΡΠΎΠΈΡ ΡΠΎΠ³ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π² ΠΈΡΠΎΠ³Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠ΅, ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ.
Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π² D3 Π΄ΠΎΡΡΡΠΏΠ½ΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠΈΡ, ΡΡΠ΅Π΄ΠΈ ΠΊΠΎΡΠΎΡΡΡ ΠΏΠΎΠ»Π½Π°Ρ ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·Π°ΡΠΈΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠΎΠ±ΡΡΠΈΠΉΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ ΠΈ Ρ.Π΄. Π ΡΠ΅Π»ΠΎΠΌ, Ρ Π±Ρ ΡΠΊΠ°Π·Π°Π», ΡΡΠΎ ΡΡΠΎ β ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π₯ΠΎΡΡ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, D3 Π½Π΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ ΠΊΠ°ΡΡ. ΠΡΠΎ Π·Π½Π°ΡΠΈΡ β ΠΈΡ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΠΊΠ°ΡΡ Π² ΠΎΡΠΊΡΡΡΡΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°Ρ , Π½ΠΎ Π²ΡΡΠ΄ Π»ΠΈ ΡΠ΅ΠΉΡΠ°Ρ ΡΡΠΎ Π±ΠΎΠ»ΡΡΠ°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°.
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΊΠ°ΠΊ ΡΠ°ΠΊΠΎΠ²ΠΎΠΉ Ρ D3 Π½Π΅Ρ, ΠΎΠ΄Π½Π°ΠΊΠΎ Π΅ΡΡΡ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°ΡΠΏΠΈΡΠ°Π½Π½ΠΎΠ΅ API ΠΈ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠΎΡΠΈΠ°Π»ΠΎΠ², ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈ ΠΏΡΠΎΡΠΈΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² Π±ΡΠΊΠ²Π°Π»ΡΠ½ΠΎ ΠΏΠΎ Π²ΡΠ΅ΠΌΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΡ.
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ API: Π΅ΡΡΡ.
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: Π½Π΅Ρ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ.
Google GeoCharts (ΠΎΡ Google)

Π£ Π³ΠΈΠ³Π°Π½ΡΠ° Google Π΅ΡΡΡ ΡΠ²ΠΎΡ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ β Google Charts. ΠΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΈ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΊΠ°ΡΡ-Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΉ, Π½Π°Π·ΡΠ²Π°ΡΡΠΈΡ ΡΡ Π·Π΄Π΅ΡΡ geocharts, Π²ΠΈΠ΄ΠΈΠΌΠΎ, ΡΡΠΎΠ±Ρ ΠΈΡ Π½Π΅ ΠΏΡΡΠ°Π»ΠΈ Ρ ΠΎΠ±ΡΡΠ½ΡΠΌΠΈ ΠΊΠ°ΡΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ².
ΠΠ°ΡΡΠ° Π² Google Geocharts ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Π°, ΠΈ ΡΡΠΎ β ΠΊΠ°ΡΡΠ° ΠΌΠΈΡΠ°. ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ΅Π³ΠΈΠΎΠ½, Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ΄Π΅Π»Π°Π½ ΡΠΎΠΊΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π·ΡΠΌΠ°.
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π·Π΄Π΅ΡΠ½ΠΈΠΉ API Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΡ (scrolling), ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡΡΠ°Π±Π° (zoom), ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ (drag). Π’Π°ΠΊΠΆΠ΅ Google Π½Π΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΈΠ½ΡΡ ΡΠΈΠΏΠΎΠ² ΡΠ΅ΡΠΈΠΉ Π΄Π»Ρ ΠΊΠ°ΡΡ, ΠΊΡΠΎΠΌΠ΅ choropleth ΠΈ bubble. ΠΠ΄Π½Π°ΠΆΠ΄Ρ Π΄Π°Π½Π½ΡΠ΅ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠΈΠ»ΡΠ½ΠΎ ΠΌΠ΅Π½Ρ, ΠΌΡΠ³ΠΊΠΎ ΡΠΊΠ°ΠΆΠ΅ΠΌ, ΠΎΠΏΠ΅ΡΠ°Π»ΠΈΠ»ΠΈ, Π½ΠΎ Π² ΡΡΠΎΠΌ Π±ΡΠ» ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ: Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΡΡΠ΅ΡΠ΅ ΠΌΠ½Π΅ ΠΏΡΠΈΡΠ»ΠΎΡΡ Π½Π°ΡΠ°ΡΡ ΠΈΡΠΊΠ°ΡΡ ΠΈ ΠΈΠ·ΡΡΠ°ΡΡ Π²ΡΡΡΠ΅ΡΠΊΠΈΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, ΠΈ Π²ΠΎΡ Ρ ΡΠ΅ΠΉΡΠ°Ρ Π΄Π΅Π»ΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌΠΈ ΡΡΠΎΠ³ΠΎ ΠΌΠΈΠΊΡΠΎΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΡ Ρ Π²Π°ΠΌΠΈ.
Π’Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°ΡΠ΅, GeoCharts β ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ΅Ρ Π»ΡΠ΄Π΅ΠΉ ΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΌ Π½Π΅ Π½ΡΠΆΠ½Ρ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΡΠΈΡΠΈ, Π½ΠΎ ΠΊΡΠΎ ΠΈΡΠ΅Ρ ΠΏΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ ΡΠΊΠΎΡΠΎΡΡΡ ΠΈ ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΠΎΡΡΡ Π²ΠΌΠ΅ΡΡΠΎ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠΉ ΠΊΡΠ°ΡΠΎΡΡ ΠΈ ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·Π°ΡΠΈΠΈ.
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ API: Π΅ΡΡΡ.
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: Π½Π΅Ρ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ.
Highmaps (ΠΎΡ Highsoft)

Highmaps β Β«ΠΌΠ»Π°Π΄ΡΠ°Ρ ΡΠ΅ΡΡΡΠ°Β» Highcharts ΠΈ Highstock, ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Highsoft. ΠΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° β ΠΎΡΠΊΡΡΡΡΠΉ ΠΊΠΎΠ΄ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π΅Π³ΠΎ ΠΏΠ»ΡΡΠ°ΠΌΠΈ, Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, Π²ΡΡΠΎΠΊΠ°Ρ ΡΠΊΠΎΡΠΎΡΡΡ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ ΠΈ ΡΠΈΡΠΎΠΊΠΈΠΉ Π½Π°Π±ΠΎΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ drill down ΠΈ Ρ.ΠΏ.
Π‘ΡΠ΅Π΄ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ Π² Highmaps ΡΠ΅ΡΠΈΠΉ β choropleth ΠΈ bubble. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΈΡΠΎΠ²Π°ΡΡ Π»ΠΈΠ½ΠΈΠΈ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΡΠΎΠ³, ΡΠ΅ΠΊ ΠΈ ΠΊΠΎΠ½Π½Π΅ΠΊΡΠΎΡΠΎΠ². Π₯ΠΎΡΡ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΠΊΠ°ΠΆΠ΅ΠΌ, flow-ΠΊΠ°ΡΡΡ Π·Π΄Π΅ΡΡ Π½Π΅ ΡΠ°ΠΊ ΠΏΡΠΎΡΡΠΎ, ΠΊΠ°ΠΊ Π² ΡΠ΅Ρ ΠΆΠ΅ amMap ΠΈ AnyMap.
Π’Π°ΠΊΠΆΠ΅ ΡΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π½ΠΈ Highcharts, Π½ΠΈ Highmaps Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π±Π΅Π· jQuery, ΡΠ°ΠΊ ΡΡΠΎ Π΄Π»Ρ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠ° Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π° (ΠΈΠ»ΠΈ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π΅ΡΡΡ Π΅ΡΠ΅ Π²Π°ΡΠΈΠ°Π½Ρ ΠΏΠΎΠΈΡΠΊΠ°ΡΡ Π΄ΡΡΠ³ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ β Ρ Π°-Ρ Π°).
ΠΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ β Highmaps ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠ°ΡΡ Π² ΡΠΎΡΠΌΠ°ΡΠ°Ρ SVG ΠΈ GeoJSON. Π’Π°ΠΊΠΆΠ΅ Ρ Π½Π΅Π΅ ΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π±ΡΡΡΡΠΎ ΠΈ ΡΡΠΏΠ΅ΡΠ½ΠΎ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π²ΠΎ Π²ΡΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ .
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ API: Π΅ΡΡΡ.
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: jQuery.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ (Π±ΡΠ΅Π½Π΄ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ°ΡΡΡ) ΠΈ ΠΏΠ»Π°ΡΠ½ΠΎ (ΠΎΡ $390).
jQuery Mapael (ΠΎΡ Vincent Broute)

jQuery Mapael β Π΅ΡΠ΅ ΠΎΠ΄Π½Π° ΠΎΡΠ΅Π½Ρ Π΄ΠΎΡΡΠΎΠΉΠ½Π°Ρ, Ρ ΠΎΡΠΎΡΠΎ ΡΠ΄Π΅Π»Π°Π½Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½Π°Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΊΠ°ΡΡ. ΠΠ½Π° ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° jQuery ΠΈ Raphael JS, ΡΠ°ΠΊ ΡΡΠΎ ΡΡΠΈ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ Π½ΡΠΆΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ Π² Π²ΠΈΠ΄Ρ ΠΏΡΠΈ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ Π΅Ρ choropleth, bubble ΠΈΠ»ΠΈ connector ΠΊΠ°ΡΡ.
ΠΠ°Π±ΠΎΡ ΡΠ²ΠΎΠΈΡ , Π³ΠΎΡΠΎΠ²ΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ°ΡΡ Π»Π΅ΠΆΠΈΡ Π² ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΈ Mapael. ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ API ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½Ρ Π² ΠΎΠ΄Π½Ρ ΡΡΠ°ΡΡΡ Π½ΠΎ, ΡΠ΅ΡΡΠ½ΠΎ Π³ΠΎΠ²ΠΎΡΡ, Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ Ρ Π΄Π°Π½Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΠΎΡ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ³ΠΎ ΡΡΡΠΎΡΠΈΠ°Π»Π°.
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ API: Π΅ΡΡΡ.
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: jQuery ΠΈ Raphael.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ.
jVectorMap (ΠΎΡ Kirill Lebedev)

ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΊΠ°ΡΡ jVectorMap ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠΊΡΡΡΡΠΉ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄, ΠΊΠ°ΠΊ ΠΈ ΡΡΠ΄ Π΄ΡΡΠ³ΠΈΡ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ Π² ΡΡΠ°ΡΡΠ΅. ΠΠ½Π° Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π±Π΅Π· jQuery. Π₯ΠΎΡΡ ΠΊΠΎΠΌΡ-ΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ, ΡΡΠΎ ΡΠ°ΠΊΠ°Ρ Π²Π½Π΅ΡΠ½ΡΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ Π΄Π΅Π»Π°Π΅Ρ Π΄Π°Π½Π½ΡΡ (ΠΈΠ»ΠΈ Π»ΡΠ±ΡΡ Π΄ΡΡΠ³ΡΡ) Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π½Π΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π»Π΅Π³ΠΊΠΎ-ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠΉ, ΡΡΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Π² Π½Π°ΡΠ΅ Π²ΡΠ΅ΠΌΡ, Π²Π΅Π΄Ρ jQuery Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΎΡΡΡΠ²ΠΎΠΌ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ ΡΡΠ΅Π΄ΠΈ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ² ΠΈ ΠΏΠΎ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΠΈ, ΠΈ ΠΏΠΎ Π΄ΠΎΠ»Π΅ ΡΡΠ½ΠΊΠ°.
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π²ΡΠ±ΠΎΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠΈΠΏΠΎΠ² ΡΠ΅ΡΠΈΠΉ Π·Π΄Π΅ΡΡ Π½Π΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π²Π΅Π»ΠΈΠΊ: Π² jVectorMap ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ choropleth ΠΈ marker ΠΊΠ°ΡΡΡ, Π½ΠΎ Π² ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ β ΠΎΡΠ΄Π°Π΄ΠΈΠΌ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎΠ΅ β ΠΎΠ½ΠΈ ΡΠ΄Π΅Π»Π°Π½Ρ Π²Π΅ΡΡΠΌΠ° Π΄ΠΎΠ±ΡΠΎΡΠ½ΠΎ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΌΠ°ΡΠΊΠ΅ΡΠΎΠ² Π»ΡΠ±ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡΡΡΡ drill down ΠΈ ΡΡΠ΄ Π΄ΡΡΠ³ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠΈΡ.
Π£ jVectorMap Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ API ΠΈ Π½Π΅Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π² ΠΏΡΠΈΠ²ΡΡΠ½ΠΎΠΌ ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ Π΄Π»Ρ ΠΌΠ΅Π½Ρ Π²ΠΈΠ΄Π΅. ΠΠ΄Π½Π°ΠΊΠΎ ΠΈΠΌΠ΅Π΅ΡΡΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ, Π½ΠΎ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΡΡΡΠΎΡΠΈΠ°Π» Getting Started. Π‘Π²ΠΎΠΈ ΠΊΠ°ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ GeoJSON.
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ API: Π΅ΡΡΡ.
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: jQuery.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΠΈ ΠΏΠ»Π°ΡΠ½ΠΎ (ΠΎΡ $39).
Kartograph (ΠΎΡ Gregor Aisch)

Kartograph β Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΎΡΠΊΡΡΡΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π²ΡΡΠ΅ΠΊΠ°ΡΡΠΈΠΌΠΈ ΠΈΠ· ΡΡΠΎΠ³ΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°ΠΌΠΈ. ΠΠ°Π½Π½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΠ·ΡΠ΅Ρ ΠΎΠ±ΠΈΠ»ΠΈΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΠ΅Π½ΠΈ, ΡΠ°Π·ΠΌΡΡΠΈΠ΅ ΠΈ Ρ.Π΄.
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅, ΡΡΠΎ Π²Π΄ΠΎΠ±Π°Π²ΠΎΠΊ ΠΊ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΡΠΌ choropleth ΠΈ bubble ΡΠΈΠΏΠ°ΠΌ ΡΠ΅ΡΠΈΠΉ Π·Π΄Π΅ΡΡ Π΅ΡΠ΅ Π΅ΡΡΡ 3D columns (ΠΈΠ»ΠΈ, ΠΊΠ°ΠΊ ΠΈΡ ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π°Π·ΡΠ²Π°ΡΡ, Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ 3D bars).
ΠΠΎΡΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ ΠΊΠ°ΡΡ Π² Kartograph Π½Π΅Ρ. ΠΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ Π»ΡΠ±ΡΠΌΠΈ ΠΊΠ°ΡΡΠ°ΠΌΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ½Π° ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΡΠΈΠ»ΠΈΡΡ Kartograph.py Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ°ΡΡ.
Π₯ΠΎΡΡ Kartograph ΠΈΠΌΠ΅Π΅Ρ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΈ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π±Π΅Π· Raphael JS (ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ Π΄Π²ΠΈΠΆΠΎΠΊ Π΄Π»Ρ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ) ΠΈ jQuery, ΡΡΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π΅Π»Π°Π΅Ρ ΠΏΡΠΎΡΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΡΠΌ ΠΈ Π±Π΅ΡΠΏΡΠΎΠ±Π»Π΅ΠΌΠ½ΡΠΌ, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ API Π΄Π°Π½Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½Π½ΡΠ΅ Π² ΠΎΠ΄Π½Ρ ΡΡΠ°ΡΡΡ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²ΠΏΠΎΠ»Π½Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈ ΡΠ΄ΠΎΠ±Π½ΠΎ Π·Π°ΠΏΠΎΠ»ΡΡΠΈΡΡ Π½ΡΠΆΠ½ΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΊΠ°ΡΡΡ Π΄Π»Ρ Π²Π°ΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ².
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ API: Π΅ΡΡΡ.
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: jQuery ΠΈ Raphael.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ ΠΌΠ½ΠΎΡ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΊΠ°ΡΡ β ΠΊΡΠΎΡΡ-Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΠ΅. (ΠΡ, Π² XXI Π²Π΅ΠΊΠ΅ ΠΈΠ½Π°ΡΠ΅, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅, ΠΈ Π±ΡΡΡ ΡΠΆΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ.) ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ Π΄Π°ΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΡΠ°ΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Internet Explorer 6. (Π₯ΠΎΡΡ Π²ΠΎΡ ΡΡΠΎ, Ρ Π½Π°Π΄Π΅ΡΡΡ, ΠΎΡΠ΅Π½Ρ ΡΠΊΠΎΡΠΎ ΡΠΆΠ΅ ΠΏΠ΅ΡΠ΅ΡΡΠ°Π½Π΅Ρ Π±ΡΡΡ Π²Π°ΠΆΠ½ΡΠΌ, Π² ΠΊΠΎΠ½ΡΠ΅ 2010-Ρ .)
ΠΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΡΠΏΠΎΠΌΡΠ½ΡΠ», Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ-ΡΠ°ΠΊΠΈ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡΡΡ Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ΠΌ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΊΠ°ΡΡ. ΠΠΎ Π·Π°ΡΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ ΡΠ°ΠΊΡΡ ΡΠΈΡΠΎΠΊΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ, ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΠ΅, Π΄Π° ΠΈ β ΠΏΠΎΠ»ΠΎΠΆΠ° ΡΡΠΊΡ Π½Π° ΡΠ΅ΡΠ΄ΡΠ΅ β Π½Π΅ ΡΠ°ΠΊ ΡΠΆ ΡΠΈΠ»ΡΠ½Ρ Π² ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·Π°ΡΠΈΠΈ (Π½Ρ, ΠΊΡΠΎΠΌΠ΅ D3, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ).
ΠΠΎΠ²ΠΎΡΡ ΠΎ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°Ρ β ΠΊΡΡΠ°ΡΠΈ, ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ Π΄Π»Ρ Π½Π΅ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΡ ΠΈ Π»ΠΈΡΠ½ΡΡ ΡΠ΅Π»Π΅ΠΉ, β Ρ Π½Π΅ ΠΌΠΎΠ³Ρ Π½Π΅ ΠΎΡΠΌΠ΅ΡΠΈΡΡ AnyMap ΠΈ Highmaps Π·Π° ΠΈΡ ΠΎΠ±ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ API, ΡΠ°Π²Π½ΠΎ ΠΊΠ°ΠΊ ΠΈ Π·Π° Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΏΡΠ»Ρ Π²ΡΡΡΠ΅ΡΠΊΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ²/Π΄Π΅ΠΌΠΎ JavaScript-ΠΊΠ°ΡΡ Ρ Π΄ΠΎΠ±ΡΠΎΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡΡ.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠ° ΡΡΠ°ΡΡΡ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ Π΄Π»Ρ ΠΊΠΎΠ³ΠΎ-ΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½Π° Ρ ΡΠΎΠΉ ΡΠ΅Π»ΡΡ, ΡΡΠΎΠ±Ρ Π±ΡΡΡΡΠΎ ΡΡ Π²Π°ΡΠΈΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΡΡΡ ΡΠΎΠΏΠΎΠ²ΡΡ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΡ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΊΠ°ΡΡ. ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π΄Π΅Π»ΠΈΡΠ΅ΡΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌΠΈ ΠΌΡΡΠ»ΡΠΌΠΈ, Π²ΡΠ²ΠΎΠ΄Π°ΠΌΠΈ, ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡΠΌΠΈ ΠΈ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π½Π°Π·Π²Π°Π½ΠΈΡΠΌΠΈ Π²Π°ΡΠΈΡ Π»ΡΠ±ΠΈΠΌΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ, Π΅ΡΠ»ΠΈ Π²Π΄ΡΡΠ³ Ρ Π½Π΅Π·Π°ΡΠ»ΡΠΆΠ΅Π½Π½ΠΎ, Π½Π° Π²Π°Ρ Π²Π·Π³Π»ΡΠ΄, Π½Π΅ Π·Π°ΡΡΠΎΠ½ΡΠ» ΠΈΡ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅.
ΠΡΠ΅ΠΌ Ρ ΠΎΡΠΎΡΠ΅Π³ΠΎ Π΄Π½Ρ!
habr.com