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’ve been looking to make my own dice tray for our Tabletop Game Nights and I finally found the perfect box. This wooden box is about 8 by 9 inches and it was dirt cheap from Daiso. If you’re familiar with Daiso you’ll know that nearly everything in the store is priced at $1.50. I also bought the green felt from Daiso for another $1.50 but it was way more felt than I needed. So overall I spent about $3 for what I’ve seen on Etsy.com go for $15 or more.
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.
Starting fresh. I haven’t written a blog since around 2009, so I scrapped the old blog and started a new one. I’ll try to consistently post now that my life has settled down to some degree. I have multiple passions ranging from Code, Technology, Video Games, Sports, Music, Art, Food and whatever comes to mind. Expect to see a myriad of topics. Out.