D3 Data Driven Documents, Angular ja Require

Hiljattain tuli ajankohtaiseksi tutustua taas uuteen JavaScript-herkkuun, tällä kertaa kirjasto nimeltään d3.

Kirjasto muodostaa ytimen datan visualisoinneille ja animaatiolle. Mistä itse pidän tässä, se ei ole svg kirjasto, eikä komponenttipaketti, vaan se on framework omalle visualisointityölle – joka voi ulottua datan visualisoinnista taulukkoon saman datan visualisoimiseen vaikkapa kuplakaavioksi tai lämpökartaksi. Ja kaikki kauniisti animoitavissa. Esitystapana voi olla html, tai svg, tai mitä ikinä mukavaa tulevaisuus tuokaan mukanaan. Tässä on jotain samaa kutkuttavuutta kuin Polymerissä (ja en malta odottaa että näitä kahta pääsisi sekoittelemaan vähän 😉

Tuossa muutama d3 niksi:

// Color all paragraphs randomly
 d3.selectAll("div#main>p").style("color", function() {
 return "hsl(" + Math.random() * 360 + ",100%,50%)";
 });
// Color all paragraphs alternating shades
 d3.selectAll("div#main>p").style("background-color", function(d, i) {
 return i % 2 ? "#fff" : "#eee";
 });

Miten tämä liittyy Angular+Require yhdistelmään? Alunperin d3 toimi siten että se luo sivulle globaalin muuttujan $window.d3, jonka takaa toiminnot löytyivät. Versiossa 3 siitä on kuitenkin tullut Require-tietoinen: Jos se havaitsee require-kirjaston läsnäolon, globaalimuuttujaa ei luoda. Tämä taas sai monet d3 riippuvaiskirjastot hajoamaan. Nyttemmin niitä on myös korjailtu. Siltikin, jos d3 globaalia ei löydy ja se jostain syystä tarvittaisiin, tässä on niksi siihen:

shim: {
  'd3': {
    exports: 'd3',
    init: function() {
      window.d3 = d3;
    }
   }
 }

Mutta sittemmin tosiaan monet kirjastot toimivat oikein myös requirejs ja d3 versio 3:sen kanssa. D3:sen päälle on tehty laajennuskirjastoja, kuten esim. nvd3, josta löytyy graafeja ja mittareita.

Yksi mielenkiintoinen juttu d3 + angular yhdistelmässä on: Niissä on periaatteessa päällekkäisyyttä, koska Angular sitoo model-arvoja DOM:iin, ja d3 sitoo model-arvoja DOM:iin. Tästä huolimatta näiden hybridejä on tehty usein, mutta on myös mahdollista käyttää d3:sta vain Angularin apuna, tukikirjastona, ja antaa Angular direktiivien hoitaa varsinainen renderöinti. d3 omaa hyviä svg-apukirjastoja joista on hyötyä tässäkin, esim:

 var pointerLine = d3.svg.line()
   .x(function(d) {
     return d.x;
   })
   .y(function(d) {
     return d.y;
   })
  .interpolate("basis");

Tai laajempana:

 svg.append("svg:path")
 .style("fill", color)
 .attr("d", d3.svg.arc()
   .startAngle(scope.valueToRadians(start))
   .endAngle(scope.valueToRadians(end))
   .innerRadius(0.65 * radius)
   .outerRadius(0.85 * radius))
 .attr("transform", function() {
   return "translate(" + cx + ", " + cy + ") rotate(270)";
 });

Parhaimmillaan siis d3 ja Angular voivat muodostaa käsi kädessä kauniin liiton 😉

Linkki d3-sivuille:

http://d3js.org/

Linkkivinkki: MongoDB + data + visualization
http://openlife.cc/blogs/2014/august/mean-hackathon

Mainokset

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out / Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out / Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out / Muuta )

Google+ photo

Olet kommentoimassa Google+ -tilin nimissä. Log Out / Muuta )

Muodostetaan yhteyttä palveluun %s