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.
- the tweening , motion animations conflict - if possible add transition end callback trigger motion animations.
- potential create colour gradient/colour strips opposed full filled segments
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.
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
Post a Comment