Posts
-
2016: Time to Train
The last time I made a blog post, I was working on my Arduino project as part of my grand plan of building 12 vastly different things in the span of 12 months, each of which will force me to learn something new each month. And, just when it was beginning to progress forward, something big happened and my biggest project of the year took over… Moving to New York for a job at Google NYC. And along with it, my Arduino project got put on hold. Quite literally, in storage, along with most other tools I could use for creative purposes. Though the siege will soon be over when I move into my own apartment next month, I can’t wait to get all my stuff back.
All was not lost however, as I did get to work on a couple of software projects that were well beyond my area of expertise. I got to learn Machine Learning with Tensor Flow, and built a couple of domain-specific content recommendation systems using Hadoop MR. And on top of that, I definitely took advantage of my honeymoon period here at Google, and started learning as much random tech as possible while my actual responsibilities at work are still minimal.
Still, they don’t show the results that I had hoped for when I started on my grand goal of 12 in 12. So, lets focus on something that has a high chance of being on track this year…
Health!
My 12-month goal on the health front was to lose 20+lbs to get into my doctor-recommended BMI range. And, I may have gone a bit too crazy with it by signing up for a bit too much :) May be way too much… And now it’s time to train.
End of July, I’m running the first half of the SF Marathon! EZPZ!
A month later, I’m climbing Kilimanjaro the last week of August! Woot?
And today, I found out that I got selected in the drawing for the NYC Marathon this year in November!
TL;DR:
-
D3MO - Part 2
Continuing on with the D3 Clock-face we created in Part 1, Let’s create a simple SVG representation of a clock hand.
HTML
<svg width="120" height="20"> <path d="M 0 10 L 20 0 L 120 10 L 20 20 z"/> </svg>Demo
Let’s turn it into a reusable symbol, and create the hour, minute, and second hands by reusing the symbol.
HTML
<svg width="300" height="300"> <defs> <symbol id="hand" > <path d="M 0 10 L 20 0 L 120 10 L 20 20 z"/> </symbol> </defs> <use id="secondHand" xlink:href="#hand" fill="#a00" transform="translate(150,150),rotate(-90),scale(1.5,0.75),translate(-20,-10)"/> <use id="minuteHand" xlink:href="#hand" fill="#666" transform="translate(150,150),rotate(30),translate(-20,-10)"/> <use id="hourHand" xlink:href="#hand" fill="#333" transform="translate(150,150),rotate(0),scale(.75,1.0),translate(-20,-10)"/> </svg>Demo
Once the scale and translate transforms are done, the only thing we will need to worry about would be the rotation of the hands around that original 10,20 point in the symbol. So, let’s rewrite our SVG with nested groupings (or graphics contexts, or whatever G means) as follows:
HTML
<svg width="300" height="300"> <defs> <symbol id="hand" > <path d="M 0 10 L 20 0 L 120 10 L 20 20 z"/> </symbol> </defs> <g transform="translate(150,150)"> <g transform="rotate(0)"> <use id="secondHand" xlink:href="#hand" fill="#a00" transform="rotate(-90),scale(1.5,0.75),translate(-20,-10)"/> </g> </g> <g transform="translate(150,150)"> <g transform="rotate(120)"> <use id="minuteHand" xlink:href="#hand" fill="#666" transform="rotate(-90),translate(-20,-10)"/> </g> </g> <g transform="translate(150,150)"> <g transform="rotate(90)"> <use id="hourHand" xlink:href="#hand" fill="#333" transform="rotate(-90),scale(.75,1.0),translate(-20,-10)"/> </g> </g> </svg>Demo
-
D3 Demo... D3MO? - part 1
My goal last week was to get a basic understanding of D3.js and to build a basic demo. A simple bar chart? a pie chart may be? But, the more I learned about it, I found out that it was way more powerful framework for data-binding & visualization, that to limit it to just charts felt like a crime :/ I didn’t want to build a simple chart anymore. I wanted to build a clock! Hopefully, these demos work on my blog :) (Also, this would be my first post with code. Entering new territory here on tumblr.)
Obviously D3 is a vast powerful framework, and I can’t cover all of it in a week. So, instead of claiming I learnt D3 in a week, I will instead post code & demos to showcase how far I have progressed. In this first part of the series, I’m gonna try and walk you through building the Clock Face, and along the way, introduce you to some core concepts in D3
Start with the Basics!
Let’s start by building a simple circle. Apparently, circular clocks have been all the rage with the kids since like… before the Grand Canyon was formed. Anyway, the simple way to draw a circle in HTML5 is to use SVG (Scalable Vector Graphics). I’m not gonna go into the details of SVG here, but here’s the HTML that would give us a circle.
<svg width="100" height="100"> <g transform="translate(50,50)"> <circle r="45"/> </g> </svg>And here’s the D3 way of generating that. Let’s provide a simple target DIV element inside which we will generate the SVG.
DOM
<div id="vis"/>Script 1:
var dim = 300; var svg = d3.select("#vis") .append("svg") .attr("width",dim) .attr("height",dim); var circle = svg.append("g") .attr("transform","translate("+[dim/2,dim/2]+")") .append("circle") .attr("r", (dim/2) * .9);Demo 1:
-
pardon my french
Pardon my French ;)
-
Burning Man Shelter: Cooling and Ventilation
I’ve been busy with life in general, and hadn’t found the time to make a blog post about Burning Man in a while. But, here is the follow up post about cooling your shelter on the playa, just in time for the man next year. )’(
(You can’t tell, but that BM emoticon above has a sad face.)
Why Cool?
You are in the freakin’ desert! The Sun is shining on your yurt all day long heating it up (Radiative heating). The air outside is hot and dry as hell, and heating it up (Conductive heating). When you’re sleeping/hanging out inside your yurt, your body is heating it up (Generative heating). Somebody’s gotta cool it! It’s plain thermodynamics… ‘Nuff said!
Ways to Cool?
The simplest thing to do would be to buy a portable Air Conditioner / Cooler, and a portable generator to power it. But, if you are not a DIY’er, then you might as well skip the whole hexayurt building thingamajig and drive up in an RV and “camp” out on the playa in luxury.
No!!! This is Burning Man! And we get to hack life here on the playa! (Well, we each get to re-invent the wheel for ourselves, and in the process end up discovering a more efficient way to do things) So, in that spirit, let’s take a look at Evaporative Cooling.
subscribe via RSS