Π Π°Π·Π½ΠΎΠ΅

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° d3 js – Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² D3 / Лаборатория Π΄Π°Π½Π½Ρ‹Ρ… corporate blog / Habr

14.05.2020

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² 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.

Если Π’Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ Π½Π° сайтС,
Ρ‚ΠΎ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° обновлСния: ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° обновлСния

Если Ρƒ Вас ΠΎΡΡ‚Π°Π»ΠΈΡΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ вопросы, Π»ΠΈΠ±ΠΎ Ρƒ Вас Π΅ΡΡ‚ΡŒ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ Π²Ρ‹ΡΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ, Ρ‚ΠΎ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ свой ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ Π²Π½ΠΈΠ·Ρƒ страницы.

ΠŸΠΎΡ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠΉΡ‚Π΅ эту ΡΡ‚Π°Ρ‚ΡŒΡŽ Π΄Ρ€ΡƒΠ·ΡŒΡΠΌ:

Если Π’Π°ΠΌ понравился сайт, Ρ‚ΠΎ размСститС ссылку Π½Π° Π½Π΅Π³ΠΎ (Ρƒ сСбя Π½Π° сайтС, Π½Π° Ρ„ΠΎΡ€ΡƒΠΌΠ΅, Π² ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅):

  1. Кнопка:
    <a href=Β»https://myrusakov.ruΒ» target=Β»_blankΒ»><img src=Β»https://myrusakov.ru//images/button.gifΒ» alt=»Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой сайт» /></a>

    Она выглядит Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

  2. ВСкстовая ссылка:
    <a href=Β»https://myrusakov.ruΒ» target=Β»_blankΒ»>Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой сайт</a>

    Она выглядит Π²ΠΎΡ‚ Ρ‚Π°ΠΊ: Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой сайт

  3. 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 ноября. Π’ понСдСльник Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Ρ‹ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ для ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ.

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ссылки

  1. Π§Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΊΠ½ΠΈΠ³ΠΈ ΠΈ сайт Π­Π΄Π²Π°Ρ€Π΄Π° Π’Π°Ρ„Ρ‚ΠΈ
  2. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° D3.js
  3. Π’ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Майка Бостока
  4. Π‘Π»ΠΎΠ³ Flowing Data ΠΈ ΠΊΠ½ΠΈΠ³ΠΈ Натана Π―Ρƒ
  5. Вся интСрактивная ΠΈΠ½Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ° Β«ΠΡŒΡŽβ€‘Π™ΠΎΡ€ΠΊ таймс» Π² Ρ‚Π²ΠΈΡ‚Ρ‚Π΅Ρ€Π΅
  6. Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ Ρ€ΡƒΠ±Ρ€ΠΈΠΊΠ° вопрос‑отвСт Π’Π°Π½ΠΈ Π‘ΠΈΠ±ΠΈΠΊΠΎΠ²ΠΎΠΉ
  7. Лаборатория Π΄Π°Π½Π½Ρ‹Ρ…
  8. Π›ΡŽΠ±ΠΈΠΌΡ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π»Π°Π±ΠΎΡ€Π°Π½Ρ‚ΠΎΠ² Π½Π° пинтСрСстС
  9. ВОП 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

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *