About a week ago I released a web app for the board game Descent Second Edition. It’s a simple dice rolling app I created for fun. It was created using React, Redux and Webpack. I created it as a web app so it could be run on any mobile device.
The most tedious part of this app was just setting up the different dice face layouts. Fantasy Flight Games the creator of Descent didn’t seem to create the dice faces with much of a pattern.
I’m back for another addition of d3.js for noobs. I’m a professional developer but I’m no d3.js pro, but I believe I’ve learned a few things that could be useful.
marginContainer.append( 'path' )
.datum( startData )
.attr('class', 'line')
.attr( 'd', line )
.transition()
.duration( 500 )
.ease('quad')
.attrTween( 'd', function() {
var interpolator = d3.interpolateArray( startData, data );
return function( t ) {
return line( interpolator( t ) );
}
} )
.each('end', function() {
drawCircles( data, marginContainer );
});
So last time we got to the point where we’re calling the drawCircles() function. When you use .each('end', function(){ the function gets called at the end of each selection. In this case we only have one selection.
While introducing myself to the fantastic data visualization library d3.js I figured I might as well post some of the things I’ve learned.
I needed a responsive line graph with just a little bit of animation to give my graph some life. I also wanted to be able to see details of the exact plot points on the graph. Lastly I wanted the graph to be able to animate if the data was ever swapped out for new data. After a little bit of work the result was the following graph below. The code is far from perfect but it’s definitely a starting point.
See the Pen d3.js Simple Responsive Line Graph with Animation by Tawin Kiethanom (@tawink) on CodePen.