javascript - d3.js cinemetrics animation based chart -


i've developed kind of cinemetrics based chart using d3.js. i've added spectrum of data control motion speed, there appears conflict tweening animation between different data updates , segment animations.

  1. the tweening , motion animations conflict - if possible add transition end callback trigger motion animations.
  2. potential create colour gradient/colour strips opposed full filled segments

enter image description here

enter image description here

https://vimeo.com/26584083

the latest code http://jsfiddle.net/nyeax/217/

 spike: function () {         //console.log("spike ready", data);          var = this;        var timescale = d3.scale.linear()            .domain([1, 5])            .range([900,3500, 8000]) //larger movement values have smaller durations            ;          function throb(d, i) {              var dur = timescale(d.movement);              var p = d3.select(this);              if (!p.classed("moving") ) {                 p.transition()                     .duration(dur)                     .attr("d", that.getarc(-5))                 .transition()                     .duration(dur)                     .attr("d", that.getarc(+5))                     .each("end", throb);             }         }         //the spike function *returns* throb function can used in        // each call:        return throb;      }, 

i've added base pattern - can used apply gradient segments. ideally want segments stripes opposed smooth blend. want able build patterns accordingly colour array coming data json.

http://jsfiddle.net/nyeax/371/

i'd ensure gradient top bottom - example inner section red, outer section green. stripped opposed smooth blend.

enter image description here

here code pattern

<svg>     <defs>     <lineargradient id="matrixlineargradient"                                     x1="0%" y1="0%"                                     x2="100%" y2="100%"                                     spreadmethod="pad">       <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"></stop>       <stop offset="100%" stop-color="#cc0000" stop-opacity="1"></stop>     </lineargradient>     </defs> </svg>  

also looked @ method to, not sure if way go or not. http://jsfiddle.net/y2zue/


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -