Quick add event listener in console to get mouse position

Trying to figure out where to position something and just want to see the pixel location of the mouse in the console?  Add the following in your console, then scroll around.

document.addEventListener('mousemove', function(e){
  console.log("x: " + e.clientX + " y: " + e.clientY);
Posted in Uncategorized | Leave a comment

Adding Waves!

Inspired by a physical exhibit at the Exploratorium that used sliders to add sine waves, I built an online version here.  I liked the physicality of the bars in the original exhibit because it emphasized that the heights were being summed.  So, I chose to use rectangles instead of area in the online one as well.  I also liked how the colored tips of the bars showed the sum of the two waves.

from SF's Exploratorium

from SF’s Exploratorium

IMG_20140923_144236547(1) IMG_20140923_144245390

I also added a feature for clicking on bars to color them, so you can track them as you scroll.

Screen Shot 2014-09-29 at 12.59.08 PM Screen Shot 2014-09-29 at 12.59.19 PMScreen Shot 2014-09-29 at 12.59.30 PM

Looking forward to adding more features that you can’t do in the physical world, like changing the amplitude and period of one or both of the waves.  Or changing the functions themselves.  Also, a friend who is a math teacher suggested showing some values of how far you’ve scrolled, so you could discover at what relative periods the peaks become highest and when they flatten completely.

From a code point of view, I used the d3.svg.area function for the first time as well as “toggle” function on an element’s classList.  It was also a nice application of the d3 brush feature.  Conceptually it was good practice grouping related elements together to create and update the slider.  This included adding an invisible wider path element behind the visible white path element so you didn’t have to be pixel perfect right on the line to select it.

Posted in Uncategorized | Leave a comment

Circular images, with D3

A friend wrote to me today stuck on a d3 problem.  He was looking to create circles with images in them from a set of horizontal and vertical photographs.  The goal was to have the image fill the circle, such that the diameter of the circle was the same as the width or height of the photo, depending on which was smaller.

One of the resources he sent had this jsfiddle from this stackoverflow post. The key here is to define a “pattern” appended to the svg element.

I adapted that fiddle to have additional images, and to show how changing certain parameters gives you a rectangle, circle with white space, or a circle that cropped the image.  The result is here.

Screen Shot 2014-09-24 at 3.08.59 PM

While this example uses hard-coded values, these could be calculated programmatically instead if you just want the center of the circle at the center of the picture.

I also explored using the css border-radius feature as I did here, but that seems to apply only to HTML “img” elements and not to SVG “image”.  I would also have to do something addition in order to get circles instead of ellipses.

Posted in Uncategorized | Leave a comment

Why make it about boys and girls. Instead, let’s create a rich, varied education experience for everyone?

I read this NYT Opinion piece today, which argues that boys learn differently than girls and that we need teachers to be “boy-friendly.”  Here is my response.

Are the bell curves really so distinct that this is truly about boys vs girls? Even if the peaks of the curve are offset in “small but real” ways, aren’t nearly all people in the huge overlap of experience?

Regardless of gender, we obviously have some learners who prefer moving, sitting still, talking, quiet reflection, competition, striving for oneself, creating, negotiating, language or logic.  Why argue for a best answer, rather than creating a rich and varied experience for all students by offering different experiences at different times in our classrooms.  I know that it is possible because I’ve experienced it as a student as A Growing Place, a Montessori preschool and kindergarten, and at The College School, an experiential education grade school, and as a teacher at the Chewonki Semester School for 11th graders.

Most importantly, by classifying these behaviors as gendered, we fail our quieter, reflective boys and we fail our boisterous, creative girls.

Posted in Uncategorized | Leave a comment

Choosing white or black text to contrast with a light or dark background

Today I needed a way to switch to using white text if the background was particularly dark.

24ways.org had a blog post on the topic, which offered this small javascript function.

function getContrast50(hexcolor){
    return (parseInt(hexcolor, 16) > 0xffffff/2) ? 'black':'white';

I made two changes.  First, I realized that my hexcolors often had the “#” at the beginning.  But, this would break the function, causing it to return “white” only.  So, I simply replaced the # if it existed in the input bu changing “hexcolor” to “hexcolor.replace(‘#’, ”)”.

function getContrast50(hexcolor){
    return (parseInt(hexcolor.replace('#', ''), 16) > 0xffffff/2) ? 'black':'white';

Next, I found that for the “middle” background colors which would work well with either white or black, I preferred to stick with black.  I only wanted to switch to white if the black text would be unreadable.  This was easy to change by changing the constant I divided by from 2 to 4.

function getContrast50(hexcolor){
     return (parseInt(hexcolor.replace('#', ''), 16) > 0xffffff/4) ? 'black':'white';
Posted in Uncategorized | Leave a comment

Swedish Parental Birth Age Study: shows sensitivity to confounding factors

Read an interesting study this morning on various psychological and academic outcomes based on age of Dad at birth.  http://www.wrrh308.com/wp-content/uploads/2014/03/JAMA-Study.pdf

It’s interesting to see how much the conclusion can change based on the factors that the researchers take into account.  For example, a kid is half as likely to fail a grade if born to a Dad older than 45.  But, once you take into account a variety of factors like parental income and more, the likelihood returned to 1 (same as overall population).  If you go further, and take into account siblings to try to control for all the genetic/environmental factors, then the kid is now 50% more likely to fail a grade.  Note – it’s not clear to me how they took into account birth order for the last, although they seem to have done something with first-cousins of similar birth order.

In other words, the world is complex and there are many factors that affect us.  It’s hard to isolate them, and our conclusions are sensitive to how we take into account the various possible factors. 

However, while it’s difficult to make any conclusions about causality without a controlled study, this study did seem to have a robust and relatively large dataset, approach the problem from multiple directions, and explain what they could not conclude.  This is much, much better than several other studies I’ve read recently which were also based on observed data and were trying to answer questions about causality.

And, from the content, it seems that (for these particular outcomes) it’s better to have a older Dad who generally has his life together (income, maturity, etc) than a younger Dad who doesn’t.  But, a younger Dad who is responsible and stable is perhaps the best of all.  Surprise?

Posted in Uncategorized | Leave a comment

tabula: best thing ever

I just discovered Tabula, which converts PDFs into a form that can be saved as a csv or other usable data format. 

If you know the pain of having beautiful data right there in front of you but in a form you can’t use at all, you’ll understand how fantastic this is.  It’s like you’re staring through the window of a candy store as a kid, and somebody opens the door, invites you inside, and says that you can have anything you want (take all of it, if you want). 

Posted in Uncategorized | Leave a comment

New York Times interactive for 2013

All of last year’s New York Times interactive pieces are in one place – here.

Often it’s hard to search for interactive pieces or data visualizations, because it’s not the keywords that you remember most.  So, it’s nice having them all in one place to find older ones.  Moreover, it’s a great way to discover fantastic pieces that you might have missed, or that you want to be inspired by. 

Thanks to the NY Times team for all of their great work!

Posted in Uncategorized | Leave a comment

Made a responsive website!

I made a new website!  It gives advice for traveling to New Zealand, based on my trip there a few months ago*.  But, the main goal wasn’t the content, but rather to get my hands dirty with web development from start-to-finish.  I’d previously made an interactive analysis tool using javascript/D3 which I launched on Google’s App Engine.  In that project, the focus was primarily on the interactive data visualization.  However, it was clear that a stronger understanding of how to use html/css can put a good visualization in the context of the larger page and make the tool more usable.

Therefore, my goal was to build a “normal” website in which the html/css is front and center.  In this case, I also wanted it more focused on a user reading for content, than something that an analyst might come to day after day.  And, while creating the site would be nice, this was mostly meant to be a learning exercise.  So, I often took time to dig into trying to understand why something worked rather than just put something that seemed to work.

One of my favorite things about the web is that you can right-click on a webpage, choose “view-source,” and see the hundreds (or thousands) code directly.  In some ways this seems really powerful!  You can see everything that makes the website work!  But, what does it all do?  And, how?  How do the building blocks fit together into something comprehensible?  Something beautiful?  Something useful?

And, even seeing it all, it still doesn’t tell you how the programmer created it.  Did they right every line from scratch?  For most websites this seems unlikely given the repetition required of such a task, and the difficulty of keeping track as it gets increasingly complex.  But, what else could it be?

Typically I like to create things from the basics.  I like the idea of understanding a language from the ground up, rather than borrowing a solution that I don’t understand.

However, for this project, I ended up choosing to use a template based on Bootstrap here.  Why?  I wanted to see how a full site fit together.  What gave it the sense of a whole?  Of the grid?  Of coherency?  Of responsiveness?  What does the code look like all together.

My intent was to adapt the template in noticeable ways, not just the content but also the layout, colors, and other visual elements.  Figuring out how to change the color of a certain section, or to remove parts of code, that weren’t necessary helped me to understand what each part of the code did.  Seeing what they were doing under the hood also helped me figure out which questions to ask.  I also spent a lot of time investigating parts that I didn’t recognize.

Through this project I learned:

  • Bootstrap may be one reason that so many websites have a similar “look” these days
    • also – something that looks fancy might not be that hard to implement – don’t be intimidated 🙂
  • Sass is awesome in making CSS manageable – I didn’t actually use it on this project because there was already so much CSS, but I will definitely use it on the next project when I build more from scratch or when I’m using CSS w/ D3
  • responsive is important, and doable
    • also – the Firefox web developer tools have a great responsive setting for testing what a site will look like under different conditions
    • @media makes this possible
  • new html5 “section” element is useful for organizing multiple parts of a site if it’s mostly one long page
  • a 12-wide grid layouts is great – very helpful for creating a sense of coherent, consistent structure as well as enabling responsive design
  • GitHub Pages are perfect for my use case of wanting to launch the site to the world, but still mostly be in a learning/playing mode – thanks to Brandon for suggesting it!
  • using very large photographs can make the website super sluggish – resize to something appropriate

Overall, one of the things I’m most excited about is actually taking the project through to the point of having it out on the web for others to see*.  Often those questions, about how different pieces connect (aka – now that I’ve got the code, where do I put it so others can see the site), are the hardest because they’re not neatly in a sandbox.  The second is realizing that just because something looks pretty, it doesn’t mean that it is somehow magical (or super difficult).  I’m also very glad to start getting a sense for some of the tools that people use to get from the fundamentals of the code to a complete site with hundreds of lines.  Things like Sass make a lot of sense.  But, there is no way to see that it’s being used just by looking at the source code since it processes the CSS before it’s published.

This is certainly just an early step.  But, it makes me excited for what’s to come :).

Lastly, let me know if you have any questions about New Zealand!  It’s fantastic 🙂


* Note that there are still some parts that are WIP (work in progress).

Posted in Uncategorized | Leave a comment

A very short leap from a possible association to causation and questioning policy decisions

Today I came across the article: “High Home Ownership Is Strongly Linked To High Unemployment [STUDY]” from the Business Insider – link.

Seems fascinating, right?  Perhaps we be changing public policies encouraging home ownership?

Unfortunately, there seems to be quite a leap from the original research saying “We should be cautious before imputing meaning into such patterns” to the claims in the article.  Moreover, the original research article has basic flaws like conflicting data, sources without citation, and inaccurate descriptions of how the data was collected.  Beyond those basic errors, I’m unconvinced my the study’s central point.  And, even if we take the association to be valid, I am unconvinced that there is an argument for causation or by ability for the hypothesis to explain the data they present.  All in all, this shows how easy it is to make a very quick leap from a potential association in data, to assuming causation, to questioning policy.

Since the BI article doesn’t cite the original paper, I searched for it and believe the original article is this one as it’s on topic and by the mentioned author.

Although the research is focused on statistical associations and does not (and can not) make any claims of causation, the researcher Oswald clearly believes that there is causation as he is reported in the BI article to have said “I have become convinced that by boosting home ownership we have ruined our labor market.”

Next, the report suggests that it’s the homeowners who are disproportionately unemployed, when the abstract for the research says “Our argument is not that owners
themselves are disproportionately unemployed.”  The research article later reports “nor does [the conclusions] rely on the idea that home owners are themselves disproportionately unemployed (there is a considerable literature that suggests such a claim is false, or, at best, weak).”  This arguably confusing in the original research, though, since 2 of the 3 suggested causes explaining how home ownership rates may increase unemployment rates a few years later are about reasons why a homeowner might be less employed (lack of mobility and long commutes).

Looking to the original research, even upon a relatively quick read of the paper I found several things that made me question their results.  The three most basic are about the data itself:

Critical data sources are not cited, or the citations are incorrect.

For example, Tables 1 and 2 contain the raw data used in the study.  Yet, the citations for these are not included in the text and the source for the tables says only: “Source: US Census Bureau” and “Source(here and in the next table): Current Population Survey.” None of the cited references include the US Census Bureau.

Searching for any links to the US Census Bureau, I found one in footnote #5.  Unfortunately, the posted link http://www.census.gov/prod/www/abs/decennial/1950cenpopv2.html is broken and leads to a page saying “We are really sorry but the page you requested cannot be found.”

Data in two different tables, Table 1 and Table 2a, is contradictory. 

For example, both tables include data on the 2000 and 2010 home ownership rates in the United States.  In one table these are given as 66.2% and 65.1% while in the other they are 67.4% and 66.9%.

There is no discussion of why these tables disagree.  Nor, did they clearly say which data source was used in their analysis, why the other was included if it was not used or how they merged the two sources, or why we source was more appropriate for their study or not.

Sampling description is inaccurate, and sample size seems misleading

The introduction claims that “Using data on two million randomly sampled Americans, we also estimate equations for the number of weeks worked, the extent of labor mobility, the length of commuting times, and the number of businesses.”  Later, they explain in more detail that “Table 7 … estimates a weeks-worked equation using data from the March Current Population Surveys between 1992 and 2011. The sample size is approximately 2 million individuals.”

However, according to the US Census Bureau “the CPS [Current Population Survey] is administered by the Census Bureau using a probability selected sample of about 60,000 occupied households.”  Each of these household in the study is sampled 8 times: “in the survey for 4 consecutive months, out for 8, and then return for another 4 months before leaving the sample permanently.”

In short, the survey :

* samples households, not Americans as claimed

* samples only 60,000 households per monthly data point, not 2 million

* includes households that are are probability selected, not random as described.  The method, described here, seems much better than random.  But the point is that it is different from what Oswald’s paper reported.

Granted, if there are 60,000 households sampled monthly for 20 years and each household is sampled 8 times, then there are 60,000 households * 12 months * 20 years / 8 repetitions = 1.8M households sampled total.  1.8M is within the ballpark of the 2 million reported, so perhaps this is how they came up with the 2 million value to report.  But, I would imagine that many people reading the statement “using data on two million randomly sampled Americans,” would think that these 2 million were tracked throughout the data and not just for 8 months within one year in a 20 year study.

Citing sources, reporting internally consistent data (or discussing why it’s not consistent and why a certain data set was used), and representing how the data was collected accurately are all absolutely fundamental to research.  Yet, unless I am missing something, this research fails to do these.

More generally, there are a lot of other things that might be correlated with both home ownership and unemployment rates that were not considered.  What are the demographics of the state?  How much does housing cost and how does this compare to salaries?  Are 20’s somethings living with their parents or starting households?  When were most of the houses purchased, and what were the unemployment rates at that time?  In general, sometimes the economy is doing better and other times worse.  If houses are purchased when the economy is stronger so more people are able to afford a home, then at some point later the economy (and unemployment) are likely to be worse.  Could that explain the lag?  And many more…

Similarly, data on housing and data on unemployment are counting different groups of people.  Unemployment data includes only those people who are part of the labor force, excluding retirees for example.  At the same time, home ownership is counted for head of households over the age of 25.  And, in 2010, people over the age of 60 had higher rates of home ownership than under the age of 60 – link.  Furthermore, home-ownership is measured by household while unemployment is measured by person in the labor force.  So, when comparing these two metrics, we’re not comparing the same populations. This, coupled with the fact that there is no evidence that the home-owners themselves are less employed, means that an association between home ownership rates and unemployment rates isn’t about home-owners being less employed but some larger systemic relationship between some people being more likely owning homes and others being more likely to be unemployed.

I remain unconvinced by both the original research and in the translation from the research to the article written in Business Insider. And, even if the fundamental association suggested between home ownership and, a few years later, unemployment rate is robust, there is no reason to conclude that higher rates of home ownership cause increased unemployment. Yet, someone reading the article reported in the Business Insider could easily come away wondering if (or believing that) governments should change policies around encouraging home ownership in order to protect against increased unemployment.


Posted in Uncategorized | Leave a comment