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);
})
Advertisements
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