Projected Massachusetts town-by-town Geojson

Following along with Mr. Bostock and I have to write this down or will forget…

Massachusetts Town by Town map can be found here, as and town data that I wanted to use is here towns.ndjson.

$ geoproject 'd3.geoConicConformal().parallels([41 + 43 / 60, 42 + 41 / 60]).rotate([71 + 30 / 60], 0).fitSize([960, 600], d)' < ma.json > ma-nad83.json

$ ndjson-join 'd.mapid' ma-mapid.ndjson towns.ndjson > ma-joined.ndjson

$ ndjson-map 'd[0].properties = {id: d[1].id, town: d[1].town, fips:d[1].fips, name:d[1].name, mapid:d[1].mapid, consubfp:d[0].properties.COUSUBFP, geoid:d[0].properties.GEOID}, d[0].id = d[1].id, d[0]' < ma-joined.ndjson >ma-joined-out.ndjson

$ ndjson-reduce < ma-joined-out.ndjson | ndjson-map '{type: "FeatureCollection", features: d}' >ma-towns.json

History of Japanese payers in MLB All Star Games

Cross-posted to JBP blog: Koji Urehara, Yu Darvish and Masahiro Tanaka: 2014 All Stars. I ment to get this up much quicker but finally did it!

History of Japanese payers in MLB All Star Games by year:

  • 1995: 1 Nomo
  • 1996: 0
  • 1997: 0
  • 1998: 0
  • 1999: 0
  • 2000: 0
  • 2001: 2 Ichiro Sasaki
  • 2002: 2 Ichiro Sasaki
  • 2003: 3 Ichiro Matsui Hasegawa
  • 2004: 2 Ichiro Matsui
  • 2005: 1 Ichiro
  • 2006: 1 Ichiro
  • 2007: 3 Ichiro Saito Okajima
  • 2008: 2 Ichiro Fukudome
  • 2009: 1 Ichiro
  • 2010: 0
  • 2011: 0
  • 2012: 1 Darvish
  • 2013: 2 Darvish Iwakuma
  • 2014: 3 Darvish Tanaka Uehara

Continue reading…

In Austin TX for SXSW! Hackathon for Social Good and more.


Arrived last Wednesday at Austin, Texas. Pretty pumped. I am looking forward to meeting smart, motivated people and get inspired. If you are baseball enthusiasts, front end dev, or just good citizen of earth who are also in Austin for SXSW, shout out at @DaigoFuji and let’s meet up!

On Thursday, I attended Hackathon for Social Good at Adaptive Path, organized by Web Visions. It was very cool. It was the first hackathon where you already had a project and there is an assigned project manager. We created a js-Google Doc driven time line for history of Jewish Music for a non-profit, Idelsohn Society. Pretty random but came out pretty cool.

Off to SXSW!

Diving head first into sass(scss)/compass


For work, I am diving head first with scss, using compass to compile them. Awesome. This is something that I wanted to do — and looking for a right project — for a long time, but opportunity just found me. I love when that happens. This is a note to future myself as I change my mac’s environment for development reason, if/when I have to do it again.

Mac comes with ruby ready.

What’s my ruby version? ruby -v

What’s my ruby gem version? gem -v
You can update this by running sudo gem update --system at the time of writing, I have 2.1.5.

Do already have compass? compass -v

If not, run this:
$ sudo gem install compass

That’s it. It will install sass.

What you need now is to set the file strucuture, and have config.rb.

As I was working from a repo that is already set up to use sass, that was already set up. My config.rb looks like this:

With that, all I had to do was run compass with watch option:

mymac:dir daigo$ compass watch dir
>>> Compass is polling for changes. Press Ctrl-C to Stop.

That was simple. Then, when I edit the scss file, this automatrically happens:

>>> Change detected at 15:46:29 to: mobile.scss

overwrite hbr/css/mobile.css

Nice. I already own CodeKit, but didn’t even need it. I just wrote a simple function like this:

@function image-cdn($img) {
@return url(''+$img);

I know I will be using sass version of founcation for my next project. I love the idea of setting $em-base and doing em-calc('22px');.

I have been tweeting for 6-years today


It is true. I tweeted for the first time 6 years ago today. At 10:05 am.

I tweeted (drum roll, please…)

Fascinating! (…or is it?)

I did not know that I could download all my past tweets from Twitter, hat tip to Aaron Lee, who posted a detailed “How to find your first tweet sent on twitter” on his blog. Thank you!

The downloaded archive is quite amazing. It is a full fledged, stand-alone bootstrap web app, and also include full json and csv. From README file:

In the `data` folder, your Twitter archive is present in two formats: JSON and CSV exports by month and year.
* CSV is a generic format that can be imported into many data tools, spreadsheet applications, or consumed simply using a programming language.
## JSON for Developers
* The JSON export contains a full representation of your Tweets as returned by v1.1 of the Twitter API. See for more information.
* The JSON export is also used to power the archive browser interface (index.html).
* To consume the export in a generic JSON parser in any language, strip the first and last lines of each file.

I’ve also been using Time Hop and it is interesting to see what I was doing a year ago. I wish it had data to see what I was listening then. Similarly, an interesting idea, you can send a email to yourself in the future from

Getting things done.

ima magazine’s (Have you heard? There is a new Japanese-English bilingual magazine starting in Boston! Help us now.) Creative Director, Ken Kimura, told me about GTD system, or Getting Things Done. It is really interesting.

I sort of do it, using this open source program called Wunderlist, which my friend Tom showed me. But this is really interesting.

In a interview in Harvard Business Review, David Allen, the author and creater of the system, says following about what he does and what his quick summary of his technique (May 2011).

I help people and organizations produce more with less input. I teach a set of best practices and a methodology that produce a greater sense of concentration and control.
I call what I’ve uncovered “the strategic value of clear space.” Say you’re going to cook dinner for people, it’s 5:00 PM, and they’re coming at 6:00. You want to have all the right ingredients. You want to have the right tools. You want the kitchen to be nice and clear. You need the freedom to make a creative mess. I teach people to achieve that freedom by taking very immediate, concrete steps: downloading all your commitments and projects into lists, focusing on “next actions,” and thinking about the context—work that needs to be done in your office, or on the phone, or on the computer. You don’t need to change who you are. You just need some simple but very powerful techniques.

From a great (and geek friendly) introduction to GTD by Merlin Mann’s 43 Folders blog:

Getting Things Done succeeds because it first addresses a critical barrier to completing the atomic tasks that we want to accomplish in a given day. That’s “stuff.” Amorphous, unactionable, flop-sweat-inducing stuff. David says:
Here’s how I define “stuff:” anything you have allowed into your psychological or physical world that doesn’t belong where it is, but for which you haven’t yet determined the desired outcome and the next action step.

He has done podcast on this topic and there is an excellent hour-and-half compilation of podcast.

Summary of the steps (Originally from the above link by 43 Folders, but edited to sort of fit my purpose.)

  • Collect Capture. Identify *all* the stuff in your life that isn’t in the right place (close all open loops) — get everything in one place, a list. *Everything* “What has your attention?” From answer the email to… what is my purpose/role on earth? Capture complete picture of your stuff — let system catch it and off my mind.
  • Process “Write it down, look at it.” — Analyze that list, organize. Break your work down to next actions. Is it actionable or not? IF not dump it or archive it.
  • Organize Get rid of the stuff that isn’t yours or you don’t need right now.. Put down what *you* can do about it. Put it in Do basket.
  • Review Put your stuff in the right place, consistently. If you have stuff on your mind, then put that down in the list. Iterate and refactor mercilessly — organize, organize!
  • Do Create a right place that you trust and that supports your working style and values. When you are “Doing” what’s on the list, you need to be able to “point and shoot” not thinking about it anymore. Crank the widget.” Do your stuff in a way that honors your time, your energy, and the context of any given moment.

Life Hack also have “Why Getting Things Done is the Best Productivity System”

Now, let’s get things done.

Responsive Adobe Edge Animate file embed

I went to Adobe Create the Web tour in Boston, at Bocoup (it was basically same as this video, so you didn’t miss much… except I got this cool HTML5 beer bottle opener keychain!)

I was really into Flash back in the day, and at one point I considered myself an expert of the ActionScript… I still have/wear hipster longsleeve Flash shirt, with logo [Fl] on the chest.

So it was sort of nice surprise that the Adobe is doing a lot of cool stuff using HTML5, and I just spend a weekend morning making the animation I just put up on Fujiwaras.comusing Adobe Edge Animate.

To make Animate work in responsive more, you need to design using percentage within Animate. This is sort of explained here on this video, but I had to really use it to figure it out. I struggled for a while trying to put it on the site, but you basically have to use iframe, becuase in published Animate html, you need to have <html style="height:100%;">

Then you use the same trick that was discribed in my past posting about Responsive YouTube video. This page has a good explanatio, but for animation that I created, which was based on 600px by 600px stage, I used the following css.

.embed-container {
    position: relative;
    padding-bottom: 100%; /* use 56.25% for 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

Thsi works because the percentage of “padding-bottom” somehow “refers to width of containing block and not height. Very interesting that it works, really.

On my animation, I used SVG for my sagari-fuji emblem (house emblem of my family) so when you zoom in, the emblem is extremely sharp. I have had bad luck with SVG being responsive, (a blog post about it that I found, I need to read it) but it is kind of neat that the Adobe Edge Animate handles this for you.

Learning FlexSlider API

Flexslider is awesome. Responsive design ready (screen resolution independent) and supports swipe out of the box. Just I needed for this new mobile project that I am working on.
This is what it says:

The new callback API gives you full control over all of your sliders. The callback functions currently available are start(), which fires after the plugin is initialized, before(), which fires before/asynchronously with every slide animation, after(), which fires after every slide animation completes, and end(), which fires when you reach the last slide. Each callback function will accept one parameter, which will embody the slider element.

The following example demonstrates how you could track slider counter information, such as “3 of 12″ using the callback functions. First, we use the start() callback to gather the total slides. We only need to do this once, so start() is a good place for this. Notice that start() accepts the slider element as a parameter and then calls the slider.count property. Count is just one of many properties tied to every slider instance that are available to you through the callback functions. The last step in this demonstration is using the after() callback to update the current slide information after each animation. You will notice another slider property used here to gather the current slide information, slider.currentSlide.

What I wanted to do was store some data-* stuff (text, url etc.) in the li tag of each slide, and after the animation is done, I want use jquery to load that stuff in other parts of the page.

Simple test
I have data-category in each of li. I just want to fire that up in “console.log.”

  <script type="text/javascript">
        animation: "slide",
        after: function(slider){

That was easy! All I have to do was wire the ids and .text to corresponding text. Love flexslider.

Displaying high res logo for retina display using CSS

Simple css rule to take advantage of Apple’s retina display.

/* iPhone 4 or higher with retina display */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#logo a {
img {
display: none; }
display: block;
height: 36px;
width: 142px;
background: transparent url('logo@2x.png') no-repeat 0 0;
background-size: 142px 36px; }