Golazos in 3D

Katie and I went all in on the U.S. women’s national soccer team as they prepared for the World Cup. We supported them at a friendly match, watched every tournament game and cheered them on at a trophy rally.

Carli Lloyd’s midfield goal in the title game was perhaps the most incredible moment of the title run. Inspired by a New York Times 3D graphic of a key Super Bowl play and some tools I learned at a recent meetup, I tried to recreate the moment Lloyd struck the ball with graphics software. Click the images to see a webGL version, but be warned: the page loads an 8MB data file.


keeperI found an awesome model of the World Cup stadium and used a soccer data tutorial and game footage to place the ball and key players as accurately as I could in Sketchup. I’d never used WebGL before, so I learned how to export Sketchup models for use in three.js and hacked my way around positioning the camera with the TweenMax library. I would have liked to more closely replicate the lighting and shadows that affected the goal, but I encountered problems.

Unfortunately, even after removing the awesome jumbotron and most of the seating in the incredible arena model, the data file is still way too large to reasonably serve online. I’ll try to build on this experience and do more efficient 3D projects in the future.

I was most interested in seeing what Lloyd and Japan goalkeeper Ayumi Kaihori saw when Lloyd took the shot, and my WebGL page animates between their two perspectives. Here are some other interesting angles from my Sketchup project.

side stadium top

Distance formulas and user interaction

I started fiddling with turf.js during a recent Maptime meetup. I forked the demo map and used turf to find pizza shops nearest to neighborhood council offices.

It got me thinking about the distance formula and a scatterplot by LA Times reporter Jon Schleuss that used FBI crime data. I wrote my first Makefile to grab a similar dataset of state crime rates and make a d3 scatterplot with ProPublica StateFace icons.

When a state is selected, the distance formula loops each point and sorts to find the state with the “nearest” crime rates, according to the scatterplot x and y coordinates.

“Nearest” probably has more statistical meaning than I realize, and I could have used other, more efficient d3 algorithms like quadtrees.

I also think having a short distance between x and y coordinates is not the same as being “similar.” For example, Washington’s property crime rate dropped while its violent crime rate rose, but the point closest to Washington is Colorado, which had declines in both crime types. An algorithm for the most “similar” changes in crime rates could consider whether rates increased or decreased in addition to the distance between values.

I like scatterplots because they lay out all the data, but I’ll continue exploring interactive algorithms as ways to guide the user.

Introducing my latest bookmark

It’s happened several times since I moved to Los Angeles. I’ll get off a bus or take the wrong freeway exit and find myself asking, “what neighborhood is this?” Fortunately, news developers built tools to answer this question quickly with maps.



The Los Angeles Times has been Mapping L.A., and its data team provides regional data in all kinds of handy formats. Noah Veltman and Jenny Ye built Wherewolf.js, which performs point-in-polygon tasks, and explained how it works on Source.

Using those resources, I whipped up an interactive map that finds the user’s  L.A. Times neighborhood location and provides a link to neighborhood data compiled by the Times. It’s only useful in LA County, and surely there are similar services, but I’ll always know where to find my tool: danhillreports.com/where/.


How bivariate hexbins saved my side project

I sat on this one dataset for two years.

While reporting a story on Chicago gun regulations, I pulled a year’s worth of gun possession and shooting crimes from the city data portal (first mistake). I wanted to explore the relationship between the types of crimes but wasn’t confident in a statistical or visualization method. I applied the correlation and Bayesian probability techniques I was learning in my math class to the data, but I couldn’t grasp the output.

For two years, an ONA recap of an event in Minnesota that mentions my side project haunted me because the same data files continued to sit on my hard drive, unfinished.

Then I learned about bivariate choropleth maps and the possibilities of showing two variables at the same time with colors. This fantastic how-to by Joshua Stevens showed me the way, and I found a real-world journalism application of the method with goats and sheep in the Washington Post.

So here’s my first bivariate choropleth, which shows gun possession and assault with firearm crimes in Chicago binned into hexagons. Each hexagon has at least one possession or shooting incident. As with any visualization, make sure you understand the legend.


Selecting color breaks was tricky because the distributions of the possession and shooting crime datasets are both skewed. I’m relieved to have finally mapped this dataset, but you’ll probably learn more about gun regulation by watching my final project video than looking at that map.

Arduino apartment part 2

A year after my first temperature sensor experiment, I’m still chilly. I moved to Southern California, but the new landlord hasn’t managed to turn on the heater in the apartment.

Sounds like the perfect time to set the Arduino in the kitchen overnight and plot my apartment’s temperatures against the local Wunderground hourly outdoor readings.


These best-fit curves appear to follow a similar shape to last year’s plots, but I started earlier in the evening this time. My sleep pattern changed quite a bit from last year, and I took the 2014 readings on a Sunday night between 9:51 p.m. and 6:15 a.m. as a result.

Although the curves are similar, moving a place with no winter appears to have affected the minimum temperature. And is that bump just before 6:00 a.m. my coffee heating up?