The line-height attribute doesn’t work on span by default. If you need to use line-height on a span, you’ll need to set display:block; on the span element to make it display as a block element (like
).

The line-height attribute doesn’t work on span by default. If you need to use line-height on a span, you’ll need to set display:block; on the span element to make it display as a block element (like
).

While working on the 51 Line Charts for my Opioid Crisis data visualization, I ran into an issue with generating all 51 charts at the same time: The data was either in 51 rows stacked and I couldn’t access the dates effectively, or 306 rows unstacked and I had 6x as many objects as I needed when I did a join.
The solution was to use D3.nest. Nesting allows elements in an array to be grouped into a hierarchical tree structure; think of it like the GROUP BY operator in SQL, except you can have multiple levels of grouping, and the resulting output is a tree rather than a flat table. The levels in the tree are specified by key functions.
When I used the state as a key, it grouped each state’s data together in a tree.
Input:
state,code,year,deaths,adjrate Alabama,1,2010,547,11.8 Alabama,1,2011,552,11.8 Alabama,1,2012,562,12.1 Alabama,1,2013,598,12.7 Alabama,1,2014,723,15.2 Alabama,1,2015,736,15.7 Alaska,2,2010,83,11.6 Alaska,2,2011,107,14.2 Alaska,2,2012,129,17.4 Alaska,2,2013,105,14.4 Alaska,2,2014,124,16.8 Alaska,2,2015,122,16 Arizona,4,2010,1098,17.5 Arizona,4,2011,1071,16.9 Arizona,4,2012,1134,17.7 Arizona,4,2013,1222,18.7 Arizona,4,2014,1211,18.2 Arizona,4,2015,1274,19 Arkansas,5,2010,350,12.5 Arkansas,5,2011,355,12.6 Arkansas,5,2012,373,13.1 Arkansas,5,2013,319,11.1 Arkansas,5,2014,356,12.6 Arkansas,5,2015,392,13.8
D3 code:
d3.nest() .key(function(d) { return d.state; }) .entries(data);
Output:
[ { "key": "Alabama", "values": [ { "state": "Alabama", "code": "1", "year": "2010", "deaths": "547", "adjrate": "11.8" }, { "state": "Alabama", "code": "1", "year": "2011", "deaths": "552", "adjrate": "11.8" }, { "state": "Alabama", "code": "1", "year": "2012", "deaths": "562", "adjrate": "12.1" }, { "state": "Alabama", "code": "1", "year": "2013", "deaths": "598", "adjrate": "12.7" }, { "state": "Alabama", "code": "1", "year": "2014", "deaths": "723", "adjrate": "15.2" }, { "state": "Alabama", "code": "1", "year": "2015", "deaths": "736", "adjrate": "15.7" } ] }, { "key": "Alaska", "values": [ { "state": "Alaska", "code": "2", "year": "2010", "deaths": "83", "adjrate": "11.6" }, { "state": "Alaska", "code": "2", "year": "2011", "deaths": "107", "adjrate": "14.2" }, { "state": "Alaska", "code": "2", "year": "2012", "deaths": "129", "adjrate": "17.4" }, { "state": "Alaska", "code": "2", "year": "2013", "deaths": "105", "adjrate": "14.4" }, { "state": "Alaska", "code": "2", "year": "2014", "deaths": "124", "adjrate": "16.8" }, { "state": "Alaska", "code": "2", "year": "2015", "deaths": "122", "adjrate": "16" } ] }, { "key": "Arizona", "values": [ { "state": "Arizona", "code": "4", "year": "2010", "deaths": "1098", "adjrate": "17.5" }, { "state": "Arizona", "code": "4", "year": "2011", "deaths": "1071", "adjrate": "16.9" }, { "state": "Arizona", "code": "4", "year": "2012", "deaths": "1134", "adjrate": "17.7" }, { "state": "Arizona", "code": "4", "year": "2013", "deaths": "1222", "adjrate": "18.7" }, { "state": "Arizona", "code": "4", "year": "2014", "deaths": "1211", "adjrate": "18.2" }, { "state": "Arizona", "code": "4", "year": "2015", "deaths": "1274", "adjrate": "19" } ] } ]
A few useful tools and resources for understanding d3.nest:

I’ve used Coda by Panic as my IDE of choice for 10 years now, but I think it is starting to fall behind other tools. It isn’t updated often and there aren’t nearly as many community-built packages as other tools have. So I’m giving both Atom and Sublime a try. I’m trying Atom first.
In my first few days of use, here are some things I love:

I’m working on a new WordPress theme development project and using Gulp and Sketch for the first time. Here are my first use notes:
gulpfile.js
Here are the tasks I’m using:
gulp styles — Compile, autoprefix and minify Sass files.gulp scripts — Minify javascript files.gulp images — Compress and optimize images.gulp watch — Compile assets when file changes are made, start BrowserSyncgulp — Default task – runs all of the above tasks.gulp zip — Package theme into zip file for distribution, ignoring node_modules.TLDR pages – Simplified man pages with practical examples. Probably covers 80% of your daily use cases. Looks super cool.
Great email from Paul Jarvis’s Sunday Dispatches this week. The relationship doesn’t end once you make the sale. That is just the beginning. Don’t be the hot tub guy.
I got this error today when trying to partition a Western Digital My Passport 4TB:
Volume erase failed: Media kit reports not enough space on device
Nothing I could do inside Disk Utility worked. Thanks to some kind soul on Reddit, here is how I solved the issue from the command line:
$ diskutil list
$ diskutil unmountDisk force disk2 #replace disk2 with your disk number
and then write zeros to the boot sector:
$ sudo dd if=/dev/zero of=/dev/disk2 bs=1024 count=1024
Attempt to partition it again:
$ diskutil partitionDisk disk2 GPT JHFS+ "My External HD" 0g
Sometimes I get off track. This is what I need to do to get back on track:
Venkatesh Rao had a good take on the big data/machine learning/blockchain mania in Breaking Smart a few weeks ago:
Many people, database experts among them, dismiss Big Data as a fad that’s already come and gone, and argue that it was a meaningless term, and that relational databases can do everything NoSQL databases can. That’s not the point! The point of Big Data, pointed out by George Dyson, is that computing undergoes a fundamental phase shift when it crosses the Big Data threshold: when it is cheaper to store data than to decide what to do with it. The point of Big Data technologies is not to perversely use less powerful database paradigms, but to defer decision-making about data — how to model, structure, process, and analyze it — to when (and if) you need to, using the simplest storage technology that will do the job.A organization that chooses to store all its raw data, developing an eidetic corporate historical memory so to speak, creates informational potential and invests in its own future wisdom.
Next, there is machine learning. Here the connection is obvious. The more you have access to massive amounts of stored data, the more you can apply deep learning techniques to it (they really only work at sufficiently massive data scales) to extract more of the possible value represented by the information. I’m not quite sure what a literal Maxwell’s Historian might do with its history of stored molecule velocities, but I can think of plenty of ways to use more practical historical data.
And finally, there are blockchains. Again, database curmudgeons (what is it about these guys??) complain that distributed databases can do everything blockchains can, more cheaply, and that blockchains are just really awful, low-capacity, expensive distributed databases (pro-tip, anytime a curmudgeon makes an “X is just Y” statement, you should assume by default that the(X-Y) differences they are ignoring are the whole point of X). As with Big Data, they are missing the point. The essential feature of blockchains is not that they can poorly and expensively mimic the capabilities of distributed databases, but do so in a near-trustless decentralized way, with strong irreversibility and immutability properties.
Sometimes you have to stop what you are doing and climb out on the roof to take a #ManhattanSkyline photo because the sunset is so beautiful. #nofilter

Studio Neat put together a cool video showing how the Panobook is made. I preordered three Panobooks and can’t wait for them to arrive.
Studio Neat makes some of my favorite products: Neat Ice KitArchived Link, Highball, and the Glif. I love the way they document their work through videos like this, their weekly newsletter, and their podcast, Thoroughly Considered.
A lot of email services track you by putting a tiny transparent image in your email and logging when you load it. You can prevent this by turning off autoloading of remote images in your favorite email app’s settings. If your app doesn’t have that setting, consider switching. I’m currently using Airmail across all of my devices and the setting is under Settings > Advanced.
One evening last week I had the idea to draw some quick sketches to illustrate some concepts in the Praxis curriculum. I used my iPad, Apple Pencil, Procreate, Paper by 53Archived Link, and Pixelmator.






A quick vacation sketch a few weeks ago at a diner after seeing many buoys along the Maine coast.

Wes Anderson and his team are so good. Their attention to detail is extraordinary. Every single one of the dogs in this animation have a deep level of emotion and personality. I’m looking forward to seeing this in theaters next year.
This is a super cool short film documenting a series of art installations by Lucas Zanotto. Simple colors, shapes, and movements can convey so much emotion and character.
Like many, I’m all about that Inbox Zero life. I’m not going to preach here about it. You’ve heard enough of that elsewhere. I’m going to show you how I get it done.
I like to set myself up for success whenever possible. What that looks like here is severely limiting the amount of inbound email I get. Fewer incoming messages means fewer messages to process.
These few things cut my email volume by 80%. The remaining 20% is primarily important, valuable, or actionable: Emails from clients, customers, friends, and family, important notifications, and interesting newsletters that I actually read.
That is it. This is consistent for me because it is tied to a concrete weekly deliverable: My weekly check-in with Isaac. In order to give an accurate representation of my priorities and tasks for the week, I must clean out my inbox first. I leave myself no choice in the matter, because if I did, I’m likely to ignore my inbox and let it get out of hand.

Here are my notes from The Future of Intelligence, a Conversation with Max Tegmark on the Sam Harris Podcast.
You can listen to it here:
My notes and thoughts:

If you write any sort of code or markup in iOS 11, constantly getting curly quotes out of your keyboard will drive you crazy.
The feature is called Smart Punctuation and here is how to turn it off:
Go to Settings > General > Keyboard. Toggle off Smart Punctuation.


I’m working my way through Rolf Dobelli’s The Art of Thinking Clearly by reading a few sections each morning. Below are my notes on sections 12-23. Read 1-11 here.
A lactic sour wheat beer with guava from Yonkers Brewing.


TK Coleman, my coworker on the education team at Praxis, told his career journey story in two parts on the Isaac Morehouse podcast. It is worth a listen:
I’ve heard many parts of this story through working with TK, but I hadn’t heard the entire thing laid out. I immensely respected TK before listening to this, but hearing his early story just added to it further. Here are a few things from these shows that I find admirable:
Here are some of my takeaways from the two shows:

I’m working my way through Rolf Dobelli’s The Art of Thinking Clearly by reading a few sections each morning. Here are my notes on the first 11 sections (Confirmation Bias had two sections, which I’ve only noted as one below):
I got this question from a Praxis participant last night: “Hey Chuck quick general question: do frameworks like angular and react compile to JS? How exactly do they work?”
Here is my response:
This took me a little research because I didn’t quite know. Here is what I found: First, React is a library and Angular is a framework. Seems like a small distinction, but it has big consequences. See this link: https://stackoverflow.com/questions/148747/what-is-the-difference-between-a-framework-and-a-library
If you write React in plain javascript, everything should run as-is. If you write your React code in JSX, babel first finds the JSX, parses and generates the corresponding javascript code, then evaluates it. The big-picture of React is that it is kind of like the view layer in MVC, with a few more bells and whistles added. Everything renders to a virtual DOM first, which is significantly faster than the real DOM. Changes are then compared with the real DOM and then the differences are sent to the real DOM.
It looks like you can write Angular code in javascript or Typescript (which then compiles to javascript). Here is a great high-level architecture overview of Angular that explains how it works: https://angular.io/guide/architecture
Recommendation: What Is Technology Doing To Us? Tristan Harris on Sam Harris’sÃÂÃÂ podcastÃÂÃÂ
Tristan is a former Design Ethicist at Google and studied at Stanford’s Persuasive Technology Lab. His work highlights the design patterns in technology that grab our attention,ÃÂÃÂ pull us back in, and addict us. These designs are not only manipulating us, but they are making us unhappyArchived Link.
Learn what these patterns areArchived Link so you can recognize them and take back controlArchived Link.
I’m getting increasingly interested in this topic. Taking a long break from social media, turning off almost all phone notifications, and deleting all addictive apps from my phone has had a positive impact on my reading & thinking time. Breaking the typical pattern of waking up and surfing social media before getting moving for the day has made my mornings better, too.
Two related topics I’m interested in pursuing:
If you have any books, articles, orÃÂÃÂ podcasts I should check out on these topics, let me know!
ÃÂ