DIY Dice Tray

8x9 inch wooden dice tray
8×9 inch wooden dice tray

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 go for $15 or more.

Read More

d3.js Simple Responsive Line Graph with Animation: Part 2

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 )
    .duration( 500 )
    .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.

Read More

d3.js Simple Responsive Line Graph with Animation

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.

Read More