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

Simple local Javascript and css dev environment

d3’s doc used to have this list on it’s wiki, but it is now only showing npm’s http-server, which is great (and my default) but I miss the list so here it is.

How to start a local web server in different languages

All following will open the directory in http://localhost:8080/

Python’s built-in server:

python -m SimpleHTTPServer 8080 &

or for Python 3+

python -m http.server 8080 &

If you have PHP installed you could try

php -S localhost:8080

or if you are running Ruby you can use

ruby -run -e httpd . -p 8080

Or if you are running nodejs you can do

npm install http-server -g

Another option is to start a local jetty instance, by using the jetty-runner library with the JVM already installed on your system.

java -jar jetty-runner-9.3.0.M0.jar --port 8080 .

Potential itinerary of baseball road trip 2017

Monday, August 7

Travel: Leave Boston, arrive at Baseball Hall of Fame 3 h 55 min, 239 miles
Activity: Go to National Baseball Hall of Fame (open till 9 pm)

Tuesday, August 8

Travel: Cooperstown NY to Queens area of New York City 3 h 49 min, 197 miles

Game: Watch New York Mets vs Texas Rangers at Citi Field, Queens

Wednesday, August 9

Travel: New York City to Washington D.C. 4 h 3 min, 245 miles
Game: Watch Washington Nationals host Ichiro Suzuki and Miami Marlins at Nationals Park, 7:05 pm

Thursday, August 10

Travel: Washington D.C. to Philadelphia, PA 2 h 43 min, 145 miles
Game: Watch Philadelphia Phillies host New York Mets at Citizens Bank Park, 7:05 pm

Friday, August 11

Travel: Philladelphia to Bronx area of New York City 2 h, 108 miles
Game: Watch Boston Red Sox destroy New York Yankees at Yankee Stadium, 7:05 pm

Saturday, August 12

Travel: Back to Home 3 h 39 min, 203 miles

Trip stats:

6 days, 5 cities
4 games, 4 ball parks
1 AL games, 3 NL games (one inter-league)
3 AL teams (Rangers, Yankees, Red Sox) 4 NL Teams (Nationals, Marlins, Phillies, Metsx2)

Total expected drive:
18 h 09 min, 1,137 miles

In Japan, and a little session on Web Storytelling (Articles that I liked: July 2015)


I have been blessed to meet so many nice, talented, and driven people in my life, and one thing led to another and I will be talking about how Tech and Design can shape future of web storytelling next week, August 10, 2015 in Tokyo Shibuya’s Loftwork.

This is an amazing opportunity. It has getting me think a lot about what I do (I am still trying to figure out exactly what I do myself) and why I love some aspect of what I do so much, with passion. I think it boils down to the fact that I get chance to meet and collaborate with so many talented and smart people.

My family and I got here this weekend and it is HOT.

Anyway, if you are by any chance living in Japan and see this before next Monday, love to see you. Come join us!

Here is the copy of session description in Japanese.

Continue reading…

ECMAScript 6 (Articles that I liked: June 2015)

A colleague of mine and I have been discussing about future of javascript and our code base at Harvard Business Review’s website, and I am sold on the idea of going with ES6. I love the idea of “One Javascript” and by using tools like webpack and babel Javascript Compiler, you can actually start using the benefit of ES6 today, in every browser (obviously not every feature, but still). I love that they included important stuff like native unicode support in the spec. Please count me in.

Speaking of unicode, I also love the idea of Google Noto Fonts. Love the name. The white block that you see when unicode character is nicknamed “Tofu” and by using this fonts, cached around the world near you, there will be no-tofu. Love it.

Continue reading…

Starting a local simple http server (and Articles that I liked: May 2015)

Github pages are amazing. Best thing ever. Well, second best thing after git, anyway.

More and more javascript work that I do (such as creating slide deck using remark, for example), less and less I need heavy dependency on servers, but I just need to serve up markup and javascript. In the past I have used Mac installed Apache or MAMP type solution, but that is even much more than I need. Then I came across Python 2’s SimpleHTTPServer. Mac OS (at least ones on my machines) comes with it.

All you need to do is:

python -m SimpleHTTPServer 8088

then you can access http://localhost:8088. Nice.

I am constantly running vagrant machines, so usually port 8080 is taken. Being able to specify port like that is actually really cool.

Also, I’ve been posting links that I liked at my tumblr blog. Here are few weeks worth of links:

Continue reading…

May all living beings be happy

  • Mettā Bhāvanā

    May I be happy. May I be well. May I be free from suffering and safe. May I be peaceful and at ease.

    May you be happy. May you be well. May you be free from suffering and safe. May you be peaceful and at ease.

    May my loved ones be happy. May my loved ones be well. May my loved ones be free from suffering and safe. May my loved ones be peaceful and at ease.

    May all living beings be happy. May all living beings be well. May all living beings be free from suffering and safe. May all living beings be peaceful and at ease.

    May people with whom I have difficulty be happy. May people with whom I have difficulty be well. May people with whom I have difficulty be free from suffering and safe. May people with whom I have difficulty be peaceful and at ease.

Using Font Events to speed up your perceived performance.

I’ve been lucky to work with Mat “Wilto” Marquis from Bocoup on web performance issues around Harvard Business Review, and it has been a blast learning new stuff.

One of the approach that we are taking is that we will be using “Font Events” approach to avoid “FOIT” (Flash of Invisible Text). This is pretty cool.

More info on this in an excellent write up by Scott Jehl: “Font Loading Revisited with Font Events”

TLDR here.

Our current situation: Using good old standard @font-face

The browser registers the font, but the font is not immediately availabe to the browser. FOIT. Each font files could be ~100KB per weight/variation of the font, we have 12 files, about to be 14!

Perceived performance = poor.

After our re-factor is done, each css is actually just referencing fall back font stack, so no FOIT. Contents are rendered and immediately readable in a fall back font. For example, our National fonts will appear as Helvetica or Arial.

We’ll use fontfaceobserver.js to check to see if the fonts have been loaded, then add .fonts-loaded class to html tag as successful callback.

CSS rules will look like this (* this is grossly simplified css, but you get the point)

h1 {
font-family: sans-serif;
.fonts-loaded h1 {
font-family: National, sans-serif;

Fortunately, using sass’s nesting, this is pretty easy:

h1 {
font-family: sans-serif;
.fonts-loaded & {
font-family: $national-ff;

On the subsequent request though, I am hoping that server can just add .fonts-loaded class to the html tag. For now, we can bake this right into js/cookie, but eventually we would like to work with backend.

Another thing that Wilto uncovered was Foundation out of the box prefers optimizeLegibility as default text-rendering. Just switching this paragraph setting to optimizeSpeed and headers (i.e h1, h2, h3 etc) to auto, we made almost a full second perceived performance improvement on the slower network. Did not know that made that kind of impact.