Vandens žemėlapiai (2 p.): „JavaScript“ diagramų bibliotekų palyginimas

Giliai pasinerkite į D3.js, Dygraphs, Chart.js ir „Google“ diagramas

Mano sukurtų diagramų kodas antraštės vaizde yra „GitHub“.

Kai pradėjau kurti diagramas ir vizualizuoti duomenis, žinojau tik „Apsvarstykite„ Canvas “dideliems duomenų rinkiniams“ ir „D3 yra magija“. Neįsivaizdavau, kad egzistuoja visa bibliotekų diagramų ekosistema. Šios bibliotekos yra nemokamos, prieinamos ir pateikiamos su pavyzdžiais ir dokumentais.

Dar svarbiau tai, kad kiekviena biblioteka turi savų pliusų ir minusų, susijusių su diagramų įvairove, mokymosi kreive, pritaikymo lygiu ir tiesioginiu interaktyvumu. Taigi kaip vienas nusprendžia?

Šiame straipsnyje palyginsiu keletą populiarių „JavaScript“ diagramų bibliotekų, ypač „ D3.js“ , „Dygraphs“ , „ Chart.js“ ir „ Google Charts“ . Tikėkitės sužinoti, kaip sukurti „JavaScript“ diagramą, aukšto lygio aukščiau paminėtų veiksnių (diagramų įvairovė, pritaikymas ir kt.) Palyginimą bibliotekose ir naudojimo atvejį, kuris, mano manymu, geriausiai tinka kiekvienai diagramų bibliotekai.

Tačiau pirmiausia trumpas įvadas, kodėl duomenų vizualizavimas tampa vis svarbesnis. Kviečiame pereiti prie palyginimo ( Ctrl+F „Palyginkime!“).

Kodėl reikia diagramų ir vizualizuoti duomenis?

Visada maniau, kad duomenų vizualizacijos yra geresnis būdas mokytis ir įtraukti auditoriją. Ne visi natūraliai sugeria informaciją per tekstą. Mano akys mirksta bandant išgauti skaičius iš žodžių bloko. Tekste taip pat daroma prielaida, kad esate susipažinę su kalba, kuria jis parašytas. Kolegijoje kovojau su vadovėlių skaitymais. Tikėtina, kad sunkiai išgyveno ir ne angliškai kalbantys žmonės.

Kitu atveju, kai tarp informacijos krūvos aptikau gražią, aiškią diagramą, iškart supratau sąvokas ir jas geriau prisiminiau.

Mūsų protas nėra laidus greitai ir nuodugniai suprasti didelius teksto gabalus ar „Excel“ eilučių krūvas. Tačiau tai, kuo jie pasižymi, yra atpažinti panašumą, simetriją, ryšius tarp objektų ir tęstinumą, kurie yra duomenų vizualizacijos pagrindai. Pagalvokite apie geštalto principus.

Štai keletas darbo statistikos biuro duomenų apie nedarbo lygį visose JAV apskrityse (kurias rodo FIPS kodas) 2016 m.

Norėdamas pastebėti tendencijas ar išsiaiškinti neįprastus, vidutinis žmogus daug laiko praleistų stebėdamas šiuos duomenis. Jie gali nuskaityti kiekvieną eilutę ir perrašyti figūras ant kito popieriaus lapo. Ne idealu.

Bet jei mes vaizduosime duomenis kaip geografinį žemėlapį, kaip tai padarė Mike'as Bostockas savo stebimame sąsiuvinyje:

Iš karto galite pamatyti aukštesnio nedarbo taškus. Vietoj valandų, dabar aptikote įdomių modelių per kelias sekundes. Šis laiko supratimo skirtumas gali reikšti skirtumą tarp, atrodytų, „nesuprantamo“ duomenų rinkinio pašalinimo, arba, jūsų tyrimo tęsimo . Tikslių ir prieinamų vizualizacijų kūrimas taip pat leidžia žiūrovams užfiksuoti duomenų rinkinio neatitikimus ar skyles, dėl kurių duomenys yra labiau atskaitingi .

Diagramos anatomija

Prieš pereidamas prie bibliotekų palyginimo, manau, kad pagrindinė „JavaScript“ diagramos „anatomija“ garantuoja apžvalgą. Dirbdamas per šias bibliotekas pastebėjau, kad visos, išskyrus D3 *, taiko tą patį schemų generavimo modelį.

  1. Importuokite diagramų biblioteką į HTML.
  2. Sukurti iv> with an ID identifier, such as “my-first-chart”.
  3. Fetch and load data in the JS. You may also define the data directly in the JS. Make sure you’ve linked this JS file in the HTML.
  4. Pass the data, the iv> container, and an options object to a chart generator function.
  5. Some libraries, like Google Charts, require calling draw() to draw the generated chart.
  6. Serve the code up on a Python server with http-server -c-1 -p 8000 and see your first chart at localhost:8000.

Examples

  • Basic Dygraphs example
  • Basic D3.js example
  • Basic Chart.js example
  • Basic Google Charts example

*D3 has been primarily used for charting, but it’s more of a collection of toolkits than your standard charting library. See this article for a better explanation.

Let’s compare!

When picking any library, I like to start with these evaluation questions:

  • What’s the learning curve? (quality of documentation, code complexity)
  • How much can I customize my charts?
  • Is the library actively supported?
  • What types of data does this library take?
  • What modes of interactivity are offered?
  • Does the library offer responsive charts?

Learning curve

Dygraphs, Chart.js, and Google Charts have relatively small learning curves. They are great if you need to whip up charts in a couple of hours.

D3 has the highest learning curve, and the reason for this is the fine-grain, low-level control it offers. It’s more of a well-written library of advanced helper functions. D3 can theoretically be used in conjunction with other charting libraries.

To explore a bit further, I created the same chart across all 4 libraries using Boston weather data from meteoblue. The code is up on GitHub.

…. and recorded the lines of code needed to make each chart:

The lines of code support the original comparison of learning curves. D3 needs significantly more lines to get a basic chart up and running but provides more opportunity for customization.

Customization

D3 shines in the customization arena. D3’s granularity and modularity is exactly why designers and developers favor it as the medium for stunning and unique visualizations. Chart.js and Google Charts offer numerous options that can be passed into a generator function, such as legend font size and thickness of a line.

Active development

I define library development as the frequency of releases and the responsiveness of library maintainers to opened issues and feedback for improvement. A supportive and large community of users is also a plus. Usage encourages healthy change and accountability as the JavaScript ecosystem evolves.

Looking at the respective GitHub repositories, I discovered releases and resolved issues for Dygraphs and Google Charts to be more sporadic than D3 and Chart.js. D3 will not reach a halt in development any time soon. Its creator and contributors recently released a major version (v5.0) in 2018. They still actively contribute to the visualization community. Chart.js’s latest release also occurred pretty recently in 2018. The release addressed issues and enhancements. They are documented thoroughly in the release notes.

Types of data

This speaks for itself. Fun fact: I used D3’s fetch library to fetch data. I used other libraries to chart it. D3 has fetch functions for almost all common data formats used in data visualization.

Interactivity

Dygraphs, Chart.js, and Google Charts all have some out-of-box interactivity features, like tool tips, zoom, and events. It’s difficult to introduce highly custom interactions because each library is so encapsulated. With D3, you accept that complicated and unique interactions are possible. The tradeoff is simple interactions, like a tool tip, must also be constructed from the ground up.

Responsiveness

Chart.js and D3 offer responsive charts out of the box (for D3, specify a viewBox instead of width and height for the svg container). Dygraphs and Google Charts need some additional work to create responsive charts, like adding position: relative to the chart container or redrawing the chart on $(window).resize().

Dygraphs responsive chart (inspect the chart containers to see the CSS classes)

Responsive Google Charts Stack Overflow thread

Best used for?

Last but not least, I’ve listed the use case that I think each library is best suited for:

D3 is worth investing time in if you a) need a highly custom visualization and/or b) want helper functions to use in conjunction with other libraries.

I enjoyed Dygraphs for time series because the user can pan over the series and see the date and corresponding point by default. You can also highlight specific periods of time and select ranges of time.

Chart.js allows you to create simple, aesthetically pleasing charts that pop into the page seamlessly on load.

Finally, Google Charts offered the most variety of out-of-the-box charts, compared to the other libraries. In addition to standard charts, Google Charts also supports geographic maps, tree maps, sankey diagrams, etc.

3, 2, 1 … recap!

We’ve covered the many reasons why data visualization is powerful, the basic structure and steps to create a chart using a charting library, and a play-by-play comparison of 4 popular JavaScript libraries.

The most important step after you’ve selected a library and generated some visualizations is to communicate, and then iterate. Show your charts to others and ask them what they can and cannot interpret. Listen to their feedback and keep tweaking your charts. They’re teaching tools, and teaching tools should constantly evolve with the content and the viewers.

Thank you for reading!

- — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Code for the charts I created are up on GitHub.

Here are the presentation slides that led to this article.

If you want to read about Bokeh and D3, check out Charting the waters: between Bokeh and D3.

If you have any suggestions or feedback, drop a comment.